Elementor Navigation Widget – So wird es genutzt

Inhalt

Keine Webseite kommt ohne eine Navigation aus. Wie Sie das Elementor Navigation Widget verwenden und einstellen, erklären wir Ihnen.

Damit sich Leute auf Ihrer Webseite zurechtfinden und die Inhalte entdecken können, benötigen Sie eine Navigation. Setzen Sie bei Ihrer Webseite auf Elementor, dann können Sie hierfür auf das Elementor Navigation Widget zurückgreifen.

Wie genau Sie es benutzen, wie Sie es einstellen und worauf Sie dabei achten müssen, erklären wir Ihnen.

Elementor Navigation Widget auf Webseite benutzen

Wie erstelle ich die Navigation? Sie können eine Navigation selbstverständlich dort platzieren, wo Sie es möchten. Typischerweise wird dazu ein Header benutzt, der sich im oberen Teil Ihrer Webseite befindet. Sollten Sie diesen noch nicht haben, müssen Sie also zuerst einen Elementor Header erstellen.

Öffnen Sie nun das Elementor Theme, in dem Sie die Navigation erstellen wollen. Hier fügen Sie nun das Elementor-Widget „WordPress Menu“ hinzu. Dieses Widget sorgt dafür, dass Sie eine Navigation erhalten.

Innerhalb des Widgets gibt es den Punkt „Menü“. Dort können Sie einstellen, welches Menü von Ihnen angezeigt werden soll. Haben Sie noch kein Menü in WordPress erstellt, dann navigieren Sie innerhalb Ihres Backends zu „Design“ -> „Menüs“. Hier können Sie ein Menü erstellen, welches dann von Elementor eingebunden wird.

Elementor Navigation Widget Menü einstellen
Hier wird im Elementor Navigation Widget das Menü eingestellt, welches benutzt werden soll

Auswahl der mobilen Navigation: Da mobile Geräte über eine geringere Bildschirmgröße verfügen, können Elementor Navigationen, die für klassische Desktops entwickelt werden, selten in dieser Form auch auf mobilen Geräten angezeigt werden.

Sie können im Elementor Navigation Widget auswählen, ab wann Ihr Menü nicht mehr in der Desktop-Variante, sondern in einer mobilen Variante angezeigt werden soll. Hierzu suchen Sie im Widget im Tab „Inhalt“ den Punkt „Umbruch bei“ und wählen aus, ob das mobile Menü nur auf Smartphones, bereits ab Tablet-Größe oder gar nicht angezeigt werden soll.

Elementor Navigation Widget Umbruch für mobile Geräte
Hier können Sie im Elementor Navigation Widget den Umbruch für mobile Geräte einstellen

Wie gestalte ich das Elementor Navigation Widget?

Navigation gestalten: Haben Sie das Menü erstellt und eingestellt, ab wann es auf die mobile-Variante wechseln soll, dann können Sie mit der Gestaltung der Navigation beginnen. Starten Sie am besten zuerst mit der mobilen Ansicht, um dem heutigen „mobile first“-Ansatz gerecht zu werden.

Wechseln Sie hierzu in Elementor in den „Mobile Portrait“-Modus, indem Sie das Smartphone-Icon im oberen Bereich auswählen. Gestalten Sie das Menü nun nach Ihren Vorlieben. Wiederholen Sie diesen Vorgang anschließend für den Tablet-Modus sowie für die Desktop-Variante.

Beachten Sie dabei, dass jeder der 3 Modi für sich gestaltet werden kann beziehungsweise muss. Dies bietet Ihnen beispielsweise die Möglichkeit, mit unterschiedlichen Schriftgrößen oder sogar Farben, wenn gewünscht, zu arbeiten. Auch Werte wie Abstände sind jeweils für den ausgewählten Modus aktiv und können somit je nach Modus unterschiedlich definiert werden.

Elementor Navigation sticky machen: Sie möchten, dass Ihre Navigation auf Ihrer Webseite angezeigt wird, egal wie weit Besuchende auf der Seite scrollen? Das Stichwort hierzu lautet „sticky“. Möchten Sie solch eine Navigation erstellen, dann müssen Sie Ihren Elementor Header sticky machen.

Gerade bei längeren Webseiten und Inhalten kann es sinnvoll sein, Ihren Besuchenden die Möglichkeit zu bieten, schnell wieder an den Start der Webseite zu gelangen. Vor allem, wenn Sie hier ein Inhaltsverzeichnis benutzen. Dafür bietet es sich an, einen nach oben Button in Elementor zu erstellen.

Info

März 23, 2025

weitere Artikel
Brauchst du Hilfe?

Benötigst du Hilfe bei der Umsetzung, der Korrektur oder Optimierung deiner WordPress Seite?

Nimm gerne mit uns Kontakt auf und wir schauen, wie wir dir behilflich sein können!

Teile deinen Fund!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert