Nav-Menü-Widget-Einstellungen

Jede Seite benötigt ein Menü, und der Standard-Header des Themes passt selten zu einem benutzerdefinierten Elementordesign Das kostenlose Nav-Menü-Widget In Master-Addons für Elementor Rendert jedes WordPress-Menü im Elementor-Editor: horizontale oder vertikale Layouts pro Gerät, gestylte Untermenüs und ein Hamburger-Toggle, der auf Telefonen die Oberhand gewinnt.

Dieser Leitfaden geht durch das Widget vom ersten Drag zu einem gestylten Menü mit einem funktionierenden Dropdown auf der Live-Seite.

Was das Navigationsmenü-Widget tut #

Das Widget zieht ein Menü, das Sie unter Aussehen, Menüs erstellt haben, und rendert es als Elementorelement. Sie wählen das Layout und Verhalten aus, stilisieren jeden Zustand der Elemente, die Dropdowns und den mobilen Umschalter, alles aus dem Elementor-Panel. Die Menüelemente selbst, ihre Beschriftungen, Reihenfolge und Untermenüs bleiben in WordPress verwaltet, sodass Inhaltseditoren Elementor niemals berühren, um dem Menü eine Seite hinzuzufügen.

Bevor Sie beginnen #

• WordPress Mit Elementor Installiert und aktiv.
• Master-Addons für Elementor Installiert und aktiv Neu im Plugin? siehe die Installationsführung.
• Das Nav-Menü-Widget ist im Optionspanel Master-Addons unter Navigations-Widgets aktiviert.
• Ein Menü, das unter erstellt wurde Aussehen, Menüs In Ihrem Dashboard Die Demo verwendet ein “Hauptmenü” mit Home, Pricing, Team, and Contact, dazu ein FAQ-Untermenü unter Kontakt.

So fügen Sie das Widget Navigationsmenü hinzu #

Suchen Sie im Elementor-Editor nach Elemente Panel für Nav-menü und ziehen Sie es auf die Seite, typischerweise in einen Header-Bereich Das Widget rendert sofort Ihr erstes WordPress-Menü.

Wählen Sie das Menü und Layout #

Die General Abschnitt treibt das gesamte Widget an. Menü auswählen Listet jedes Menü auf Ihrem Menübildschirm auf; Wählen Sie das zum Rendern aus. Layout Angeboten Horizontal, Vertikal und Hamburger (Pro), und Sie können es für jedes Gerät separat einstellen Für vertikale Menüs, Typ Fügt das Verhalten hinzu: Normal, Umschalten, Akkordeon oder Seite. Hier das Demo-Menü in vertikaler Aufteilung:

Für einen Header ist Horizontal die übliche Auswahl. Ausrichtung Legt die Elemente links, in der Mitte, rechts oder gerechtfertigt Es gibt keine einzige Haltepunkteinstellung: Schalten Sie Elementor in die Tablet - oder Telefonansicht und wählen Sie das Layout für dieses Gerät aus Telefone verwenden standardmäßig den Hamburger-Umschalter Es lohnt sich, einmal Vertical auszuprobieren, auch wenn Sie es nicht benötigen; wenn Sie beide Layouts sehen, klicken Sie auf die Ausrichtungsoptionen.

Konfigurieren Sie den Dropdown #

Die Dropdown-menü Abschnitt steuert das Untermenüverhalten und den Indikator:

• Dropdown-Indikator: Den Pfeil neben Gegenständen anzeigen oder ausblenden, die ein Untermenü tragen.
• Anzeigeposition, Lücke dazwischen, Symbolgröße: Wo der Pfeil sitzt und wie groß er ist.
• Dropdown-Symbol: Tauschen Sie den Standard-Chevron gegen ein beliebiges Symbol aus, mit Normal- und Hover-Zuständen und einem Drehsteuerelement.
• Dropdown-Breite und Ausrichtung: Größe und Textausrichtung des Untermenüfelds.
• Untermenü-Indikator: Das Symbol für Menüs der dritten Ebene.

Richten Sie den mobilen Knebel ein #

Wenn ein Gerät das Hamburger-Layout verwendet, bricht das Menü hinter einer Kipptaste zusammen Die Hamburger-Menü Abschnitt konfiguriert es: Ausrichtung, Typ (Ikone, Text oder beides), Ansicht (Standard, gestapelt oder gerahmt), Form (Quadrat oder Kreis), und separate Symbole für den Normal - und den Aktivzustand Schalten Sie den Editor auf mobile Vorschau und der Umschalter erscheint mit dem darunter gestapelten Menü:

Stil der Menüpunkte #

In der Stil Tab Hauptmenüpunkt Die Links der obersten Ebene abdeckt. Typografie Handles die Schrift:

Darunter, die Normal, Schweben, und Aktiv Tabs tragen jeweils Farbe, Artikelhintergrundfarbe, und Text SchattenPlus geteilt Horizontale und vertikale Polsterung, Raum Zwischenund Grenzkontrollen Die Demo legt eine blaue Hover-Farbe fest und zeigt live eine Vorschau an, während der Cursor den Preis überschreitet:

Gestalten Sie den Umschalter, die Dropdown-Liste und die Elemente #

Drei weitere Style-Abschnitte beenden die Arbeit:

Hamburger Stile des Umschalters: Farbe, Hintergrund, Randradius, Schatten, Symbolgröße und Auffüllung, mit Normal-, Hover- und Aktivzuständen.

Dropdown-menü Stile des Untermenüfeldes: Hintergrundfarbe, Abstand von oben, Rand und Polsterung. Untermenü zum Herunterfahren Vertieft Menüs abdeckt.

Dropdown-Menüelement Stile der Links innerhalb des Panels, mit denselben drei Zuständen plus a Trennwand Gruppe für die Zeile zwischen den Elementen:

Das Ergebnis auf der Seite #

Auf der Live-Seite wird das Menü in Ihrem Styling wiedergegeben: Hover-Zustände werden ausgelöst und das FAQ-Untermenü wird unter Kontakt genau dort angezeigt, wo die Dropdown-Einstellungen es platziert haben.

Häufige Anwendungsfälle #

• Benutzerdefinierte Header Mit Elementor gebaut, wo das Themenmenü nicht dem Design folgen kann.
• Landing-seiten Mit einer eigenen schlanken Speisekarte, getrennt von der siteweiten.
• Seitenleistennavigation Verwendung des vertikalen Layouts auf Dokumentations- oder Kategorieseiten.
• Mobile-first-menüs Stützt sich auf das Symbol, die Ansicht und die Formoptionen des Kipphebels.
• Mehrstufige Menüs Mit gestylten Dropdowns und Unterebenen-Panels.

Tipps für ein besseres Navigationsmenü #

• Bauen Sie das Menü zuerst in WordPress auf. Das Widget rendert Menüs aus Aussehen, Menüs; es erstellt sie nicht Struktur dort, Stil hier.
• Geben Sie Hover und Active verschiedene Farben. Beantworten Sie den Cursor mit der Maus; Aktiv sagt den Besuchern, auf welcher Seite sie sich befinden Gleiche Farbe verschwendet das Signal.
• Überprüfen Sie jedes Gerät auf einem echten Telefon. Ein Menü mit vier Artikeln passt möglicherweise gut auf Tablets, während ein Menü mit sieben Artikeln möglicherweise auch auf Tablets ein vertikales Layout benötigt.
• Stylen Sie den Dropdown-Hintergrund explizit. Ein transparentes Untermenü über Seiteninhalte ist die häufigste Menübeschwerde, die wir sehen; Ein solider Hintergrund des Dropdown-Menüs repariert es mit einem Klick.

Video-Tutorial #

Wenn Sie das Navigationsmenü-Widget in Aktion sehen möchten, durchläuft dieses Video das gesamte Setup, von der Auswahl des Menüs bis zum gestylten Dropdown auf der Live-Seite:

Häufig gestellte Fragen #

Einwickelnd #

Das Widget Navigationsmenü legt das Website-Menü dort ab, wo der Rest Ihres Designs lebt: Wählen Sie ein WordPress-Menü, wählen Sie das Layout, stylen Sie die Elemente, Dropdowns und mobilen Umschalten und veröffentlichen Sie es passt auf natürliche Weise zu dem Off-Canvas-Inhalt Widget (Pro) für die mobile Navigation zum Ausrutschen Durchsuchen Sie den gesamten Satz von Master Addons Widgets und Erweiterungen, und sehen Sie sich die an Widget-Seite des Nav-Menüs Zum Vergleich mit den Menü-Widgets von Elementor Pro.