So erstellen Sie ein vertikales Navigationsmenü in WordPress (5 einfache Wege) 

Wenn Ihre WordPress-Site wächst und Ihre obere Navigation überladen wird, ist ein vertikales Navigationsmenü eine der einfachsten Lösungen. Ich habe gesehen, dass es für E-Commerce-Shops mit vielen Produktkategorien, Dokumentationsseiten und Mitgliedschaftsseiten, die ein strukturiertes Seitenleistenlayout benötigen, gut funktioniert.

In diesem Leitfaden zeige ich Ihnen 5 Möglichkeiten, ein vertikales Navigationsmenü zu WordPress hinzuzufügen, ohne eine einzige Zeile Code schreiben zu müssen.

Was ist eine vertikale Navigationsleiste in WordPress?

Eine vertikale Navigationsleiste in WordPress ist ein Website-Menü, das Links in einer gestapelten Spalte anzeigt, anstatt in einer Standard-Horizontalreihe. Sie befindet sich normalerweise in einer linken Seitenleiste, kann aber überall dort platziert werden, wo Ihr Theme oder Page Builder dies unterstützt.

WordPress-Benutzer fügen eine hinzu, um Platz im Header freizugeben, die Lesbarkeit auf inhaltsreichen Websites zu verbessern und Designs anzupassen, die von einem strukturierteren Seitenleisten-Navigationslayout profitieren.

Wann sollten Sie eine vertikale Navigationsleiste in WordPress verwenden?

Ein vertikales Navigationsmenü ist am sinnvollsten, wenn Ihre Website viel zu navigieren hat und der Header aus allen Nähten platzt. Es verwandelt den Seitenleistenbereich in ein klares, gut lesbares Seiten-Navigationsmenü, anstatt alles in eine obere Leiste zu quetschen.

Es ist besonders nützlich für E-Commerce-Websites mit 10 oder mehr Produktkategorien, bei denen Käufer viele Optionen navigieren müssen, ohne den Header zu überladen. Dokumentations- und Wissensdatenbank-Websites nutzen es aus demselben Grund, ebenso wie Mitgliedschaftsseiten, die sich auf ein vertikales Seitenleistenmenü verlassen, um Dashboard-Links nach Abschnitten zu gruppieren.

Allerdings ist ein vertikales Seiten-Navigationsmenü nicht immer die richtige Wahl. Single-Page-Websites, Websites mit weniger als 6 Navigationspunkten und Mobile-First-Designs werden besser mit einem Standard-Horizontalmenü bedient.

So erstellen Sie eine vertikale Navigation mit SeedProd

Das Erstellen eines vertikalen Navigationsmenüs in WordPress ist mit SeedProd, dem Drag-and-Drop-Website-Builder für WordPress, ein Kinderspiel.

Mit dem Drag-and-Drop-Builder von SeedProd können Sie benutzerdefinierte WordPress-Themes und flexible Webseiten erstellen, ohne PHP-, Jquery-, Javascript-, HTML- & CSS-Code schreiben zu müssen. Außerdem enthält der Nav Menu-Block die vertikale Navigation im Lieferumfang.

Zuerst müssen Sie das SeedProd-Plugin installieren und aktivieren. Wenn Sie Hilfe benötigen, finden Sie in unserer Dokumentation SeedProd Pro installieren.

Hinweis: Mit der kostenlosen Version von SeedProd können Sie einer einzelnen Seite eine vertikale Navigationsleiste hinzufügen. In diesem Leitfaden verwenden wir jedoch SeedProd Pro, um unseren WordPress-Theme-Vorlagen eine Menüleiste hinzuzufügen.

Nachdem Sie das Plugin aktiviert und Ihren Lizenzschlüssel eingegeben haben, können Sie ein benutzerdefiniertes WordPress-Theme erstellen.

Erstellen eines benutzerdefinierten WordPress-Themes

Um Ihr Theme zu erstellen, navigieren Sie im WordPress-Dashboard zur Seite SeedProd » Theme Builder. Auf dieser Seite können Sie ein vorgefertigtes Theme als Ausgangspunkt auswählen.

Es ersetzt Ihr bestehendes Theme durch ein benutzerdefiniertes, responsives Webdesign Ihrer Wahl. Klicken Sie dazu auf die Schaltfläche Theme Template Kits.

Anschließend sehen Sie die Theme-Bibliothek mit Designs für verschiedene Website-Nischen. Wenn Sie auf das Dropdown-Menü klicken, können Sie sie nach Beliebtheit und Typ filtern.

Stöbern Sie durch die Designs und klicken Sie auf das Häkchen-Symbol bei einem beliebigen Design, um es zu importieren.

Wenn Sie ein Design importieren, generiert SeedProd die Vorlagen, aus denen Ihr Theme besteht. Von dort aus können Sie jede Vorlage bearbeiten und das Design an Ihre Bedürfnisse anpassen.

Alle Schritte finden Sie in unserem Leitfaden So erstellen Sie ein benutzerdefiniertes WordPress-Theme.

Fügen Sie Ihren Vorlagen eine vertikale Navigationsleiste hinzu

Sie können SeedProd verwenden, um jeder Ihrer Theme-Vorlagen eine vertikale Navigationsleiste hinzuzufügen. In diesem Leitfaden fügen wir dem 'Blog Page'-Template ein Menü hinzu.

Um dies zu tun, bewegen Sie den Mauszeiger über die Vorlage und klicken Sie auf den Link 'Design bearbeiten'.

Dies öffnet den Drag-and-Drop-Seiten-Builder mit einer Live-Vorschau rechts und einer Block-Seitenleiste links.

Scrollen Sie nun die Block-Seitenleiste nach unten und suchen Sie den Nav Menu-Block. Sobald Sie ihn gefunden haben, ziehen Sie ihn dorthin, wo Ihr Navigationsmenü angezeigt werden soll, z. B. in die Seitenleiste.

Standardmäßig zeigt das Nav Menu nur einen 'Über uns'-Menüpunkt an. Sie können dies in den Menüeinstellungen ändern, indem Sie auf den Block klicken. Anschließend werden die Einstellungen in der linken Seitenleiste angezeigt.

Zuerst ist der Menütyp 'Einfach' aktiviert, mit dem Sie Ihr eigenes Navigationsmenü erstellen können.

Für diesen Leitfaden wählen wir den Typ 'WordPress-Menü', mit dem Sie Ihr vorhandenes WordPress-Navigationsmenü verwenden können.

Der nächste Schritt besteht darin, die Leiste vertikal statt als horizontale Navigationsleiste anzuzeigen. Dies können Sie tun, indem Sie auf die Registerkarte 'Erweitert' in den Blockeinstellungen klicken und das Listenlayout 'Vertikal' auswählen.

Im selben Bereich können Sie die Menüfarben, Typografie, Hintergrundfarbe, Textausrichtung, Textdekoration und mehr anpassen.

Wenn Sie mit Ihrem Menü zufrieden sind, klicken Sie auf die Schaltfläche Speichern, um Ihre Änderungen zu speichern. Sie können diese Schritte für jede Vorlage wiederholen, die eine vertikale Navigation erfordert.

4 weitere Möglichkeiten, vertikale Navigation in WordPress zu erstellen

Die Erstellung einer vertikalen Navigationsleiste mit SeedProd ist eine gute Wahl, wenn Sie ein Theme-Builder-Plugin verwenden. Aber was ist, wenn Sie die Werkzeuge verwenden möchten, die bereits auf Ihrer Website vorhanden sind?

Unten finden Sie vier weitere Methoden, um vertikale Navigation zu WordPress hinzuzufügen.

Welche WordPress-Themes beinhalten Unterstützung für vertikale Navigation?

Eine weitere Möglichkeit, Ihrer Website eine vertikale Navigation hinzuzufügen, ist die Auswahl eines WordPress-Themes, das diese unterstützt. Viele WordPress-Themes verfügen über eine integrierte Unterstützung für vertikale Navigationsleisten, was Ihnen viel Zeit spart.

Der Vorteil hier ist die Einfachheit. Wählen Sie ein Theme, das zu Ihrer Ästhetik passt, und lassen Sie es die Hauptarbeit für Sie erledigen. Dies könnte die perfekte Lösung sein, wenn Sie nicht technisch versiert sind oder wenig Zeit haben.

Seien Sie sich jedoch bewusst, dass nicht alle Themes diese Funktion bieten. Wenn Sie Ihr Theme auswählen, gehen Sie zu dessen Einstellungen oder Dokumentation, um zu sehen, ob es eine vertikale Navigationsleiste enthält.

Zum Beispiel enthält das Standard-Theme Twenty-Twenty-One keine vertikale Navigation. Das Astra-Theme unterstützt dagegen ein Off-Canvas-Hamburger-Menü und ein Footer-Menü, die Sie gestapelt oder nebeneinander anzeigen können.

Hilfe beim Bearbeiten Ihres Menüs finden Sie in unserem Leitfaden zur Bearbeitung der Navigationsleiste in WordPress.

Fügen Sie eine vertikale Navigationsleiste mit dem Full Site Editor hinzu

Viele WordPress-Themes sind mit dem WordPress Full Site Editor (FSE) kompatibel. Sie werden als blockbasierte Themes bezeichnet und ermöglichen es Ihnen, Ihr Theme visuell anzupassen.

Navigieren Sie dazu in Ihrem WordPress-Adminbereich zu Design » Editor. Klicken Sie von dort aus auf das Navigationsmenü oben im Header Ihrer Website.

Nachdem Sie auf das Menü geklickt haben, sehen Sie im seitlichen Navigationsbereich mehrere Optionen. Wenn Sie beispielsweise auf die Registerkarte „Einstellungen“ klicken, gibt es eine Option, die Ausrichtung der Menüelemente zu ändern.

Klicken Sie auf den Pfeil nach unten, um das Menü in eine vertikale Navigation umzuschalten.

Klicken Sie nun auf die Schaltfläche Speichern, um Ihre Änderungen zu speichern.

Fügen Sie ein vertikales Navigationsmenü zur WordPress-Seitenleiste hinzu

Sie können Ihrer Website ganz einfach ein Seitenleisten-Navigationsmenü mit Widgets hinzufügen, wenn Sie Ihr WordPress-Theme nicht ändern möchten. Diese Methode ist ideal, wenn Sie kein blockbasiertes Theme installiert haben.

Stellen Sie zunächst sicher, dass Sie ein Navigationsmenü eingerichtet haben. Gehen Sie dann in Ihrem WordPress-Dashboard zu Design » Widgets.

Klicken Sie dort auf das (+) Plus-Symbol und suchen Sie nach dem Widget „Navigationsmenü“.

Nachdem Sie es zu Ihrer Seitenleiste hinzugefügt haben, können Sie dem Menü einen Titel geben und auswählen, welches Menü angezeigt werden soll.

Speichern Sie nun Ihre Änderungen und sehen Sie sich Ihre Website in der Vorschau an, um das vertikale Seitenleisten-Navigationsmenü in Aktion zu sehen.

Erstellen Sie eine vertikale Navigationsleiste für Beiträge und Seiten

Dieser Ansatz eignet sich gut für lange Tutorial-Beiträge oder Dokumentationsseiten, bei denen Sie eine Navigation für Abschnitte innerhalb des Artikels neben dem Hauptinhalt wünschen. Er verwendet denselben Navigationsblock wie die Seitenleistenmethode, wird aber stattdessen direkt in den Beitrags- oder Seiteninhalt eingefügt.

Bearbeiten Sie zunächst einen Beitrag oder eine Seite oder erstellen Sie einen neuen. Fügen Sie dann den Navigationsblock hinzu.

Klicken Sie in der rechten Seitenleiste auf den Abwärtspfeil, um das Menü vertikal anzuordnen, und speichern Sie dann Ihre Änderungen.

Wenn Sie den Beitrag oder die Seite aufrufen, sehen Sie eine neue vertikale Navigationsleiste.

FAQs zu vertikalen Navigationsleisten

Was ist eine vertikale Navigationsleiste?

Eine vertikale Navigationsleiste ist ein Website-Menü, das Links in einer gestapelten Spalte anzeigt, anstatt in einer horizontalen Reihe. Sie erscheint normalerweise in einer linken Seitenleiste und eignet sich gut für Websites mit vielen Seiten oder Kategorien zur Navigation. Die meisten WordPress-Websites, die eine hinzufügen, tun dies, um Platz im Header freizugeben und das Menü leichter scannbar zu machen.

Wann sollten Sie eine vertikale Navigationsleiste in WordPress verwenden?

Verwenden Sie ein vertikales Navigationsmenü, wenn Ihre Website mehr als 6 oder 7 Navigationspunkte auf der obersten Ebene hat oder wenn Ihre Zielgruppe viele Kategorien gleichzeitig durchsuchen muss. Es eignet sich gut für E-Commerce-Shops, Wissensdatenbanken und Mitgliedschaftsseiten. Vermeiden Sie es auf einfachen Websites oder bei Mobile-First-Designs, bei denen der Platz in der Seitenleiste begrenzt ist.

Was ist der Unterschied zwischen vertikaler und horizontaler Navigation?

Die horizontale Navigation zeigt Menülinks in einer einzigen Reihe am oberen Rand der Seite an. Die vertikale Navigation stapelt Links in einer Spalte, normalerweise in einer Seitenleiste. Horizontale Menüs eignen sich gut für einfache Websites mit wenigen Seiten; vertikale Menüs bewältigen größere Linklisten, ohne den Header zu überladen.

Wie gehen Sie mit der mobilen Reaktionsfähigkeit einer vertikalen Navigationsleiste um?

Die meisten WordPress-Tools, die eine vertikale Navigation hinzufügen, einschließlich SeedProd, kümmern sich automatisch um die mobile Reaktionsfähigkeit. Verwenden Sie für benutzerdefinierte Setups ein einklappbares Menü oder ein Hamburger-Menü auf kleinen Bildschirmen, damit die vertikale Navigation nicht den gesamten Ansichtsbereich einnimmt. Testen Sie immer auf einem echten Mobilgerät, bevor Sie veröffentlichen.

Was ist die ideale Breite für eine vertikale Navigationsleiste?

Eine Breite von etwa 200 bis 300 Pixeln eignet sich für die meisten Websites gut. Sie ist breit genug, um vollständige Menübeschriftungen anzuzeigen, ohne sie abzuschneiden, und schmal genug, um Platz für Ihren Hauptinhalt zu lassen. Stellen Sie immer sicher, dass das Menü auf einem 768-Pixel-Tablet-Viewport lesbar bleibt, nicht nur auf dem Desktop.

Erstellen Sie Ihr nächstes vertikales Navigationsmenü

Damit ist unser Leitfaden zur Erstellung eines vertikalen Navigationsmenüs in WordPress abgeschlossen. Nun sind Sie an der Reihe, ein benutzerfreundlicheres Navigationssystem für Ihre Website zu erstellen.

Ob Sie sich für SeedProd oder eine der anderen Methoden entscheiden, das Ziel ist dasselbe. Ein gutes Navigationssystem erleichtert die Nutzung Ihrer Website, und das ist immer die Mühe wert.

Viel Spaß beim Gestalten!

Bereit, Ihre Website zu erstellen? Holen Sie sich SeedProd und fügen Sie in wenigen Minuten vertikale Navigation zu jeder Vorlage hinzu.

Weitere Navigationstipps finden Sie im folgenden Tutorial:

• So passen Sie WordPress-Menüstile an
• So bearbeiten Sie mobile Menüs in WordPress
• Navigation auf Landingpages ist tot: Hier ist der Grund
• So erstellen Sie eine Landingpage ohne Navigation
• So fügen Sie für verschiedene Seiten in WordPress eine andere Seitenleiste hinzu

Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.