Chaque site a besoin d'un menu, et l'en-tête par défaut du thème correspond rarement à un design Elementor personnalisé Le gratuit Widget de menu Nav dans Modules complémentaires principaux pour Elementor rend n'importe quel menu WordPress à l'intérieur de l'éditeur Elementor : mises en page horizontales ou verticales définies par appareil, sous-menus stylisés et bascule hamburger qui prend le relais sur les téléphones.
Ce guide parcourt le widget depuis le premier glisser jusqu'à un menu stylisé avec une liste déroulante fonctionnelle sur la page en direct.
Ce que fait le widget du menu de navigation #
Le widget tire un menu que vous avez construit sous Apparence, Menus et le rend comme élément Élémenteur Vous choisissez la mise en page et le comportement, stylisez chaque état des éléments, les déroulages et la bascule mobile, le tout dans le panneau Élémenteur Les éléments de menu eux-mêmes, leurs étiquettes, commande et sous-menus, restent gérés dans WordPress, de sorte que les éditeurs de contenu ne touchent jamais Elementor pour ajouter une page au menu.
Avant de commencer #
- WordPress avec Élémenteur installé et actif.
- Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? voir le guide d'installation.
- Le widget Nav Menu activé dans le panneau d'options Master Addons, sous Widgets de navigation.
- Un menu créé sous Apparence, Menus dans votre tableau de bord. La démo utilise un menu” de“main avec Accueil, Tarification, Équipe et Contact, plus un sous-menu FAQ sous Contact.
Comment ajouter le widget du Menu Navigation #
Dans l'éditeur Elementor, recherchez le Éléments panneau pour Menu Nav et faites-le glisser sur la page, généralement dans une section d'en-tête. Le widget rend immédiatement votre premier menu WordPress.
Choisissez le menu et la mise en page #
Le Général la section pilote l'ensemble du widget. Sélectionnez Menu répertorie chaque menu de votre écran Menus ; choisissez celui à restituer. Disposition offres Horizontal, Vertical et Hamburger (Pro), et vous pouvez le définir séparément pour chaque appareil Pour les menus verticaux, Type ajoute le comportement: Normal, Basculer, Accordéon ou Côté. Voici le menu de démonstration dans une disposition verticale :
Pour une tête, Horizontal est le choix habituel. Alignement place les éléments à gauche, au centre, à droite ou justifiés Il n'y a pas de paramètre de point d'arrêt unique : basculez Élémentor sur la vue tablette ou téléphone et choisissez la disposition de cet appareil Les téléphones utilisent la bascule du hamburger qui vaut la peine d'essayer Vertical une fois même si vous n'en avez pas besoin ; voir les deux mises en page fait cliquer les options d'alignement.
Configurer le dropdown #
Le Menu déroulant la section contrôle le comportement et l'indicateur du sous-menu :
- Indicateur de baisse : afficher ou masquer la flèche à côté des éléments qui portent un sous-menu.
- Position de l'indicateur, écart entre, taille de l'icône : où se trouve la flèche et quelle est sa taille.
- Icône déroulante : échangez le chevron par défaut contre n'importe quelle icône, avec les états Normal et Hover et un contrôle Rotate.
- Largeur de chute et alignement : la taille du panneau du sous-menu et l'alignement du texte.
- Indicateur de sous-menu : l'icône pour les menus de troisième niveau.
Configurez la bascule mobile #
Lorsqu'un appareil utilise la disposition du hamburger, le menu s'effondre derrière un bouton bascule Le Menu Hamburger la section le configure : Alignement, Type (Icône, texte ou les deux), Vue (Par défaut, empilé ou encadré), Forme (Carré ou Cercle), et des icônes séparées pour les états Normal et Actif. Basculez l'éditeur sur l'aperçu mobile et la bascule apparaît avec le menu empilé en dessous :
Stylez les éléments du menu #
Dans le Style onglet, Élément de menu principal couvre les liens de niveau supérieur. Typographie gère la police :
En dessous, Normal, Survole, et Actif languettes portées chacune Couleur, Couleur d'arrière-plan de l'article, et Ombre de texte, plus partagé Rembourrage horizontal et vertical, Espace Entre« et contrôles aux frontières » La démo définit une couleur bleue, en prévisualisant en direct lorsque le curseur franchit les prix :
Stylez la bascule, la liste déroulante et les éléments #
Trois autres sections Style terminent le travail :
Hamburger style la bascule : couleur, arrière-plan, rayon de bordure, ombres, taille d'icône et remplissage, avec les états Normal, Hover et Actif.
Menu déroulant style le panneau de sous-menu : couleur d'arrière-plan, espace par rapport au haut, bordure et rembourrage. Sous-menu déroulant couvre les menus plus profonds.
Élément du menu déroulant stylise les liens à l'intérieur du panneau, avec les mêmes trois états plus a Diviseur groupe pour la ligne entre les éléments :
Le résultat sur la page #
Sur la page en direct, le menu restitue votre style : les états de vol stationnaire s'allument et le sous-menu FAQ tombe sous Contact exactement là où les paramètres de dépôt le placent.
Cas d'utilisation courants #
- En-têtes personnalisés construit avec Elementor, où le menu thématique ne peut pas suivre le design.
- Pages d'atterrissage avec leur propre menu mince, distinct de celui à l'échelle du site.
- Navigation dans la barre latérale utilisation de la mise en page verticale sur les pages de documentation ou de catégorie.
- Menus mobile-premier en s'appuyant sur les options d'icône, de vue et de forme de la bascule.
- Menus multi-niveaux avec des rabais et des panneaux de sous-niveau stylisés.
Conseils pour un meilleur menu de navigation #
- Construisez d'abord le menu dans WordPress. Le widget rend les menus de Apparence, Menus ; il ne les crée pas Structurez-y, stylez ici.
- Donnez à Hover et Active différentes couleurs. Hover répond au curseur ; Active indique aux visiteurs sur quelle page ils se trouvent La même couleur gaspille le signal.
- Vérifiez chaque appareil sur un vrai téléphone. Un menu de quatre éléments peut s'adapter parfaitement aux tablettes, tandis qu'un menu de sept éléments peut également nécessiter une disposition verticale sur les tablettes.
- Stylez explicitement l’arrière-plan déroulant. Un contenu transparent de sous-menu sur page est la plainte de menu la plus courante que nous voyons ; un arrière-plan solide du menu déroulant le corrige en un clic.
Tutoriel Vidéo #
Si vous souhaitez voir le widget du menu de navigation en action, cette vidéo parcourt la configuration complète, du choix du menu à la liste déroulante stylisée sur la page en direct :
Foire aux questions #
Qu'est-ce que le widget du menu de navigation dans Master Addons ?
Il s'agit d'un widget Elementor qui rend n'importe quel menu WordPress avec un contrôle de style complet. Il propose des mises en page horizontales et verticales définies par appareil, des sous-menus stylisés avec des indicateurs personnalisés et une bascule de hamburger configurable que les téléphones utilisent par défaut.
Où ajouter ou supprimer des éléments de menu ?
Dans WordPress, sous Apparence, Menus Le menu déroulant Sélectionner du widget répertorie chaque menu que vous y avez construit et restitue celui que vous choisissez Les éléments, la commande et les sous-menus sont gérés dans WordPress ; le widget gère la disposition et le style.
Comment puis-je faire un sous-menu déroulant ?
Nichez les éléments dans votre menu WordPress en les faisant glisser sous un parent sur l'écran Menus Le widget affiche automatiquement un indicateur de baisse à côté des parents, et les sections Menu déroulant et Liste déroulante contrôlent le comportement et le style du panneau.
Quand apparaît le menu hamburger mobile ?
Sur les téléphones par défaut Master Addons Pro vous permet de choisir la disposition Hamburger pour n'importe quel appareil, avec les types Popup et Offcanvas La section Menu Hamburger style la bascule, y compris le type d'icône ou de texte, les vues empilées ou encadrées, la forme carrée ou circulaire et les icônes normales et actives séparées.
Le menu peut-il être vertical au lieu d'être horizontal ?
Oui. Le contrôle de mise en page offre des fonctionnalités horizontales, verticales et à hamburger (Pro).Correspond aux barres latérales et aux pages de documentation des combinaisons verticales, et le contrôle de type ajoute des comportements Toggle, Accordéon ou Side en haut.
Envelopper #
Le widget du menu de navigation place le menu du site là où vit le reste de votre conception : choisissez un menu WordPress, choisissez la mise en page, stylisez les éléments, les déroulages et la bascule mobile, et publiez Il s'associe naturellement au Contenu hors toile widget (Pro) pour la navigation mobile glissante Parcourir l'ensemble complet de Widgets et extensions Master Addons& voir le Page du widget Nav Menu pour une comparaison avec les widgets de menu d'Elementor Pro.
