Comment créer des Mega Menus richement structurés et magnifiquement conçus avec Elementor

Super Menu est un outil qui vous permet de créer des menus puissants et élégants, parfaits pour ajouter des options de navigation et des éléments visuels à votre site web. Si vous souhaitez ajouter de la créativité et de la personnalité au système de navigation de votre site web, les méga-menus sont un excellent choix. Dans cet article, nous allons voir comment créer un grand menu, richement structuré et magnifiquement conçu en utilisant le méga menu d'Elementor. Nous ferons en sorte que leBoulangerieLe modèle de site web est utilisé comme exemple pour montrer comment créer un méga menu dans l'en-tête d'un site web.

I. Fonctions expérimentales requises pour activer le méga menu

Avant de commencer à créer un Super Menu, vous devez vous assurer que les fonctions expérimentales suivantes sont activées :

1. Conteneurs souplesLa mise en place d'un système de gestion de l'information : permet une plus grande souplesse dans la conception de la mise en place.
2. élément imbriquéLes éléments multiples peuvent être imbriqués à l'intérieur d'un conteneur.
3. menu: Une fonction conçue pour construire des méga-menus.

prenez noteLorsque ces fonctionnalités seront activées, les anciens widgets de menu de navigation seront remplacés par de nouveaux widgets de menu WordPress et des widgets de menu. Les nouveaux widgets sont plus puissants et offrent davantage d'options de personnalisation.

II. création d'un super menu

Les super-menus sont généralement placés dans l'en-tête ou le pied de page d'un site web, mais ils peuvent être placés à d'autres endroits selon les besoins. Dans ce tutoriel, nous prendrons l'en-tête comme exemple et nous expliquerons en détail comment créer un méga menu.

1) Créer un en-tête à l'aide du constructeur de thèmes

Créez d'abord une nouvelle page :

Utilisez le constructeur de thèmes pour créer un nouveau titre d'en-tête.

Le créateur de thème offre une multitude d'options de personnalisation qui peuvent vous aider à concevoir facilement un en-tête qui correspond au style de votre site web.

2. ajouter des widgets de menu

Une fois que vous avez créé le conteneur dans l'en-tête, faites glisser et déposez le widget de menu dans ce conteneur.

Il est également possible d'ajouter un nouveau conteneur spécifique pour le menu si nécessaire. Cela permet de s'assurer que le menu dispose de suffisamment d'espace pour être affiché dans l'en-tête et qu'il n'entre pas en conflit avec d'autres éléments.

3. créer des éléments de menu de premier niveau

Nous avons commencé par Boulangerie Dans un modèle de site web, par exemple, le menu contiendra trois éléments de menu de niveau supérieur :Accueil, Notre pain, Notre histoire.

Les étapes sont les suivantes :

• Dans l'onglet Contenu du menu, cliquez sur l'élément #1.

• Tapez "Accueil" dans la zone de texte Titre.

4. ajouter des liens aux éléments du menu

Chaque élément de menu nécessite un lien vers la page correspondante. Lors de l'ajout d'un lien vers "Accueil", vous pouvez saisir manuellement l'URL de la page d'accueil, mais il est plus recommandé deUtilisation de liens dynamiquesde sorte que lorsque vous modifiez l'URL de la page, le lien du menu soit également modifié.mise à jour automatique.

Lier le menu à la page d'accueil.Les étapes sont les suivantes :

• Cliquez sur l'icône de l'étiquette dynamique à côté de la zone de texte du titre.
• Sélectionnez Site > URL interne.

• Cliquez sur "Liens internes".

• Dans le menu déroulant Type, sélectionnez Contenu.

• Dans la zone Rechercher et sélectionner, entrez le nom de la page vers laquelle vous souhaitez établir un lien (par exemple, "Accueil"), entrez une recherche et sélectionnez-la.

Répétez les étapes ci-dessus pour les pages "Notre pain" et "Nos histoires". De cette manière, les éléments du menu seront liés aux pages respectives.

5. visualiser et ajuster la structure du menu

Une fois la création de l'élément de menu terminée, la structure de l'en-tête devrait ressembler à ce qui suit :

• Accueil
• Notre pain
• Notre histoire

À ce stade, vous pouvez prévisualiser l'apparence du menu et ajuster la position et l'ordre des éléments du menu si nécessaire afin de garantir que le menu s'affiche proprement et organiquement sur la page.

III. ajouter des éléments de design au méga menu

Plus qu'un simple outil de navigation, un méga-menu vous permet d'ajouter divers éléments de conception pour rendre le menu plus vivant et interactif. Dans cette section, nous verrons comment ajouter des éléments de conception à des éléments de menu tels queImage ou icôneLe menu est conçu pour améliorer l'aspect visuel du menu.

1. ajouter un contenu déroulant aux éléments de menu

Sélectionnez un élément de menu dans l'onglet "Contenu", par exemple "Accueil".

Cliquez sur le commutateur de contenu déroulant.

Ce commutateur convertit un élément de menu en un super menu, ce qui vous permet d'ajouter un contenu riche à l'élément de menu, tel que des images, du texte, des boutons, etc.

2. ajouter des widgets d'images

Lorsque la zone de contenu déroulante est ouverte, vous pouvez y faire glisser des widgets d'image.

Lorsque l'utilisateur passe la souris sur cet élément de menu, l'image que vous avez définie s'affiche.

Les étapes sont les suivantes :

• Faites glisser le widget image dans la zone de contenu.
• Sélectionnez l'image qui apparaît lorsque l'utilisateur survole un élément de menu.
• Fermez la zone de contenu et enregistrez les paramètres.

Cette opération peut être répétée pour d'autres éléments du menu, en ajoutant des images différentes ou d'autres éléments de conception à chaque élément du menu. Votre méga-menu sera ainsi non seulement puissant, mais aussi visuellement attrayant.

3. prévisualisation et ajustements

En mode édition, il se peut que vous ne puissiez pas voir ces images en action, c'est pourquoi une page de prévisualisation est nécessaire pour voir comment le méga-menu est réellement affiché. L'aperçu permet de s'assurer que la conception de chaque élément du menu est conforme aux attentes et que le contenu des menus déroulants s'affiche correctement.

IV. résumé

Les méga-menus sont un outil formidable pour ajouter de la créativité et une navigation personnalisée à votre site web. Grâce à des étapes détaillées et à des suggestions de conception, il est facile d'utiliser Elementor pour créer de grands menus structurés et visuellement attrayants qui offrent aux visiteurs une meilleure expérience de navigation. Pour mieux réaliser ces effets et débloquer des fonctionnalités plus avancées, il est recommandé d'utiliser l'extensionElementor ProIl offre davantage d'options de personnalisation et des outils puissants pour vous aider à créer des méga-menus de qualité professionnelle.