Kostenloses Elementor-Nav-Menü-Widget: Kein Elementor erforderlich

Nav Menu ist ein kostenloses 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 kostenlosen Mega Menu Erweiterung für mehrspaltige Panels Auf Telefonen kollabiert es standardmäßig zu einem Hamburger-Toggle Master Addons Pro fügt das Hamburger Layout für jede Breite hinzu, mit Popup und Offcanvas Menüs.

Nav-Menü-Layoutoptionen in Elementor

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 dem kostenlosen Mega-Menü Erweiterung für mehrsäulige Tafeln.

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.
Nav-Menü-Stileinstellungen für Menüpunkte und Dropdowns
Nav-Menü Hamburger-Umschalter und Einstellungen für Anzeigesymbole

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.
Nav-Menü-Dropdown-Abstand und responsive Layout-Einstellungen

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 ProMaster Addons Nav-Menü
PreisElementor Pro LizenzKostenlos, mit Pro Hamburger Typen
LayoutsHorizontal, vertikal, DropdownHorizontal, vertikal (4 Typen), Hamburger
Mobiles MenüSchalten Sie unter einen von Ihnen gewählten Haltepunkt umHamburger standardmäßig auf Telefonen; Popup und Offcanvas mit Pro
Layout pro GerätEine HaltepunkteinstellungFür jedes Gerät einstellen
SchwebzeigeranimationenJaNein
Mega-menüMenü-Widget mit Dropdown-InhaltKostenlose 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 kostenlos ein Header-Menü im Stil.

Vorlagenbetrachter
Facebook
Twitter
WhatsApp
Link kopieren
Jetzt kaufen
Mega-Menü und Kohle-Navbar
Mega-Menü und Kohle-Navbar
Dropdown-Menüvariationen
Dropdown-Menüvariationen
Vertikales Navigationsmenü
Vertikales Navigationsmenü
Nav-Menü - mit Topbar
Nav-Menü - mit Topbar
Hamburger-Menüvariationen
Hamburger-Menüvariationen

So fügen Sie ein Nav-Menü in Elementor hinzu

Das Widget verwendet Menüs, die Sie in WordPress erstellen. Beginnen Sie also dort.

  1. Erstellen Sie Ihr Menü unter Aussehen > Menüs.
  2. Ziehen Sie in Elementor das Master Addons Nav Menu Widget in Ihre Kopfzeile, Fußzeile oder Seite.
  3. Wählen Sie das Menü im Menü auswählen und wählen Sie ein Layout für den Desktop.
  4. Wechseln Sie zur Tablet - und Telefonansicht, um das Layout auf jedem Gerät zu überprüfen Telefone erhalten standardmäßig den Hamburger-Toggle.
  5. 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.

Häufig gestellte Fragen zum Nav-Menü

Erfahren Sie die am häufigsten gestellten Fragen, die Benutzer zum Nav-Menü haben, und finden Sie Antworten an einem Ort.
Wie unterscheidet sich das von anderen Nav Menu Widgets?

Elementor eigene Menü-Widgets benötigen Elementor Pro. Master Addons Nav Menu ist kostenlos und fügt gerätegerechte Layouts, vier vertikale Menütypen, separates Styling für jede Menüebene und jeden Status, benutzerdefinierte Anzeigesymbole und einen stilvollen Hamburger-Toggle hinzu. Es funktioniert auch mit der kostenlosen Mega Menu-Erweiterung.

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.

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.

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 Bei der kostenlosen Version öffnet der Hamburger das Menü an Ort und Stelle unter dem Kipphebel.

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.

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.

Trendige Elementor-Widgets und -Erweiterungen

Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.

Master Addons Glassmorphism-Erweiterung für Elementor: Milchglaskarten mit der auf 20 px eingestellten Kontrolle des Unschärfewerts

Glasmorphie

Startseite Kostenlose Elementor-Glasmorphie-Erweiterung: „Mattiertes Glas-Effekt in einem Umkipp-Glasmorphie ist das Matt...
Details anzeigen
Master Addons Container Extras Erweiterung für Elementor: Container mit einer Kappe von 1400 px Max Breite, mit Max Breite, Max Höhe, Min Breite und Min Höhe Steuerung

Container-extras

Home Elementor Container Max Width and Max Height Controls Container Extras ist ein kostenloser Master...
Details anzeigen
Master Addons Patterns-Erweiterung für Elementor: hero mit dem Purple Gradient Grid Left-Stil, drei weiteren Musterstilen und dem Enable Pattern-Panel

Muster

Home 70+ Free Elementor Background Patterns Patterns ist eine kostenlose Master Addons-Erweiterung, die hinzufügt...
Details anzeigen
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

Post-/Seitenduplikator

Startseite Duplicate Elementor Pages and Posts in One Click Post/Page Duplicator ist ein kostenloser Master...
Details anzeigen
Master Addons Reading Progress Bar-Erweiterung für Elementor: Blauer Balken 42% oben auf einer Datenschutzrichtlinie-Seite gefüllt, mit Einstellungen für Aktivierungs-, Positions-, Höhen- und Füllfarben

Fortschrittsanzeige lesen

Startseite Fügen Sie eine Leseprogress-Leiste in WordPress (Elementor) hinzu. Die Leseprogress-Leiste ist kostenlos...
Details anzeigen