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 genau richtig. Hier haben wir einen ausführlichen Leitfaden zusammengestellt, der Ihnen weiterhilft.

Zunächst zeigen wir Ihnen eine Schritt-für-Schritt-Anleitung zum Erstellen eines Menüs für Ihre WordPress-Website. Und sobald Sie den Dreh raus haben, zeigen wir Ihnen, wie Sie mit dem Elementor-Navigationsmenü-Widget Ihr WordPress-Menü anpassen und aufwerten können.

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 den Speicherort Ihres Menüs und veröffentlichen Sie es
• So erstellen Sie ein Navigationsmenü mit dem Elementor Pro Nav-Widget
• Hauptfunktionen des Elementor Nav-Menü-Widgets
• Erstellen Sie ein Menü mit dem Nav-Menu Pro-Widget
• Auf Mobilgeräte ansprechendes Menü
• 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 lenken, sondern auch für ein besseres SEO-Ranking.

Tatsächlich sind die Navigationsmenüs in erster Linie für die Einbindung des Benutzers konzipiert, dies ist jedoch nicht der einzige Zweck.

Der zweitwichtigste Faktor besteht darin, die Rolle von „WebCrawlern“ oder Bots im Auge zu behalten, die darauf ausgelegt sind, die Websites zu crawlen und den Inhalt auf der relevanten Ebene zu indizieren und der Suchmaschine Rückmeldung zu geben, um den Inhalt an der richtigen Stelle einzuordnen.

Wenn Sie also zu komplizierte Menüs erstellen, wäre 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 des Benutzererlebnisses bei und spielt eine entscheidende Rolle bei der Verbesserung des Rankings unserer Website und der Steigerung des Traffics.

Dies ist für viele Unternehmenswebsites ein guter Grund, ein einzelnes Navigationssymbol anstelle einer komplexen Menüleiste beizubehalten, die beim Klicken ein Vollbildmenü anzeigt.

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

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-Navigations-Widget beginnen, wollen wir untersuchen, wie wir mit der kostenlosen Version von Elementor 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. Standardmäßig verfügt WordPress über einen benutzerfreundlichen Menü-Builder, der Ihnen bei der Erstellung einfacher Navigationsmenüs für Ihre Website hilft.

Allerdings 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

Das Wichtigste zuerst: Sie müssen 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 : Machen Sie sich keine Sorgen. Ihre Leser können die Menünamen nicht sehen. Mit dieser Funktion können Sie alle Ihre verschiedenen Menüs 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. Im Abschnitt „Menüelemente hinzufügen“ auf der 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üelemente 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 allen ausgewählten Menüpunkten gefüllt.

Hinweis : Beachten Sie, dass jeder Abschnitt unter „Menüelemente hinzufügen“ die Möglichkeit bietet, zwischen „ Neueste“ , „Alle anzeigen“ und „Suchen“ . Denken Sie daran, diese Optionen zu verwenden, wenn viele Artikel vorhanden sind.

Sobald Sie mit dem Hinzufügen aller Menüelemente fertig sind, klicken Sie auf die Schaltfläche „Menü speichern“ und fahren mit dem nächsten Schritt fort.

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

Wussten Sie, dass WordPress Ihnen standardmäßig auch die Erstellung von Untermenüs ermöglicht? Beim Erstellen der Untermenüstruktur verfügen Sie über einen übergeordneten Menüpunkt und einen untergeordneten Menüpunkt.

Wenn ein Benutzer mit der Maus über den übergeordneten Menüpunkt fährt, werden alle darunter verborgenen untergeordneten Menüpunkte angezeigt.

Cool, oder?

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

4. Verwalten Sie den Speicherort Ihres Menüs und veröffentlichen Sie es

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

Oben in Ihrem Menüeditor sollten Sie eine Option namens „Standorte verwalten“ bemerken. Klicken Sie darauf und es sollte etwas Ähnliches wie der folgende Bildschirm erscheinen:

Die verfügbaren Menüpositionen hängen nun von dem von Ihnen installierten Theme ab. In diesem amp haben wir ein Theme, das drei Menüs unterstützt.

Nachdem Sie jedem der verfügbaren Menüorte ein Menü zugewiesen haben, klicken Sie auf „Änderungen speichern“ und fertig.

Sie kennen jetzt alle grundlegenden Menüfunktionen, die WordPress standardmäßig bietet. Wenn Sie jedoch mehr Anpassungsmöglichkeiten und Funktionalität 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 enthält das Elementor-Navigations-Widget sowie viele weitere Sonderfunktionen wie über 300 Vorlagen, einen Theme-Builder, ein Popup-Widget, WooCommerce-Widgets und viele andere interessante Funktionen.

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

Hauptfunktionen des Elementor Nav-Menü-Widgets

• Das Nav-Menü-Widget gibt Ihnen die Freiheit, Ihr Menü an einem beliebigen Ort zu platzieren. In Ihrer Kopfzeile oder oben oder irgendwo auf Ihrer Seite.
• Sie können mehrere Menüs auf Ihrer Website und auch auf Ihren Seiten separat oder global hinzufügen.
• Verleihen Sie Ihrem Menü ein umwerfendes Aussehen, indem Sie Animationen, Schwebeeffekte oder den aktiven Status verwenden
• Erstellen Sie ein auf Mobilgeräte ansprechendes Menü Ihrer Website und steuern Sie, wie Ihre Website auf mobilen Bildschirmen angezeigt wird
• Passen Sie Farbe, Typografie und Polsterung sowie andere Anpassungen Ihrer Menüleiste an
• Erstellen Sie ein pixelgenaues Menü mit der richtigen Präzision bei Ausrichtung, Abstand und Polsterung.

Erstellen Sie ein Menü mit dem Nav-Menu Pro-Widget

Sie müssen wie oben erwähnt ein einfaches WordPress-Menü erstellen und dann das Standard-WordPress-Menü mithilfe des Pro-Nav-Menü-Widgets anpassen. Sobald Sie die Primärliste erstellt haben, besteht der nächste Schritt darin, sie an der gewünschten Stelle, z. B. im Header-Bereich, hinzuzufügen.

Wenn Sie nun mit den Grundeinstellungen fertig sind, passen wir 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 Websites 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 Dienstleistungen anbieten. Bei einem vertikalen Layout verläuft die Navigationsleiste von oben nach unten.
• Dropdown: Dropdown-Menüs sind ebenfalls weit verbreitet. Dropdown-Listen sind vertikal angeordnet und erfordern eine Interaktion mit dem Benutzer, um sie anzuzeigen. Sie werden hauptsächlich verwendet, um ein klares Design zu schaffen.

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

Animationsbereich : In diesem Bereich können Sie Animationseffekte unter, über oder mit Doppellinienanimationen hinzufügen. Sie können sich auch für Rahmen, Hintergrund und subtile Textanimationen entscheiden.

Die Unterstreichungsanimationen sind wie folgt:

• Fade: Die Fade-Animation bietet Fade-Animationen unterhalb der Menüpunkte.
• Slide: Die Slide-Animation verschiebt die Leiste unter den Menüpunkten.
• Wachsen : Die Wachstumsanimation wächst von der Mitte nach außen und vermittelt ein Gefühl des Wachstums.
• Drop-in : Drop-in-Animation fließt von unten nach oben.
• Ausblenden: Die Animation fließt von oben nach unten aus.

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

Abschnitt „Zeiger“ : Wählen Sie den Zeigertyp aus dem Dropdown-Menü aus.

Untermenü-Anzeigebereich : Das Elementor-Widget ist vollgepackt mit vielen Untermenü-Styling-Optionen. Hier können Sie nicht nur die Farbe, den Stil und auch den Hintergrund des Menüs steuern.

Polsterung und Menüabstände: Die Polsterung lässt sich schnell anpassen. Sie können den horizontalen Abstand für Menüs und Untermenüs, den vertikalen Abstand, den Zwischenraum sowie die rechte, linke und zentrierte Ausrichtung ändern.

Elementor geht die Abstände und Auffüllungen von Menüs sehr gut an. Sie haben hinter den Kulissen hart gearbeitet, um sicherzustellen, dass sie den Entwicklern die Werkzeuge zur Verfügung stellen können, damit diese problemlos das Design erstellen können, über das sie nachdenken.

Der Menüabstand bietet viele Optionen, darunter:

• Abstand zwischen Menüpunkten
• Horizontaler und vertikaler Abstand für Menü- und Untermenüelemente
• Zentrierte, linke, rechte und ausgerichtete Ausrichtung.

Farbhintergrund und Typografie : Mithilfe des gewünschten Farbschemas und der gewünschten Hintergrundfarbe können Sie Ihren maßgeschneiderten Markenauftritt erzielen. Außerdem können Sie zwischen transparenten und halbtransparenten Menüoptionen wählen.

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

Auf Mobilgeräte ansprechendes Menü

Mobile ist ein wichtiger Teil des Webs, und deshalb stellen Elementor-Entwickler auch Tools zur Verfügung, mit denen Sie die Navigationsleiste auch für Mobilgeräte erstellen können.

Mit dem Elementor-Widget haben Sie die vollständige Kontrolle über mobile Menüoptionen in WordPress. Sie können die mobile Bildschirmansicht mit einem separaten Satz von Einstellungen für reine Mobilbildschirme steuern. Unten im Elementor-Einstellungsabschnitt gibt es eine Option für mobile Bildschirmeinstellungen, mit der Sie Ihre mobilen Bildschirmoptionen anzeigen können.

Kurz gesagt, die mobilen Menüfunktionen von Elementor sind wie folgt:

• Volle Breite auf Mobilgeräten: Sie haben die Möglichkeit, auch die volle Breite oder eine begrenzte Breite festzulegen.
• Haltepunkte für Tablets oder Mobilgeräte: Sie können die Haltepunkteinstellungen verwenden, um das Mobilmenü für Mobilgeräte oder Tablets festzulegen.
• Vertikale und Akkordeon-Menüs: Elementor bietet auch die Möglichkeit, ein zusammenklappbares Hamburger-Symbol anzuzeigen.
• Ausrichten umschalten: Das Hamburger-Symbol kann mittig, links oder rechts ausgerichtet werden.
• Ausrichtung seitlich/zentriert: Wählen Sie die Ausrichtung des mobilen Menüs.

Responsive Navigation: Bietet eine responsive Positionierung des Menüs.

Einpacken

Das Menü ist eines der wichtigsten Merkmale jeder Website. Denn es hilft den Besuchern, durch Ihre Website zu schlendern, und wenn Sie eine Liste intelligent erstellen, können Sie Ihre Besucher für lange Zeit auf Ihrer Website halten. Das Menü ist ebenso wichtig wie das gesamte Layout einer Website, der Kopf- und Fußzeilenbereich.

Daher muss das Menü-Widget in der Lage sein, Ihren einzigartigen Markenauftritt mit allen wesentlichen Funktionen zu vermitteln. Das Elementor-Navigations-Widget verfügt über funktionsreiche Funktionen, die es den Kunden ermöglichen, den Menüabschnitt so anzupassen, dass er zur Stimme Ihrer Marke passt. Jetzt können Sie ein maßgeschneidertes, stilvolles Menü auf Ihrer Website, auf Ihrer Zielseite, in der Kopfzeile oder in jedem anderen Abschnitt, in dem Sie es anzeigen möchten, verwenden.