Comment masquer votre en-tête avant de faire défiler avec les options collantes de Divi

Une section héros est le point de mire de votre site Web. Il donne généralement le ton au reste du site Web et montre aux visiteurs à quoi ils peuvent s'attendre. C'est pourquoi il peut être utile de s'assurer que toute l'attention est portée sur les quelques éléments que vous partagez dans votre section de héros, tels que la copie et l'appel à l'action. Mais ce n'est pas parce que vous souhaitez mettre en évidence la section des héros que vous n'avez pas besoin d'une barre de navigation. Si vous cherchez un moyen convivial de révéler votre en-tête une fois que les gens commencent à faire défiler, vous adorerez cet article. Aujourd'hui, nous vous montrons comment masquer votre en-tête avant de faire défiler à l'aide des options de rémanence intégrées de Divi. L'effet que nous obtenons est entièrement réactif et a fière allure sur toutes les tailles d'écran. Vous pourrez également télécharger le fichier modèle JSON gratuitement !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez le modèle d'en-tête GRATUITEMENT

Pour mettre la main sur le modèle d'en-tête gratuit, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Lors du téléchargement du modèle sur votre Divi Theme Builder et de la saisie du modèle, vous remarquerez que la section n'est pas visible. C'est parce que l'effet lui est déjà appliqué. Pour modifier les différents éléments, vous pouvez soit basculer en mode filaire et y accéder aux éléments, soit supprimer temporairement les paramètres de traduction de transformation de section et d'élément principal et les remettre lorsque vous avez terminé de modifier la conception de l'en-tête.

1. Construire la structure de l'élément d'en-tête dans un nouveau modèle d'en-tête

Créer un nouveau modèle d'en-tête global

Commencez par vous rendre sur le Divi Theme Builder. Là, commencez à créer un nouvel en-tête global ou personnalisé.

Paramètres de section

Couleur de l'arrière plan

Une fois dans l'éditeur de modèles, vous remarquerez une section. Ouvrez les paramètres de la section et modifiez la couleur d'arrière-plan.

• Couleur d'arrière-plan : #001b34

Espacement

Passez à l'onglet de conception de la section et supprimez ensuite tous les rembourrages supérieur et inférieur par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonnes suivante :

Couleur de l'arrière plan

Sans ajouter encore de modules, ouvrez les paramètres de ligne et appliquez une couleur d'arrière-plan de votre choix.

• Couleur d'arrière-plan : #001b34

Dimensionnement

Passez à l'onglet de conception de la ligne et modifiez les paramètres de dimensionnement en conséquence :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui
• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Continuez en modifiant les valeurs de remplissage en conséquence :

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0
• Rembourrage gauche :
  • Bureau : /
  • Tablette et téléphone : 5 %
• Rembourrage droit :
  • Bureau : /
  • Tablette et téléphone : 5 %

Paramètres de la colonne 1

Couleur de l'arrière plan

Une fois que vous avez terminé avec les paramètres de ligne généraux, ouvrez les paramètres de la colonne 1 et appliquez une couleur d'arrière-plan.

• Couleur d'arrière-plan : #f4d5b8

Ajouter un module de menu à la colonne 1

Sélectionnez le menu

Il est temps d'ajouter des modules, en commençant par un module de menu dans la colonne 1. Sélectionnez un menu de votre choix.

Télécharger le logo

Téléchargez un logo ensuite.

Couleur de l'arrière plan

Ensuite, changez la couleur d'arrière-plan.

• Couleur d'arrière-plan : #063765

Image de fond

Et téléchargez une image de fond d'illustration de votre choix. Vous pouvez trouver et utiliser celui ci-dessous en téléchargeant le billet de faveur au début de cet article.

• Taille de l'image d'arrière-plan : Ajuster
• Position de l'image d'arrière-plan : Centre

Paramètres du texte du menu

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

• Taille du texte du menu : 18 px

Paramètres du menu déroulant

Ensuite, modifiez les paramètres du menu déroulant en conséquence :

• Couleur de la ligne du menu déroulant : rgba(0,0,0,0)
• Couleur d'arrière-plan du menu mobile : #ddc1a7
• Couleur du texte du menu mobile : #063765

Paramètres des icônes

Modifiez également les couleurs des icônes dans les paramètres des icônes en blanc.

• Couleur de l'icône du panier d'achat : #ffffff
• Couleur de l'icône de recherche : #ffffff
• Couleur de l'icône du menu Hamburger : #ffffff

Dimensionnement

Ensuite, modifiez la largeur maximale du logo dans les paramètres de dimensionnement.

• Largeur maximale du logo : 70 pixels

Espacement

Appliquez ensuite des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 1%
• Rembourrage inférieur : 1%
• Rembourrage gauche : 5 %
• Rembourrage droit : 5 %

Boîte ombre

Avec une ombre de boîte personnalisée.

• Force de flou d'ombre de boîte : 50px
• Couleur de l'ombre : rgba(0,0,0,0.3)

Transformer Traduire

Et complétez les paramètres du module en modifiant les paramètres de traduction de la transformation comme suit :

• Droit:
  • Bureau : 20px
  • Tablette et téléphone : 0px

Ajouter un module de bouton à la colonne 2

Ajouter une copie

Dans la colonne 2, le seul module dont nous avons besoin est un module de bouton. Ajoutez une copie de votre choix.

Alignement des boutons

Passez à l'onglet Conception et modifiez l'alignement des boutons.

• Alignement des boutons : à droite

Paramètres des boutons

Ensuite, stylisez le bouton en conséquence :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 16px
• Couleur du texte du bouton : #2a2a2a
• Couleur d'arrière-plan du bouton : #ffffff
• Largeur de la bordure du bouton : 0px
• Couleur de la bordure du bouton : rgba(0,0,0,0)

• Poids de la police du bouton : gras
• Style de police des boutons : majuscules

Espacement

Donnez une forme à votre bouton en utilisant également un rembourrage personnalisé.

• Rembourrage supérieur : 20 px
• Rembourrage inférieur : 20px
• Rembourrage gauche : 40 px
• Rembourrage droit : 40 px

Boîte ombre

Ensuite, appliquez une ombre de boîte.

• Force du flou d'ombre de la boîte : 30px
• Couleur de l'ombre : rgba(0,0,0,0.18)

Transformer Traduire

Et complétez les paramètres du module en modifiant les valeurs de traduction de la transformation en conséquence :

• Droit:
  • Bureau : 50px
  • Tablette et téléphone : 0px

2. Appliquez des effets collants personnalisés pour obtenir l'effet Masquer avant le défilement

Rendre la ligne positionnée en absolu

Maintenant que nous avons posé les bases de notre en-tête, nous pouvons appliquer l'effet de masquage de l'en-tête avant le défilement. Vous pouvez appliquer cet effet à n'importe quel en-tête que vous créez, à condition de suivre les étapes ci-dessous. La première étape consiste à ouvrir les paramètres de ligne et à rendre la ligne absolue. Cela nous aidera à éviter que l'espace ne soit pris par l'en-tête en haut de notre page.

• Position : Absolu
• Emplacement : en haut à gauche

Rendre la section collante

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

• Position collante : coller au sommet
• Limite collante inférieure : aucune
• Décalage des éléments collants environnants : Oui
• Transition par défaut et styles collants : oui

Animation de la section

Nous allons également ajouter une animation à notre section. Cette animation empêchera l'en-tête de s'afficher lors du chargement de votre page.

• Style d'animation : Fondu

Durée de transition de section

Vous pouvez décider vous-même de la lenteur ou de la vitesse à laquelle l'en-tête glisse vers le bas une fois que vous commencez à faire défiler en modifiant la durée de transition dans l'onglet avancé de la section. Plus la durée est élevée, plus l'en-tête glisse lentement vers le bas.

• Durée de transition : 800 ms

Section Transformer Traduire

Maintenant, dans un état par défaut, nous ne voulons pas que l'en-tête soit visible. La première étape pour y parvenir consiste à utiliser les paramètres de transformation de la section et à utiliser une valeur négative pour l'axe Y.

• À droite : -300px

Nous ramènerons cette valeur à zéro dans un état collant. Cela signifie que dès que vous commencez à faire défiler, l'en-tête redevient visible.

• Collant à droite : 0px

Propriété CSS de visibilité de la section

La prochaine et dernière étape de ce didacticiel n'est théoriquement pas nécessaire pour obtenir l'effet, mais c'est une bonne pratique de masquer les éléments qui ne sont pas utilisés. C'est pourquoi nous allons aller dans l'onglet avancé de la section et ajouter la ligne de code CSS suivante dans la zone de l'élément principal :

• Élément principal :

  visibility: hidden

Nous rendrons notre contenu visible dans un état collant. C'est ça!

• Élément principal collant :

  visibility: visible;

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment vous assurer que votre section héros est au centre de votre page dès que les gens entrent sur votre page. Plus précisément, nous vous avons montré comment masquer votre en-tête avant de faire défiler. Cela permet à vos visiteurs de traiter d'abord les informations de la section héros avant de pouvoir naviguer. Vous avez également pu télécharger le fichier JSON gratuitement ! Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous.

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.