Sie können ein funktionierendes Navigationsmenü im Stil von Elementor erstellen, ohne Pro zu kaufen. Das eigene Menü-Widget von Elementor ist nur Pro-only, aber das kostenlose Master Addons Nav Menu-Widget zieht jedes WordPress-Menü in den Editor, gestaltet es aus dem Panel und lässt sich auf ein zusammenklappen Hamburger-Umschalter auf kleinen Bildschirmen.
Unten: warum core Elementor die Lücke verlässt, die drei Möglichkeiten, sie zu füllen, der Build selbst, und wo frei stoppt Der letzte Teil ist wichtiger als sonst, denn ein beliebter mobiler Modus ist nicht kostenlos und die meisten Guides sagen etwas anderes.
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 WordPress Menu Widget genannt, ist nur Pro. Elementoreigene Dokumentation Bestätigt es.
Das Menü selbst kannst du dir unter Aussehen > Menüs noch bauen WordPress registriert es fein Die Lücke ist auf der Designseite: core Elementor hat nichts, in das du dieses Menü fallen lassen kannst, also bleibst du dort hängen, wo dein Theme sich entscheidet, es auszudrucken.
Auf einer einfachen Seite mit einem menügefördernden Theme reicht das vielleicht In dem Moment, in dem Sie einen benutzerdefinierten Header, eine Sticky Bar, einen von Ihnen gesteuerten Hamburger-Toggle oder ein Mega-Menü wünschen, kann kostenloses Elementor allein nicht dorthin gelangen.
Die Namensgebung hat sich im Laufe der Jahre verschoben, was für Verwirrung sorgt Alte Tutorials sagen Nav Menu, neuere sagen WordPress Menu Die Lizenz hat sich nie geändert Es brauchte schon immer Pro.
Drei Möglichkeiten, ein Nav-Menü ohne Pro hinzuzufügen
Drei echte Optionen, die sich jeweils unterschiedlich auf Styling und mobiles Verhalten auswirken.
| Methode | Kosten | Editor-styling | Mobil | Am besten für |
|---|---|---|---|---|
| Themenmenü-Standort | Kostenlos | Keine, das Theme steuert es | Kommt auf das Thema an | Einfache Websites zu einem menügefährdeten Thema |
| Master Addons Nav-Menü-Widget | Kostenlos | Voll, aus dem Panel | Hamburger-Toggle auf Telefonen | Ein benutzerdefinierter Header ohne Pro |
| Master Addons Mega-Menü | Kostenlos | Voll | Zusammenbricht zu einem Kipphebel | Mehrspaltige Panels, große Navigation |
| Elementor Pro Menü Widget | Bezahlter Führerschein | 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 Sie bekommen keine Kontrolle über sein Aussehen von Elementor, und mobiles Verhalten ist das, was der Designautor gebaut hat Wenn das Menü Ihres Themes bereits richtig aussieht und sauber zusammenfällt, gibt es wirklich keinen Grund, oben ein Widget hinzuzufügen.
Master Addons Nav-Menü-Widget. Die Elementor-native Option ohne Pro-Lizenz 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 Seiten mit vielen Kategorien baut die Mega Menu Erweiterung mehrspaltige Panels und ist auch kostenlos Es ist ein separates Tool mit eigener Komplettlösung: So erstellen Sie ein Mega-Menü in Elementor ohne Pro.
Elementor Pro. Wenn Sie es bereits besitzen, machen sein Menü-Widget und Theme Builder dies nativ und Sie sollten sie verwenden. Das Ausführen von zwei Plugins für einen Job erhöht nur das Gewicht.
Erstellen Sie das Menü und beginnen Sie mit dem Beenden
Der ganze Build passiert in wp-admin und dem Elementor-Editor Kein Code-Snippet, kein Child-Theme-Edit Bevor Sie starten, überprüfen Sie, ob Ihr Theme nicht bereits einen eigenen Header druckt, denn zwei gestapelte Header sind das häufigste Durcheinander, das Leute hier machen.
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.
Schritt 2: Erstellen Sie eine Header-Vorlage
Öffnen Sie die kostenlose Master Addons Theme Builder Und fügen Sie eine neue Vorlage mit dem auf Kopfzeile eingestellten Typ hinzu. Dies ist der Container, in dem Ihr Menü lebt, und mit dem Sie den Header des Themas ersetzen können, anstatt dagegen anzukämpfen.
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 In den Widget-Einstellungen wählen Sie das Menü, das Sie im ersten Schritt erstellt haben, aus dem Dropdown Menü auswählen, und setzen Sie dann das Layout Horizontal passt zu einem Standard-Header; Vertikal passt zu einer Seitenleiste und gibt Ihnen die Untertypen Normal, Umschalten, Akkordeon und Seite.
Das Layout wird pro Gerät eingestellt Telefone verwenden standardmäßig den Hamburger-Toggle, sodass das Desktop-Menü dort ohne extra Einrichtung zusammenfällt.
Schritt 4: Style it
Schriftart, Farbe, Abstand, Hover-Zustände und Untermenüverhalten befinden sich alle auf der Registerkarte Stil. Es ist kein benutzerdefiniertes CSS erforderlich. Dies ist der Teil, den der Kernelementor überhaupt nicht tun kann. Dies ist der ganze Grund für das Hinzufügen eines Widgets anstelle der Verwendung eines Themenmenüstandorts.
Schritt 5: Veröffentlichen und zuweisen
Speichern Sie die Vorlage und weisen Sie sie der gesamten Website zu. Auf der kostenlosen Ebene ist dies die einzige verfügbare Anzeigebedingung, was in Ordnung ist, wenn Sie überall einen Header haben möchten.
Schritt 6: Überprüfen Sie es am vorderen Ende
Laden Sie die Website und bestätigen Sie, dass ein Header rendering ist, nicht zwei. Wenn Sie auch das Menü des Designs sehen, deaktivieren Sie es in den eigenen Customiser-Einstellungen des Designs, anstatt es mit CSS zu verbergen.
Damit es mobil funktioniert
Ein Menü, das nur auf dem Desktop funktioniert, ist noch nicht fertig. Auf Telefonen kollabiert das Nav-Menü-Widget zu einem Hamburger-Kippschalter, und dieser Kippschalter ist kostenlos, einschließlich seines Symbols, seines aktiven Zustands und seines Designs.
Der Knebel ist für die Verwendung von Tastatur und Bildschirmlesegerät und nicht nur für die Maus ausgelegt. Geben Sie ihn ein und Space öffnet ihn, Esc schließt ihn. Es lohnt sich, auf jedem von Ihnen installierten Menü-Widget nachzuschauen, da viele aus Divs bestehen, die eine Tastatur nicht erreichen kann.
Machen Sie sich klar, was das kostenlose mobile Menü ist: Das zusammengeklappte Panel dehnt sich unter dem Knebel aus. Es passt gut zu kurzen und mittleren Menüs. Ein vollständiges Off-Canvas-Panel, das von der Seite hineingleitet, ist ein Pro-Feature, das im nächsten Abschnitt behandelt wird.
Testen Sie auf einem echten Telefon und nicht in der Symbolleiste des Browsergeräts Tippen Sie auf Ziele, Übergangsgeschwindigkeit und ob das Bedienfeld mit einem Außentipp geschlossen wird, verhalten sich auf einem Touchscreen alle anders als in einem Desktop-Fenster mit veränderter Größe Überprüfen Sie, ob das Symbol den Zustand ändert, damit offensichtlich ist, dass das Menü geöffnet ist, und dass ein Untermenüelement mit einem Daumen erreichbar ist.
Wo die kostenlose Version aufhört
Zwei Grenzen, und beide sind es wert, es zu wissen, bevor Sie sie umgehen und nicht danach.
Off-Canvas und die Hamburger-Layout-Wahl sind Pro. Die Layoutsteuerung bietet Horizontal und Vertical kostenlos an, wobei Hamburger mit Pro gekennzeichnet ist. Telefone verwenden einen Hamburger mit dem Standardtyp aus dem Karton, aber wenn Sie Hamburger für andere Breiten auswählen oder auf die Popup- oder Offcanvas-Typen umsteigen, ist Pro erforderlich. Das verschiebbare Seitenteil, das „off-canvas-Menü“bedeutet, ist hier normalerweise eine kostenpflichtige Funktion. Der freie Weg zu etwas Ähnlichem ist der Side-Typ des Vertical-Layouts, der das Menü seitlich abstellt, oder der Standard-Hamburger-Kippschalter für Mobilgeräte.
Theme Builder Targeting ist eine Regel. Der kostenlose Theme Builder speichert genau eine Anzeigebedingung: Gesamte Seite Gut, wenn man überall einen Header haben möchte Nicht genug für einen anderen Header auf einer Landingpage, ein anderes Menü für eingeloggte Mitglieder, oder einen Header, der auf einen Post-Typ gescopt ist Die brauchen Pro. Unsere Anzeigebedingungen Aufschlüsselung Verfolgt diese Zeile über die Plugin-Quelle und die Kostenloser Theme Builder-Leitfaden Deckt den Rest dieser Ebene ab.
Wenn Sie Elementor Pro bereits besitzen, gilt nichts von dieser Problemumgehung Und wenn der Menüort Ihres Themes ausreicht, ist plain Appearance > Menüs ohne Addon der richtige Aufruf Fügen Sie ein Plugin hinzu, sobald die Standardeinstellung des Themes nicht mehr ausreicht Die Verzeichnis für Widgets und Erweiterungen Listet auf, was sonst noch kostenlos versendet wird, wenn Sie das Plugin als Ganzes wiegen.
Wenn der Header einen Abschnitt benötigt, den Sie ständig von Hand neu erstellen, ist der Widget-builder Lassen Sie es einmal als echtes Widget verfassen. Das sitzt in Pro und die Preisseite Listen die Stufen auf.
Häufig gestellte Fragen
Gibt es ein kostenloses Menü-Widget für Elementor?
Nicht von Elementor selbst Das Kern-Plugin hat kein Menü-Widget; dass man nur mit Pro ausgeliefert wird Master Addons, eine kostenlose Erweiterung, fügt ein eigenes Nav Menu Widget hinzu, so dass Sie ein echtes Navigationsmenü ohne Lizenz platzieren und stylen können.
Kann man ein Nav-Menü in Elementor ohne Pro erstellen?
Ja. Registrieren Sie das Menü ganz normal unter Aussehen > Menüs, dann legen Sie mit einem kostenlosen Addon ein Nav Menu Widget in eine Header-Vorlage und stylen es aus dem Panel heraus, Elementor frei allein kann kein Menü platzieren oder stylen, Sie benötigen also entweder einen Theme-Menü-Standort oder ein Addon-Widget.
Wie füge ich kostenlos ein mobiles Hamburger-Menü in Elementor hinzu?
Fügen Sie das Master Addons Nav Menu Widget zu Ihrer Header-Vorlage hinzu, wählen Sie Ihr Menü aus und es wird standardmäßig auf Telefonen zu einem Hamburger-Toggle zusammenklappt. Der Toggle, sein Symbol und sein Styling sind alle kostenlos. Das Panel wird unter dem Toggle erweitert.
Ist das Off-Canvas-Menü in Master Addons kostenlos?
No. Off-canvas ist einer von drei Typen innerhalb des Hamburger-Layouts. Wenn Sie dieses Layout oder seine Popup- und Offcanvas-Typen auswählen, ist Master Addons Pro erforderlich. Kostenlos erhalten Sie horizontale und vertikale Layouts sowie den Standard-Hamburger-Kippschalter auf Telefonen. Wenn Sie ein seitlich verankertes Menü ohne Bezahlung wünschen, ist der Side-Typ des vertikalen Layouts das nächstgelegene kostenlose Äquivalent.
Wie erstelle ich kostenlos ein Mega-Menü in Elementor?
Master Addons enthält eine kostenlose Mega-Menü-Erweiterung, die mehrspaltige Panels erstellt und auf Mobilgeräten zusammenfällt. Es ist vom Standard-Nav-Menü-Widget getrennt und für eine größere Navigation mit Kategorien, Spalten oder Werbeinhalten konzipiert.
Warum wird mein Elementor-Nav-Menü nicht angezeigt?
Normalerweise ein nicht zugewiesenes Menü Überprüfen Sie, dass in den Widget-Einstellungen tatsächlich ein Menü ausgewählt ist, nicht nur unter Aussehen > Menüs erstellt. Bestätigen Sie dann, dass die Header-Vorlage im Theme Builder der gesamten Website zugewiesen ist und dass kein Theme-Header noch aktiv ist und diese überlappt.
Brauche ich Master Addons Pro, oder ist das Menü kostenlos?
Das Nav-Menü-Widget ist kostenlos, einschließlich Styling, Untermenüs, Layouts pro Gerät und dem Hamburger-Toggle auf Telefonen. Pro fügt das Hamburger-Layout für jede Breite mit seinen Popup- und Off-Canvas-Typen sowie Theme-Builder-Bedingungen hinzu, die über eine einzige Regel für die gesamte Website hinausgehen.
Was als nächstes zu tun ist
Erstellen Sie den Header mit einem horizontalen Layout und laden Sie ihn dann auf Ihr eigenes Telefon, bevor Sie etwas anderes gestylt haben. Die meisten Menüprobleme sind mobile Probleme und werden in zehn Sekunden auf einem echten Gerät angezeigt.
Wenn sich herausstellt, dass das Menü mehrspaltige Panels benötigt, ist die Mega-Menü-Anleitung Abholungen von dort Die Widget-Seite des Nav-Menüs Vergleicht es mit den Menü-Widgets von Elementor Pro und dem Nav-Menüdokumentation Listet jedes Steuerelement auf.
