Comment créer un méga menu esthétique sur WordPress : guide simple

Lors de la conception d'un site WordPress, il est essentiel de soigner l'esthétique du méga menu. Ceci est particulièrement important pour e-commerce ou les sites de grandes entreprises qui souhaitent présenter une large gamme de produits ou de catégories.

Un méga menu WordPress permet d'organiser ces catégories pour une navigation simplifiée. Comment ? Un méga menu WordPress est idéal pour organiser et afficher un grand nombre de contenus dans un menu unique et intuitif. Il permet de disposer les éléments du menu sur plusieurs colonnes ou lignes, offrant ainsi aux utilisateurs un accès rapide aux différentes sections de votre site, sans avoir à naviguer indéfiniment entre les pages.

Cela peut considérablement améliorer l'expérience utilisateur sur votre site en rendant la navigation plus fluide et accessible. Ce guide vous explique pas à pas comment ajouter un méga menu à votre site WordPress, permettant ainsi à chacun de trouver facilement ce qu'il cherche.

Comprendre le méga menu dans WordPress ?

Vous vous demandez peut-être ce qu'est un méga menu dans WordPress et pourquoi il est si utile ? Un méga menu WordPress permet aux propriétaires de sites WordPress d'ajouter diverses colonnes, du contenu multimédia et des options de personnalisation à l'apparence de leur menu. Auparavant, la navigation dans les méga menus traditionnels était complexe, mais avec le temps, il est devenu plus facile de structurer et d'organiser plusieurs catégories grâce à cette fonctionnalité dans WordPress.

WordPress intègre généralement un outil de création par glisser-déposer qui simplifie la création de différents types de menus, tels que des menus déroulants, des menus d'en-tête, etc. De plus, des extensions permettent de personnaliser les menus de navigation des thèmes WordPress.

Mais si votre site propose beaucoup de contenu, un menu classique risque de ne pas suffire. Dans ce cas, un méga menu est une excellente solution. Grâce au méga menu, vous pouvez ajouter des menus déroulants à plusieurs colonnes à votre menu WordPress, ce qui vous permet d'organiser votre contenu sous différents titres et sous-titres. Ainsi, les visiteurs peuvent trouver rapidement ce qu'ils cherchent sans se perdre.

Problème similaire : Comment résoudre le problème « WordPress ne peut pas ajouter de page au menu » ?

Comment créer un méga menu esthétique dans WordPress

Créer un méga menu esthétique sur WordPress n'a rien de sorcier. Il vous suffit d'installer l'extension Max Mega Menu, et votre méga menu sera prêt.

Toutefois, si vous maîtrisez les aspects techniques de la création d'un méga menu, vous pouvez également le créer manuellement. Dans cette section, nous aborderons à la fois le plugin et la méthode manuelle pour un résultat optimal.

Alors, commençons :

Comment créer un méga menu de type « mega menu » dans WordPress avec le plugin

La façon la plus simple d'ajouter un méga menu à votre site WordPress est d'utiliser l'extension Max Mega Menu. Cet outil vous permet d'enrichir vos menus en y intégrant du contenu comme des vidéos, des galeries d'images, des barres de recherche, etc.

Avec Max Mega Menu, vous pouvez créer des menus organisés, visuellement attrayants et utiles pour vos visiteurs.

Étape 1 : Installer et configurer le plugin Max Mega Menu

Pour commencer, connectez-vous à votre tableau de bord WordPress et accédez à Extensions → Ajouter. Dans la barre de recherche, saisissez « Max Mega Menu », puis cliquez sur Installer maintenant et Activer.

Conseil rapide: Avant de vous lancer, assurez-vous d’avoir publié toutes les pages essentielles et d’avoir créé un menu de navigation personnalisé avec celles-ci.

Une fois activé, accédez au Méga Menu dans la barre latérale gauche pour accéder aux paramètres. Pour définir l'emplacement du menu, suivez ces étapes :

• Allez dans Apparence → Menus.
• Sélectionnez Emplacements de menu et cliquez sur Ajouter un autre emplacement de menu.
• Choisissez l'emplacement où vous souhaitez que votre menu apparaisse (par exemple, en-tête, pied de page, barre latérale).
• Attribuez votre menu personnalisé, puis cliquez sur Ajouter un emplacement de menu.

Dans les paramètres généraux, activez le méga menu et définissez son mode d'ouverture. Vous pouvez choisir parmi les options suivantes :

• Intention de survol: S’ouvre après un léger délai, ce qui évite les clics accidentels.
• Survol: S'ouvre instantanément au survol de la souris, pour une expérience utilisateur fluide.
• Clic: Nécessite un clic ou un appui, idéal pour les appareils à écran tactile.

Si vous choisissez « Clic », explorez les options sous Avancé → Comportement de l’événement de clic pour contrôler ce qui se passe lors des clics suivants.

Vous pouvez également ajouter des effets d'animation dans les d'effet . Les options incluent le fondu, le glissementou le fondu ascendant, avec des réglages de vitesse allant de rapide à lente.

Étape 2 : Personnaliser la mise en page et l’apparence du menu

Max Mega Menu propose un thème par défaut, mais vous pouvez également créer le vôtre. Pour personnaliser son apparence :

1. Accédez à Thèmes de menu dans les paramètres de Max Mega Menu.
2. Cliquez sur l'icône à trois points pour sélectionner le thème et choisissez d' ajouter un nouveau thème.
3. Dans les paramètres généraux, personnalisez des éléments tels que le style des flèches, la hauteur des lignes et l'ombre du menu.

Dans la barre de menus, personnalisez l'apparence du menu principal en ajustant la hauteur, la couleur d'arrière-plan, le remplissage et en ajoutant des bordures. Pour chaque élément de menu, définissez des options telles que :

• Alignement: Positionnez les éléments à gauche, au centre ou à droite.
• Style de police: Adaptez la typographie au design de votre site.
• Arrière-plan et espacement: Définissez les couleurs d’arrière-plan, les marges, le remplissage et les bordures pour un rendu soigné.

Étape 3 : Ajouter du contenu à votre menu

L'ajout de contenu est simple grâce à l'interface glisser-déposer de Max Mega Menu. Vous pouvez inclure des liens textuels, des produits WooCommerce, des images et même des filtres de recherche.

1. Allez dans Apparence → Menus pour créer ou modifier un menu.
2. Dans les paramètres du menu Max Mega, à gauche, cochez la case Activer pour l'emplacement choisi.
3. Ajoutez des pages, des articles, des catégories et des produits à la structure du menu.
4. Faites glisser les éléments pour les organiser sur plusieurs niveaux.

Pour créer un méga menu, survolez une page et cliquez sur « Méga menu ». Choisissez le mode d'affichage « Grille » pour une organisation en plusieurs colonnes ou « Standard » pour des menus plus simples. Pour une présentation plus attrayante, utilisez des widgets comme une barre de recherche, une galerie d'images ou un filtre de produits. Vous pouvez même ajouter des icônes à chaque élément en les sélectionnant dans la « Icônes » .

Après avoir tout personnalisé, cliquez sur Enregistrer le menu pour que votre méga menu soit en ligne !

Lire : Comment migrer de Drupal vers WordPress : Guide complet

Comment créer manuellement un méga menu dans WordPress

Dans la première méthode, nous avons vu comment créer un méga menu dans WordPress à l'aide de l'extension Max Mega Menu. Nous allons maintenant explorer la création d'un méga menu esthétique dans WordPress en utilisant du code CSS.

est indispensable du CSS pour obtenir des résultats optimaux.

Étape 1 : Configurez votre environnement de test

Avant d'apporter des modifications à votre site, il est préférable de travailler dans un environnement sécurisé où vous pouvez expérimenter sans impacter le site en production. Vous pouvez utiliser n'importe quel hébergement WordPress géré proposant un outil de test qui vous permet de créer une copie de votre site web pour tester les modifications au préalable.

Pour créer un environnement de test :

1. Connectez-vous à hPanel et sélectionnez Sites Web.
2. Choisissez votre domaine et cliquez sur Gérer.
3. Allez dans WordPress → Staging dans le menu de gauche.
4. Cliquez sur « Créer un environnement de test » sous l'onglet « Environnement de test » et suivez les instructions pour configurer un sous-domaine pour votre environnement de test.

Apprenez : Comment supprimer les fichiers CSS inutilisés dans WordPress ?

Étape 2 : Accédez à la feuille de style de votre thème et modifiez-la

Une fois votre site de test prêt, vous pouvez modifier en toute sécurité la feuille de style de votre thème pour personnaliser votre menu.

Remarque: Si possible, créez un thème enfant au lieu de modifier le thème principal afin d’éviter de perdre vos personnalisations lors de la mise à jour du thème.

Pour accéder à la feuille de style dans le gestionnaire de fichiers de votre hébergement :

1. Accédez à Fichiers → Gestionnaire de fichiers dans hPanel.
2. de votre domaine public_html , puis accédez à Staging → wp_content → themes.
3. Ouvrez le dossier de votre thème et double-cliquez sur style.css pour le modifier.

Ajoutez ce code pour rendre les éléments du sous-menu visibles au survol de la souris :

.main-navigation ul: hover li ul,.main-navigation ul: hover li ul li ul {display: inherit;}

Apprenez comment déployer un site de test en production sans écraser la base de données dans WordPress.

Étape 3 : Personnalisez votre méga menu

À présent, donnons un style unique au méga menu. Voici quelques extraits de code CSS pour vous aider à démarrer :

Créez des colonnes dans le méga menu:

.mega-menu li.mega-menu-column {width: 25%; /* pour une mise en page à 4 colonnes */float: left;padding: 10px;}

Personnalisez la couleur, le remplissage et le style du texte des éléments de menu:

.mega-menu ul.mega-sub-menu li a {color: #555;padding: 8px 15px;display: block;text-decoration: none;}

Optimisation pour mobile:

@media screen and (max-width: 767px) {.mega-menu li.mega-menu-column {width: 100%;float: none;}}

Ces extraits de code constituent un excellent point de départ, mais veillez à les tester et à les adapter au besoin au design de votre site. Une fois vos personnalisations terminées, vous pouvez déployer vos modifications du site de test vers votre site en production.

Apprenez : Comment résoudre les problèmes de requêtes média dans WordPress ?

Meilleurs plugins de méga menu pour créer un méga menu esthétique sur WordPress

Nous sommes convaincus que vous possédez désormais toutes les connaissances nécessaires pour créer un méga menu dans WordPress, que ce soit à l'aide d'une extension ou de code CSS. Cependant, l'utilisation d'une extension reste de loin la meilleure solution : simple, rapide et idéale pour les débutants.

C’est pourquoi nous avons sélectionné quelques plugins de qualité supérieure que vous pouvez utiliser pour créer un méga menu plus esthétique pour votre site WordPress, en plus du plugin Max Mega Menu.

UberMenu

UberMenu est un plugin de choix pour les utilisateurs WordPress souhaitant ajouter des méga-menus et des menus déroulants flexibles et responsifs. Ce plugin premium vous permet de contrôler entièrement les transitions, les polices, l'orientation du menu (horizontale ou verticale) et la couleur de fond. De plus, ses nombreuses options de personnalisation sont gérées depuis un tableau de bord d'administration intuitif.

Ici, vous pouvez définir la largeur des colonnes, ajouter des widgets, des codes courts et du code HTML personnalisé, et visualiser les modifications en temps réel grâce au mode aperçu en direct. UberMenu est un outil puissant pour tous ceux qui souhaitent créer une mise en page de menu attrayante et dynamique.

Menu Quad

QuadMenu est une extension WordPress open source pour les méga-menus, riche en options et thèmes. La version gratuite permet d'ajouter un widget de navigation, de définir des points de rupture personnalisés pour le repliement du menu et de créer différents styles de menus : hors-canvas, fixe, horizontal et vertical. Cette flexibilité facilite la conception d'une navigation adaptée au style de votre site, sans avoir à opter pour une version premium.

GutenKit

GutenKit est une extension Gutenberg performante qui simplifie la création de méga menus à l'aide de blocs. Elle propose de nombreux modèles et motifs prédéfinis, vous permettant de choisir instantanément un design et de le personnaliser à votre guise.

Grâce à son contrôle total sur le contenu, le style et les personnalisations avancées, l'interface conviviale de GutenKit en fait un excellent choix pour ceux qui souhaitent créer et peaufiner des sites web dans un éditeur de blocs.

Outre sa fonctionnalité de méga menu, il offre plus de 60 blocs et plus de 25 modules pour des personnalisations polyvalentes au sein de Gutenberg, une alternative idéale à ElementsKit pour les sites basés sur des blocs.

JetMenu

JetMenu est une extension premium pour WordPress permettant de créer des méga menus interactifs avec des options riches en contenu telles que des images, des vidéos et de l'audio. Pour 43 $ par an, vous bénéficiez d'un éditeur glisser-déposer et de plusieurs mises en page de menu, notamment hamburger, horizontale et verticale.

L'une de ses caractéristiques remarquables est le gestionnaire de préréglages, qui permet d'enregistrer plusieurs modèles pour différents menus – idéal pour les sites nécessitant des options de navigation flexibles et attrayantes.

Menu Héros

Hero Menu de Hero Plugins est une solution premium exceptionnelle pour créer des menus WordPress personnalisés. Son éditeur glisser-déposer intuitif et son interface à code couleur facilitent l'organisation et la visualisation de la hiérarchie des éléments de menu. Ajouter des éléments spéciaux comme un logo, une barre de recherche ou des icônes se fait en un clic.

Hero Menu propose également plusieurs styles de menus et 60 combinaisons de couleurs prédéfinies, vous faisant gagner du temps lors de la conception. Les menus créés avec Hero Menu sont entièrement responsifs et compatibles avec WooCommerce, ce qui en fait un excellent choix pour les sites e-commerce.

De plus, il a été testé pour fonctionner parfaitement avec les thèmes WordPress populaires comme Divi et Avada, assurant ainsi une intégration harmonieuse avec le design de votre site.

Conclusion

Maintenant que vous savez comment créer un méga menu dans WordPress (même si votre thème n'en propose pas), la navigation sur votre site riche en contenu devient un jeu d'enfant. Les méga menus sont parfaits pour organiser de grandes quantités de contenu, permettant aux visiteurs de trouver plus facilement ce qu'ils cherchent et améliorant ainsi l'expérience utilisateur globale.

Avant de lancer votre site WordPress, il est essentiel de veiller à ce que la navigation soit fluide et intuitive. Pour les sites e-commerce ou les sites web comportant de nombreuses pages, un méga menu peut faire toute la différence. Contrairement aux menus classiques, les méga menus permettent d'organiser des informations complexes de manière claire et attrayante.