Comment créer un menu dans WordPress, comment customiser l’en-tête d’un site fait avec le thème Divi, où trouver les options de personnalisation etc… Autant de questions qui trouveront des réponses dans cet article. Je vous propose un dossier complet sur les en-têtes et les menus de Divi. Voici le programme :

  1. Créer le menu principal de votre site WordPress
  2. Supprimer le logo de Divi et ajouter le vôtre
  3. Choisir le type d’en-tête proposé par Divi
  4. Définir l’apparence des éléments du menu
  5. Quelques astuces pour customiser votre menu principal Divi
  6. Des ressources pour modifier le menu de Divi

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

Avant de pouvoir customiser l’en-tête et le menu Divi, vous devez être en possession des éléments à faire apparaître dans la navigation principale de votre site. Ces éléments peuvent être :

  • des pages,
  • des articles,
  • des liens,
  • des catégories,
  • des étiquettes.

Étape 1 : créer les éléments du menu

La première étape est de créer des pages (accueil, services, contact, à propos etc…) et éventuellement des catégories de blog. Ces éléments devront avoir le statut « publié » pour pouvoir être utilisés au sein de votre menu principal. Vous ne pourrez donc pas ajouter, à votre menu, des pages avec le statut de « brouillon ».

Étape 2 : créer votre menu principal

Rendez-vous à l’onglet Apparence > Menu. Renseignez simplement le nom de votre menu dans le champ dédié et cliquez sur « Créer le menu ».

Créer un menu de navigation WordPress
Créer un menu de navigation WordPress

Une fois votre menu créé, vous allez pouvoir cocher les éléments à ajouter à votre menu. La liste des éléments disponibles se trouve sur la gauche de l’écran. Ces éléments sont classés par typologie (pages, articles, liens personnalisés, catégories).

Cochez simplement les éléments désirés (ceux que vous avez publiés/créés en amont) puis cliquez sur Ajouter au menu.

Étape 3 : organiser la structure du menu principal

Vous pouvez glisser-déposer chaque élément du menu afin de les ré-ordonner. L’élément le plus haut sera l’élément le plus à gauche de votre menu principal – l’élément le plus bas sera l’élément le plus à droite.

Si vous décalez vers la droite l’un de vos éléments, il deviendra alors un sous-élément.

Étape 4 : attribuer un emplacement à votre menu

N’oubliez pas d’attribuer un emplacement à votre menu. Sans cela, votre menu ne sera pas visible côté front (côté visiteur). Cochez la case « Menu Principal ».

Terminez par Enregistrer le menu puis rendez-vous côté front-office pour vérifier comment votre menu apparaît.

Pour mieux comprendre, regardez cette vidéo récapitulative :

Notez : la création d’un menu principal d’un site ne dépend pas d’un thème, c’est une fonctionnalité native de WordPress. Par contre, l’apparence de la navigation principale dépend bien du thème que vous utilisez. Et c’est ce que nous allons voir dans la suite de cet article.

Savez-vous que vous pouvez tester Divi gratuitement ? Rendez-vous sur cette page et cliquez sur « TRY IT FOR FREE »

Maintenant que votre menu principal est créé, vous allez pourvoir le personnaliser.

Insérer son logo dans le menu principal de Divi
Insérer son logo dans le menu principal de Divi

Rendez-vous alors dans l’onglet Divi > Options du Thème > Logo. Cliquez sur Mettre en ligne et choisissez votre image dans la bibliothèque ou téléchargez-la depuis votre ordinateur.

Cette étape est simplissime…

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

À présent, vous avez toutes les cartes en main pour commencer à définir le type d’en-tête que vous préférez.

Rendez-vous à l’onglet Apparence > Personnaliser > En-tête et Navigation > Format de l’En-tête.

Dans le menu déroulant, Divi vous propose 5 types d’en-têtes :

  • Défaut
  • Centré
  • Logo inline centré
  • Slide In
  • Plein Écran

De votre choix découlera des options de configuration différentes que nous verrons en détail.

Menu Divi par défaut
Menu Divi par défaut

Voici à quoi ressemble le menu principal d’un site WordPress qui utilise l’en-tête par défaut de Divi. Le logo est situé à gauche et les éléments qui composent votre navigation se suivent avec un alignement à droite.

Cet en-tête par défaut propose plusieurs options :

Option 1 : « Cacher la barre de navigation si aucun défilement »

Si vous cochez cette option, le menu principal apparaîtra seulement lorsque l’utilisateur descend (scroll) vers le bas de la page.

Lorsque l’internaute est en haut de la page, la navigation disparait.

Cette option peut prêter l’internaute à confusion : s’il n’est pas à l’aise avec internet, il n’aura pas forcément l’idée de scroller votre page pour faire apparaître la navigation et pourrait quitter votre site avant même d’avoir visité une autre page. Cela pourrait alors avoir des conséquences sur votre taux de rebond.

Pour ma part, je ne coche jamais cette option, sauf si des contraintes dues au design me sont imposées.

Option 2 : « Activer la navigation verticale »

navigation verticale Divi
Option de l’en-tête par défaut de Divi : navigation verticale à droite ou à gauche

L’en-tête par défaut permet également d’obtenir une navigation fixe et latérale. Cette option vous permet de placer la navigation latérale à droite ou à gauche. Le rendu est plutôt joli et le logo sera placé en haut de la navigation.

Menu Divi Centré
Menu Divi – Centré

L’en-tête centré affiche le logo au centre de votre page. Les éléments du menu seront centrés juste sous le logo. Ce type design est idéal si vous utilisez un logo-bandeau. Vous pouvez aussi être créatif en préparant une bannière spéciale pour votre en-tête à l’aide d’un logiciel comme PhotoShop ou Affinity par exemple.

L’en-tête centré propose également les mêmes options que l’en-tête par défaut, à savoir :

  • « Activer la navigation verticale » : dans ce cas, le menu latéral ressemblera au menu latéral par défaut excepté que les éléments de la navigation seront centrés au lieu d’être alignés à gauche.
  • « Cacher la barre de navigation si aucun défilement »
Menu Divi - Logo Inline Centré
Menu Divi – Logo Inline Centré

L’en-tête Logo Inline Centré, comme vous pouvez le voir sur la capture d’écran ci-dessus, place votre logo au centre des éléments qui composent la navigation.

Ce genre design peut être valable si les éléments de votre navigation sont en nombre pair et s’ils ont un nombre de caractères plus ou moins similaires. En effet, selon les éléments de votre menu, le logo pourrait ne pas être centré et proposerait alors une incohérence dans l’harmonie du design.

Menu Slide In
Menu Divi – Slide In

L’en-tête Slide In, comme son nom l’indique, propose un menu qui glisse par la droite lorsque l’internaute clique sur l’icône du menu (le hamburger). D’ailleurs, si cet hamburger ne vous plait pas, vous pourrez utiliser un plugin gratuit pour changer son apparence.

Par défaut l’arrière-plan de ce menu est bleu, mais ne vous inquiétez pas, vous pourrez customiser ce menu dans l’onglet Apparence > Personnaliser > En-tête et navigation > Slide In & Paramètres Header plein écran.

menu Slide In Divi
Option de personnalisation du menu Divi Slide In

Dans les options du menu de type Slide In, vous pourrez :

  1. Faire apparaitre ou non la barre de recherche
  2. Définir la largeur du menu
  3. Définir la taille des diverses polices d’écriture
  4. Choisir la police du menu
  5. Sélectionner la couleur d’arrière-plan ainsi que celle des liens du menu.
Menu Plein Écran
Menu Divi – Plein Écran

L’en-tête plein écran de Divi est un en-tête par recouvrement. Lorsque l’internaute clique sur l’icône du menu, l’écran est entièrement recouvert et fait apparaitre les éléments du menu.

Les options de personnalisation sont les mêmes que celles du menu Slide In. Vous pourrez également décider de l’opacité de la couleur d’arrière-plan.

Besoin de plus de ressources sur Divi ? Visitez le blog de ElegantThemes qui regorge d’idées et de tutos !

Maintenant que vous avez choisi le type d’en-tête, vous allez pouvoir définir l’apparence des éléments de votre menu.

La plupart des options que proposent Divi se trouvent dans l’onglet Apparence > Personnaliser > En-tête et Navigation > Barre de Menu Primaire. À partir de cet onglet, vous pourrez :

  • définir le menu en mode « pleine largeur »
  • cacher l’image du logo dans le menu
  • définir la hauteur du menu
  • définir la hauteur du logo
  • choisir la taille de la typo ainsi que l’espacement des lettres
  • définir la police de caractère ainsi que son apparence (gras, italique, majuscule etc.)
  • définir la couleur des éléments de votre menu (couleur du texte, du lien actif, couleur des sous-éléments)
  • choisir une couleur d’arrière-plan pour le menu principal ainsi que pour les menus déroulants
  • choisir la couleur de la ligne du menu déroulant ainsi que l’animation de ce menu.

Pour les en-têtes de type « Slide In » et « Plein Écran », vous trouverez certaines de ces options dans l’onglet Apparence > Personnaliser > En-tête et Navigation > Slide In & Paramètres Header Plein écran.

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Bien que Divi permette de facilement définir le design de votre site à l’aide de ses options, il est possible que vous souhaitiez aller au-delà. Voici quelques astuces qui pourraient vous intéresser :

Astuce n°1 : supprimer la ligne grise sous le menu

Vous l’avez remarquée n’est-ce pas ? Cette fine ligne grise qui délimite le menu de Divi… Vous souhaitez vous en débarrasser ? C’est tout simple, allez à l’onglet Apparence > Personnaliser > CSS additionnel et ajoutez ce simple bout de code :

/* supprimer la ligne grise sous le menu principal de Divi */
#main-header {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

Toujours dans l’onglet Apparence > Personnaliser > CSS additionnel vous pourrez ajouter ce code. Notez que vous pouvez l’adapter aux besoins de votre image d’arrière-plan :

/* ajouter une image en fond du menu principal */

#main-header {
background-size: initial;
background-repeat: no-repeat;
background-image: url(ajoutez ici l'URL de votre image) !important;
background-position: center;
}

Avec ce simple bout de code CSS, vous pourrez afficher une ligne qui apparait au survol de chaque éléments qui composent le menu de Divi :

/* ajouter une ligne au survol des éléments du menu */

#top-menu .current-menu-item a::before {
-webkit-transform: translateY(15px);
transform: translateY(15px);
opacity: 1.0;
}

#top-menu li a:hover:before {
-webkit-transform: translateY(15px);
transform: translateY(15px);
opacity: 1;
}

#top-menu li a:before {
content: '';
position: absolute;
top: 3px;
left: 0;
background: #666666; /* changez le code couleur HTML à votre convenance */
width: 100%;
height: 2px;
-webkit-transform: translateY(24px);
transform: translateY(24px);
opacity: 0;
transition: 0.3s ease;
}

Cette ligne, qui apparait au survol de la souris, peut-être modifiée facilement avec du CSS… Pour plus de possibilités, voici un tutoriel qui propose 3 façons originales d’animer les éléments de votre menu Divi au survol de la souris.

Insérer des images dans le menu principal de Divi
Voici un exemple de menu principal (navigation) contenant des images pour illustrer mes catégories de blog

Pour ajouter des images dans le méga menu de Divi, rendez-vous sur ce tutoriel ou bien consultez la documentation officielle concernant la création d’un méga menu simple (sans images).

C’est très facile de supprimer le menu principal d’une page ou d’un site fait avec Divi. En deux clics ou un peu de CSS, vous supprimer son affichage sur une seule page ou sur le site entier. Découvrez le tutoriel pour masquer le menu de Divi.

Pour réaliser cela, vous n’aurez pas vraiment besoin de connaissance. Vous pourrez insérer un module Menu Plein Ecran n’importe où dans votre page et le fixer en haut de l’écran lorsque l’internaute scrolle vers le bas. Découvrez comment fixer le menu principal au scroll ici.

Dans le même esprit que le tuto précédent, vous pourrez facilement fixer le menu principal de votre site en bas de l’écran. C’est très simple : suivez ce tuto pour obtenir un Fixed Bottom Menu.

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Quelques fois, des simples petits bouts de code CSS ne suffisent pas pour parvenir à ce que l’on souhaite… Voici quelques autres pistes à explorer :

  • Mhmm – Mighty Header & Menu Maker : ce plugin pour Divi vous propose de faire des choses extraordinaires. Vous pourrez choisir parmi une dizaine d’en-têtes Divi différents. De nombreuses options vous permettront de changer l’icône de l’hamburger, de créer des mégas menus et plus encore ! Voir un exemple sur la vidéo ci-dessus | Découvrir le plugin.
  • Intégrer le Divi Builder dans le Header de Divi : PavéNum propose un tuto pour intégrer l’utilisation du Divi Builder dans le header de Divi grâce à des hooks. Je vous invite à visiter cette page si vous souhaitez en savoir davantage.
  • Quad Menu : ce plugin vous permet de créer un méga menu sur mesure pour vos projets Divi. Découvrir le plugin.
  • Ajouter des icônes dans le menu de Divi : Michèle de Divi Soup vous propose de télécharger gratuitement un layout d’en-tête personnalisé avec des icônes Font Awesome. À télécharger ici.
  • Utiliser l’en-tête par défaut de Divi en même temps que l’en-tête Slide In : Michèle de Divi Soup (à nouveau !) vous propose un tutoriel pour coupler deux types de menu en même temps. Découvrir le tutoriel.
customisation du menu Divi

Pin It on Pinterest

Shares
Share This