Sélectionner une page


Maintenant que le générateur de thèmes est disponible, nous avons hâte de nous plonger dans de nouveaux didacticiels pour vous aider à rendre votre site Web opérationnel de A à Z. Cela inclut la création d’en-têtes personnalisés avec l’option intégrée de Divi. Dans ce tutoriel, nous nous concentrerons sur la création d’un en-tête global à l’aide de Divis Theme Builder. Un en-tête global apparaîtra n’importe où sur votre site Web, sauf si vous avez attribué un en-tête différent à cette page ou à cette publication.

Commençons!

Aperçu

Avant d’entrer dans le didacticiel, examinons rapidement le résultat sur différentes tailles d’écran.

Bureau

en-tête global

Téléphone portable, téléphone portable

en-tête global

Téléchargez le design d’en-tête personnalisé GRATUITEMENT

Pour mettre la main sur la conception d’en-tête globale personnalisée gratuite, vous devez d’abord la télécharger à partir du bouton ci-dessous. Pour accéder au téléchargement, vous devez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez encore plus de bonté Divi et un pack de mise en page Divi gratuit tous les lundis! 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 plus abonné et ne recevrez aucun e-mail supplémentaire.

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 Web WordPress.

en-tête global

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

Ensuite, accédez au générateur de thèmes dans les options de thème de Divi. Là, vous remarquerez un modèle de site Web par défaut vierge.

en-tête global

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

Dans le modèle de site Web par défaut, 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.

en-tête global

Section Paramètres

Dimensionnement

Ouvrez la section que vous pouvez voir sur la page, accédez à l’onglet Conception et modifiez la largeur sur différentes tailles d’écran.

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

en-tête global

distance

Ensuite, retirez tous les tampons supérieurs et inférieurs standard.

  • Rembourrage supérieur: 0px
  • Rembourrage au sol: 0px

en-tête global

bord

Ajoutez un rayon de marge dans les coins inférieurs gauche et droit de la section suivante.

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

en-tête global

Boîte ombre

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

  • Force de flou de l’ombre de la boîte: 60px
  • Couleur de l’ombre: rgba (0,0,0,0,13)

en-tête global

Visibilité

Ensuite, allez dans l’onglet Avancé et masquez les débordements. Augmentez également le z-index pour vous assurer que la section reste au-dessus de tout le contenu de la page.

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

en-tête global

4. Attribuez une nouvelle ligne à l’en-tête

Maintenant que nous avons terminé les paramètres généraux de la section, nous pouvons commencer à ajouter des lignes. Au total, nous avons besoin de deux lignes; Un dédié à l’en-tête et un qui peut être utilisé pour afficher les éléments de menu. Nous commençons par l’en-tête en ajoutant une nouvelle ligne avec la structure de colonne suivante:

en-tête global

Paramètres de ligne

Couleur de l’arrière plan

Ouvrez les paramètres de ligne et modifiez la couleur d’arrière-plan sans ajouter de modules à la ligne.

  • Couleur de fond: # 38383f

en-tête global

Dimensionnement

Ensuite, modifiez les paramètres de taille de la ligne.

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

en-tête global

affichage

Assurez-vous également que les colonnes apparaissent côte à côte, même sur des écrans de petite taille, en ajoutant une seule ligne de code CSS à l’élément principal de la ligne.

display: flex;

en-tête global

Ajouter un module d’image à la colonne 1

Télécharger le logo

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

en-tête global

Alignement

Accédez à l’onglet Conception et assurez-vous que vous utilisez l’orientation d’image de gauche.

en-tête global

Dimensionnement

Modifiez également la largeur du module.

en-tête global

distance

Ajoutez des valeurs de marge personnalisées pour différentes tailles d’écran.

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

en-tête global

Ajout du module de suivi des médias sociaux à la colonne 2

Ajouter des réseaux sociaux

Allez dans la deuxième colonne. Là, nous avons besoin d’un module de suivi des médias sociaux. Ajoutez les réseaux sociaux de votre choix.

en-tête global

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

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

  • Couleur de fond: rgba (0,0,0,0)

en-tête global

Alignement

Revenez aux paramètres normaux du module et modifiez ensuite l’orientation complète du module.

en-tête global

symbole

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

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

en-tête global

distance

Et ajoutez une marge supérieure.

en-tête global

Ajoutez le module de boutons à la colonne 3

Ajouter une copie

Allez dans la troisième colonne et ajoutez un module de boutons avec une copie de votre choix.

en-tête global

Alignement

Modifiez l’orientation du bouton dans l’onglet Conception.

en-tête global

Paramètres des boutons

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

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

en-tête global

  • Rayon du bord du bouton: 0px
  • Espacement des lettres clés: 5px (bureau), 3px (tablette et téléphone)
  • Police du bouton: Open Sans
  • Poids du clavier: gras
  • Style de police du bouton: lettres majuscules

en-tête global

distance

Ajoutez des valeurs de remplissage personnalisées pour différentes tailles d’écran.

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

en-tête global

5. Attribuez une nouvelle ligne à la barre de menus

Une fois que vous avez rempli la ligne associée à l’en-tête global, vous pouvez ajouter une autre ligne directement en dessous en utilisant la structure de colonnes suivante:

en-tête global

Paramètres de ligne

Dimensionnement

Ouvrez les paramètres de ligne et modifiez les paramètres de taille dans l’onglet Conception sans ajouter de modules.

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

en-tête global

distance

Ensuite, retirez tous les tampons supérieurs et inférieurs standard.

  • Rembourrage supérieur: 0px
  • Rembourrage au sol: 0px

en-tête global

Ajouter un module de menu à la colonne

Choisissez le menu

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

en-tête global

agencement

Accédez à l’onglet Conception et modifiez les paramètres de mise en page comme suit:

  • Style: centré
  • Direction du menu déroulant: Bas

en-tête global

Gauche

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

  • Couleur du lien actif: # ffae25

en-tête global

Menu déroulant

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

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

en-tête global

Symboles

Ensuite, changez la couleur de l’icône du menu hamburger.

  • Couleur de l’icône du menu Hamburger: # ffae25

en-tête global

Texte du menu

Avec les paramètres de texte du menu.

  • Menu des Écritures: Prata
  • Couleur du texte du menu: # 000000

en-tête global

6.Assurez-vous que l’en-tête et la barre de menus restent en haut

Ouvrez les paramètres de la section

Une fois que vous avez terminé la deuxième ligne, il ne vous reste plus qu’à noter la section en haut de nos pages et articles. Pour ce faire, nous ouvrons à nouveau les paramètres de la section.

en-tête global

Ajouter du CSS personnalisé à l’élément principal

Ensuite, nous allons dans l’onglet « Avancé » et ajoutons quelques lignes de code CSS à l’élément principal de la section.

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

en-tête global

7. Enregistrez les options globales d’en-tête et de générateur de thème

Lorsque vous avez terminé toute la conception d’en-tête globale, assurez-vous d’enregistrer la conception avant de quitter la mise en page du modèle. Si vous êtes en dehors de la mise en page du modèle, enregistrez toutes les modifications de votre générateur de thèmes et vous avez terminé!

en-tête global

en-tête global

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

En-tête personnalisé

Téléphone portable, téléphone portable

En-tête personnalisé

Dernières pensées

Dans cet article, nous vous avons montré comment utiliser le nouveau générateur de thèmes de Divi pour créer un en-tête global personnalisé. Ce didacticiel montre à quel point il est facile de créer de beaux 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 incitera à démarrer immédiatement avec le générateur de thèmes! Si vous avez des questions ou des suggestions, veuillez laisser un commentaire dans la section des commentaires ci-dessous.

Si vous voulez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de l’avoir Abonnez-vous à notre newsletter et chaîne Youtube Vous êtes donc toujours l’un des premiers à connaître et à bénéficier de ce contenu gratuit.





Source link

Recent Posts