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.
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.
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.
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.
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)
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.
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.
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.
É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
Customiser le header de Divi avec du 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.
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;
}
