Elementor Nav Menü Widget: Kein Elementor Pro erforderlich
Nav Menu ist ein Master Addons Widget, das jedes WordPress Menü in einen Elementor Header, Footer oder eine Seite legt und es Ihnen ermöglicht, es aus dem Panel zu stylen Wählen Sie ein horizontales oder vertikales Layout für jedes Gerät, stylen Sie die Hauptelemente, Dropdowns und Untermenüs in ihren normalen, Hover - und aktiven Zuständen, und koppeln Sie es mit der Mega Menu-Erweiterung für mehrspaltige Panels Auf Telefonen kollabiert es standardmäßig zu einem Hamburger-Kippschalter Master Addons Pro fügt das Hamburger Layout für jede Breite hinzu, mit Popup und Offcanvas Menüs.
Horizontale, vertikale und Hamburger-Layouts
Legen Sie das Layout für Desktop, Tablet und Telefon separat fest Horizontal passt zu einer oberen Leiste Vertikal gibt es in vier Typen: Normal mit Side Dropdowns, Toggle, Accordion, und Side, die das Menü an den Seitenrand pins Telefone verwenden standardmäßig den Hamburger-Toggle Mit Pro können Sie den Hamburger für jede Breite auswählen und das Menü als Default-Dropdown, Popup oder Offcanvas-Panel öffnen.
- Layouts pro Gerät festgelegt, einschließlich der zusätzlichen Haltepunkte von Elementor.
- Vertikale Menüs als Normal, Toggle, Accordion oder Side.
- Popup- und Offcanvas-Hamburger-Menüs mit Master Addons Pro.
- Funktioniert mit der Mega-Menü Erweiterung für mehrsäulige Tafeln.
Vertikale Menülayouts: Normal, Toggle, Accordion und Side
Wählen Sie Vertikal im Layout und ein zweites Steuerelement, Typ, erscheint. Jeder Typ öffnet Untermenüs auf andere Weise, und sowohl Layout als auch Typ können pro Gerät eingestellt werden, sodass ein Menü auf dem Desktop normal bleiben und auf Telefonen zu Accordion wechseln kann.
- gewöhnlich Öffnet ein Untermenü an der Seite der Liste, wenn der Leser mit dem übergeordneten Element fährt.
- Umschalten Erweitert ein Untermenü unter seinem übergeordneten Element auf Klick, und mehrere können gleichzeitig geöffnet bleiben.
- Akkordeon Erweitert sich auch auf Klick, aber das Öffnen eines Untermenüs schließt das geöffnete.
- Seite Pins das Menü an den Rand der Seite Nur die Hauptpunkte sitzen in der Leiste, und ihre Untermenüs öffnen sich in einem Panel daneben.
Normal: das Untermenü öffnet sich seitlich im Schwebeflug.
Umschalten: Das Untermenü erweitert sich unter seinem Element.
Akkordeon: jeweils ein Untermenü geöffnet.
Seite: die Hauptelemente in einer Leiste am Seitenrand, daneben das Untermenü in einem Panel.
Stil jeder Menüebene und jedes Status
Die Registerkarte Stil verfügt über separate Abschnitte für das Hauptmenüelement, das Dropdown-Menü, das Dropdown-Menüelement, das Dropdown-Untermenü und das Dropdown-Untermenüelement. Jedes erhält Farben und Hintergründe für den Normal-, Hover- und Aktivzustand sowie Polsterung, Ränder und Trennwände, sodass der Link zur aktuellen Seite anders aussehen kann als der Rest.
- Normal-, Hover- und Aktivzustände für Hauptartikel und Dropdown-Elemente.
- Separates Design für das Dropdown-Panel, seine Gegenstände und tiefere Untermenüs.
- Unterteilt zwischen den Artikeln, mit Typ, Größe und Farbe.
Hamburger Kipp - und Blinker-Icons
Style den Hamburger-Kippschalter als Symbol, Text oder beides, mit einer Standard, Stapel - oder Rahmenansicht und einer quadratischen oder Kreisform, Es kann ein Symbol anzeigen, während das Menü geschlossen ist, und ein anderes, während es geöffnet ist Anzeigesymbole markieren die Elemente, die Dropdowns und Untermenüs haben: Wählen Sie Ihre eigenen Symbole aus, zeigen oder verstecken Sie sie und legen Sie ihre Größe, Farbe, Position und Drehung fest.
- Hamburger-Toggle als Icon, Text oder beides.
- Verschiedene Symbole für das geschlossene und offene Menü.
- Benutzerdefinierte Dropdown - und Untermenü-Indikatorsymbole mit Rotation.
Dropdown-Abstand und Layouts pro Gerät
Legen Sie die Dropdown-Breite und deren Lücke vom oberen Menüpunkt, den Lücken zwischen den Elementen und der Auffüllung innerhalb jedes Links fest. Die Übergangsdauer steuert, wie schnell sich Hover-Farben und Dropdowns ändern. Da das Layout pro Gerät festgelegt ist, entscheiden Sie, wohin das Menü wechselt von einer horizontalen Leiste zu einer vertikalen Liste oder zum Hamburger mit Pro.
- Dropdown-Breite und Spalt von oben.
- Lücken zwischen den Elementen und Link-Padding für einfaches Klopfen.
- Übergangsdauer für Hover - und Dropdown-Änderungen.
Elementor Pro Menü Widgets vs Master Addons Nav Menü
Das kostenlose Plugin von Elementor hat kein Widget zum Platzieren und Stylen eines WordPress-Menüs. Seine Menü- und WordPress-Menü-Widgets sind mit Elementor Pro ausgestattet. So vergleichen sie sich.
| Elementor Pro | Master Addons Nav-Menü | |
|---|---|---|
| Preis | Elementor Pro Lizenz | In Master Addons enthalten; Popup und Offcanvas Hamburger Typen mit Pro |
| Grundriss | Horizontal, vertikal, Dropdown | Horizontal, vertikal (4 Typen), Hamburger |
| Mobiles Menü | Schalten Sie unter einen von Ihnen gewählten Haltepunkt um | Hamburger standardmäßig auf Telefonen; Popup und Offcanvas mit Pro |
| Layout pro Gerät | Eine Haltepunkteinstellung | Für jedes Gerät einstellen |
| Schwebzeigeranimationen | Ja | Nein |
| Mega-menü | Menü-Widget mit Dropdown-Inhalt | Mega-Menü-Erweiterung |
Wenn Sie bereits für Elementor Pro bezahlen, erledigen dessen Menü-Widgets die Aufgabe Ohne sie machen Nav Menu und die Mega-Menü Durch die Erweiterung erhalten Sie ein Header-Menü im Stil ohne Elementor Pro.
Nav-Menü auf einen Blick
Was das Widget macht, lesen Sie aus Master Addons 3.2.3.
| Artikel | Nav-Menü-Widget |
|---|---|
| Menüquelle | Jedes Menü aus Aussehen, Menüs, ausgewählt im Menü auswählen |
| Grundriss | Horizontal und vertikal auf jedem Gerät; Hamburger standardmäßig auf Telefonen |
| Vertikale Typen | Normal, Umschalten, Akkordeon und Seite |
| Hamburger auf Desktop und Tablet | Master Add-dons Pro |
| Hamburger-typen | Standard auf Telefonen; Popup und Offcanvas mit Pro |
| Untermenüs | Separate Stilabschnitte für den Dropdown, seine Gegenstände, tiefere Untermenüs und ihre Gegenstände |
| Staaten | Normal, Hover und Aktiv für Hauptartikel und Dropdown-Artikel |
| Anzeigesymbole | Dropdown - und Untermenüsymbole, die Sie wählen, mit Größe, Farbe, Position und Drehung |
| Schwebzeigeranimationen | Nein (das Menü-Widget von Elementor Pro hat sie) |
| Klebrig | Keine Einstellung im Widget; den Header-Container klebrig machen |
| Mega-Menüfelder | Mega-Menü-Erweiterung |
| Bedürfnisse | Elementor- und Master-Addons, kein Elementor Pro |
Nav-Menübeispiele
Fünf Live-Demos, die mit dem Widget erstellt wurden Öffnen Sie eine, und importieren Sie dann das Layout aus dem Template Viewer unten.
- Kohle-Navbar und Mega-Menü: eine dunkle Kopfzeile mit einem mehrspaltigen Mega-Menüfeld.
- Nav-Menü mit oberer Leiste: ein Kontaktstreifen über dem Hauptmenü.
- Dropdown-Menüvariationen: mehrere Dropdown-Stile im selben Menü.
- Vertikales Navigationsmenü: das Menü als vertikale Liste.
- Vertikales Seitenmenü: der Side-Typ, der am Rand der Seite befestigt ist.
So fügen Sie ein Nav-Menü in Elementor hinzu
Das Widget verwendet Menüs, die Sie in WordPress erstellen. Beginnen Sie also dort.
- Erstellen Sie Ihr Menü unter Aussehen > Menüs.
- Ziehen Sie in Elementor das Master Addons Nav Menu Widget in Ihre Kopfzeile, Fußzeile oder Seite.
- Wählen Sie das Menü im Menü auswählen und wählen Sie ein Layout für den Desktop.
- Wechseln Sie zur Tablet - und Telefonansicht, um das Layout auf jedem Gerät zu überprüfen Telefone erhalten standardmäßig den Hamburger-Toggle.
- Stylen Sie die Menüpunkte, Dropdowns und schalten Sie sie im Style-Tab um und veröffentlichen Sie sie dann.
Für eine vollständige Header-Durchsicht lesen Sie So erstellen Sie ein Navigationsmenü in Elementor ohne Pro. Für einen siteweiten Header verwenden Sie die kostenlose Themenbauer.
Passt gut zu: Mega-Menü Für mehrsäulige Tafeln, die Off-Canvas-Inhalt (Pro) für ein ausschiebbares Panel, das Themenbauer Für einen siteweiten Header, der Anzeigebedingungen (Pro) um angemeldeten Besuchern ein anderes Menü anzuzeigen, und Tabs Für die Navigation auf der Seite.
Häufig gestellte Fragen zum Nav-Menü
Wie unterscheidet sich das von anderen Nav Menu Widgets?
Elementor-eigene Menü-Widgets benötigen Elementor Pro. Master Addons Nav Menu läuft ohne Elementor Pro und fügt gerätegerechte Layouts, vier vertikale Menütypen, separates Styling für jede Menüebene und jeden Menüzustand, benutzerdefinierte Anzeigesymbole und einen stilvollen Hamburger-Toggle hinzu. Es funktioniert auch mit der Mega Menu-Erweiterung.
Kann ich dieses Menü mit der Erweiterung Mega Menu verwenden?
Ja. Schalten Sie die Erweiterung Mega Menu ein, erstellen Sie den Panel-Inhalt für einen Menüpunkt aus dem Bildschirm WordPress Menüs, wählen Sie dann im Widget Nav Menu das Menü aus Das Widget zeigt die Mega-Menüfelder am Frontend an.
Ist es schwierig, die verschiedenen Stile für normal, schwebend und aktiv einzurichten?
Nr. Öffnen Sie die Registerkarte Stil, wählen Sie einen Teil des Menüs wie Hauptmenüelement aus und wechseln Sie zwischen den Registerkarten Normal, Hover und Aktiv, um die Farben für jeden Zustand festzulegen.
Wie bearbeite ich das Menü, das im Widget angezeigt wird?
Das Widget zeigt ein WordPress-Menü an, also bearbeiten Sie es unter Aussehen, Menüs. Dort Elemente hinzufügen, umbenennen oder neu bestellen und speichern Der Select Menu-Steuerelement im Widget hat einen direkten Link zu diesem Bildschirm, und die Änderungen werden nach einer Aktualisierung in Elementor angezeigt.
Wie füge ich ein Untermenü hinzu?
In Aussehen, Menüs, ziehen Sie das Element ein wenig nach rechts unter das Element, zu dem es gehört, bis WordPress es als Unterelement markiert, dann speichern Sie es Das Widget zeigt es als Dropdown an Stil in Stil, Dropdown-Menü und Dropdown-Menü Artikel.
Bekomme ich ein Hamburger-Menü auf Handy ohne Pro?
Ja. Auf Telefonen wechselt das Widget standardmäßig zum Hamburger und das Menü öffnet sich an Ort und Stelle unter dem Umschalter. Wenn Sie den Hamburger auf dem Desktop oder Tablet verwenden oder ihn als Popup- oder Offcanvas-Panel öffnen, ist Master Addons Pro erforderlich.
Was ist der beste Anwendungsfall für den Menü-Typ "Offcanvas" oder "Popup"?
Beides sind Pro hamburger Typen Offcanvas schiebt das Menü von links oder rechts rein, was zu Telefonen und Minimaldesigns passt Popup öffnet das Menü über die Seite, was gut für die Full-Site Navigation auf Portfolio - oder Agenturseiten funktioniert Ohne Pro öffnet der Hamburger auf Telefonen das Menü an Ort und Stelle unter dem Umschalter.
Funktioniert dieses Menü mit dem Header meines vorhandenen WordPress-Themes?
Ja, Sie können das Widget überall platzieren, wo Elementor ausgeführt wird Um den Header Ihres Themes vollständig zu ersetzen, erstellen Sie eine Header-Vorlage mit dem kostenlosen Master Addons Theme Builder und fügen Sie das Nav-Menü-Widget hinzu.
Kann ich einen anderen Menüstil auf dem Handy vs. Desktop haben?
Ja. Layout, Ausrichtung und viele Stileinstellungen können pro Gerät eingestellt werden, halten Sie beispielsweise eine horizontale Leiste auf dem Desktop, verwenden Sie ein vertikales Akkordeon auf Tablets und den Hamburger-Kippschalter auf Telefonen.
Kann ich das Menü klebrig machen?
Das Widget hat keine klebrige Einstellung, also machen Sie den Header-Container stattdessen klebrig Verwenden Sie mit Elementor Pro Advanced, Motion Effects, Sticky: Top auf diesem Container. Ohne Pro hinzufügen selector { position: sticky; top: 0; z-index: 99; } Zum Container im Abschnitt Master Addons Custom CSS. Unser Klebrige Kopfzeile Deckt das komplette Setup ab.
Warum wird mein Menü nicht angezeigt?
Überprüfen Sie vier Dinge Das Widget benötigt ein Menü, das im Menü auswählen ausgewählt wurde, und die Website benötigt mindestens ein Menü unter Aussehen, Menüs Eine Header-Vorlage zeigt nur an, wo ihre Anzeigebedingung gilt. Auf Telefonen wird das Menü in den Hamburger gefaltet, also überprüfen Sie, ob sich die Umschaltfarbe vom Header-Hintergrund abhebt. Löschen Sie schließlich Ihren Cache und jede JavaScript-Verzögerungseinstellung nach Änderungen.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
![Master Addons Post/Page Duplicator-Erweiterung für Elementor: MA Duplicator Zeilenlink in der WordPress Pages-Liste, der eine Landing Page erstellt - [Duplicated #128] Entwurf](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post-/Seitenduplikator
