Personnaliser le header et le menu de Divi : liste complète des ressources et tutoriels

par | 23 Jan 2019 | Création de sites Wordpress à Orléans

Divi est un thème Wordpress extrêmement flexible à bien des égards. Il fait désormais partie de notre routine quotidienne puisque nous 'l’intégrons presque à 90% dans la plupart de nos projets e-commerce ou de site vitrine. Hélas, un de ses gros points de progression reste le paramétrage et la personnalisation du header et du menu primaire et secondaire. Bien souvent, il faut utiliser quelques lignes de code CSS pour obtenir le résultat souhaité, en attendant que Elegant Themes propose enfin un outil de gestion du header digne de ses autres modules.

Cet article vise à proposer une liste la plus complète possible (je vais la mettre à jour au gré des différents cas de figure que nous rencontrons) de solutions pour personnaliser le header et le menu de Divi. Certains paramétrages - même assez subtils - peuvent être fait via l'éditeur de thème et de menu natif de Wordpress sans coder. D'autres requièrent l'utilisation d'un peu de CSS basique qu'il suffit en général de copier-coller et de modifier légèrement pour obtenir le résultat souhaité.

Les bases : utiliser le personnaliseur de thème de Wordpress pour éditer menu et header de Divi

C'est la solution de base et la plus simple pour modifier header, menu et footer aussi du reste ainsi que de nombreuses autres options. Pour y accéder, connectez-vous à votre Tableau de bord puis dirigez-vous vers l'onglet Apparence > Personnaliser comme indiqué ci-dessous :

Accès au personnaliseur de thème de wordpress

Cette nouvelle interface qui s'affiche alors vous donne accès à de nombreuses options.

Pour ajouter des bouts de code CSS que nous donnons dans la suite de ce tutoriel, vous aurez besoin d'utiliser l'onglet "CSS additionnel" indiqué ci-dessous :

CSS additionnel

Vous ajouterez votre code CSS soit en le rédigeant soit en le copiant-collant dans la zone prévue à cet effet. La plupart des changements sont visibles instantanément dans la fenêtre de prévisualisation de droite. Pratique ! N'oubliez-pas de Publier vos ajouts avec le bouton bleu en haut à droite.

Personnalisez votre CSS

Comment masquer la petite flèche du menu principal ?

Lorsqu'un menu contient un sous-menu, Divi affiche automatiquement une petit flèche à la droite du nom du menu en question. Il est possible de masquer cette petit flèche avec le code suivant :

#‎top-menu .menu-item-has-children > a:first-child {padding-right: 0px; padding-bottom: 17px!important;}
#top-menu .menu-item-has-children > a:first-child:after{content: ''; margin-top: -2px;}
#top-menu .menu-item-has-children {padding-right: 0px;}

La dernière ligne du code sert à modifier légèrement l'écartement entre deux élément du menu afin de compenser l'espace vide laissé par la suppression de la petit flèche.

Comment ajouter un élément dans le menu secondaire de Divi ?

Le menu secondaire de Divi est celui qui s'affiche au-dessus du menu principal, sous la forme d'une mince bande paramétrable depuis l'éditeur de thème, section "éléments de l'en-tête". Par défaut, ce menu secondaire ne contient qu'un numéro de téléphone, un email et des icônes de réseaux sociaux. Il est possible d'y ajouter des éléments cliquables supplémentaires très facilement via l'onglet Apparence > Menu de Wordpress.

Commencez par créer un nouveau menu, nommez le "Menu secondaire" par exemple. Ensuite ajoutez-y un lien personnalisé que vous nommerez selon votre besoin et sauvegarder le changement. Et c'est déjà fini, votre lien apparaît désormais dans le header.

Comment ajouter une icône devant un élément du menu secondaire ?

Après avoir créé votre lien personnalisé dans le menu secondaire de Divi comme expliqué ci-dessus, vous allez devoir activer l'affichage des classes en ouvrant l'onglet situé en haut à droite de l'écran et intitulé "Options d'affichage" puis activer les classes.

Une fois ceci fait, un nouveau champs s'affiche pour chaque élément du menu ou de sous-menus. Il ne vous reste plus u'à attribuer une classe de votre choix à l'élément, "exemple-de-classe" dans mon code ci-dessous qu'il conviendra donc de remplacer dans le code également avec le texte que vous aurez choisi.  Sauvegardez vos changement puis ouvrez l'éditeur de thème de Wordpress, section "CSS additionnel" puis collez le code CSS ci-dessous :

.exemple-de-classe a:before {
font-family: 'ETModules';
content : "\e081";
margin-right: 5px ;
color: #d20018;
}

Vous devrez remplacer le code "\e081" par celui correspond à l'icône souhaitée. Liste complète des codes ici en prenant soin de bien remplacer le "&#" par un "\".

Vous pouvez aussi modifier le code couleur en modifiant la ligne color: #d20018;

Comment obtenir un logo qui déborde au dessus ou en dessous du header ?

Le résultat espéré ressemble à ceci :

La code CSS pour obtenir un tel résultat est :

@media only screen and (max-width: 980px) {
#logo {
min-height: 180px;
}
}
@media only screen and (min-width: 981px) {
#logo {
min-height: 200px;
}
}

Comment avoir un logo différent pour chaque page ?

Si vous souhaitez obtenir un logo qui change en fonction de la page, vous pouvez utiliser le code CSS ci-dessous :

.page-id-XXX img#logo {display: none;}
.page-id-XXX .logo_container a {content: url(https://adressedevotreimage.jpg) !important;max-height: 120%;}

Vous aurez au préalable uploadé votre logo bis dans votre galerie d'image et récupéré l'adresse du fichier.

Vous devrez aussi récupérer l'ID de la page sur laquelle vous souhaitez modifier le logo (en plaçant votre curseur au-dessus de son nom dans l'admin wordpress et et en récupérant son ID dans l'url affiché en pied de page de votre navigateur). Vous remplacerez le XXX du code ci-dessous par votre ID.

Changer la couleur du menu hamburger

span.mobile_menu_bar:before{
color:#8d8d8d;
}

Changer la couleur de la ligne bleue qui sépare le menu mobile déroulant du header

.et_mobile_menu { border-top: 3px solid #8d8d8d; }

Vous aimerez peut-être

Comment rediriger un nom de domaine de Wix ou WordPress vers votre site

Si vous avez créé votre premier site sur un service tel que Wix ou Wordpress.com, il y a de fortes chances que vous ayez également acheté votre nom de domaine directement auprès de ces plateformes. C'est un choix logique puisque dans ce cas, c’est Wix ou Wordpress.com...

Suivi de positionnement Google : le guide pratique pour tout savoir

Le référencement naturel d'un site internet est aujourd'hui un levier d'acquisition de trafic fondamental, pérenne et relativement économique. Aussi, n'ayons pas peur des mots, un site web efficace doit être conçu pour figurer en bonne place sur certaines requêtes...