Comment ajouter des éléments de menu Elementor dans WordPress

Want to Add a Menu to Your Elementor Site?

This guide will show you how to create, set up, and customize a navigation menu in Elementor using the ElementsKit Nav Menu Widget.

Navigation menus are key for any website, helping visitors quickly find what they need. Most site owners place menus in the header for easy access across all pages.

With the tips in this guide, you’ll have a functional, stylish menu ready in no time. Let’s get started!

What is an Elementor Mega Menu in WordPress?

Mega menus have become a popular way to improve website navigation, helping users easily browse your content and find what they need.

In WordPress, the default navigation menu allows you to include pages, posts, categories, and URLs, with the design typically controlled by your theme. However, upgrading to a mega menu offers more flexibility and customization to provide better site’s experience to users.

Why Use the ElementsKit Nav Menu Widget?

• You can create custom and advanced menus in the drag and drop style
• ElementsKit offers all-in-one solution along with the navigation menu

With the ElementsKit add-on for Elementor, you can build a feature-rich mega menu that enhances your website’s functionality and design effortlessly.

🔔 Did you know?
Using a WordPress theme or page builder often limits your control over the header and footer design.
What about getting full control in customization? Check this out to learn more Comment créer et personnaliser le pied de page d’en-tête – Elementor Page Builder

Ce que le Mega Menu d'Elementor par ElementsKit a à offrir :

Comme le mega menu for ElementorElementsKit ouvre également une multitude de possibilités de « piratage » dans votre menu WordPress normal.

Pour être plus précis, le plugin vous assistera dans les aspects suivants :

• Customize menus with tags, colors, hover effects, and icons
• Style top-level and submenu appearances
• Create vertical or horizontal menus
• Choose header layouts from the ElementsKit library
• Add animations for submenu displays
• Drag-and-drop the nav menu widget with one click
• Compatible with eCommerce platforms like WooCommerce
• Build content using Elementor widgets
• Fully responsive with off-canvas menus for tablets
• Display builder content or simple lists as submenus on tablets

Et bien sûr, le meilleur, c'est que Le menu ElementsKit Nav est disponible gratuitement et premium versions. Ainsi, même si vous n’achetez pas d’abonnements payants, vous bénéficierez toujours de cette étonnante fonctionnalité de menu Elementor sur votre site.

Comment créer des éléments de menu dans Elementor

Jetons un coup d'œil à quelques exemples du monde réel et passons en revue notre leçon sur le grand menu WordPress. Vous êtes maintenant sur le point de partir à l’étranger pour créer votre méga menu WordPress, votre en-tête et ajouter son contenu.

Créer un menu

Pour créer un menu Elementor, vous devez faire est Allumer l'option de méga menu du démarrage d'ElementsKit Modules page et après l'avoir allumé, cliquez sur le Sauvegarder les modifications bouton.

Creating a menu in Elementor requires a few simple steps. Go to your Tableau de bord WordPress puis cliquez sur Menus. Après cela, vous verrez une section nommée Structure des menus. Saisissez ensuite votre Nom du menu ou l'en-tête du menu et cliquez sur Créer un menu.

Maintenant, développez Liens personnalisés et mets ton URL ainsi que Texte du lien, then click on Ajouter au menu.

📝Note rapide
Vous pouvez ajouter, supprimer ou modifier autant d'éléments de méga menu que vous le souhaitez en répétant la même méthode.

Il est temps d'ajouter vos éléments de menu dans Elementor via ElementsKit. Mais avant cela, vous devez cocher ✅ la activer le menu pour le contenu du méga menu section as shown in the image, underneath the Menu Name section. 

Ensuite, vous verrez une balise Mega Menu sur votre Texte du lien. Après avoir cliqué sur le Méga menu tag, une fenêtre contextuelle s'ouvrira.

Pour activer l'option Mega Menu, vous devez cliquer sur le bouton Activer MODIFIER LE CONTENU DU MÉGA MENU bouton et enregistrez. Vous êtes prêt ! 

🧐 Plus d'informations sur le menu Elementor
N'oubliez pas de visiter notre documentation sur Générateur de méga menus ElementsKit pour Elementor

Importer un menu (méga menu vertical)

Pour créer un menu vertical, vous devez d'abord allumer le menu vertical widget. Cliquez ensuite sur Sauvegarder les modifications.

Cliquez ensuite sur Modèles sur le côté gauche de votre tableau de bord. Après avoir simplement cliqué sur Importer des modèles.

Il faut maintenant sélectionner Choisir le fichier depuis votre appareil. Ensuite, cliquez simplement sur Importer maintenant. Et vous verrez toutes vos données importées en même temps.

De plus, pour créer un menu vertical avec vos données, vous devez vous rendre sur Apparence puis cliquez sur Menus. Vous pouvez également suivre la création d'un menu ci-dessus. Pour plus de détails, vous pouvez visiter notre site de documentation dans le menu vertical.

Personnalisation du menu 

Il est temps de personnaliser votre contenu et pour ce faire, vous devez cliquer sur le MODIFIER LE CONTENU DU MÉGA MENU bouton. Juste après avoir cliqué sur le bouton, vous verrez qu'un écran de style de menu Elementor est apparu. 

Il vous suffit de cliquer sur le Icône ElementsKit et sélectionnez lequel en-tête prédéfini vous souhaitez insérer dans votre site Web. 

Juste après avoir cliqué sur Bouton du widget ElementsKit, il vous mènera à sa bibliothèque de widgets. Dans lequel, vous obtiendrez des tonnes de pages, de modèles et de sections prédéfinis. Mais pour créer une section de méga menu, vous devez cliquer sur le Sections

Pour créer et personnaliser vos éléments de menu sur Elementor. Vous devez sélectionner la disposition des éléments du Mega Menu et commencer à la personnaliser à votre guise !

Ici vous trouverez 3 parties (Mise en page, style et avancé) de personnaliser votre menu Elementor via ElementsKit :

Mise en page:
Dans cette section, vous verrez plusieurs options pour modifier la disposition et la structure d’un menu Elementor. Vous avez un contrôle total sur la façon dont votre méga menu doit être présenté.

Désormais, avec le widget méga menu ElementsKit, vous pouvez personnaliser votre Largeur du contenu, soit vous pouvez en faire un menu plein écran, soit personnaliser la taille de votre choix en faisant glisser vers la droite ou la gauche. Espaces entre colonnes entre votre méga menu peut également être personnalisé comme vous le souhaitez.

Avec le menu ElementsKit Elementor, vous pouvez modifier la hauteur de vos éléments de menu. Il dispose également de plusieurs options pour modifier le Alignement vertical, Débordement, Balises HTML qui peut être modifié selon votre demande.

Style:
Avec les options de style du méga menu ElementsKit, vous pouvez modifier l’apparence entière du menu. Pour être plus précis, vous pouvez modifier ou éditer le Arrière-plan, Superposition d'arrière-plan, Frontière, Diviseur de forme, et bien sûr Typographie.

Le widget de méga menu Elementor d'ElementsKit est une bouée de sauvetage. Il comporte une gamme d'éléments de style menu qui vous aideront à tirer le meilleur parti de vos éléments de menu. 

Avancé:
Nos options avancées de style menu pour votre menu WordPress sont quelque chose que vous avez toujours recherché. Oui, les options du méga menu ElementsKit Elementor vous aideront également à accéder et à modifier l'intégralité des sections avancées. 

Dans lequel vous pouvez créer une toute nouvelle disposition de menu. ElementsKit a des alternatives plus avancées comme additionner effets, collant, effets de mouvement, flotter personnalisation, et bien d'autres qui amélioreront encore votre expérience éditoriale et rendront votre méga menu plus intelligent. 

Configuration du menu de navigation pour Elementor

La dernière et la plus importante partie consiste à synchroniser un méga menu dont vous avez besoin pour créer un en-tête sur votre site Web Elementor. 

Nous allons maintenant vous montrer comment créer un modèle d'en-tête personnalisé Elementor. Eh bien, il y a une autre bonne nouvelle pour vous avec le widget de menu de navigation ElementsKit, vous pouvez créer la disposition du menu de navigation en cliquant simplement sur nos options de disposition de menu WordPress prédéfinies. 

Commençons! 

Tout d'abord, vous devez vous rendre à ElementsKit sur votre tableau de bord WordPress puis cliquez sur le en-tête de pied de page, pour activer le widget du menu de navigation sur votre site Web. 

Cliquez ensuite sur ajouter un nouveau mentionné juste après les modèles. 

Après avoir cliqué sur le ajouter un nouveau bouton un Paramètres du modèle apparaîtra, ce qui constitue la dernière partie de l'intégration d'un méga menu dans votre site Web.

Ici, dans cette section, vous devez donner à votre menu de navigation un nom appelé le titre d'en-tête. Vous pouvez également modifier le conditions de l'en-tête et cliquez sur activation (si vous êtes prêt et satisfait de vos éléments de méga menu.)

Dans la dernière partie, n'oubliez pas de cliquer sur le modifier avec elementor bouton juste avant le Sauvegarder les modifications bouton. 

Nous allons maintenant vous montrer 2 façons d'ajouter votre méga menu via le widget de menu de navigation d'ElementsKit.

Première méthode : 

Pour ajouter un widget de menu de navigation à votre site Web, la première méthode que vous pouvez utiliser après avoir cliqué dessus modifier avec elementor bouton, il vous suffit de cliquer sur ElementsKit icône de widget ensuite aller à sections et sélectionnez un style d'en-tête celui que tu préfères. 

Après cela, vous verrez votre Entête le titre que vous avez ajouté à partir de votre tableau de bord WordPress apparaîtra dans la zone de sélection section de menu. Et simplement en cliquant sur le titre de l'en-tête, vous verrez que tous vos éléments de méga menu sont visibles.

Deuxième méthode :

Vous pouvez également intégrer le widget du menu de navigation via le option glisser-déposer et ajoutez également différents éléments autour (par exemple des images, des vidéos, d'autres sections, etc.)

Tout ce que vous avez à faire est de sélectionner n’importe quel type de section (j’ai sélectionné trois sections pour cet exemple). Recherchez les widgets que vous préférez ajouter à partir de votre tableau de bord Elementor.

Ici, dans cet exemple, nous avons fait glisser une image, un menu de navigation et une vidéo. Vous pouvez ajouter autant de sections et de widgets que vous le souhaitez. 

Là encore, la même méthode peut être utilisée pour activer votre menu de navigation: sur le sélectionner le menu section, vous verrez apparaître le titre de votre en-tête que vous avez ajouté à partir de votre tableau de bord WordPress. Et simplement en cliquant sur le titre de l’en-tête, vous verrez que tous vos éléments de méga menu sont insérés. 

Vous savez maintenant que l'utilisation du widget du menu de navigation est très simple et que vous êtes prêt à faire du rock'n'roll ! Gardez à l’esprit que vous êtes également autorisé à créer un menu hors canevas dans ElementsKit. 

🛠 Information additionnelle
Pour en savoir plus sur le menu hors toile dans ElementsKit, n'oubliez pas de regarder notre dernière vidéo sur créer un menu hors canevas à l'aide d'ElementsKit

Dernières pensées

Les méga menus sont de merveilleux outils pour améliorer la navigation sur un site Web. Ils vous permettent organiser un grand nombre de catégories et de biens pour faciliter la tâche des utilisateurs pour parcourir votre contenu.

La création d'un Mega Menu avec le module complémentaire ElementsKit pour Elementor est toujours là pour vous offrir le meilleur support sans prix. Si vous l'ajoutez vous-même, l'option Nav Mega Menu intégrée au module complémentaire ElementsKit peut être un début pour vous.

ElementsKit est simple, prend peu de temps à configurer et à modifier, et est également simple à utiliser. Cependant, nous espérons que cet article vous a été suffisamment utile pour donner un aperçu de tout l’aspect du méga menu.

Veuillez laisser un commentaire ci-dessous si vous avez des questions concernant le Mega Menu, le Nav Menu ou ses fonctionnalités.

Si vous avez aimé cet article, vous trouverez sûrement d'autres conseils et blogs utiles en rejoignant notre Communauté WPmet Suivez-nous sur Facebook Twitter. Enfin, n'oubliez pas de vous abonner à notre chaîne sur Youtube pour des tutoriels utiles.