fbpx

Bons plans Alpa14 | Des offres et des réductions intéressantes à découvrir 😃

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

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

Par où commencer pour créer son site Internet ?

Toute personne disposant d’un ordinateur et d’une connexion Internet peut créer son propre site Web. Il existe de nombreux outils en ligne qui facilitent le processus. Les sites Web peuvent être utilisés pour promouvoir votre entreprise, communiquer avec les clients et partager vos idées.

Dans cette vidéo qui est qui est une retransmission d’un Webinar, Léopoldine la fondatrice de la société Webmyday, explique les différentes étapes à suivre et les bonnes questions à se poser pour créer son premier site web professionnel. Elle passe en revue les services et les outils nécessaires à la conception Web et propose des conseils pour créer un site Web efficace.

Cette vidéo est une excellente ressource pour les débutants qui souhaitent en savoir plus sur les étapes à suivre dans la conception Web ou pour les propriétaires d’entreprise qui ont besoin de créer un site Internet pour leur activité. 

Sommaire de la vidéo

0:00 Introduction
2:41 La formation Webmyday qu’est-ce que c’est ?
6:22 Faire ou faire faire son site Internet ?
16:31 Solutions pour faire son site soi-même
18:24 Solutions pour faire faire son site
22:33 Coût d’un site Internet
25:55 Un CMS, qu’est-ce que c’est ?
26:46 Les CMS les plus connus
32:57 Le nom de domaine
33:39 L’ hébergement
34:54 Quelques hébergeurs
38:35 4 choses que doit comprendre votre hébergement
40:01 WordPress qu’est-ce que c’est ?
40:29 Différence entre WP.com et wp.org
43:00 Les différentes composants de WP
46:33 En résumé les étapes pour travailler avec WordPress
47:47 Conclusion

Sommaire de la vidéo

Vous serez peut-être également intéressé par ces articles …

Enregistrer son écran pour créer des formations

Enregistrer son écran pour créer des formations

Vous recherchez un logiciel de capture pour filmer l’écran de votre PC ou de votre Mac ? Vous souhaitez créer des démos de logiciels, des démos de jeux, des tutoriels ou des vidéos de formation d’aspect professionnel ? Alors vous avez sans doute besoin de DemoCreator de Wondershare !

lire plus
Divi Supreme : Module Text Path

Divi Supreme : Module Text Path

Divi Supreme possède un excellent nouveau module intitulé Text Path qui vous permet de créer de magnifiques chemins de texte. Avec ce module, vous pouvez facilement créer des motifs et des dessins complexes dans votre texte.

lire plus
Créer un pop-up sur un site Divi

Créer un pop-up sur un site Divi

Ce tutoriel vous propose une solution simple et pratique pour créer un pop-up. En effet, je vous présente un plugin gratuit pour Divi intitulé « Popups for Divi » qui vous permettra de transformer toute section de votre site web en fenêtre pop-up.

lire plus
Offrez-moi un café! Merci :)