Construisez de magnifiques sites Web WordPress en utilisant Divi et Divi Builder

Comment cacher l'en-tête lors du défilement sur DIVI

Rifat Tutoriels Divi May 12, 2021

Un en-tête capture l'essence d'un site Web car les utilisateurs peuvent comprendre ce qu'ils obtiendront de ce site de l'en-tête. Il ne serait pas faux de l'appeler une sorte d'invitation qui aide à attirer les visiteurs. Si nous voulons mettre en évidence la section héros de notre site Web, où la barre de navigation supérieure crée une distraction, devrions-nous omettre la barre de navigation? jamais!

Avec l'option collante de Deux, nous pouvons concevoir où la section héros de notre site Web sera affichée sans la barre de navigation après le chargement du site Web et le défilement déclenchera la barre d'en-tête. C'est une situation gagnant-gagnant. Mais comment concevoir tel? C'est ce que nous verrons aujourd'hui.

Aperçu

Nous examinerons notre résultat de conception avant de passer à la section principale.

Construire: structure d'en-tête

Créer une en-tête globale du tableau de bord

Accédez à l'option "Theme Builder" sous Divi de votre tableau de bord et choisissez "Build global en-tête" de l'option indiquée sur l'image.

Créer des sites Web incroyables

Avec le meilleur constructeur de page Elementor

Commencer Maintenant

Paramètres: section globale de l'en-tête

Couleur de l'arrière plan

Après avoir sélectionné le modèle d'en-tête, allez avec la "construction à partir de zéro". Ouvrez ensuite l'option de couche et vous verrez une section pré-créée. Ouvrez les paramètres de la section et modifiez l'arrière-plan.

  • Couleur de fond: # 002854

Espacement

Sous l'onglet de conception, modifiez certaines valeurs d'espacement.

  • TOP PADING: 0PX
  • Rembourrage inférieur: 0px

Nouvelle ligne ajoutée

Structure de colonne

Ajoutez la ligne suivante qui est marquée de la structure de colonne à la section.

Couleur de l'arrière plan

Avant d'ajouter n'importe quel module à cette ligne, prenons quelques ajustements. Commencez avec la couleur de fond.

  • Couleur de fond: # 002854

Dimensionnement

Sous l'onglet de conception, modifiez les valeurs de dimensionnement de la ligne.

  • Utilisez la largeur de gouttière personnalisée: oui
  • Largeur de gouttière: 1
  • Égaliser les hauteurs de colonne: oui
  • Largeur: 100%
  • Max largeur: 100%

Espacement

Maintenant, changez aussi les valeurs de rembourrage.

  • TOP PADING: 0PX
  • Rembourrage inférieur: 0px
  • Rembourrage gauche: tablette et téléphone: 5%
  • Cadding droit: tablette et téléphone: 5%

Paramètres: colonne 1

Couleur de l'arrière plan

Après avoir conçu toute la ligne, nous commencerons à concevoir la colonne 1. D'abord, nous ajouterons une couleur d'arrière-plan.

  • Couleur de fond: # 85A8B2

Ajouter: Module de menu sur la colonne 1

Sélection du menu

Maintenant, nous allons ajouter un module de menu à la colonne 1. Choisissez un menu en fonction de votre choix.

Logo

Maintenant, ajoutez un logo à votre en-tête.

Couleur de l'arrière plan

Ajoutez maintenant une couleur d'arrière-plan.

  • Couleur de fond: # 063765

Image de fond

Ajoutez maintenant une image de votre choix et effectuez les ajustements suivants.

  • Taille de l'image de fond: Fit
  • Position de l'image de fond: Centre

Paramètres: Texte du menu

Passez à l'onglet Conception du module et modifiez la taille du texte du menu.

  • Couleur de texte: #ffffff
  • Taille du texte du menu: 18px

Paramètres: menu déroulant

Maintenant, modifiez les paramètres du menu déroulant comme suit:

  • Dropdown Menu Line Couleur: RGBA (0,0,0,0)
  • Couleur de fond de menu mobile: # ddc1a7
  • Menu mobile Texte de texte: # 063765

Paramètres: icône

Maintenant, tournez toutes les icônes blanches.

  • Panier Icône Couleur: #ffffff
  • Rechercher icône couleur: #ffffff
  • Icône de menu Hamburger Couleur: #ffffff

Dimensionnement

Ensuite, modifiez les paramètres de dimensionnement du logo.

  • Logo max largeur: 70px

Espacement

Faire des changements dans le rembourrage.

  • TOP PADING: 1%
  • Rembourrage inférieur: 1%
  • Rembourrage de gauche: 5%
  • Cadding droit: 5%

Boîte ombre

Ajoutez des modifications dans une boîte à boîtes personnalisée.

  • Box Shadow Flur Force: 50px
  • Ombre Couleur: RGBA (0,0,0,0,3)

Transformer la traduction

Maintenant, terminez les paramètres du module en modifiant les paramètres de transformation de la transformation comme suit:

  • Droite: Desktop: 20PX, Tablette et Téléphone: 0PX

Ajouter: Module de bouton à la colonne 2

Réglage du module de bouton

Ajouter un module de bouton à la colonne 2 et ajouter du texte de votre choix.

Alignement des boutons

Dans l'onglet Conception, modifiez l'alignement des boutons.

  • Alignement des boutons: droite

Paramètres du bouton

Ensuite, changez le style de bouton en conséquence.

  • Utilisez des styles personnalisés pour le bouton: Oui
  • Taille du texte de bouton: 16px
  • Texte de bouton de bouton: # 2A2A2A
  • Couleur de fond bouton: #ffffff
  • Largeur de la bordure: 0PX
  • Bouton Couleur de la bordure: RGBA (0,0,0,0)
  • Poids de la police du bouton: audacieux
  • Style de police de boutons: majuscule

Espacement

Ajoutez un remplissage personnalisé pour faire une forme sur le bouton.

  • TOP PADING: 20PX
  • Rembourrage inférieur: 20px
  • Rembourrage de gauche: 40px
  • Cadding droit: 40px

Boîte ombre

Nous ajouterons maintenant une boîte ombre (marquée).

  • Box Shadow Flur Force: 30px
  • Shadow Color: RGBA (0,0,0,0,18)

Transformer la traduction

Nous sommes presque terminés avec le module. Terminez-le avec des ajustements sur la section de transformation.

  • Droite: Desktop: 50px, tablette et téléphone: 0px

Ajouter: Effets collants à l'en-tête

Paramètres de ligne

Nous avons terminé la construction de notre structure de section d'en-tête. Maintenant, nous allons y ajouter un effet collant. Pour cela, nous devons modifier certaines valeurs des paramètres de ligne.

Positionner

Tout d'abord, faites les ajustements de position.

  • Position: absolu
  • Lieu: En haut à gauche

Paramètres collants - Effets de défilement

Ensuite, nous allons ouvrir les paramètres de la section et lui permettre de rester en haut.

  • Position collante: coller au sommet
  • Limite de fond Sticky: Aucun
  • Décalage des éléments collants environnants: oui
  • Transition par défaut et styles collants: oui

Animation

Nous allons maintenant ajouter une animation afin que les visiteurs ne voient pas l'en-tête lors du chargement de la page.

  • Style d'animation: Fade

Durée de la transition

En modifiant la valeur de la portée de transition, nous sélectionnerons la rapidité ou la ralentissement de l'en-tête au cours du défilement.

  • Durée de la transition: 800ms

Transformer la traduction

Puisque nous ne voulons pas montrer nos en-têtes initialement, nous ajouterons une valeur négative à l'axe de Y à partir des paramètres de transformation.

  • Droite: -300px

Maintenant, des paramètres collants, faites la valeur 0 à nouveau. signifie que cela nous montrera le menu dès que nous commençons à faire défiler.

  • Droite collante: 0px

Propriété CSS pour la visibilité

Dans cette section, nous ajouterons une propriété CSS pour masquer les éléments qui ne sont pas utilisés. Il convient de noter que ce n'est pas une tâche obligatoire, mais c'est une bonne idée de le faire.

visibility: hidden;

Maintenant, nous ferons à nouveau notre menu visible dans un état collant.

visibility: visible;

Résultat final

Comme nous avons fait toutes les étapes avec succès, voici notre résultat final.

Derniers mots

Dans le tutoriel d'aujourd'hui, nous avons constaté comment rendre les visiteurs axés sur la section héros et travailler sur la barre de navigation concernant la visibilité. Divi est un excellent thème avec des fonctionnalités intégrées qui nous permettent de concevoir quelque chose d'unique et de plaisir. Nous espérons que vous aimerez que le message d'aujourd'hui et si vous avez des questions et des questions, s'il vous plaît, n'hésitez pas à poser dans la section Commentaires.