Principaux points à retenir
- Elementor sans Pro ne peut pas placer un menu WordPress sur une page ou dans un en-tête, car le widget Elementor Menu (anciennement Nav Menu) est livré uniquement avec Elementor Pro.
- Un menu Nav Elementor sans Pro peut être construit avec le widget Master Addons Nav Menu, qui affiche n'importe quel menu WordPress et définit sa mise en page séparément pour le bureau, la tablette et le mobile.
- Les sous-menus d'un menu de navigation Elementor proviennent de WordPress : faites glisser un élément légèrement juste sous son parent dans Apparence > Menus jusqu'à ce qu'il lise “sub item”, puis enregistrez.
- Le widget Master Addons Nav Menu comporte quatre types verticaux : Normal ouvre les sous-menus sur le côté en vol stationnaire, Basculer et Accordéon les développe en cliquant et Side épingle le menu sur le bord de la page.
- Le widget Master Addons Nav Menu donne aux téléphones une bascule de hamburger par défaut, tandis que Hamburger sur ordinateur ou tablette et les types Popup et Offcanvas ont besoin de Master Addons Pro.
Vous pouvez créer un menu de navigation Elementor stylisé sans acheter Elementor Pro. Le widget de menu d'Elementor est uniquement Pro, mais le widget Master Addons Nav Menu intègre n'importe quel menu WordPress dans l'éditeur, stylise chaque niveau du panneau et s'effondre en hamburger sur les téléphones.
Ce guide couvre pourquoi le noyau Elementor laisse le vide, les façons de le remplir et la construction de l'en-tête en six étapes. Ensuite viennent les sous-menus, les quatre types de menu verticaux, le comportement mobile, les raisons habituelles pour lesquelles un menu n'apparaît pas et les parties qui nécessitent Master Addons Pro.
Table des matières
Pourquoi Elementor free n'a pas de widget de menu
Le plugin gratuit d'Elementor expédie des dizaines de widgets de mise en page et de contenu et aucun moyen de placer un menu de navigation WordPress dans une page ou un modèle Le widget qui le fait, appelé à l'origine Nav Menu et maintenant le widget Menu, est Pro uniquement. Documentation propre à l'élémenteur le confirme.
Vous pouvez toujours construire le menu sous Apparence > Menus L'écart est du côté de la conception : core Elementor n'a rien dans lequel déposer ce menu, il apparaît donc partout où votre thème l'imprime.
Sur un site simple avec un thème prêt pour le menu, cela peut suffire Une fois que vous voulez un en-tête personnalisé, un hamburger vous basculer ou un méga menu, Elementor gratuit seul ne peut pas y arriver Les anciens tutoriels appellent le widget Pro Nav Menu et les plus récents l'appellent Menu, mais il a toujours EU besoin de Pro.
Trois façons d'ajouter un menu nav sans Pro
Il existe trois options réelles sans licence Elementor Pro. La quatrième ligne est Elementor Pro, à titre de comparaison.
| Méthode | Besoins d'Elementor Pro | Style de l'éditeur | mobile | Meilleur pour |
|---|---|---|---|---|
| Lieu du menu du thème | Non | Aucun, le thème le contrôle | Dépend du thème | Sites simples sur un thème prêt pour les menus |
| Widget Master Addons Nav Menu | Non | Plein, du panneau | Hamburger bascule sur les téléphones | Un en-tête personnalisé sans Elementor Pro |
| Menu Mega des modules complémentaires principaux | Non | Plein | S'effondre en bascule | Panneaux multicolonnes, grande navigation |
| Widget Elementor Pro Menu | Oui, permis payé | Plein | Comprend hors toile | Sites déjà sur Elementor Pro |
Emplacement du menu thématique. Chaque thème enregistre au moins une zone de menu Attribuez votre menu et il fonctionne avec zéro plugin, mais vous n'obtenez aucun contrôle sur son look de Elementor, et le comportement mobile est quel que soit l'auteur du thème construit Si ce menu semble déjà correct sur un téléphone, sautez le widget.
Widget Master Addons Nav Menu. Il s'agit de l'option Elementor-native qui s'exécute sans Elementor Pro. Abandonnez le Widget de menu Nav dans n'importe quel modèle, pointez-le vers un menu à partir de Apparence > Menus, et les couleurs de style, l'espacement, les sous-menus et le mobile basculent à partir du panneau.
Menu Mega des modules complémentaires principaux. Pour les sites comportant de nombreuses catégories, l'extension Mega Menu crée des panneaux multicolonnes au-dessus du même widget et fonctionne sans Elementor Pro. Procédure pas à pas : comment construire un méga menu dans Elementor sans Pro.
Élémenteur Pro. Si vous le possédez déjà, utilisez son widget Menu et Theme Builder Deux plugins pour un travail n'ajoutent que du poids.
Vous voulez voir chaque mise en page avant de construire ? Le Page du widget Nav Menu propose des démos en direct d'en-têtes horizontaux, de barres latérales verticales et du hamburger téléphonique.
Construire le menu, commencer à terminer
La build se produit dans wp-admin et l'éditeur Elementor, sans code Vérifiez d'abord que votre thème n'imprime pas son propre en-tête, car deux en-têtes empilés sont le désordre le plus courant ici.
Étape 1 : Enregistrez le menu
Accédez à Apparence > Menus, créez un menu, ajoutez vos pages et liens et donnez-lui un nom que vous reconnaîtrez dans six mois. Il s'agit d'un WordPress simple, rien de spécifique au plugin et WordPress a un guide de l'écran Menus si vous n'en avez pas construit auparavant Configurez ici aussi les éventuelles chutes (voir le sous-menu section).
Étape 2 : Créer un modèle d'en-tête
Ouvrir le Constructeur de thèmes Master Addons et ajoutez un nouveau modèle avec le type défini sur Header Cela vous permet de remplacer l'en-tête du thème au lieu de le combattre Pour partir d'une conception finie, importez l'un de ceux-ci Modèles d'en-tête d'élémentor et pointez son widget de menu sur votre menu.
Étape 3 : Ajoutez le widget Nav Menu et choisissez votre menu
Recherchez dans le panneau Élémenteur “Nav Menu” et faites-le glisser dans l'en-tête (son panneau lit le menu Navigation).Dans Contenu > Général, choisissez le menu que vous avez construit à l'étape 1 dans la liste déroulante Sélectionner le menu, puis définissez la disposition horizontale convient à un en-tête standard, avec un contrôle d'alignement à côté. Vertical convient à une barre latérale et ajoute un contrôle de type avec Normal, Basculer, Accordéon et Côté.
La mise en page est définie par appareil Le bureau démarre sur Horizontal et les téléphones démarrent sur Hamburger, de sorte que le menu s'effondre sur un téléphone sans configuration supplémentaire.
Étape 4 : Stylez-le
Les états de police, de couleur, d'espacement et de survol sont tous dans l'onglet Style, sans CSS personnalisé. L'élément de menu principal contient le remplissage, l'espacement des éléments, l'alignement, la typographie, les couleurs normales, de vol stationnaire et actives, l'arrière-plan, la bordure, le rayon et l'ombre du texte. Core Elementor ne peut rien faire de tout cela pour un menu.
Étape 5 : Publiez et attribuez-le
Enregistrez le modèle et attribuez-le à l'ensemble du site Sans Master Addons Pro qui est la seule condition d'affichage disponible, qui fonctionne lorsque vous voulez un en-tête partout.
Étape 6 : Vérifiez-le sur l'avant
Chargez le site et confirmez un seul rendu d'en-tête Si le menu du thème s'affiche aussi, désactivez-le dans les paramètres Customizer du thème, puisque le masquer avec CSS laisse le balisage dans la page.
Comment ajouter un sous-menu et styliser le dropdown
Pour ajouter un sous-menu à un menu de navigation Elementor, imbriquez l'élément sous son parent dans Apparence > Menus, et le widget le transforme en liste déroulante Il n'y a pas de paramètre de sous-menu dans Elementor.
- Ouvrez Apparence > Menus et sélectionnez le menu utilisé par le widget.
- Ajoutez la page enfant ou le lien s'il n'est pas encore dans le menu.
- Faites-le glisser sous son parent et légèrement vers la droite jusqu'à ce que l'étiquette “sub item” apparaisse à côté de son nom.
- Cliquez sur Enregistrer le menu, puis rechargez l'éditeur Elementor ou le frontal.
Sur un en-tête horizontal, le parent obtient une flèche indicatrice (réglée dans Contenu > Icône Indicateur) et le sous-menu s'ouvre en vol stationnaire.
Dropdown Menu stylise le panneau (largeur, arrière-plan, bordure, rayon, ombre, distance de la barre supérieure).Dropdown Menu Item stylise les liens à l'intérieur de celui-ci : typographie, espace, remplissage, couleurs Normal, Hover et Active, et un diviseur en option Les menus de troisième niveau obtiennent des sections correspondantes de Dropdown Submenu. Le démo des variations du menu déroulant montre plusieurs styles de panneaux construits de cette façon.
Les quatre types de menu verticaux
Le menu vertical Elementor dans Master Addons se décline en quatre types : Normal, Basculer, Accordéon et Côté Définir la disposition sur Vertical et un contrôle de Type apparaît sous celui-ci Le type est défini par appareil aussi, de sorte qu'une barre latérale peut utiliser Accordéon sur une tablette et Normal sur le bureau.
normal
Normal ouvre chaque sous-menu sur le côté de son parent en vol stationnaire, comme un flyout Il convient à une barre latérale de bureau avec de la place à droite.
Basculer
Toggle développe le sous-menu sous son élément en clic et pousse les éléments ci-dessous vers le bas Plusieurs sous-menus peuvent rester ouverts à la fois, ce qui aide lorsque la barre latérale double comme un index.
Accordéon
Accordéon développe également sur clic, mais ouvrir un sous-menu ferme celui ouvert Cela garde les menus longs courts dans une colonne étroite.
Côté
Side épingle le menu sur le bord de la page, avec les éléments principaux dans une barre verticale et chaque sous-menu dans un panneau à côté. Le démo du menu latéral vertical l'affiche sur une page complète.
Le démo du menu de navigation verticale affiche une version stylée de la barre latérale.
Le faire fonctionner sur mobile
Sur les téléphones, le widget Nav Menu s'effondre par défaut dans une bascule de hamburger La section Menu Hamburger de l'onglet Contenu définit son alignement, son icône, son texte ou les deux, une vue, une forme et des icônes normales et actives distinctes par défaut, empilées ou encadrées.
La bascule fonctionne à partir du clavier ainsi qu'au toucher Entrez et Space ouvrez-la, Esc la ferme, et un tap en dehors du menu la ferme aussi.
Sur les téléphones, le menu s'ouvre en place sous la bascule et les sous-menus s'étendent à l'intérieur. Cela convient aux menus courts et moyens. Un panneau hors toile qui glisse de côté est une fonctionnalité Pro, couverte ci-dessous.
Testez sur un vrai téléphone ainsi que la barre d'outils de l'appareil du navigateur, car les cibles de pression et les prises extérieures se comportent différemment sur un écran tactile Vérifiez que l'icône change d'état lorsque le menu est ouvert et qu'un élément de sous-menu est joignable avec un pouce.
Pourquoi votre menu de navigation Elementor ne s'affiche pas
Lorsqu'un menu de la navigation Elementor ne s'affiche pas, la cause est presque toujours l'une de ces quatre. Vérifiez-les dans l'ordre.
- Aucun menu n'est sélectionné, ou aucun menu n'existe. Créer un menu ne le connecte pas au widget, alors choisissez-le dans le menu Sélectionner. Si le champ indique “Il n'y a pas de menus dans votre site”, créez-en un en premier.
- Le modèle d'en-tête n'est pas appliqué. Un modèle d'en-tête ne fait rien tant qu'il n'a pas une condition d'affichage Définissez l'intégralité du site dans le générateur de thèmes et vérifiez qu'aucun en-tête de thème ne le couvre.
- Sur un téléphone, le menu est derrière le hamburger. Les téléphones affichent la bascule au lieu des liens Si la couleur de la bascule correspond à l'arrière-plan de l'en-tête, l'icône est invisible et le menu semble manquant Donnez à la bascule une couleur contrastante dans Style > Hamburger.
- Mise en cache ou JavaScript retardé. Un cache de page peut servir l'ancien en-tête, et le délai JavaScript peut arrêter les déroulages et le basculement de fonctionner jusqu'à ce que le visiteur déplace la souris Effacez le cache et excluez les scripts de menu du délai JS.
Quels besoins Master Addons Pro
Deux parties de cette configuration nécessitent Master Addons Pro.
Hamburger sur ordinateur ou tablette, ainsi que les types Popup et Offcanvas. La mise en page offre horizontale et verticale sur chaque appareil, avec Hamburger marqué Pro. Les téléphones retirent le hamburger par défaut de la boîte, mais Hamburger sur des écrans plus larges et les types Popup ou Offcanvas ont besoin de Pro. Ainsi, un menu coulissant hors toile est une fonctionnalité payante ici, via la disposition Hamburger ou la version séparée Widget de contenu hors toile(en anglais), qui ouvre n'importe quel modèle enregistré dans un panneau Sans Pro, l'option la plus proche est le type Side de la disposition Vertical.
Le ciblage du générateur de thèmes est une règle. Le générateur de thèmes gratuit enregistre exactement une condition d'affichage : Site entier Un en-tête différent sur une page de destination ou pour les membres connectés a besoin de Pro. Notre panne des conditions d'affichage explique comment fonctionnent les règles de condition, et le guide gratuit du créateur de thèmes couvre le reste de ce niveau.
Le widget n'a pas d'animations de pointeur de survol (le menu d'Elementor Pro en a) et aucun paramètre collant sur aucun plan Pour garder l'en-tête en vue, utilisez les effets de mouvement d'Elementor Pro sur le conteneur d'en-tête, ou ajoutez selector { position: sticky; top: 0; z-index: 99; } au conteneur par le Extension CSS personnalisée Master Addons. Le guide d'en-tête collant marche à travers les deux.
Si vous possédez déjà Elementor Pro, rien de tout cela ne s'applique Le répertoire des widgets et des extensions répertorie le reste du plugin, et si l'en-tête a besoin d'une section que vous continuez à reconstruire à la main, le Constructeur de widgets (Pro) le transforme en un vrai widget Le page de tarification répertorie les niveaux.
Questions fréquemment posées
Elementor gratuit a-t-il un widget de menu ?
Le widget Menu de No. Elementor est livré uniquement avec Elementor Pro. Master Addons ajoute son propre widget Nav Menu qui s'exécute sans Elementor Pro, afin que vous puissiez placer et styliser un véritable menu de navigation sans cette licence.
Pouvez-vous créer un menu nav dans Elementor sans Pro ?
Oui. Enregistrez le menu sous Apparence > Menus, puis utilisez un addon tel que Addons principaux pour déposer un widget Nav Menu dans un modèle d'en-tête et le styliser à partir du panneau L'élémenteur libre ne peut à lui seul placer ou styliser un menu.
Comment ajouter un menu hamburger mobile dans Elementor sans Pro ?
Ajoutez le widget Master Addons Nav Menu à votre modèle d'en-tête et sélectionnez votre menu Il s'effondre sur un hamburger basculer sur les téléphones par défaut, avec les paramètres d'icône, de texte, de vue et de forme dans la section Menu Hamburger.
Le menu hors-toile a-t-il besoin de Master Addons Pro ?
Oui. La toile off est un type dans la disposition Hamburger, et les types Popup et Offcanvas, ou Hamburger sur ordinateur et tablette, nécessitent Master Addons Pro. Sans Pro, vous obtenez des dispositions horizontales et verticales ainsi que le hamburger par défaut sur les téléphones, et le Vertical Le type latéral est l'option à ancrage latéral la plus proche.
Comment créer un méga menu dans Elementor sans Pro ?
Master Addons inclut une extension Mega Menu qui construit des panneaux multicolonnes, s'effondre sur mobile et fonctionne sans Elementor Pro. Il fonctionne avec le widget Nav Menu pour une navigation plus large avec des catégories ou du contenu promotionnel.
Pourquoi mon menu de navigation Elementor n'apparaît-il pas ?
Habituellement, aucun menu n'est choisi dans le champ Sélectionner le menu du widget. Vérifiez ensuite que le modèle d'en-tête est attribué à l'ensemble du site, que l'icône du hamburger n'est pas de la même couleur que l'en-tête des téléphones et que la mise en cache ou le délai JavaScript ne sert pas une ancienne version.
Ai-je besoin de Master Addons Pro pour le widget Nav Menu ?
N° Le widget est inclus sans Pro, avec le style, les sous-menus, les dispositions horizontales et verticales par appareil, quatre types verticaux et le hamburger du téléphone Pro ajoute Hamburger sur le bureau et la tablette, les types Popup et Offcanvas et les conditions du créateur de thème au-delà de l'ensemble du site.
Comment ajouter un sous-menu à un menu de navigation Elementor ?
Accédez à Apparence > Menus, faites glisser l'élément enfant sous son parent et légèrement vers la droite jusqu'à ce qu'il soit étiqueté “sub item”, puis cliquez sur Enregistrer le menu. Le widget Nav Menu l'affiche sous forme de liste déroulante, stylisé dans Style > Menu déroulant et élément de menu déroulant.
Que faire ensuite
Construisez l'en-tête avec une disposition horizontale et un ou deux sous-menus, puis chargez-le sur votre propre téléphone avant de coiffer autre chose La plupart des problèmes de menu sont des problèmes mobiles, et ils apparaissent en dix secondes sur un appareil réel Si le menu a besoin de panneaux multicolonnes, le méga guide de menu ramasse à partir de là, et le Documentation du menu Nav répertorie chaque contrôle.
- Page du widget Nav Menu: mises en page, démos live et une comparaison avec les widgets de menu d'Elementor Pro.
- Extension Mega Menu: panneaux multicolonnes avec n'importe quel widget Elementor à l'intérieur.
- Navbar au charbon de bois avec méga démo de menu: un en-tête complet construit avec les deux.
Lecture connexe
