Wichtige Erkenntnisse
- Elementor ohne Pro kann kein WordPress-Menü auf einer Seite oder in einem Header platzieren, da das Elementor-Menü-Widget (ehemals Nav-Menü) nur mit Elementor Pro ausgeliefert wird.
- Ein Elementor-Navmenü ohne Pro kann mit dem Master Addons Nav Menu-Widget erstellt werden, das jedes WordPress-Menü anzeigt und sein Layout für Desktop, Tablet und Mobilgeräte separat festlegt.
- Untermenüs in einem Elementor-Nav-Menü stammen von WordPress: Ziehen Sie ein Element leicht rechts unter sein übergeordnetes Element in Aussehen > Menüs, bis es “Unterelement” liest, und speichern Sie es dann.
- Das Master Addons Nav Menu Widget hat vier vertikale Typen: Normal öffnet Untermenüs seitlich beim Hover, Toggle und Accordion erweitern sie beim Klicken und Side pins das Menü am Seitenrand.
- Das Master Addons Nav Menu-Widget bietet Telefonen standardmäßig einen Hamburger-Toggle, während Hamburger auf Desktop oder Tablet und die Typen Popup und Offcanvas Master Addons Pro benötigen.
Sie können ein Elementor-Navmenü im Stil erstellen, ohne Elementor Pro zu kaufen. Das eigene Menü-Widget von Elementor ist nur Pro, aber das Master Addons Nav Menu-Widget zieht jedes WordPress-Menü in den Editor, gestaltet jedes Level aus dem Panel und bricht auf Telefonen zu einem Hamburger zusammen.
Diese Anleitung behandelt, warum Kernelementor die Lücke verlässt, die Möglichkeiten, sie zu füllen und die Kopfzeile in sechs Schritten zu erstellen. Dann kommen Untermenüs, die vier vertikalen Menütypen, mobiles Verhalten, die üblichen Gründe, warum ein Menü nicht angezeigt wird, und die Teile, die Master Addons Pro benötigen.
Inhaltsverzeichnis
Warum Elementor free kein Menü-Widget hat
Das kostenlose Plugin von Elementor liefert Dutzende Layout - und Content-Widgets und keine Möglichkeit, ein WordPress-Navigationsmenü in einer Seite oder Vorlage zu platzieren Das Widget, das es macht, ursprünglich Nav Menu und jetzt Menu-Widget genannt, ist nur Pro. Elementoreigene Dokumentation Bestätigt es.
Sie können das Menü weiterhin unter Aussehen > Menüs erstellen. Die Lücke befindet sich auf der Designseite: Core Elementor hat nichts, in das Sie dieses Menü eingeben können, sodass es überall dort angezeigt wird, wo Ihr Thema es ausdruckt.
Auf einer einfachen Seite mit einem menügefördernden Theme reicht das vielleicht, wenn man einmal einen benutzerdefinierten Header, einen von einem kontrollierten Hamburger-Toggle oder ein Mega-Menü haben möchte, kommt der kostenlose Elementor alleine nicht hin Alte Tutorials rufen das Pro-Widget-Nav-Menü auf und neuere nennen es Menü, aber es hat schon immer Pro gebraucht.
Drei Möglichkeiten, ein Nav-Menü ohne Pro hinzuzufügen
Es gibt drei echte Optionen ohne Elementor Pro Lizenz Die vierte Reihe ist Elementor Pro, zum Vergleich.
| Methode | Benötigt Elementor Pro | Editor-styling | Mobil | Am besten für |
|---|---|---|---|---|
| Themenmenü-Standort | Nein | Keine, das Theme steuert es | Kommt auf das Thema an | Einfache Websites zu einem menügefährdeten Thema |
| Master Addons Nav-Menü-Widget | Nein | Voll, aus dem Panel | Hamburger-Toggle auf Telefonen | Ein benutzerdefinierter Header ohne Elementor Pro |
| Master Addons Mega-Menü | Nein | Voll | Zusammenbricht zu einem Kipphebel | Mehrspaltige Panels, große Navigation |
| Elementor Pro Menü Widget | Ja, bezahlte Lizenz | Voll | Enthält Off-Canvas | Websites bereits auf Elementor Pro |
Standort des Themenmenüs. Jedes Theme registriert mindestens einen Menübereich Weisen Sie Ihr Menü zu und es funktioniert mit null Plugins, aber Sie erhalten keine Kontrolle über sein Aussehen von Elementor, und mobiles Verhalten ist, was auch immer das Design-Autor gebaut hat Wenn dieses Menü bereits auf einem Telefon richtig aussieht, überspringen Sie das Widget.
Master Addons Nav-Menü-Widget. Dies ist die Elementor-native Option, die ohne Elementor Pro läuft. Lassen Sie die Nav-Menü-Widget Richten Sie es in eine beliebige Vorlage auf ein Menü aus Aussehen > Menüs und geben Sie Farben, Abstände, Untermenüs und den mobilen Umschalter aus dem Bedienfeld ein.
Master Addons Mega-Menü. Für Websites mit vielen Kategorien erstellt die Mega-Menü-Erweiterung mehrspaltige Panels auf demselben Widget und läuft ohne Elementor Pro. Komplettlösung: So erstellen Sie ein Mega-Menü in Elementor ohne Pro.
Elementor Pro. Wenn Sie es bereits besitzen, verwenden Sie sein Menü-Widget und den Theme Builder. Zwei Plugins für einen Job fügen nur Gewicht hinzu.
Möchten Sie jedes Layout sehen, bevor Sie bauen? Die Widget-Seite des Nav-Menüs Live-Demos mit horizontalen Headern, vertikalen Seitenleisten und dem Telefon-Hamburger.
Erstellen Sie das Menü und beginnen Sie mit dem Beenden
Der Build geschieht in wp-admin und dem Elementor-Editor, ohne Code Überprüfen Sie zunächst, ob Ihr Theme keinen eigenen Header druckt, denn zwei gestapelte Header sind hier das häufigste Durcheinander.
Schritt 1: Registrieren Sie das Menü
Gehen Sie zu Aussehen > Menüs, erstellen Sie ein Menü, fügen Sie Ihre Seiten und Links hinzu und geben Sie ihm einen Namen, den Sie in sechs Monaten erkennen werden. Dies ist einfach WordPress, nichts Plugin-spezifisches und WordPress hat einen Anleitung zum Menüs-Bildschirm Wenn Sie noch keinen gebaut haben Auch hier können Sie Dropdowns einrichten (siehe die Untermenüabschnitt).
Schritt 2: Erstellen Sie eine Header-Vorlage
Öffnen Sie die Master Addons Theme Builder Und fügen Sie eine neue Vorlage mit dem Typ in Header gesetzt Dies ermöglicht es Ihnen, den Header des Themes zu ersetzen, anstatt ihn zu bekämpfen Um von einem fertigen Design zu beginnen, importieren Sie einen von diesen Elementor-Header-Vorlagen und richten Sie das Menü-Widget auf Ihr Menü.
Schritt 3: Fügen Sie das Nav-Menü-Widget hinzu und wählen Sie Ihr Menü aus
Suchen Sie das Elementor-Panel nach “Nav-Menü” und ziehen Sie es in die Kopfzeile (sein Panel liest Navigationsmenü).Wählen Sie in Inhalt > Allgemein das Menü, das Sie in Schritt 1 erstellt haben, aus der Auswahlmenü-Dropdown-Taste, dann legen Sie das Layout fest Horizontal passt zu einem Standard-Header, daneben befindet sich ein Ausrichtungsregler. Vertikal passt zu einer Seitenleiste und fügt einen Typ-Regler mit Normal, Umschalten, Akkordeon und Seite hinzu.
Layout wird pro Gerät eingestellt Desktop startet auf Horizontal und Telefone starten auf Hamburger, sodass das Menü auf einem Telefon ohne extra Setup zusammenbricht.
Schritt 4: Style it
Schriftart, Farbe, Abstand und Hover-Zustände befinden sich alle in der Registerkarte Stil, ohne benutzerdefiniertes CSS. Hauptmenü Artikel enthält Polsterung, Elementlücke, Ausrichtung, Typografie, Normal, Hover und Aktive Farben, Hintergrund, Rand, Radius und Textschatten Das alles kann Core Elementor nicht für ein Menü tun.
Schritt 5: Veröffentlichen und zuweisen
Speichern Sie die Vorlage und weisen Sie sie der gesamten Website zu. Ohne Master Addons Pro ist das die einzige verfügbare Anzeigebedingung, die funktioniert, wenn Sie überall einen Header haben möchten.
Schritt 6: Überprüfen Sie es am vorderen Ende
Laden Sie die Seite und bestätigen Sie nur eine Header-Renderings, Wenn das Menü des Themes auch angezeigt wird, schalten Sie es in den Customizer-Einstellungen des Themes aus, da das Ausblenden mit CSS das Markup in der Seite hinterlässt.
So fügen Sie ein Untermenü hinzu und gestalten den Dropdown
Um ein Untermenü zu einem Elementor-Navmenü hinzuzufügen, nisten Sie das Element unter seinem übergeordneten Element in Aussehen > Menüs, und das Widget verwandelt es in einen Dropdown. Es gibt keine Untermenüeinstellung in Elementor.
- Öffnen Sie die Darstellung > Menüs und wählen Sie das Menü aus, das das Widget verwendet.
- Fügen Sie die Kinderseite oder den Link hinzu, wenn diese noch nicht im Menü ist.
- Ziehen Sie es unter seinen übergeordneten und leicht nach rechts, bis neben seinem Namen die Beschriftung “Unterelement” erscheint.
- Klicken Sie auf Menü speichern, und laden Sie dann den Elementor-Editor oder das Frontend neu.
Bei einem horizontalen Header erhält der übergeordnete Header einen Anzeigepfeil (eingestellt in Inhalt > Anzeigesymbol) und das Untermenü öffnet sich im Mauszeiger.
Dropdown-Menü gestaltet das Panel (Breite, Hintergrund, Umrandung, Radius, Schatten, Abstand von der oberen Leiste) Dropdown-Menü Artikel stylt die darin enthaltenen Links: Typografie, Lücke, Polsterung, Normal, Hover - und Aktivfarben, und eine optionale Trennwand Menü der dritten Ebene erhalten passende Dropdown-Untermenüabschnitte Die Dropdown-Menüvariationen Demo Zeigt mehrere auf diese Weise gebaute Tafelstile.
Die vier vertikalen Menütypen
Das vertikale Elementor-Menü in Master-Addons gibt es in vier Typen: Normal, Toggle, Accordion und Side Layout auf Vertical einstellen und ein Typ-Steuerelement erscheint darunter Typ wird auch pro Gerät eingestellt, so kann eine Sidebar Accordion auf einem Tablet und Normal auf dem Desktop verwenden.
gewöhnlich
Normal öffnet jedes Untermenü auf der Seite seines übergeordneten Menüs im Schwebeflug, wie ein Flyout Es passt zu einer Desktop-Seitenleiste mit Platz auf der rechten Seite.
Umschalten
Toggle erweitert das Untermenü unter seinem Element auf Klick und drückt die unten stehenden Elemente nach unten Mehrere Untermenüs können auf einmal geöffnet bleiben, was hilft, wenn die Seitenleiste gleichzeitig als Index dient.
Akkordeon
Accordion erweitert sich auch auf Klick, aber das Öffnen eines Untermenüs schließt das offene Das hält lange Menüs in einer schmalen Spalte kurz.
Seite
Seite pinnt das Menü an den Seitenrand, wobei die Hauptpunkte in einer vertikalen Leiste und jedes Untermenü in einem Panel daneben liegen Die Senkrechte Seitenmenü Demo Zeigt es auf einer ganzen Seite.
Die Demo des vertikalen Navigationsmenüs Zeigt eine gestylte Sidebar-Version.
Damit es mobil funktioniert
Auf Telefonen kollabiert das Nav-Menü-Widget standardmäßig in einen Hamburger-Umschalter. Der Hamburger-Menüabschnitt der Inhaltsregisterkarte legt seine Ausrichtung, sein Symbol, seinen Text oder beides, eine Standardansicht, eine gestapelte oder gerahmte Ansicht, eine Form und separate normale und aktive Symbole fest.
Der Umschalter funktioniert sowohl über die Tastatur als auch per Berührung. Geben Sie ihn ein und Space öffnet ihn, Esc schließt ihn und ein Tippen außerhalb des Menüs schließt ihn ebenfalls.
Bei Telefonen öffnet sich das Menü an Ort und Stelle unter dem Umschalter, und Untermenüs erweitern sich darin Das passt zu kurzen und mittleren Menüs Ein von der Seite hinein gleitetes Off-Canvas-Panel ist ein Pro-Feature, das unten behandelt wird.
Testen Sie auf einem echten Telefon sowie in der Gerätesymbolleiste des Browsers, denn Tippziele und Außentipps verhalten sich auf einem Touchscreen unterschiedlich Überprüfen Sie, ob das Symbol den Status ändert, wenn das Menü geöffnet ist, und dass ein Untermenüpunkt mit einem Daumen erreichbar ist.
Warum Ihr Elementor-Navmenü nicht angezeigt wird
Wenn ein Elementor-Nav-Menü nicht angezeigt wird, ist die Ursache fast immer eine dieser vier. Überprüfen Sie sie der Reihe nach.
- Es ist kein Menü ausgewählt oder es existiert kein Menü. Das Erstellen eines Menüs verbindet es nicht mit dem Widget, also wählen Sie es im Menü auswählen aus Wenn das Feld “Es gibt keine Menüs auf Ihrer Seite” sagt, erstellen Sie zuerst eines.
- Die Header-Vorlage wird nicht angewendet. Eine Header-Vorlage tut nichts, bis sie eine Anzeigebedingung hat Stellen Sie im Theme Builder eine gesamte Site ein und überprüfen Sie, ob kein Theme-Header sie abdeckt.
- Bei einem Telefon befindet sich die Speisekarte hinter dem Hamburger. Telefone zeigen den Umschalter statt der Links, passt die Umschaltfarbe zum Kopfhintergrund, ist das Icon unsichtbar und das Menü sieht aus Geben Sie dem Umschalter eine Kontrastfarbe in Stil > Hamburger.
- Zwischenspeichern oder verzögertes JavaScript. Ein Seitencache kann den alten Header bedienen, und die JavaScript-Verzögerung kann Dropdowns und den Umschalter so lange nicht mehr funktionieren lassen, bis der Besucher die Maus bewegt Löschen Sie den Cache und schließen Sie die Menüskripte von der JS-Verzögerung aus.
Was braucht Master Addons Pro
Zwei Teile dieses Setups benötigen Master Addons Pro.
Hamburger auf Desktop oder Tablet, dazu die Typen Popup und Offcanvas. Layout bietet Horizontal und Vertikal auf jedem Gerät, wobei Hamburger mit Pro gekennzeichnet ist. Telefone holen den Standard-Hamburger aus dem Karton, aber Hamburger auf breiteren Bildschirmen und die Popup- oder Offcanvas-Typen benötigen Pro. Ein verschiebbares Off-Canvas-Menü ist hier also eine kostenpflichtige Funktion, durch das Hamburger-Layout oder das separate Off-Canvas-Inhalts-Widget, die jede gespeicherte Vorlage in einem Panel öffnet Ohne Pro kommt dem Side-Typ des Vertical-Layouts am nächsten.
Theme Builder Targeting ist eine Regel. Der kostenlose Theme Builder speichert genau eine Anzeigebedingung: Gesamte Seite Ein anderer Header auf einer Landingpage oder für angemeldete Mitglieder braucht Pro. Unser Anzeigebedingungen Aufschlüsselung Erklärt, wie Bedingungsregeln funktionieren, und die Kostenloser Theme Builder-Leitfaden Deckt den Rest dieser Ebene ab.
Das Widget hat keine Hover-Pointer-Animationen (das Menü von Elementor Pro hat sie) und keine Sticky-Einstellung auf irgendeinem Plan, um den Header im Blick zu behalten, verwenden Sie die Motion Effects von Elementor Pro auf dem Header-Container, oder fügen Sie hinzu selector { position: sticky; top: 0; z-index: 99; } zum Behälter durch den Master Addons Benutzerdefinierte CSS-Erweiterung. Die Klebrige Kopfzeile Durch beide geht.
Wenn Sie bereits Elementor Pro besitzen, gilt das alles nicht Die Verzeichnis für Widgets und Erweiterungen Listet den Rest des Plugins auf, und wenn der Header einen Abschnitt benötigt, den Sie weiterhin von Hand neu erstellen, wird der Widget-builder (Pro) macht daraus ein richtiges Widget Die Preisseite Listen die Stufen auf.
Häufig gestellte Fragen
Verfügt der kostenlose Elementor über ein Menü-Widget?
Das Menü-Widget Nr. Elementor wird nur mit Elementor Pro ausgeliefert. Master Addons fügt ein eigenes Nav-Menü-Widget hinzu, das ohne Elementor Pro ausgeführt wird, sodass Sie ein echtes Navigationsmenü ohne diese Lizenz platzieren und stylen können.
Kann man ein Nav-Menü in Elementor ohne Pro erstellen?
Ja. Registrieren Sie das Menü unter Aussehen > Menüs, dann verwenden Sie ein Addon wie Master Addons, um ein Nav Menu Widget in eine Header-Vorlage zu legen und es aus dem Panel zu stylen Free Elementor allein kann kein Menü platzieren oder stylen.
Wie füge ich ein mobiles Hamburger-Menü in Elementor ohne Pro hinzu?
Fügen Sie das Master Addons Nav Menu Widget zu Ihrer Header-Vorlage hinzu und wählen Sie Ihr Menü aus. Es wird standardmäßig auf Telefonen zu einem Hamburger-Toggle zusammengefasst, mit Symbol-, Text-, Ansichts- und Formeinstellungen im Hamburger-Menübereich.
Benötigt das Off-Canvas-Menü Master Addons Pro?
Ja. Off-Canvas ist ein Typ innerhalb des Hamburger-Layouts, und die Typen Popup und Offcanvas oder Hamburger auf Desktop und Tablet erfordern Master Addons Pro. Ohne Pro erhalten Sie horizontale und vertikale Layouts sowie den Standard-Hamburger auf Telefonen und die Vertical Der Side-Typ ist die nächstgelegene seitlich verankerte Option.
Wie erstelle ich ein Mega-Menü in Elementor ohne Pro?
Master Addons enthält eine Mega-Menü-Erweiterung, die mehrspaltige Panels erstellt, auf Mobilgeräten zusammenbricht und ohne Elementor Pro läuft. Es funktioniert mit dem Nav-Menü-Widget für eine größere Navigation mit Kategorien oder Werbeinhalten.
Warum wird mein Elementor-Nav-Menü nicht angezeigt?
Normalerweise wird im Feld Menü auswählen des Widgets kein Menü ausgewählt. Überprüfen Sie dann, ob die Header-Vorlage der gesamten Website zugewiesen ist, dass das Hamburger-Symbol nicht die gleiche Farbe wie der Header auf Telefonen hat und dass Caching oder JavaScript-Verzögerung keine alte Version bedient.
Benötige ich Master Addons Pro für das Nav Menu Widget?
Nr. Das Widget ist ohne Pro enthalten, mit Styling, Untermenüs, horizontalen und vertikalen Layouts pro Gerät, vier vertikalen Typen und dem Telefon-Hamburger. Pro fügt Hamburger auf Desktop und Tablet, die Typen Popup und Offcanvas sowie Theme Builder-Bedingungen jenseits der gesamten Website hinzu.
Wie füge ich ein Untermenü zu einem Elementor-Nav-Menü hinzu?
Gehen Sie zu Aussehen > Menüs, ziehen Sie das untergeordnete Element unter seinem übergeordneten Element und leicht nach rechts, bis es mit “Unterelement” gekennzeichnet ist, und klicken Sie dann auf Menü speichern Das Nav-Menü-Widget zeigt es als Dropdown an, gestylt in Stil > Dropdown-Menü und Dropdown-Menü-Element.
Was als nächstes zu tun ist
Bauen Sie den Header mit einem horizontalen Layout und ein oder zwei Untermenüs auf, laden Sie ihn dann auf Ihr eigenes Telefon, bevor Sie etwas anderes stylen Die meisten Menüprobleme sind mobile Probleme, und sie werden in zehn Sekunden auf einem echten Gerät angezeigt Wenn das Menü mehrspaltige Panels benötigt, wird die Mega-Menü-Anleitung Abholungen von dort, und die Nav-Menüdokumentation Listet jedes Steuerelement auf.
- Widget-Seite des Nav-Menüs: Layouts, Live-Demos und ein Vergleich mit den Menü-Widgets von Elementor Pro.
- Mega-Menü-Erweiterung: mehrspaltige Panels mit jedem Elementor-Widget im Inneren.
- Charcoal Navbar mit Mega-Menü-Demo: ein vollständiger Header, der mit beiden erstellt wurde.
Verwandte Lektüre
