Comment placer automatiquement votre en-tête sous la première section Divi de chaque page

Depuis la sortie de Divi Theme Builder, nous avons partagé des tutoriels sur la façon de créer et de personnaliser un en-tête pour l'adapter aux différents besoins que vous pourriez avoir. Dans le tutoriel d'aujourd'hui, nous continuerons ce voyage en vous montrant comment placer automatiquement un en-tête personnalisé sous la première section Divi de chaque page. Cette approche permet aux visiteurs de voir d'abord la section héros de vos pages, puis d'accéder au menu et à tous ses éléments. Le style que nous utilisons pour l'en-tête personnalisé correspond au pack de mise en page Bistro, vous pourrez également télécharger le modèle de page personnalisé 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 GRATUITEMENT le modèle d'en-tête personnalisé

Pour mettre la main sur le modèle d'en-tête personnalisé 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. Accédez à Divi Theme Builder et ajoutez un nouveau modèle de page

Accédez à Divi Theme Builder et ajoutez un nouveau modèle

Commencez par accéder au Divi Theme Builder et ajoutez un nouveau modèle.

Utiliser sur

Utilisez ce nouveau modèle sur toutes les pages.

• Utiliser sur : toutes les pages

2. Commencez à créer une conception d'en-tête personnalisée

Continuez en créant un en-tête personnalisé dans le modèle de page.

Paramètres de section

Couleur de l'arrière plan

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

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

Espacement

Supprimez ensuite le rembourrage supérieur et inférieur par défaut de la section.

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

Frontière

Ajoutez également une bordure supérieure et inférieure.

• Largeur de bordure supérieure et inférieure : 1px
• Couleur de la bordure supérieure et inférieure : #002d4c

Identifiant CSS

Et incluez un identifiant CSS. Plus tard dans le didacticiel, nous utiliserons cet ID CSS pour placer la section sous la première section de chaque page.

• ID CSS : en-tête personnalisé

Indice Z

Enfin et surtout, nous augmenterons l'index z de la section pour nous assurer qu'il apparaît au-dessus de tout le contenu de la page.

• Indice Z : 99999

Ajouter une nouvelle ligne

Structure des colonnes

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

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de la ligne et laissez la ligne occuper toute la largeur de la section.

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

Espacement

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

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

Élément principal

Pour nous assurer que toutes les colonnes restent côte à côte sur des écrans plus petits et pour centrer le contenu de la colonne, nous ajouterons également deux lignes de code CSS à l'élément principal de la ligne.

display: flex;
align-items: center;

Colonne 1

Espacement

Continuez en ouvrant les paramètres de la colonne 1 et ajoutez un peu de rembourrage supérieur et inférieur aux paramètres d'espacement.

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

Frontière

Ajoutez également une bordure droite à la colonne.

• Largeur de la bordure droite : 1px
• Couleur de la bordure droite : #002d4c

Ajouter un module d'image à la colonne 1

Télécharger le logo

Il est temps de commencer à ajouter des modules ! Dans la colonne 1, nous aurons besoin d'un module image. Téléchargez votre logo.

Alignement

Passez à l'onglet de conception du module et modifiez l'alignement de l'image.

• Alignement de l'image : Centre

Dimensionnement

Modifiez également la largeur du module sur différentes tailles d'écran.

• Largeur : 4vw (ordinateur de bureau), 7vw (tablette), 12vw (téléphone)

Ajouter le module de menu à la colonne 2

Sélectionnez le menu

Sur la deuxième colonne, là, nous aurons besoin d'un module de menu. Sélectionnez un menu de votre choix.

Disposition

Passez à l'onglet de conception du module et modifiez les paramètres de mise en page comme suit :

• Style : Centré
• Direction du menu déroulant : vers le bas

Texte du menu

Modifiez également les paramètres du texte du menu.

• Police du menu : Cabine
• Couleur du texte du menu : #77848d
• Taille du texte du menu : 16px (ordinateur de bureau), 15px (tablette), 14px (téléphone)
• Hauteur de la ligne de menu : 1,8 em

Texte déroulant

Ensuite, modifiez certaines couleurs dans les paramètres de texte déroulant.

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

Icônes

Et complétez les paramètres du module en modifiant la couleur de l'icône du menu hamburger dans les paramètres des icônes.

• Couleur de l'icône du menu Hamburger : #002d4c

Ajouter un module de bouton à la colonne 3

Ajouter une copie

Passons à la colonne suivante et dernière. Là, nous aurons besoin d'un module de bouton. Ajoutez une copie de votre choix.

Alignement

Passez à l'onglet de conception du module et modifiez l'alignement des boutons.

• Alignement des boutons : Centre

Paramètres des boutons

Continuez en stylisant le bouton dans les paramètres du bouton.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 13 px
• Couleur du texte du bouton : #002d4c
• Couleur d'arrière-plan du bouton : #ffffff
• Largeur de la bordure du bouton : 2px
• Couleur de la bordure du bouton : #ffffff (par défaut), #d1d1d1 (survol)
• Rayon de la bordure du bouton : 0px

• Espacement des lettres des boutons : 2px
• Police des boutons : Cabine
• Poids de la police du bouton : semi-gras
• Style de police des boutons : majuscule

Espacement

Ensuite, ajoutez un rembourrage personnalisé sur différentes tailles d'écran.

• Rembourrage supérieur : 16px
• Rembourrage inférieur : 16px
• Rembourrage gauche : 24 pixels (ordinateur de bureau et tablette), 13 pixels (téléphone)
• Rembourrage droit : 24 pixels (ordinateur de bureau et tablette), 13 pixels (téléphone)

Boîte ombre

Complétez les paramètres du module en ajoutant une ombre de boîte.

• Position horizontale de l'ombre de la boîte : 0px
• Position verticale de l'ombre de la boîte : 0px
• Force du flou de l'ombre de la boîte : 0px
• Force de propagation de l'ombre de la boîte : 2px (par défaut), 6px (survol)
• Couleur de l'ombre : #002d4c
• Position de l'ombre de la boîte : ombre intérieure

3. Placer automatiquement l'en-tête après la première section de chaque page à l'aide de JQuery

Ajouter le module de code à la colonne 2

Maintenant, pour placer automatiquement le menu sous la première section de chaque page, nous aurons besoin d'un peu de code JQuery. Pour inclure ce code dans notre en-tête personnalisé, ajoutez un module de code à la colonne 2.

Insérer le code JQuery

Ajoutez les lignes suivantes de code JQuery, entre les balises de script, comme vous pouvez le remarquer dans l'écran d'impression ci - dessous , au module de code pour appliquer l'effet :

jQuery(fonction($){
$('#custom-header').insertAfter('.et_pb_section_0');
});

4. Enregistrer les modifications apportées au générateur de thème et afficher le résultat

Et complétez l'en-tête personnalisé en enregistrant toutes les modifications apportées au générateur de thème et en affichant le résultat sur vos pages !

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 placer automatiquement l'en-tête personnalisé que vous créez à l'aide de Theme Builder de Divi après la première section Divi de chaque page. Vous n'aurez besoin de créer l'en-tête personnalisé qu'une seule fois, d'ajouter le code JQuery et l'en-tête personnalisé sera automatiquement repositionné. C'est un excellent moyen de modifier la position normale de la première page du menu et de permettre à votre section de héros de briller en premier. Vous avez également pu télécharger le modèle 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.