Comment créer un en-tête global personnalisé avec le générateur de thème de Divi

Maintenant que Theme Builder est là, nous avons hâte de plonger dans de nouveaux tutoriels qui vous aideront à configurer votre site Web de A à Z. Cela inclut la création d'en-têtes personnalisés à l'aide de l'option intégrée de Divi. Dans ce tutoriel, nous allons nous concentrer sur la création d'un en-tête global à l'aide du générateur de thème de Divi. Un en-tête global apparaîtra partout sur votre site Web, sauf si vous avez attribué un en-tête différent à cette page ou à cette publication.

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 design d'en-tête personnalisé

Pour mettre la main sur la conception d'en-tête globale personnalisée gratuite, vous devez d'abord la télécharger à l'aide du 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 !

Abonnez-vous à notre chaîne Youtube

1. Configurez votre menu principal

Commencez par créer votre menu dans les paramètres d'apparence de votre site WordPress.

2. Accédez aux options du générateur de thème

Ensuite, accédez au générateur de thème dans les options de thème de Divi. Une fois là-bas, vous remarquerez un modèle de site Web par défaut vide.

3. Ajouter et créer un en-tête global

Le modèle de site Web par défaut est l'endroit où vous pouvez commencer à créer votre en-tête global personnalisé, votre corps global et votre pied de page global. Cliquez sur « Ajouter un en-tête global » et continuez en cliquant sur « Créer un en-tête global » pour commencer le processus.

Paramètres de section

Dimensionnement

Ouvrez la section que vous pouvez remarquer sur la page, passez à l'onglet Conception et modifiez la largeur sur différentes tailles d'écran.

• Largeur : 100 %
• Largeur maximale : 1280 px (ordinateur de bureau), 100 % (tablette et téléphone)

Espacement

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

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

Frontière

Ajoutez ensuite un rayon de bordure aux coins inférieurs gauche et droit de la section.

• En bas à gauche : 50px
• En bas à droite : 50px

Boîte ombre

Nous ajoutons également une subtile ombre de boîte.

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

Visibilité

Ensuite, allez dans l'onglet avancé et masquez les débordements. Augmentez également l'index z, cela aidera à garantir que la section reste au-dessus de tout le contenu de la page.

• Débordement horizontal : Visible
• Débordement vertical : visible
• Indice Z : 99999

4. Dédiez une nouvelle ligne à l'en-tête

Maintenant que nous avons terminé les paramètres de la section générale, nous pouvons commencer à ajouter des lignes. Au total, nous aurons besoin de deux lignes ; un qui est dédié à l'en-tête et un qui permet aux éléments de menu d'apparaître. Nous allons commencer par l'en-tête en ajoutant une nouvelle ligne en utilisant la structure de colonne suivante :

Paramètres de ligne

Couleur de l'arrière plan

Sans ajouter de modules à la ligne, ouvrez les paramètres de la ligne et modifiez la couleur d'arrière-plan.

• Couleur d'arrière-plan : #38383f

Dimensionnement

Modifiez ensuite les paramètres de dimensionnement de la ligne.

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

Affichage

Et assurez-vous que les colonnes apparaissent les unes à côté des autres sur des écrans plus petits en ajoutant une seule ligne de code CSS à l'élément principal de la ligne.

display: flex;

Ajouter un module d'image à la colonne 1

Télécharger le logo

Une fois que vous avez terminé les paramètres de ligne, il est temps de commencer à ajouter des modules. Ajoutez un module Image à la colonne 1 et téléchargez votre logo.

Alignement

Passez à l'onglet Conception et assurez-vous que vous utilisez l'alignement de l'image à gauche.

• Alignement de l'image : à gauche

Dimensionnement

Modifiez également la largeur du module.

• Largeur : 100 pixels

Espacement

Et ajoutez des valeurs de marge personnalisées sur différentes tailles d'écran.

• Marge supérieure : 5px
• Marge de gauche : 50 pixels (ordinateur de bureau), 20 pixels (tablette et téléphone)

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

Ajouter des réseaux sociaux

Passons à la deuxième colonne. Là, nous aurons besoin d'un module de suivi des médias sociaux. Ajoutez les réseaux sociaux de votre choix.

Couleur d'arrière-plan du réseau social

Ensuite, ouvrez chaque réseau social individuellement et changez la couleur d'arrière-plan en une couleur complètement transparente.

• Couleur d'arrière-plan : rgba(0,0,0,0)

Alignement

Revenez aux paramètres normaux du module et modifiez ensuite l'alignement complet du module.

• Alignement du module : Centre

Icône

Modifiez également les paramètres de l'icône.

• Couleur de l'icône : #ffffff
• Utiliser la taille de l'icône personnalisée : Oui
• Taille de la police de l'icône : 16 px (ordinateur de bureau et tablette), 12 px (téléphone)

Espacement

Et ajoutez une marge supérieure.

• Marge supérieure : 10px

Ajouter un module de bouton à la colonne 3

Ajouter une copie

Passez à la troisième colonne et ajoutez un module de bouton avec une copie de votre choix.

Alignement

Modifiez l'alignement des boutons dans l'onglet Conception.

• Alignement des boutons : à droite

Paramètres des boutons

Stylisez les paramètres des boutons en conséquence :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 12 pixels (ordinateur de bureau), 10 pixels (tablette), 8 pixels (téléphone)
• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #ffae25
• Largeur de la bordure du bouton : 0px

• Rayon de la bordure du bouton : 0px
• Espacement des lettres des boutons : 5 pixels (ordinateur de bureau), 3 pixels (tablette et téléphone)
• Police des boutons : Open Sans
• Poids de la police du bouton : gras
• Style de police des boutons : majuscule

Espacement

Et ajoutez des valeurs de remplissage personnalisées sur différentes tailles d'écran.

• Rembourrage supérieur : 20 px
• Rembourrage inférieur : 20px
• Rembourrage gauche : 50 pixels (ordinateur de bureau et tablette), 15 pixels (téléphone)
• Rembourrage droit : 50 pixels (ordinateur de bureau et tablette), 15 pixels (téléphone)

5. Dédiez une nouvelle ligne à la barre de menus

Une fois que vous avez terminé la ligne dédiée à l'en-tête global, vous pouvez ajouter une autre ligne juste en dessous en utilisant la structure de colonnes suivante :

Paramètres de ligne

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement dans l'onglet Conception.

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

Espacement

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

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

Ajouter un module de menu à la colonne

Sélectionnez le menu

Ensuite, ajoutez un module de menu à la colonne et sélectionnez le menu que vous avez créé dans la première partie de ce didacticiel.

Disposition

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

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

Liens

Modifiez également la couleur du lien actif dans l'onglet Conception.

• Couleur du lien actif : #ffae25

Menu déroulant

Faites de même pour la couleur de la ligne du menu déroulant dans les paramètres du menu déroulant.

• Couleur de la ligne du menu déroulant : #ffae25

Icônes

Modifiez ensuite la couleur de l'icône du menu hamburger.

• Couleur de l'icône du menu hamburger : #ffae25

Texte du menu

Avec les paramètres de texte du menu.

• Police du menu : Prata
• Couleur du texte du menu : #000000

6. Faire en sorte que l'en-tête et la barre de menus restent en haut

Ouvrir les paramètres de la section

Une fois que vous avez terminé la deuxième ligne, il ne vous reste plus qu'à faire en sorte que la section reste en haut de nos pages et de nos publications. Pour ce faire, nous allons ouvrir à nouveau les paramètres de la section.

Ajouter un CSS personnalisé à l'élément principal

Ensuite, nous irons dans l'onglet avancé et nous ajouterons quelques lignes de code CSS à l'élément principal de la section.

position: fixed;
top: 0;
left: 0;
right: 0;

7. Enregistrer les options globales d'en-tête et de création de thème

Une fois que vous avez terminé la conception globale de l'en-tête, assurez-vous d'enregistrer la conception avant de quitter la mise en page du modèle. Une fois que vous êtes en dehors de la mise en page du modèle, enregistrez les modifications de l'ensemble de votre générateur de thème et vous avez terminé !

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 global personnalisé avec le nouveau Theme Builder de Divi. Ce didacticiel montre à quel point il est facile de créer de superbes en-têtes et de les appliquer à l'ensemble de votre site Web ou à des types de publication personnalisés spécifiques. Nous espérons que ce didacticiel vous inspirera pour vous lancer immédiatement dans le Générateur de thèmes ! Si vous avez des questions ou des suggestions, assurez-vous de 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.