Comment personnaliser le header et le menu du thème Divi ?

Divi propose de nombreuses options pour personnaliser votre header (en-tête) et votre menu de navigation. Toutes ces options se trouvent dans le personnaliseur de thème. Pour le trouver allez dans le tableau de bord de wordpress –> divi –> personnaliseur de thème -> en-tête de navigation.
divi header menu

Dans ce tuto nous allons voir comment personnaliser le header et le menu de votre thème Divi (vous devez au préalable avoir créé un menu dans WordPress) avec le personnaliseur de thème et avec le rajout de CSS.

Mais avant vous aurez sans doute envie de remplacer le logo divi par votre propre logo, pour le créer je vous conseille ce site  https://www.canva.com.

Une fois créé vous devez l’uploader dans WordPress, pour ce faire allez dans Divi – options du thème- général.

Divi changer logo

Table des matieres

Personnaliser le Header du thème Divi

Divi propose de nombreuses options pour personnaliser votre header (en-tête) et votre menu de navigation. Toutes ces options se trouvent dans le personnaliseur de thème.

Pour le trouver allez dans le tableau de bord de wordpress –> divi –> personnaliseur de thème -> en-tête de navigation.

divi entete menu

Après avoir cliqué sur l’onglet en-tête de navigation vous accédez à 5 nouveaux onglets que nous allons voir ensemble.

divi entête menu

Format de l'entête (header format)

Les différents styles d'entêtes (header style)

Vous pouvez choisir entre plusieurs styles d’en-tête:

Par défaut
Votre logo sera aligné à gauche et votre menu sera aligné à droite.

Centré
Le logo et le menu seront centrés, le logo se place au-dessus du menu.

Logo en ligne centré
Votre logo et les éléments de menu seront placés sur la même ligne avec votre logo placé au milieu.

Slide in
Créer une icône de menu hamburger dans le coin supérieur droit de la page. Lorsque vous cliquez dessus, ce menu se glisse à partir de la droite.

Plein écran
Vous verrez à nouveau une icône hamburger dans le coin supérieur droit. Cependant, cette fois-ci, un menu de superposition en plein écran apparaîtra.

Activer la navigation verticale

Ce paramètre va modifier l’orientation du header et du menu de navigation dans le sens vertical de votre page et affichera votre logo et votre menu à gauche ou à droite de la page selon votre préférence.

divi activer navigation verticale

Cacher la barre de navigation s'il n'y a pas de défilement

Tout est dit dans le titre, tant que vous ne faites pas défiler votre page vers le bas, la barre de navigation n’apparait pas.

Barre de menu primaire (primary menu bar)

Ici vous allez pouvoir personnaliser votre menu, dimension, typographie, couleurs, etc.

divi Barre de menu primaire
divi Barre de menu primaire

Barre de menu secondaire (secondary menu bar)

Idem que pour la barre de menu primaire mais pour la barre se situant au-dessus du menu principal.

divi Barre de menu secondaire
divi Barre de menu secondaire

Éléments de l'entête

Permet de sélectionner certains éléments que vous voulez voir apparaitre dans le menu.

  • Icones réseaux sociaux.
  • Icones de recherche
  • Numéro de téléphone
  • Email
divi entête menu

Customiser le header de Divi avec sur CSS

Voyons pour finir quelques ajustements très faciles à faire en CSS.

Le css devra être placé soit dans le fichier CSS de votre thème enfant ou bien dans la section CSS additionnel du personnaliseur de Divi.

divi css additionnel

Les ajustements suivants ne seront appliqués qu’à un écran de plus 980px. Cela évitera de toucher au menu mobile qui est complètement différent.

Elimination de la marge interne (padding) des liens du menu et augmentation de leur marge extérieure (margin-left).

@media only screen and ( min-width: 981px ) {
#top-menu li {
      padding-right: 0px;
      margin-left: 54px;
   }
}

Changement de couleur du lien du menu au passage de la souris.

#top-menu-nav #top-menu a:hover {
      color: yellow !important;
      opacity:1 !important;
}

Rajout d’une couleur différente pour le lien actif du menu.

#top-menu li.current-menu-item > a {
      color: red;
}

Si malgré toutes les options de personnalisation incluses dans le thème Divi vous ne parvenez pas à obtenir ce que vous souhaitez, je vous conseille les 3 plugins ci-dessous qui rajouteront un grand nombre de paramètres pour personnaliser a votre menu.
Nous serions ravis de connaître votre avis

Laisser un commentaire

error: Contenu protégé - DMCA
globalwordpress
Reset Password
Compare items
  • Total (0)
Compare