Comment créer un en-tête collant avec les options collantes de Divi

La façon dont nous utilisons Divi Theme Builder lors de la configuration d'un site Web a accéléré notre flux de travail et rendu tout plus facile. Bien que nous ayons pu créer des en-têtes personnalisés dès le premier jour depuis la sortie de Divi Theme Builder, une chose a été demandée en permanence, c'est de pouvoir créer un en-tête collant sans utiliser de code supplémentaire. Avec les nouvelles options collantes de Divi, créer un en-tête collant est devenu plus facile que jamais. Les paramètres collants fournis par Divi vous aideront sans effort à rendre n'importe quel élément de conception collant et à attribuer des styles personnalisés à un état collant, ce qui se traduit par des possibilités de conception et d'expérience utilisateur infinies.

Dans ce didacticiel, nous allons vous montrer comment créer un en-tête collant contenant les éléments suivants :

• L'en-tête que nous créons a une barre d'en-tête supérieure + une barre de menu
• Nous rendons la section contenant la barre de menu collante lorsque vous la dépassez, dès que vous revenez en haut, la barre d'en-tête réapparaît
• Nous modifions les styles de conception de la section collante (et de ses éléments) une fois que la section est devenue collante

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 GRATUITEMENT le modèle d'en-tête global

Pour mettre la main sur le modèle d'en-tête global 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 !

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

Accédez au Divi Theme Builder et commencez à créer un nouvel en-tête global ou personnalisé.

Section #1 Paramètres

Fond dégradé

Une fois dans l'éditeur de modèles, nous commencerons par construire la structure des éléments de notre en-tête. Dans la deuxième partie de ce didacticiel, nous nous concentrerons sur l'application des différents paramètres collants pour compléter notre conception d'en-tête collante. Dans l'éditeur de modèles, vous remarquerez une section. Ouvrez cette section et appliquez un fond dégradé.

• Couleur 1 : #ffba60
• Couleur 2: #ffd6a0
• Direction du gradient : 90 degrés
• Position de départ : 50 %
• Position finale : 50 %

Espacement

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

Pour créer notre barre d'en-tête supérieure, nous allons ajouter une nouvelle ligne à notre section en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement comme suit :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur : 95%
• Largeur maximale : 2580px

Espacement

Ajoutez également des rembourrages haut et bas personnalisés.

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

Élément principal CSS

Et pour nous assurer que les colonnes restent côte à côte sur des écrans plus petits, nous ajouterons une ligne de code CSS à l'élément principal de la ligne dans l'onglet avancé.

display: flex;

Ajouter le module de suivi des médias sociaux à la colonne 1

Ajouter des réseaux sociaux de choix

Il est temps d'ajouter des modules, en commençant par un module de suivi des médias sociaux dans la colonne 1. Ajoutez les réseaux sociaux de votre choix ainsi que leurs liens correspondants.

Supprimer la couleur d'arrière-plan de chaque réseau social

Continuez en supprimant individuellement chacune des couleurs de fond du réseau social.

Paramètres des icônes

Ensuite, revenez aux paramètres généraux du module et modifiez la couleur de l'icône dans l'onglet de conception.

• Couleur de l'icône : #26333a

Espacement

Ajoutez également une marge supérieure.

• Marge supérieure : 5px

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.

Ajouter un lien

Ajoutez ensuite un lien.

Alignement des boutons

Ensuite, passez à l'onglet Conception et modifiez l'alignement des boutons.

• Alignement des boutons : à droite

Paramètres des boutons

Nous stylisons le bouton aussi.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 14 px
• Couleur du texte du bouton : #26333a
• Largeur de la bordure du bouton : 2px
• Couleur de la bordure du bouton : #26333a
• Rayon de la bordure du bouton : 0px

• Espacement des lettres des boutons : 4px
• Poids de la police du bouton : gras
• Style de police des boutons : majuscules
• Afficher le bouton : Oui

Espacement

Et nous allons compléter les paramètres du module en ajoutant des rembourrages supérieur et inférieur aux paramètres d'espacement.

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

Ajouter la section #2

Fond dégradé

Ajoutez une autre section régulière juste en dessous de la précédente. Cette section sera dédiée à notre menu et sera rendue collante dans la deuxième partie de ce tutoriel. Une fois que vous avez ajouté la section, appliquez un arrière-plan dégradé.

• Couleur 1 : #ffffff
• Couleur 2: #f7f7f7
• Type de dégradé : Linéaire
• Direction du gradient : 90 degrés
• Position de départ : 25 %
• Position finale : 25 %

Espacement

Passez à l'onglet de conception de la section et supprimez tout le rembourrage 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 à la section en utilisant la structure de colonnes suivante :

Dimensionnement

Passez à l'onglet de conception de la ligne et modifiez les paramètres de dimensionnement comme suit :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur maximale : 2580px

Espacement

Supprimez ensuite tous les rembourrages supérieur et inférieur par défaut.

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

Ajouter un module de menu à la colonne

Sélectionnez le menu

Ensuite, ajoutez un module de menu à la colonne de la ligne et sélectionnez un menu dynamique de votre choix.

Télécharger le logo

Téléchargez un logo ensuite.

Supprimer la couleur d'arrière-plan

Ensuite, supprimez la couleur de fond blanc par défaut du module.

Paramètres du texte du menu

Passez à l'onglet Conception et stylisez également les paramètres du texte du menu.

• Poids de la police du menu : gras
• Couleur du texte du menu : #002d4c
• Taille du texte du menu : 15 px
• Espacement des lettres du menu : 4px
• Alignement du texte : à droite

Paramètres de texte du menu déroulant

Ensuite, apportez quelques modifications aux paramètres du menu déroulant.

• Couleur d'arrière-plan du menu déroulant : #ffffff
• Couleur de la ligne du menu déroulant : #002d4c

Paramètres des icônes

Avec les paramètres des icônes.

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

Dimensionnement

Et complétez les paramètres du module en ajoutant une hauteur maximale de logo aux paramètres de dimensionnement.

• Hauteur maximale du logo : 60 pixels

2. Appliquer des effets collants personnalisés

Tourner la section #2 collante

Maintenant que nous avons créé la structure des éléments de notre en-tête, il est temps de rendre notre deuxième section collante et de modifier le style de conception de celui-ci et de ses éléments dans un état collant. Ouvrez les paramètres de la deuxième section et passez à l'onglet avancé. Là, accédez aux paramètres des effets de défilement et appliquez les options persistantes suivantes :

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

Changer l'arrière-plan du dégradé de la section dans l'état collant

Maintenant que notre section est devenue collante, une option supplémentaire apparaîtra dans nos paramètres de section, de ligne et de module ; l'option collante. Lorsque vous cliquez sur cette icône, vous pourrez créer un style alternatif pour l'élément que vous avez sélectionné dans un état collant. Nous allons combiner quelques-uns de ces paramètres de conception collants pour personnaliser l'apparence de notre en-tête collant lors du défilement. Commencez par accéder aux paramètres d'arrière-plan de la deuxième section et appliquez l'arrière-plan dégradé collant suivant :

• Couleur 1 : #26333a
• Couleur 2: #1e272f

Étirer la ligne dans l'état collant

Ensuite, nous allons ouvrir la ligne contenant le module de menu et nous allons modifier la largeur dans un état collant.

• Largeur : 95%

Supprimer le remplissage de ligne dans l'état collant

Nous supprimons également le rembourrage collant en haut et en bas de notre rangée.

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

Changer la couleur du texte du menu dans l'état collant

Ensuite, nous allons changer la couleur du texte du menu dans un état collant.

• Couleur du texte du menu : #ffbd68

Changer les couleurs des icônes de menu dans l'état collant

Avec les couleurs des icônes.

• 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

Supprimer la hauteur du logo dans l'état collant

Et enfin, nous allons changer la hauteur maximale du logo à zéro dans un état collant. Cela supprimera entièrement le logo de notre en-tête une fois que les paramètres persistants de la section seront activés. C'est ça! Assurez-vous d'enregistrer toutes les modifications de Divi Theme Builder une fois que vous avez terminé la conception de votre en-tête et de les prévisualiser sur votre site Web.

• Hauteur maximale du logo : 0px

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 créer un en-tête collant à l'aide de Theme Builder et des options collantes de Divi. Dès que la section contenant notre menu devient collante, nous appliquons également des styles personnalisés. Ces options sont rendues possibles par les nouvelles options collantes Divi qui vous offrent d'innombrables possibilités pour améliorer l'expérience utilisateur et le design que vous créez. Vous avez également pu télécharger gratuitement le modèle d'en-tête global ! 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.