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.

Personnalisation du 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.

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

Format de l’entête (header format)

Style d’entête (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.

Cacher la barre de navigation s’il n’y a aucun 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..

Format de l’entête (header format)

Barre de menu primaire (Primary menu bar)

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

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.

Elément 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

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 (voir comment faire un thème enfant) ou bien dans la section CSS additionnel du personnaliseur de Divi.

.

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.

Vous pouvez aussi lire notre tuto : « Comment créer un méga-menu avec le thème Divi ?« 

0 commentaires

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *