Comment créer un Mega Menu dans Elementor | 5 étapes faciles

Un méga menu est un type de menu de navigation extensible qui présente plusieurs options à la fois, généralement regroupées en catégories pour une meilleure expérience utilisateur. Contrairement aux menus déroulants traditionnels, les méga-menus offrent une présentation plus large, comprenant souvent des colonnes, des images, des icônes ou même des widgets.

Il est particulièrement utile pour les sites de commerce électronique, les portails d'information ou tout autre site web de grande taille dont le contenu doit être facilement accessible.

Mais si vous souhaitez créer un méga menu dans Elementor, ce n'est pas possible car Elementor (la version gratuite) permet des mises en page de navigation simples à l'aide du widget Nav Menu ; il ne dispose pas de la structure avancée nécessaire pour un méga menu à part entière. Vous rencontrerez des limitations telles que :

• Pas de prise en charge des listes déroulantes multi-colonnes
• Pas d'intégration d'images ou de widgets dans les éléments de menu
• Style et contrôle du survol limités

Par conséquent, si vous souhaitez obtenir un méga menu avancé, moderne, convivial et riche en fonctionnalités, vous devrez utiliser un plugin tiers pour activer cette fonctionnalité. Dans ce blog, je vais donc vous montrer Comment créer un Mega Menu dans Elementor en 5 étapes faciles

Voici l'aperçu du méga menu que nous allons créer à l'aide de Elementor :

Créer un Mega Menu WordPress en Elementor

Construire un méga menu détaillé pour votre site WordPress avec Elementor peut sembler délicat. Elementor est parfait pour les pages, mais les menus avancés ont souvent besoin de plus. De nombreux plugins offrent des fonctionnalités de méga menu pour Elementor, mais Element Pack se démarque en simplifiant les choses.

Avec d'autres plugins, vous risquez d'être confronté à des paramètres confus, à des options de conception limitées ou à la difficulté d'obtenir un menu qui s'affiche correctement sur différents appareils. Vous pouvez avoir l'impression de vous battre contre l'interface juste pour mettre en place un méga menu de base. 

Element Pack, Elementor, cependant, offre toute la puissance nécessaire à travers une interface conviviale. Il vous permet de créer des méga-menus impressionnants sans les frustrations habituelles, en fournissant un moyen direct d'ajouter du contenu et des mises en page à l'intérieur même de Elementor.

Commençons donc à construire l'ensemble du méga menu avec le Element Pack.

Prérequis

Tout d'abord, confirmez que ces 2 plugins ont été installés et activés : 

• Elementor: La version gratuite suffit.
• Element Pack: Ce plugin WordPress ajoute des fonctionnalités de méga menu spécifiquement pour Elementor.

Étape 1 : Activer les modules et widgets du Mega Menu

L'activation de la fonction Mega Menu dans Element Pack Pro implique le réglage de plusieurs paramètres dans le tableau de bord de WordPress. Ainsi,

• Allez sur Element Pack Pro à partir de votre tableau de bord WordPress.

• Naviguez jusqu'à la page Caractéristiques spéciales tabulation.
• Activer le sélecteur de méga-menus et enregistrer les paramètres.

• Ensuite, allez à la page Widgets de base tabulation.
• Activer les widgets Mega Menu et Sub-Menu.
• Sauvegarder les paramètres.

• Réenregistrer les permaliens pour s'assurer qu'ils fonctionnent correctement.

Étape 2 : Créer et configurer le menu Elementor

Vous devez maintenant créer votre méga-menu. Suivez les étapes de base ci-dessous pour une gestion efficace du menu.

• Aller à Apparence > Menus.

• Nommez votre menu et cliquez sur Créer un menu.

• Ajouter des éléments de menu (liens personnalisés ou pages existantes) au menu.

• Pour chaque élément que vous souhaitez transformer en méga-menu, activez le sélecteur de méga-menu.
• Enregistrez le menu et actualisez la page.

Étape 3 : Conception du méga-menu

Après avoir créé le menu, l'activation du sélecteur de méga-menus Element Pack permet de personnaliser les éléments du menu. Cette fonction met en évidence les éléments prêts à être convertis en méga-menus.

La personnalisation des méga-menus avec des options de largeur et d'icône améliore l'expérience de l'utilisateur. Ces éléments permettent d'intégrer visuellement le menu à la conception de votre site web. Concevez donc quelques éléments de base du système en fonction de vos besoins.

• Survoler un élément de menu lorsque le méga-menu est activé.
• Cliquez sur le bouton Modifier le méga-menu qui apparaît.

• Une fenêtre contextuelle s'affiche

• Allumer Activer le Mega Menu.
• Définir la largeur du menu (par défaut ou personnalisée).
• Si vous le souhaitez, ajoutez le texte d'un badge qui apparaîtra à côté de l'élément de menu.
• Choisissez une icône de menu et une couleur d'icône.
• Cliquez sur Sauvegarder les options.

Étape 4 : Personnaliser le Mega Menu de Elementor

Maintenant, pour personnaliser le méga menu, nous devons l'ouvrir avec Elementor. Ainsi, nous pourrons ouvrir le méga menu avec Elementor,

• Cliquez sur l'icône Modifier le contenu de la liste déroulante.

• L'éditeur Elementor s'ouvre.

• Glissez-déposez des widgets dans la disposition du méga-menu.
• Utilisez le widget Sous-menu et créez des colonnes, ajoutez des images, des icônes, du texte, etc.

• Personnalisez les styles, l'espacement et la mise en page selon vos besoins.

• Utilisez l'aperçu Elementor pour voir à quoi ressemble le Mega Menu.
• Vous pouvez utiliser une autre méthode pour créer un sous-menu à l'aide de la fonction Copier-coller en direct
• Il suffit de se rendre sur Element Pack Mega Menu Demo
• Choisir une démo

• Choisissez maintenant un style et cliquez sur le bouton Copier-coller en direct bouton
• Ici, je copie l'élément de menu Hommes de la démo d'Adidas.

• Retournez maintenant dans votre éditeur Elementor et collez

• L'ensemble du modèle de méga menu sera disponible ici.

Étape 5 : Personnalisation de la présentation et du style du contrôle

Sa mise en page et ses styles peuvent nécessiter une personnalisation plus poussée pour qu'ils restent similaires à votre site web. Ainsi,

• Ajustez ensuite le style et le contenu si nécessaire.

• Utilisez le mode "responsive" pour garantir une bonne présentation sur mobile.
• Vérifiez le menu dans les vues desktop et mobile.

Étape 6 : Sauvegarder et apprécier

Nous sommes maintenant à la fin, 

• Allez sur le modèle ou la page où vous souhaitez afficher le méga menu.

• Rechercher le widget mega menu dans la section Element Pack
• Glisser-déposer dans la mise en page

• Sélectionner le menu et définir la direction du menu

• Maintenant, si vous devez apporter des modifications à la mise en page ou au style, complétez-les et cliquez sur le bouton Publier.

• Visitez maintenant votre page ou votre modèle et survolez votre menu, et vous obtiendrez le méga menu.

Mega Menu avancé dans Elementor : aperçu

Le Element Pack Maine Focus vous permet de créer un méga menu avancé. Voici quelques méga menus avancés réalisés par Element Pack.

Il s'agit d'une copie du dribble pour faire un méga menu comme sur le site de Dribbble

Avec Element Pack, vous pouvez créer des méga-menus avancés comme celui-ci pour le commerce électronique.

Vous pouvez également créer ce magnifique méga menu avec le Element Pack.

Conclusion

La création d'un méga menu dans Elementor à partir de zéro peut sembler intimidante au début, mais avec les bons outils et une approche structurée, cela devient un moyen puissant d'améliorer la navigation et l'expérience de l'utilisateur de votre site. 

Que vous gériez une boutique de commerce électronique, un blog riche en contenu ou un site d'entreprise, un méga menu bien conçu aide les visiteurs à trouver plus rapidement ce dont ils ont besoin, tout en mettant en valeur le professionnalisme de votre marque.

En suivant les étapes décrites ci-dessus, vous avez créé un méga-menu entièrement fonctionnel et visuellement attrayant, qui est à la fois réactif et personnalisable. N'oubliez pas de le tester sur différents appareils et d'affiner la mise en page en fonction des commentaires des utilisateurs. Element Pack vous offre la possibilité de modifier et d'adapter votre menu en fonction de la croissance de votre site.

Prêt à aller plus loin ? Essayez d'intégrer du contenu dynamique, des icônes ou même des éléments WooCommerce pour rendre votre méga-menu vraiment interactif. Les possibilités sont infinies. Alors, continuez à expérimenter et laissez votre créativité vous guider !

FAQ

Derniers blogs

• Sortie de la version 9 de Element Pack Pro : Qu'y a-t-il de passionnant ?
• Comment ajouter un Testimonial Slider dans WordPress en utilisant Elementor
• Comment faire pour que l'accordéon reste fermé par défaut dans Elementor ?
• Comment empêcher les liens Elementor d'être soulignés (3 façons)
• Guide facile : Comment ajouter du code à une page sur Elementor | 5 étapes faciles