Elementor Navigationsmenü – Erstellen Sie ein fantastisches Menü für Ihre WordPress-Website

Suchen Sie nach einer Möglichkeit, ein fantastisches Menü zu erstellen, um die Benutzeroberfläche/UX Ihrer Website zu verbessern? Wenn ja, dann sind Sie hier richtig. Hier haben wir eine ausführliche Anleitung zusammengestellt, um Ihnen zu helfen.

Zuerst zeigen wir Ihnen eine Schritt-für-Schritt-Anleitung, wie Sie ein Menü für Ihre WordPress-Website erstellen. Und sobald Sie den Dreh raus haben, zeigen wir Ihnen, wie Sie das Elementor-Navigationsmenü-Widget verwenden, um Ihr WordPress-Menü anzupassen und zu verbessern.

Inhaltsverzeichnis:

• Warum benötigen Sie ein benutzerdefiniertes Navigationsmenü?
• Erstellen Sie mit Elementor ein einfaches WordPress-Menü
• 1. Erstellen Sie ein einfaches Menü für Ihre WordPress-Website
• 2. Wählen Sie Navigationsmenüelemente aus und passen Sie sie an
• 3. Untermenüs erstellen – Übergeordnete und untergeordnete Menüelemente (optional)
• 4. Verwalten Sie Ihren Menüort und veröffentlichen Sie ihn
• So erstellen Sie ein Navigationsmenü mit dem Elementor Pro Nav-Widget
• Elementor Nav-Menu Widget Hauptfunktionen
• Erstellen Sie ein Menü mit dem Navigationsmenü nav-menu pro
• Mobiles Reaktionsmenü
• Einpacken

Warum benötigen Sie ein benutzerdefiniertes Navigationsmenü?

Es ist wichtig zu wissen, dass die Navigationsmenüs nicht nur wichtig sind, um Traffic auf Ihre Website zu bringen, sondern auch für ein besseres SEO-Ranking.

In der Tat sind die Navigationsmenüs in erster Linie für die Benutzereingriffe konzipiert, dies ist jedoch nicht der einzige Zweck.

Der zweitwichtigste Faktor besteht darin, die Rolle von „WebCrawler“ oder Bots im Auge zu behalten, mit denen die Websites gecrawlt und der Inhalt auf die entsprechende Ebene indiziert und an die Suchmaschine zurückgemeldet werden soll, um den Inhalt an der richtigen Stelle zu platzieren.

Wenn Sie daher zu komplizierte Menüs erstellen, ist es für die Bots schwierig, Ihre Inhalte zu bewerten, aber Sie verlieren auch Ihre Besucher.

Kurz gesagt, „einfache Navigation“ trägt entscheidend zur Verbesserung der Benutzererfahrung bei und spielt eine entscheidende Rolle bei der Verbesserung unseres Website-Rankings und der Steigerung des Traffics.

Für viele Unternehmenswebsites ist dies ein hervorragender Grund, ein einziges Navigationssymbol anstelle einer komplexen Menüleiste beizubehalten, die beim Klicken bis zu einem Vollbildmenü geladen wird.

Dank des Elementor Pro-Widgets mit einem zu 100 % reaktionsschnellen Navigationsmenü können Sie ohne Verwendung von Code eine pixelgenaue und unglaublich flexible Menüleiste erstellen.

In diesem Tutorial zeigen wir Ihnen, wie Sie das Elementor-Navigationsmenü-Widget , um das angepasste, erweiterte WordPress-Menü zu erhalten.

Bevor wir mit dem Elementor Navigation-Widget beginnen, wollen wir untersuchen, wie wir mit der kostenlosen Elementor-Version ein einfaches WordPress-Menü erstellen können.

Erstellen Sie mit Elementor ein einfaches WordPress-Menü

Um nun ein WordPress-Menü zu erstellen, müssen Sie keine speziellen plugin installieren. WordPress wird standardmäßig mit einem benutzerfreundlichen Menü-Builder geliefert, mit dem Sie einfache Navigationsmenüs für Ihre Website erstellen können.

Davon abgesehen haben Sie keinen Zugriff auf Anpassungsoptionen für das Menü. Es übernimmt das Design des aktuell aktiven WordPress-Themes. Aber wenn das alles ist, was Sie wollen, dann ist dies eine hervorragende Möglichkeit, ein Navigationsmenü für Ihre WordPress-Website einzurichten.

1. Erstellen Sie ein einfaches Menü für Ihre WordPress-Website

Als erstes müssen Sie sich bei Ihrem WordPress-Backend-Dashboard anmelden.

Gehen Sie nun in der linken Seitenleiste zu Darstellung > Menüs . Hier finden Sie ein zweispaltiges Layout mit „Menüpunkte hinzufügen“ links und „Menüstruktur“ rechts.

Unter Menüstruktur finden Sie ein Feld für den „Menünamen“. Dies wird der Name für das Menü sein, das wir gerade erstellen werden. Nennen wir es Menü 1.

Hinweis : Keine Sorge. Ihre Leser können die Menünamen nicht sehen. Es ist eine Funktion, die Ihnen hilft, all Ihre verschiedenen Menüs zu organisieren.

Nachdem Sie Ihrem Menü einen Namen gegeben haben, klicken Sie auf die Schaltfläche „Menü erstellen“, um es verfügbar zu machen. Jetzt müssen Sie die verschiedenen Menüpunkte hinzufügen.

2. Wählen Sie Navigationsmenüelemente aus und passen Sie sie an

Jetzt kommt der Teil, in dem Sie Ihr neues Menü mit Menüpunkten füllen. Unter dem Abschnitt "Menüpunkte hinzufügen" auf Ihrer linken Seite finden Sie eine organisierte Liste von Dingen, die Sie zu Ihrem Menü hinzufügen können.

Standardmäßig enthält dies alle Ihre Seiten, Beiträge, Zielseiten, benutzerdefinierten Links und Kategorien.

Wählen Sie einfach die Menüpunkte aus, die Sie hinzufügen möchten, indem Sie das Kontrollkästchen verwenden, und klicken Sie dann auf die Schaltfläche „Zum Menü hinzufügen“. Dadurch wird Ihr Menü mit all Ihren ausgewählten Menüpunkten gefüllt.

Hinweis : Beachten Sie, dass jeder Abschnitt unter „Menüelemente hinzufügen“ die Option hat, zwischen – Neueste , Alle anzeigen und Suchen . Denken Sie daran, diese Optionen zu verwenden, wenn Sie viele Artikel haben.

Wenn Sie alle Menüpunkte hinzugefügt haben, klicken Sie auf die Schaltfläche „Menü speichern“ und fahren Sie mit dem nächsten Schritt fort.

3. Untermenüs erstellen – Übergeordnete und untergeordnete Menüelemente (optional)

Wussten Sie, dass Sie in WordPress standardmäßig auch Untermenüs erstellen können? Beim Erstellen der Untermenüstruktur haben Sie einen übergeordneten Menüeintrag und einen untergeordneten Menüeintrag.

Wenn ein Benutzer den Mauszeiger über das übergeordnete Menüelement bewegt, werden alle darunter verborgenen untergeordneten Menüelemente angezeigt.

Cool oder?

Um nun eine Untermenüstruktur zu erstellen, müssen Sie nur einen Menüpunkt auswählen, der im übergeordneten Menü angezeigt werden soll. Ziehen Sie als Nächstes alle Menüelemente, die Sie als untergeordnete Menüelemente verwenden möchten, per Drag & Drop darunter. Jetzt einfach nach rechts ziehen und fertig!

4. Verwalten Sie Ihren Menüort und veröffentlichen Sie ihn

Nachdem Sie Ihr neues Menü erstellt und Untermenüs hinzugefügt haben, ist es an der Zeit, seinen Standort zu verwalten.

Oben in Ihrem Menü-Editor sollten Sie eine Option namens "Standorte verwalten" bemerken. Klicken Sie darauf und etwas Ähnliches wie der folgende Bildschirm sollte angezeigt werden:

Jetzt hängen die verfügbaren Menüpositionen von dem von Ihnen installierten Thema ab. In dieser ex amp le haben wir ein Thema , das Stützen 3 Menüs.

Nachdem Sie jedem der verfügbaren Menüpositionen ein Menü zugewiesen haben, klicken Sie auf „Änderungen speichern“ und das war's.

Sie kennen jetzt alle grundlegenden Menüfunktionen, die WordPress standardmäßig bietet. Wenn Sie jedoch mehr Anpassungen und Funktionen wünschen, lesen Sie weiter, um mehr über das Elementor Pro Nav-Menü-Widget zu erfahren.

So erstellen Sie ein Navigationsmenü mit dem Elementor Pro Nav-Widget

Wenn Sie Ihrer WordPress-Site ein benutzerdefiniertes Navigationsmenü hinzufügen möchten, benötigen Sie die Elementor Pro-Version. Die Elementor Pro-Version Elementor-Navigations-Widget zusammen mit vielen anderen Sonderfunktionen wie über 300 Vorlagen, einem Theme-Builder, einem Popup-Widget, WooCommerce-Widgets und vielen anderen interessanten Funktionen.

Was sind die spezifischen Hauptfunktionen des Navigationsmenü-Widgets selbst? Hier ist eine kurze Einführung.

Elementor Nav-Menu Widget Hauptfunktionen

• Das Nav-Menü-Widget gibt Ihnen die Freiheit, Ihr Menü an einer beliebigen Stelle zu platzieren. In Ihrer Kopfzeile oder oben oder irgendwo auf Ihrer Seite.
• Sie können mehrere Menüs auf Ihrer Site und auch auf Ihren Seiten separat oder global hinzufügen.
• Verleihen Sie Ihrem Menü einen schillernden Look, indem Sie Animationen, Schwebeeffekte oder den aktiven Status verwenden
• Erstellen Sie ein mobiles Reaktionsmenü Ihrer Website und steuern Sie, wie Ihre Website auf mobilen Bildschirmen aussehen soll
• Passen Sie Farbe, Typografie und Polsterung oder andere Anpassungen Ihrer Menüleiste an
• Erstellen Sie ein pixelgenaues Menü mit der richtigen Genauigkeit von Ausrichtung, Abstand und Abstand.

Erstellen Sie ein Menü mit dem Navigationsmenü nav-menu pro

Sie müssen ein grundlegendes WordPress-Menü erstellen, wie oben erwähnt, und dann das Standard-WordPress-Menü mithilfe des Pro-Navi-Menü-Widgets anpassen. Nachdem Sie die primäre Liste erstellt haben, müssen Sie sie im nächsten Schritt an der gewünschten Stelle hinzufügen, z. B. im Abschnitt "Kopfzeile".

Wenn Sie mit den Grundeinstellungen fertig sind, passen Sie das Menü mithilfe des Navigationsmenü-Widgets an.

In der obersten Ecke des Einstellungsbereichs stehen drei Optionen zur Verfügung. Inhalt, Stil und Erweitert.

Der Abschnitt Layout : Sie haben drei Optionen: Horizontal, Vertikal oder ein verstecktes Dropdown-Akkordeon.

• Horizontal: Das horizontale Layout ist das am häufigsten von den Standorten verwendete Layout. Es breitet sich von links nach rechts über den Bildschirm aus.
• Vertikal: Auf vielen Websites finden Sie auch ein vertikales Layout, insbesondere auf Websites, die kreative Dienste anbieten. Bei einem vertikalen Layout wird die Navigationsleiste von oben nach unten verteilt.
• Dropdown: Dropdown-Menüs sind ebenfalls weit verbreitet. Dropdowns sind vertikale Layouts und erfordern eine Interaktion mit dem Benutzer, um sie anzuzeigen. Sie werden meistens verwendet, um ein klares Design zu erstellen.

Abschnitt ausrichten: Dieser Abschnitt hilft Ihnen beim Ausrichten der Menütextelemente; Mitte, rechts oder links.

Animationsabschnitt : In diesem Abschnitt können Sie Animationseffekte unter, über oder zweizeiligen Animationseffekten hinzufügen. Sie können auch Rahmen-, Hintergrund- und subtile Textanimationen auswählen.

Die unterstrichenen Animationen lauten wie folgt:

• Fade: Die Fade-Animation bietet eine Fade-Animation unterhalb der Menüelemente.
• Folie: Die Folienanimation schiebt die Leiste unter den Menüelementen.
• Wachsen : Die Wachstumsanimation wächst von der Mitte nach außen und vermittelt ein Gefühl von Wachstum.
• Drop-In : Die Drop-In-Animation fließt von unten nach oben.
• Drop-out: Die Drop-out-Animation fließt von oben nach unten.

Ebenso gibt es gerahmte, überstrichene, doppelte Linien-, Hintergrund- und Textanimationen. Jeder von ihnen bietet seine eigenen Animationen an, und Sie können sie selbst überprüfen, um zu erfahren, was Sie mit ihnen erhalten.

Zeigerteil : Wählen den Typ des Zeigers aus dem Dropdown Menü.

Untermenü-Anzeigebereich : Das Elementor-Widget enthält viele Optionen für die Gestaltung von Untermenüs. Hier können Sie nicht nur die Farbe, den Stil und auch den Hintergrund des Menüs steuern.

Abstände und Menüabstände: Die Abstände können schnell angepasst werden. Sie können den horizontalen Abstand für Menü und Untermenü, den vertikalen Abstand, den Zwischenraum sowie die rechte, linke und zentrierte Ausrichtung ändern.

Elementor nähert sich dem Menüabstand und dem Auffüllen sehr gut. Sie haben hinter den Türen hart gearbeitet, um sicherzustellen, dass sie den Entwicklern die Tools zur Verfügung stellen können, damit sie problemlos das Design erstellen können, an das sie denken.

Der Menüabstand bietet viele Optionen, darunter:

• Leerzeichen zwischen den Menüpunkten
• Horizontale und vertikale Auffüllung für Menü- und Untermenüelemente
• Zentrierte, linke, rechte und gerechtfertigte Ausrichtung.

Farbhintergrund und Typografie : Mit Hilfe des gewünschten Farbschemas und der gewünschten Hintergrundfarbe erhalten Sie einen maßgeschneiderten Markenlook. Sie können auch die transparenten oder halbtransparenten Menüoptionen auswählen.

Als Designer können Sie so oft wie möglich mit diesen Optionen spielen und sicherstellen, dass Sie die Hintergründe nach Ihren Wünschen gestalten.

Mobiles Reaktionsmenü

Mobile ist ein wichtiger Teil des Webs. Aus diesem Grund bieten Elementor-Entwickler auch Tools an, mit denen Sie die Navigationsleiste auch für das Mobile erstellen können.

Mit dem Elementor-Widget können Sie die mobilen Menüoptionen in WordPress vollständig steuern. Sie können die mobile Bildschirmansicht mit einem separaten Satz von Einstellungen für reine mobile Bildschirme steuern. Unten im Abschnitt Elementor-Einstellungen gibt es eine Option für Einstellungen für den mobilen Bildschirm, mit der Sie die Optionen für den mobilen Bildschirm anzeigen können.

Kurz gesagt, die mobilen Menüfunktionen des Elementors sind wie folgt:

• Volle Breite auf dem Handy: Sie haben die Möglichkeit, die volle Breite oder die begrenzte Breite einzustellen.
• Tablet- oder mobile Haltepunkte: Mit den Haltepunkteinstellungen können Sie das mobile Menü für Mobilgeräte oder Tablets festlegen.
• Vertikale und Akkordeon-Menüs: Elementor bietet auch die Möglichkeit, ein zusammenklappbares Hamburger-Symbol anzuzeigen.
• Ausrichtung umschalten: Das Hamburger-Symbol kann in der Mitte, links oder rechts ausgerichtet werden.
• Seiten- / Mittelausrichtung: Wählen Sie die Ausrichtung des mobilen Menüs.

Reaktionsschnelle Navigation: Bietet eine reaktionsschnelle Positionierung des Menüs.

Einpacken

Das Menü ist eine der wichtigsten Funktionen einer Website. Weil es den Besuchern hilft, durch Ihre Website zu gehen, und wenn Sie eine Liste intelligent erstellt haben, hilft es, Ihre Besucher für eine lange Zeit auf Ihrer Website zu halten. Das Menü ist genauso wichtig wie das gesamte Layout einer Website, die Kopf- und Fußzeile.

Daher muss das Menü-Widget in der Lage sein, Ihren einzigartigen Markenauftritt mit allen wesentlichen Funktionen zu liefern. Das Elementor-Navigations-Widget verfügt über funktionsreiche Funktionen, mit denen die Kunden den Menübereich an die Stimme Ihrer Marke anpassen können. Jetzt können Sie ein benutzerdefiniertes, maßgeschneidertes, stilvolles Menü auf Ihrer gesamten Website, auf Ihrer Zielseite, in der Kopfzeile oder in jedem anderen Abschnitt verwenden, in dem Sie es anzeigen möchten.