Comment créer un méga menu dans Elementor | Générateur de méga menu

Si vous souhaitez créer un méga menu Elementor dans WordPress, le module Mega Menu d'ElementsKit peut rendre le processus simple et rapide. Lisez cette documentation pour apprendre à créer un méga menu dans WordPress à l'aide d'ElementsKit en quelques étapes simples.

Aperçu #

ElementsKit est le module complémentaire tout-en-un qui vous offre le meilleur moyen possible de créer des sites Web WordPress avec une large gamme de widgets, de modules et de modèles préconçus hautement personnalisables.

Cela inclut le Module Mega Menu de ElementsKit plugin. Un méga menu est une fonctionnalité puissante de WordPress qui vous permet de créer un menu extensible basé sur des catégories avec des mises en page flexibles. Les méga menus Elementor sont faciles à utiliser et peuvent être un excellent moyen d'afficher le menu du site Web de manière organisée.

Regardez notre guide vidéo :

Ou suivez les instructions étape par étape pour créer un méga menu dans Elementor :

Prérequis: #

Comment créer un méga menu WordPress dans Élémentor #

Tout d’abord, avant créer un Mega Menu Elementor dans WordPress assurez-vous d'activer ElementsKit Méga menu module de ElementsKit > Module sur votre tableau de bord WordPress.

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

Étape #1 : Configurer le menu #

À créer un méga menu WordPress sur votre site internet,

  • Aller vers Apparence > Menus depuis le tableau de bord WordPress.
  • Cliquer sur Créer un nouveau menu.
comment créer un méga menu dans Elementor
  • Entrez un Nom du menu.
  • Clique sur le Créer un menu bouton.
créer un méga menu dans WordPress

Maintenant vous pouvez ajouter des éléments au méga menu. Pour ça,

  • Développer Liens personnalisés sur « Ajouter un élément de menu » dans la colonne de droite.
  • Entrez un URL et Texte du lien.
  • Cliquer sur Ajouter au menu.

Ajoutez ensuite d'autres éléments de menu de la même manière.

personnaliser le méga menu dans les sites Web WordPress

Après cela, cochez la case «Activer ce menu pour le contenu Megamenu" Lorsque le méga menu est activé, vous cliquerez sur icône des paramètres du méga menu lorsque vous survolez les éléments de menu.

Création de méga menu Elementor

Étape #2 : Personnaliser le contenu du mégamenu Elementor #

Lorsque vous cliquez sur l'icône des paramètres du méga menu, une fenêtre contextuelle s'ouvrira. Sur la popup,

  • Bouton bascule pour activer le Mega Menu.
  • Clique sur le Sauvegarder bouton.
  • Après cela, cliquez sur le MODIFIER LE CONTENU DU MEGAMENU bouton. Cela vous mènera au bouton de l’éditeur Elementor.
personnaliser le contenu du méga menu pour Elementor
  • Clique le Icône de la bibliothèque de modèles ElementsKit
Méga menu Ekit
  • Aller aux rubriques=> Cliquez sur le Catégorie=> Sélectionnez Mégamenu de la liste.
Plugin de méga menu ElementsKit
  • Insérer n'importe quel Elementor Méga menu Contenu.
contenu du méga menu
  • Vous verrez que votre élément inséré s’affichera.
aperçu du méga menu dans Elementor

Disposition des contrôles #

  • Modifier la section intérieure en cliquant sur la section en pointillés.
  • Zone de largeur du contenu: Personnalisez la largeur de votre contenu en faisant glisser vers la droite ou la gauche.
  • Contenu pleine largeur: Sélectionner Pleine largeur.
disposition du méga menu

Sélectionnez l'espacement des colonnes #

  • Écart de colonne=> Sélectionnez votre espacement de colonne dans le dérouler.
menu déroulant pour le méga menu

Choisir un poste #

  • Hauteur: Sélectionnez votre hauteur en faisant glisser de gauche à droite.
  • Alignement vertical : Sélectionnez Alignement vertical dans la liste déroulante.
  • Débordement: Sélectionnez Débordement par défaut ou Masqué.
personnaliser les positions du méga menu

Section d'étirement #

Activez ce bouton pour agrandir le méga menu en pleine largeur, qui s'étend de droite à gauche de la largeur de l'écran.

Sélectionnez la balise HTML #

  • Sélectionnez votre Balise HTML depuis Dérouler.
menu déroulant méga menu

Si vous voulez le voir en action, regardez cette vidéo et faites-le vous-même en quelques minutes.

Personnaliser le texte de l'en-tête du méga menu #

  • Sélectionnez le type d'icône.
  • Activer pour ajouter une icône.
  • Icône d'en-tête de téléchargement.
  • Ajouter ou modifier un titre.
  • Ajouter une description de modification.
disposition du méga menu

Personnaliser le texte #

  • Ajouter ou modifier Texte.
  • Ajouter ou modifier Sous-titre.
  • Permettre de Afficher l'étiquette.
  • Ajouter ou modifier Étiquette.
  • Personnaliser Couleur d'arrière-plan, typographie, remplissage, alignement, rayon.
  • Une fois terminé, cliquez sur Mettre à jour et fermez la fenêtre.
personnaliser les textes du méga menu

Étape #3 : Personnaliser l'icône #

  • Maintenant, va à Onglet Icône=> Choisissez n'importe quelle couleur parmi les Palette de couleurs.
personnalisation des icônes pour le menu
  • Sélectionner Icône du Bibliothèque d'icônes.
Bibliothèque d'icônes de menu d'ElementsKit, un plugin de méga menu pour Elementor

Étape #4 : Personnaliser le badge #

  • Ajouter ou modifier du texte.
  • Choisir Couleur de l'insigne.
  • choisir Couleur d'arrière-plan du badge.
  • Cliquez sur Sauvegarder.
Comment ajouter un méga menu dans WordPress Elementor

Étape #5 : Paramètres #

Largeur par défaut #

  • Sélectionnez la largeur du méga menu : Défaut.
  • Sélectionnez la position du méga menu : Défaut.
  • Sauvegarder la fenêtre.
  • Vue du site: Affichage de la largeur par défaut avec la position par défaut.
Comment ajouter un mégamenu dans WordPress Elementor

Relatif par défaut  #

  • Sélectionnez la largeur du méga menu : Défaut.
  • Sélectionnez la position du méga menu : Relatif.
  • Cliquez sur Sauvegarder.
  • Vue du site: Affichage de la largeur par défaut avec la position relative.
Comment créer un méga menu avec ElementsKit

Pleine largeur par défaut #

  • Sélectionnez la largeur du méga menu : Pleine largeur.
  • Sélectionnez la position du méga menu : Défaut.
  • Cliquez sur Sauvegarder.
  • Vue du site: Affichage pleine largeur avec la position par défaut.
Paramètres du méga menu à l'aide d'ElementsKit

Position relative pleine largeur #

  • Sélectionnez la largeur du méga menu : Pleine largeur.
  • Sélectionnez la position du méga menu : Relatif.
  • Cliquez sur Sauvegarder.
  • Vue du site: Affichage Pleine largeur avec position relative.
Définition de la position relative sur toute la largeur du méga menu à l'aide d'ElementsKit

Largeur par défaut personnalisée #

  • Sélectionnez la largeur du méga menu : Largeur personnalisée.
  • Fournissez n'importe quelle largeur personnalisée, mais par défaut, c'est le cas 750px.
  • Sélectionnez la position du méga menu : Défaut.
  • Cliquez sur Sauvegarder.
  • Vue du site: Affichage Largeur personnalisée avec position par défaut.
Comment modifier le menu de navigation à l'aide d'ElementsKit

Largeur par défaut personnalisée Relatif #

  • Sélectionnez la largeur du méga menu : Largeur personnalisée.
  • Fournissez n'importe quelle largeur personnalisée, mais par défaut, c'est le cas 750px.
  • Sélectionnez la position du méga menu : Relatif.
  • Cliquez sur Sauvegarder.
  • Vue du site: Affichage Largeur personnalisée avec position relative.

Étape #6 : Créer un modèle d'en-tête #

Ici, vous pouvez utiliser le Modèle d’en-tête Elementor ou vous pouvez utiliser le Modèle d’en-tête ElementsKit. Voyons à l'ajouter.

  • Aller vers ElementsKit → En-tête de pied de page → et cliquez Ajouter un nouveau.
  • Une boîte contextuelle s'ouvrira avec des options.
Comment créer un modèle d'en-tête à l'aide d'ElementsKit
  • Dans la boîte de dialogue, tapez un Titre, sélectionnez le Tapez → Entête.
  • Sélectionnez le Conditions → Site entier.
  • Basculez le Activation option et cliquez sur Modifier avec Elementor.
Créer un en-tête à l'aide d'ElementsKit
  • Sélectionnez votre Structure de la zone sélectionnée.
Créer un menu de navigation à l'aide d'ElementsKit
  • Rechercher maintenant Menu de navigation=> Faites glisser le Menu de navigation Ekit et Baisse sur la zone sélectionnée.

** Remarque : assurez-vous de faire glisser le menu ElementsKit Nav, sinon votre Megmenu créé n'apparaîtra pas.

Comment ajouter un menu de navigation à l'aide d'ElementsKit
  • Maintenant, va à Paramètres des menus=> sélectionnez votre création Menu d'en-tête dans la liste déroulante.
  • Vous pouvez ajouter n'importe quel type de widget à partir d'ici pour personnaliser votre modèle d'en-tête.
Faites glisser et déposez le menu de navigation pour créer l'en-tête

Résultat final #

Une fois terminé, cliquez sur le Mise à jour bouton pour enregistrer le menu.

Accédez maintenant à votre site et vous pourrez voir que votre menu Elementor Mega sélectionné s'affiche en conséquence.

aspect final du méga menu
Quels sont tes sentiments
Mis à jour le 5 décembre 2024