Comment ajouter un méga menu à WordPress (+5 meilleurs plugins)

Les menus jouent un rôle important dans la conception et la fonctionnalité de votre site Web. Ils aident les visiteurs à naviguer entre vos pages et peuvent améliorer la convivialité globale. Pourtant, lorsque vous avez beaucoup de contenu, il peut être difficile de trouver comment l'afficher sans qu'il ait l'air encombré ou chaotique.

C'est là que les méga menus entrent en jeu. Un méga menu WordPress peut donner à votre site Web une apparence plus professionnelle et aider les gens à trouver plus facilement le contenu qu'ils recherchent. De plus, il existe plusieurs méthodes que vous pouvez utiliser pour en ajouter une à votre site Web.

Dans cet article, nous expliquerons ce qu'est un méga menu et les avantages d'en utiliser un dans WordPress. Ensuite, nous vous guiderons à travers vos options pour en créer un et explorerons cinq des meilleures options de plug-in de méga menu.

Qu'est-ce qu'un méga menu dans WordPress ?

Votre menu WordPress est la structure que vous utilisez pour organiser et afficher les pages de votre site Web. Il se trouve généralement en haut du site, bien qu'il puisse également être sur le côté ou affiché d'une autre manière unique.

Pour accéder au système de menu intégré, vous pouvez commencer par vous connecter à votre site WordPress. Ensuite, depuis votre tableau de bord d'administration, accédez à Apparence → Menus .

Par défaut, WordPress utilise des menus standard, qui affichent une liste de pages, parfois avec des listes déroulantes à une colonne. Il n'y a pas d'informations supplémentaires ou de contenu comme des images, des descriptions, etc. - c'est juste une série de listes. C'est généralement assez simple et direct, mais cela vous limite en ce qui concerne le nombre de pages ou le volume ou les informations que vous pouvez inclure. Voici un exemple de WooCommerce :

Un méga menu est un type de menu déroulant qui permet aux utilisateurs d'accéder à une grande quantité de contenu en un seul endroit. Les méga menus sont souvent utilisés sur les sites Web de commerce électronique et deviennent de plus en plus populaires sur d'autres types également. Vous pouvez voir un exemple sur le site Nalgene, qui présente des photos de produits, des curseurs et d'autres contenus dans un style plus horizontal :

La principale différence est qu'un méga menu comporte généralement plusieurs colonnes de contenu, alors qu'un menu déroulant traditionnel ne comporte qu'une seule colonne. Cela permet un menu beaucoup plus robuste et complet, ce qui peut être particulièrement utile sur les sites Web contenant beaucoup d'informations.

Pourquoi utiliser un méga menu dans WordPress ?

L'un des avantages de l'utilisation d'un méga menu est qu'il peut réduire le nombre de clics nécessaires pour accéder à un contenu particulier. C'est idéal pour les visiteurs qui recherchent quelque chose de spécifique sur votre site Web, mais cela améliore également l'expérience utilisateur pour les nouveaux visiteurs en les aidant à explorer votre site plus efficacement.

Les méga menus peuvent également être utilisés pour améliorer l'apparence de votre site Web et même promouvoir un contenu spécifique ou encourager les actions que vous souhaitez que les visiteurs entreprennent. De plus, ils sont hautement personnalisables, de sorte qu'ils peuvent jouer avec le reste de votre marque pour offrir une expérience transparente et visuellement attrayante.

Comment créer un méga menu WordPress

Il existe plusieurs façons de créer un méga menu dans WordPress. Une option consiste à le faire manuellement, en ajoutant un code personnalisé. L'autre option (plus rapide et plus facile) consiste à utiliser un plugin. Voyons comment ajouter un méga menu à WordPress en utilisant ces deux méthodes.

Créer un méga menu manuellement (sans plugin)

Si vous êtes à l'aise avec les fichiers de votre site, cela peut être une bonne option pour créer quelque chose de très unique.

Avant de faire cela, il est important de sauvegarder votre site WordPress. Vous pouvez également envisager de créer un site intermédiaire pour créer et tester votre méga menu avant de le mettre en ligne. Cela vous aidera à éviter tout problème qui interrompt les fonctionnalités de votre site en ligne.

Tout d'abord, accédez à Apparence → Menus dans votre tableau de bord WordPress et nommez votre menu.

Cliquez sur le bouton Créer un menu . Faites glisser et déposez les pages que vous souhaitez inclure dans le méga menu, en les indentant en tant que sous-menus si nécessaire.

Lorsque vous avez terminé, vous pouvez sélectionner Enregistrer le menu .

Ensuite, accédez au gestionnaire de fichiers de votre cPanel ou utilisez un client FTP (File Transfer Protocol) pour vous connecter aux fichiers de votre site Web. Trouvez la feuille de style de votre thème en allant dans / wp-content → /themes → /your-theme-or-child-theme → /style.css . En bas, ajoutez la ligne de code suivante :

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

Cela fera apparaître vos éléments de sous-menu lorsque quelqu'un survolera un élément de niveau supérieur. Maintenant, nous allons personnaliser le code pour le rendre un peu plus attrayant visuellement, en veillant à ce que chaque élément de sous-niveau s'affiche en pleine largeur, avec des sections d'éléments apparaissant les unes à côté des autres. Ajoutez ce code :

 .main-navigation { position: relative; } .main-navigation li { position: static; } .main-navigation ul li:hover ul { display: inherit; position: absolute; left: 0; right: 0; width: 100%; } .main-navigation ul li:hover ul li ul { display: inherit; position: relative; left: 0; } .main-navigation ul li:hover ul li { float: left; position: static; display: block; padding-top: 1em; } .main-navigation ul li:hover ul li ul li { float: none; padding-top: 0; }

Vous pouvez ensuite jouer avec le style pour lui donner l'apparence que vous souhaitez, en accord avec votre marque et le reste de votre site. Par exemple, vous voudrez peut-être changer la couleur d'arrière-plan de votre méga menu ou mettre en gras certains éléments. Vous pouvez également ajuster l'espacement des colonnes ou ajouter des éléments supplémentaires comme des photos. Si vous êtes développeur ou avez une certaine expérience du code, vous pouvez créer votre méga menu comme vous le souhaitez !

Vous voulez un guide plus détaillé ? Tuts+ propose une procédure pas à pas complète.

Une autre option pour créer un méga menu sans plugin consiste à vérifier les options intégrées de votre thème. Certains, comme le thème Hestia, incluent par défaut des options de méga menu. Ce n'est pas toujours le cas, cependant.

Créer un méga menu avec un plugin WordPress

Si vous n'êtes pas à l'aise pour éditer les fichiers de votre site ou si votre thème n'offre pas d'options de méga menu intégrées, une autre méthode que vous pouvez utiliser pour créer un méga menu dans WordPress consiste à utiliser un plugin. Il existe de nombreuses options disponibles, dont nous parlerons dans la section suivante.

Bien qu'il s'agisse d'une option plus sûre que d'en créer un manuellement, vous devez toujours sauvegarder votre site WordPress avant d'apporter des modifications.

Les caractéristiques et fonctionnalités spécifiques du plugin varient en fonction de l'outil que vous décidez d'utiliser. Mais globalement, le concept sera le même.

Nous utiliserons Max Mega Menu comme exemple. Pour commencer, vous pouvez installer et activer le plugin sur votre site WordPress.

Ensuite, vous devrez activer la fonctionnalité de méga menu en accédant à Apparence → Menus . Vous pouvez choisir l'emplacement souhaité pour votre menu, puis cliquer sur la case à côté de Activer.

Enregistrez vos modifications lorsque vous avez terminé. Pour personnaliser l'apparence et les paramètres de votre méga menu, vous pouvez accéder à Mega Menu → Thèmes de menu .

Ici, vous trouverez une variété d'options pour styliser le menu. Vous pouvez modifier le type de menu ainsi que son apparence et ses fonctionnalités.

Cinq meilleurs plugins de méga menu WordPress

Si vous décidez d'utiliser un plugin WordPress de méga menu, vous avez le choix entre de nombreuses options. Lorsque vous les recherchez, il est important de tenir compte des fonctionnalités spécifiques que vous recherchez ainsi que de votre budget. Dans cet esprit, examinons en détail cinq des meilleurs plugins de méga menu WordPress.

1. Max Méga Menu

Max Mega Menu est un plugin incroyablement populaire qui vous permet d'ajouter facilement des menus personnalisables de haute qualité à votre site WordPress. Il comprend un générateur de glisser-déposer facile à utiliser. Il prend également en charge plusieurs méga menus pour divers emplacements sur votre site.

Principales caractéristiques de Max Mega Menu :

• Plusieurs emplacements de menu configurables individuellement
• Un constructeur de mise en page de grille
• Survol du menu et options de transition
• Un constructeur par glisser-déposer
• Codes abrégés
• Icônes des éléments de menu
• Un champ de recherche
• Logos des menus

Avantages de Max Mega Menu :

• Des options gratuites et premium sont disponibles.
• C'est léger, avec un code propre.
• Il inclut la prise en charge de WooCommerce et des téléchargements numériques faciles.
• Vous pouvez placer des méga menus à plusieurs endroits.
• Les widgets vous permettent d'ajouter des cartes, des formulaires de contact, etc.
• Vous pouvez également créer des méga menus à partir de zéro ou utiliser vos menus existants.
• La navigation au clavier permet une meilleure accessibilité.

Inconvénients de Max Mega Menu :

• Les options de personnalisation avancées ne sont disponibles qu'avec une licence pro.
• Il n'y a pas d'essai gratuit pour les plans premium.

Facilité d'utilisation :

Max Mega Menu est très facile à utiliser. Il convertit automatiquement les menus existants en méga menus. Il a une interface conviviale qui est simple à naviguer. Une licence pro comprend également des mises à jour et une assistance prioritaire.

Tarification :

Max Mega Menu propose une version gratuite avec des options de personnalisation limitées. Les plans Pro avec des fonctionnalités avancées commencent à 29 $ pour une licence de site unique. Cela comprend également une année de soutien.

2. QuadMenu

QuadMenu est un autre plugin de méga menu populaire qui est facile à utiliser quel que soit votre niveau d'expérience. L'outil flexible comprend un générateur de glisser-déposer intuitif et une grande variété d'options de style et de personnalisation pour créer des menus et des sous-menus pour WordPress.

Fonctionnalités clés de QuadMenu :

• Un constructeur par glisser-déposer
• Plusieurs emplacements de menu
• Menus hors-toile, collants et verticaux
• Options d'alignement des liens
• Menus déroulants flottants
• Icônes Font Awesome et Google Fonts
• Animations déroulantes
• Une variété de filtres
• Afficher les widgets

Avantages de QuadMenu :

• Il existe à la fois une version gratuite et une version premium.
• Il convient aux débutants et aux développeurs.
• Il prend en charge les thèmes enfants.
• Il y a une intégration de menu automatique et manuelle.
• Il est intuitif et facile à utiliser.
• Des menus à onglets et carrousel sont disponibles avec la version pro.

Inconvénients de QuadMenu :

• Les options de style avancées nécessitent une licence pro.
• Les options de prévisualisation en direct sont limitées.

Facilité d'utilisation :

QuadMenu convient aussi bien aux débutants qu'aux développeurs. Le générateur de glisser-déposer permet de créer et de personnaliser vos méga menus rapidement et facilement.

Tarification :

QuadMenu a une version gratuite. Les licences Pro sont disponibles à partir de 30 $ pour un seul site.

3. UberMenu

Si vous recherchez un constructeur de méga menus premium, UberMenu vaut le détour. Cet outil puissant et riche en fonctionnalités utilise un système de grille sophistiqué qui vous permet de créer rapidement un méga menu d'aspect professionnel.

Fonctionnalités clés d'UberMenu :

• Un système de grille unique
• Plus de 50 paramètres de style
• Génération d'articles dynamiques
• Sous-menus basés sur les publications, les catégories, etc.
• La possibilité d'ajouter des onglets dans les menus
• Menus tactiles
• Transitions CSS3 déroulantes
• Plusieurs déclencheurs de menu (survol, intention de survol et clic)
• Divers emplacements de menu
• Dispositions flexibles

Avantages d'UberMenu :

• Il est largement utilisé et très apprécié des propriétaires de sites WordPress.
• Il existe des options pour ajouter du code HTML personnalisé, des codes abrégés et des widgets.
• Il utilise l'interface native WordPress Customizer.
• Il existe des thèmes de menu illimités.

Inconvénients d'UberMenu :

• Il n'y a qu'une version premium disponible.
• Selon votre thème, ce n'est peut-être pas la meilleure option si vous n'avez pas de compétences en programmation CSS/PHP.

Facilité d'utilisation :

L'utilisation d'UberMenu sera probablement un jeu d'enfant pour les utilisateurs expérimentés de WordPress car l'interface est construite sur le Customizer natif. Vous pouvez afficher des aperçus en temps réel de votre menu au fur et à mesure que vous le créez. Pour les débutants de WordPress, cependant, cela peut être plus difficile à naviguer qu'une interface intuitive de création par glisser-déposer.

Tarification :

Une licence UberMenu pour un seul site coûte 26 $. Cela inclut six mois d'assistance aux développeurs.

4. Kit d'éléments

Si vous connaissez et utilisez le générateur de pages Elementor, ElementsKit est un excellent plugin de méga menu à considérer. L'outil comprend une vaste bibliothèque de modules personnalisés, comprenant un générateur d'en-tête et de pied de page.

Fonctionnalités clés d'ElementsKit :

• Une interface de contenu en direct
• Une bibliothèque de modules personnalisés
• Un constructeur d'en-tête et de pied de page
• Défilement de parallaxe
• Plus de 200 modèles de page préconçus
• Un widget de compte à rebours
• Animations déroulantes
• Menus hors canevas, collants et verticaux
• Icônes de police géniales
• Thèmes clairs et sombres
• Deux dispositions de menu mobile
• CSS personnalisé

Avantages d'ElementsKit :

• Il s'intègre entièrement au constructeur de pages Elementor.
• Il inclut la fonctionnalité de glisser-déposer.
• C'est débutant et convivial.
• Il a des personnalisations pour les couleurs de texte des icônes et des badges.
• Il a des fonctionnalités WooCommerce intégrées.
• Il offre des options de méga menu avancées.

Inconvénients d'ElementsKit :

• Ce n'est pas idéal sauf si vous utilisez le générateur de pages Elementor.
• Cela peut être écrasant si vous recherchez uniquement un outil de création de méga menu.

Facilité d'utilisation :

ElementKits est un outil simple et polyvalent. Si vous n'êtes pas familier avec Elementor, l'interface peut prendre un certain temps pour s'y habituer. Cependant, si vous utilisez déjà le plug-in de création de pages, vous maîtriserez probablement ce module complémentaire en un rien de temps.

Tarification :

ElementsKit propose une version gratuite. Les licences Premium commencent à 39 $ par an pour un seul site.

5. WP Mega Menu

Si vous recherchez un outil freemium simple et direct pour créer des méga menus dans WordPress, WP Mega Menu est une autre option solide. Ce plugin est facile à utiliser et fournit toutes les fonctionnalités et fonctions de base nécessaires pour créer un méga menu de qualité pour une grande variété de sites. Pour un outil gratuit, il est également livré avec un ensemble impressionnant d'options de personnalisation et de style.

Fonctionnalités clés de WP Mega Menu :

• Navigation intuitive
• Une interface glisser-déposer
• La possibilité de créer et d'enregistrer des thèmes de menu
• Logo, barre de recherche et images d'arrière-plan
• Icônes Google Fonts et Font Awesome
• Icônes sociales
• Étiquetage des menus

Avantages de WP Mega Menu :

• Il est entièrement gratuit à télécharger et à utiliser, avec une mise à niveau professionnelle disponible.
• Il est facile à naviguer et à utiliser.
• Il possède des fonctionnalités que d'autres plugins n'incluent que dans les versions premium.
• Il a la possibilité de créer et d'enregistrer des thèmes de menu à utiliser sur plusieurs sites Web.

Inconvénients de WP Mega Menu :

• Il manque des outils conçus pour les développeurs par rapport aux autres options de plugin.
• Il n'y a pas d'options collantes ou hors toile avec la version gratuite.

Facilité d'utilisation :

WP Mega Menu est un plugin convivial pour les débutants avec de nombreuses options. Il est livré avec une interface intuitive facile à comprendre et à naviguer.

Tarification :

WP Mega Menu est gratuit. Mais il propose également des plans Premium à partir de 29 $ par an pour une seule licence.

Comparaison des meilleurs plugins de méga menu pour WordPress

Foire aux questions (FAQ) sur les méga menus

À ce stade, j'espère que vous avez une solide compréhension de la façon de créer et d'ajouter un méga menu dans WordPress. Mais prenons un moment pour conclure avec quelques questions fréquemment posées (FAQ).

Puis-je ajouter des images et des icônes à un méga menu WordPress ?

Oui, vous pouvez ajouter des images et des icônes à un méga menu WordPress. Certains plugins sont livrés avec un support intégré pour cela. Alternativement, vous pouvez également ajouter des images et des icônes en modifiant le code de votre site Web.

Puis-je ajouter un méga menu à ma barre latérale WordPress ?

Oui, vous pouvez ajouter un méga menu à votre barre latérale WordPress. Il existe quelques plugins différents que vous pouvez utiliser pour ajouter un méga menu à votre barre latérale. La plupart des plugins qui vous permettent d'afficher des menus sous forme de widgets vous permettront également de les ajouter à votre barre latérale.

Commencez à personnaliser vos menus WordPress

Les menus jouent un rôle essentiel dans la conception et la fonctionnalité de votre site Web, car ils peuvent être utilisés pour améliorer l'apparence de n'importe quel site. Donc, si vous avez un grand site Web WordPress avec beaucoup de contenu et de pages, vous voudrez peut-être envisager d'ajouter un méga menu.

Comme nous en avons discuté dans cet article, il existe trois méthodes principales que vous pouvez utiliser pour créer un méga menu dans WordPress. La première consiste à utiliser les options de votre thème pour ajouter un méga menu. La seconde consiste à en coder un manuellement. Si aucun de ceux-ci n'est possible, ou si vous voulez simplement gagner du temps, vous pouvez essayer un plugin de méga menu comme Max Mega Menu, QuadMenu ou ElementsKit.

Vous souhaitez encore améliorer les performances de votre site WordPress ? En plus de fournir des sauvegardes simples et automatiques et d'autres fonctionnalités de sécurité WordPress, Jetpack peut aider à augmenter la vitesse et l'UX de votre site !