Découvrez les bons plans & les réductions Alpa14

Tuto Divi : Comment créer facilement un Méga Menu WordPress ?

Alpa14 les tutoriels faciles !

Catégories

Comment réaliser un Méga Menu WordPress pour un header plus lisible ?

Dans ce tutoriel aujourd’hui, je vous explique comment réaliser un méga-menu avec Divi.

Un méga menu peut être intéressant dans le cas où vous avez plusieurs menus déroulants. Il permet au visiteur de dérouler tous les menus en un seul menu assez large et de voir en un seul coup d’œil tous les produits et options disponibles. D’où ce nom de méga menu

Pour cet exercice nous utiliserons Divi et son très pratique Divi Builder.

Pour notre exercice, nous partirons d’un site fictif d’agence de voyages proposant des voyages dans différents régions du monde. Prétextes pour nous de créer 4 menus déroulants :)

Licence Divi
.

Etapes pour la création de votre Méga Menu

1) Votre menu

Le Méga Menu va donc servir à regrouper plusieurs menus déroulants en 1 seul, chaque menu déroulant occupera 1 colonne du Méga Menu. Pour que vous puissiez créer un Méga Menu vous devez disposer d’au moins de 2 menus déroulants à regrouper.
Rendez-vous dans le menu WP de gauche « Apparence > Menus ».

 

4 menus déroulants

2) Création d’un lien d’entête du Méga Menu, non cliquable

Nous allons maintenant créer un lien non cliquable (sans adresse) qui déclenchera l’apparition du Méga Menu au passage de la souris.
Toujours dans « Menus », cliquez à gauche sur « Liens personnalisés ». Dans texte du lien entrez les mots désirés, dans notre cas ici, nous écrirons « Nos voyages » plus que ce Méga Menu présentera un ensemble de destinations. (Dans le tuto vidéo, je l’avais appelée « Nos Produits » mais « Nos voyages » est plus approprié, donc ne soyez pas surpris, si vous regardez la vidéo en même temps. ?)
Puis dans URL placez un # afin de simuler un lien qui aura pour effet s’il est cliqué de ne pas conduire l’internaute ailleurs.

Cliquez ensuite sur ajouter « Ajouter au menu ». Votre nouveau lien viendra se placer tout en bas de la liste des liens /pages de droite.

 

Création lien non cliquable

3) Placer les sous-menus déroulants sous le lien principal

Placez ce nouveau lien en tête de vos menus déroulants (par glisser/déposer), puis faites glisser d’un cran vers la droite le mot entête de chacun de vos menus déroulant sous ce lien principal que vous venez de créer. Dans notre cas ici nous ferons glisser d’un cran vers la droite sous « Nos voyages » le menu déroulant Europe, puis Afrique, puis Amérique du Sud et enfin Asie.

Ces 4 sous-menus sont maintenant des « menus fils » du lien « Nos voyages ».

4 sous menus déroulants
MalerLite
Menus déroulants fils

 4) Activer les classes CSS

Toujours dans « Menus », cliquez en haut à droite de votre écran sur « Options de l’écran » et cochez la case « Classes CSS ».
Ensuite allez à la hauteur de votre lien déclencheur de votre Méga Menu, (dans notre exemple ce sera « Nos voyages »), puis cliquez sur la flèche du bout de ligne qui pointe vers le bas (le menu se déroule) puis dans la case « Classes CSS (facultatives) » écrivez « mega-menu ».

Cliquez ensuite en bas à droite sur « Enregistrer le menu ».

Voilà votre méga-menu est désormais fonctionnel !

Cochez classe CSS
écrire mega-menu dans case CSS

5) Apporter de la mise en forme à votre header et à votre méga menu

Si vous souhaitez apporter du style et modifier l’esthétisme de votre Méga Menu, surtout en termes de couleurs, rendez-vous dans le menu de gauche WordPress à Divi > Personnaliseur de thème.

Choisissez en suite dans la marge de gauche « Entête de navigation » puis « Barre de menu primaire », ici vous pourrez modifier certains paramètres de votre header selon vos goûts.

 

Licence Divi
Mise en forme du header

Vous serez peut-être intéressé par les articles suivants :

Thème Divi : Personnaliser le header

Thème Divi : Personnaliser le header

Dans ce tutoriel vidéo, je vous montre comment personnaliser l’en-tête d’un site Divi.
Cet en-tête changera en scrollant, lorsque la page défile. Le logo, le menu et le fond du header changeront de couleur attirant ainsi davantage l’attention du visiteur.
Cet en-tête comprendra également un bouton d’appel à l’action incitant à davantage d’engagement.
Grâce au constructeur de thèmes (le thème Builder) du thème Divi, nous pouvons créer des en-têtes personnalisés au design poussé.

lire plus
Ajouter un footer WordPress Divi personnalisé

Ajouter un footer WordPress Divi personnalisé

Ajouter un footer WordPress ? Rien de plus simple grâce au Thème Builder de Divi. Faire un pied de page WordPress global devient un jeu d’enfant ! C’est ce que je vous montre dans ce tutoriel Vidéo Divi, comment créer un footer WordPress personnalisé en le désignant de manière très fine avec Divi Visual Builder d’Elegant Themes.

lire plus
Ajouter une bannière WordPress « Hero Image » optimisée ⏱️

Ajouter une bannière WordPress « Hero Image » optimisée ⏱️

Dans ce tutoriel Divi WordPress, je vous montre où trouver une image de qualité gratuite pour un usage commercial, je vous montre également comment la choisir et l’optimiser au bon format. Je vous apprends ensuite comment designer ce bandeau large « Hero Image » grâce au Divi Visual Builder du thème Divi de la société Elegant Themes.

lire plus