So erstellen Sie ein vertikales Navigationsmenü in WordPress

Ein gut gestaltetes Navigationsmenü ist wichtig, wenn Sie eine positive Benutzererfahrung auf Ihrer WordPress-Website schaffen möchten.

Während horizontale Menüs üblich sind, bietet ein vertikales Navigationsmenü eine einzigartige und effektive Möglichkeit, die Inhalte Ihrer Website zu organisieren, insbesondere für Websites mit vielen Seiten oder komplexen Strukturen.

Diese Menüs können die Zugänglichkeit verbessern, da sie besser in die Seitenleiste Ihrer Website passen und auf mobilen Geräten leichter zu navigieren sind.

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach ein vertikales Navigationsmenü in WordPress erstellen.

Was ist ein Navigationsmenü?

Ein Navigationsmenü ist eine Liste von Links, die auf wichtige Bereiche einer WordPress-Website verweisen. Dieses Menü wird normalerweise als horizontale Leiste von Links am oberen Rand jeder Seite dargestellt.

Navigationsmenüs geben Ihrer Website Struktur und helfen Besuchern, das zu finden, wonach sie suchen. Sie können Links zu Ihren wichtigsten Seiten, Kategorien oder Themen, WordPress-Blogbeiträgen und sogar benutzerdefinierte Links wie Ihr Social-Media-Profil hinzufügen.

Aber während man sie oft horizontal am oberen Rand einer Website platziert, haben vertikale Navigationsmenüs viele Einsatzmöglichkeiten und Vorteile.

Ein vertikales Navigationsmenü nimmt weniger Platz auf der Seite ein, ist leichter zu überblicken und zu navigieren und kann in Ihrer Seitenleiste, Ihrem Footer oder sogar als Popup-Fenster platziert werden, was es flexibler macht.

Wenn Sie beispielsweise einen Online-Shop haben, können Sie mit einem vertikalen Navigationsmenü viel mehr Produktkategorien und Produkte anzeigen, ohne zu viel Platz zu beanspruchen.

Abgesehen davon, werfen wir einen Blick auf eine Reihe von Möglichkeiten, ein vertikales Navigationsmenü in WordPress zu erstellen. Hier sind die Themen, die wir in diesem Artikel behandeln werden:

• Verschiedene Positionen für die Menüanzeige ausprobieren
• Hinzufügen eines vertikalen Navigationsmenüs zur Seitenleiste
• Erstellen eines vertikalen Navigationsmenüs auf einem Beitrag oder einer Seite
• Hinzufügen eines vertikalen Navigationsmenüs mit dem Full Site Editor
• Erstellen eines vertikalen Navigationsmenüs mit einem Theme Builder Plugin
• Erstellen eines responsiven vertikalen Navigationsmenüs für mobile Geräte
• Erstellen eines Dropdown-Menüs in WordPress
• Erstellen eines Mega-Menüs in WordPress
• Bonus: Erstellen Sie ein Sticky Floating Navigationsmenü in WordPress

Verschiedene Positionen für die Menüanzeige ausprobieren

Wenn Sie Ihrer Website ein Navigationsmenü hinzufügen, wird es entweder vertikal oder horizontal angezeigt. Dies hängt von Ihrem Theme sowie von der von Ihnen ausgewählten Menüposition ab.

Die Anzahl der verfügbaren Menüpositionen hängt vom verwendeten Theme ab. Möglicherweise stellen Sie fest, dass einige dieser Positionen das Menü vertikal anzeigen.

Um dies mit Ihrem Theme zu testen, navigieren Sie im WordPress-Admin-Seitenmenü zur Seite Darstellung » Menüs. Hier können Sie experimentieren, um zu sehen, welche Positionen auf Ihrer Website verfügbar sind und wie sie angezeigt werden.

Zum Beispiel bietet das Twenty Twenty-One Theme keine vertikalen Positionen, während das Twenty Twenty Theme eine namens 'Desktop Expanded Menu' anbietet.

Sie können einfach das Menü auswählen, das Sie vertikal anzeigen möchten, und dann unten auf dem Bildschirm das Kontrollkästchen „Desktop Expanded Menu“ aktivieren.

Danach müssen Sie unbedingt auf die Schaltfläche „Menü speichern“ klicken, um Ihre Einstellungen zu speichern. So sieht es auf unserer Demowebsite aus.

Weitere Informationen zum Bearbeiten von Menüs und Menüpositionen finden Sie in unserem Anfängerleitfaden zum Thema Hinzufügen eines Navigationsmenüs in WordPress.

Hinzufügen eines vertikalen Navigationsmenüs zur Seitenleiste

Unabhängig davon, welches Theme Sie verwenden, ist es einfach, ein vertikales Navigationsmenü mit einem Widget zur Seitenleiste hinzuzufügen.

Zuerst müssen Sie ein Navigationsmenü erstellen, das Sie anzeigen möchten, falls Sie dies noch nicht getan haben. Besuchen Sie dann die Seite Darstellung » Widgets im WordPress-Dashboard.

Klicken Sie von hier aus einfach auf die Schaltfläche „+“ in der oberen linken Ecke der Seite und ziehen Sie den Navigationsmenü-Block auf die Seitenleiste.

Danach können Sie dem Widget einen Namen geben und das Menü, das Sie anzeigen möchten, aus dem Dropdown-Menü auswählen. Klicken Sie abschließend oben auf die Schaltfläche „Aktualisieren“, um Ihre Einstellungen zu speichern.

Hier sehen Sie, wie das vertikale Seitenleistenmenü auf unserem Demo-Blog WordPress aussieht.

Erstellen eines vertikalen Navigationsmenüs auf einem Beitrag oder einer Seite

Sie können auf ähnliche Weise ein vertikales Navigationsmenü zu Beiträgen und Seiten hinzufügen.

Zuerst müssen Sie einen neuen Beitrag erstellen oder einen vorhandenen bearbeiten.

Klicken Sie danach auf die Schaltfläche „+“ oben auf der Seite und ziehen Sie den Navigationsblock auf die Seite.

Wählen Sie als Nächstes aus, welches Menü angezeigt werden soll. Klicken Sie einfach auf die Schaltfläche „Menü auswählen“ in der Symbolleiste und wählen Sie das gewünschte Menü aus.

Schließlich müssen Sie die Blockeinstellungen im rechten Bereich betrachten.

Dort finden Sie zwei Schaltflächen für die Ausrichtung des Menüs. Sie müssen auf die Schaltfläche mit dem nach unten gerichteten Pfeil klicken, um das Menü vertikal auszurichten.

Wenn Sie fertig sind, klicken Sie auf die Schaltfläche „Veröffentlichen“ oder „Aktualisieren“, um Ihre Einstellungen zu speichern.

Hinzufügen eines vertikalen Navigationsmenüs mit dem Full Site Editor

Wenn Sie ein blockbasiertes Theme verwenden, können Sie das vertikale Navigationsmenü mit dem Full Site Editor ganz einfach zu Ihrer Website hinzufügen.

Gehen Sie dazu im WordPress-Dashboard zum Bildschirm Darstellung » Editor. Sobald Sie sich im Editor befinden, klicken Sie auf das Navigationsmenü, das am oberen Rand des Website-Headers erscheint.

Klicken Sie als Nächstes auf die Schaltfläche „Navigation auswählen“ in der Symbolleiste.

Nun sehen Sie im rechten Bereich verschiedene Optionen zur Anpassung des Navigationsmenüs.

Eine dieser Optionen ist, ob das Menü mit horizontaler oder vertikaler Ausrichtung angezeigt werden soll. Klicken Sie einfach auf den Pfeil nach unten für die vertikale Ausrichtung, um ein vertikales Menü zu erstellen.

Weitere Informationen finden Sie in unserem Leitfaden zum Hinzufügen eines Navigationsmenüs in WordPress.

Klicken Sie abschließend auf die Schaltfläche „Speichern“, um Ihre Einstellungen zu speichern. Sie haben nun ein vertikales Navigationsmenü zu Ihrer Website hinzugefügt.

Erstellen eines vertikalen Navigationsmenüs mit einem Theme Builder Plugin

SeedProd ist das beste WordPress Page Builder und Custom Theme Builder Plugin auf dem Markt. Es ermöglicht Ihnen, ganz einfach vertikale Menüs überall auf Ihrer WordPress-Website zu erstellen.

Zuerst müssen Sie das SeedProd Plugin installieren und aktivieren. Weitere Details finden Sie in unserem Anfängerleitfaden zur Installation eines WordPress-Plugins.

Nach der Aktivierung müssen Sie Ihren Lizenzschlüssel eingeben. Diese Informationen finden Sie in Ihrem Konto auf der SeedProd-Website.

Danach können Sie SeedProd verwenden, um ein benutzerdefiniertes WordPress-Theme zu erstellen.

Erstellen eines benutzerdefinierten WordPress-Themes

Sie finden den SeedProd Theme Builder, indem Sie zu SeedProd » Theme Builder navigieren. Hier verwenden Sie eines der fertigen Themes von SeedProd als Ausgangspunkt. Dies ersetzt Ihr bestehendes WordPress-Theme durch ein neues, benutzerdefiniertes Design.

Das können Sie tun, indem Sie auf die Schaltfläche 'Themes' klicken.

Anschließend wird Ihnen eine Liste professionell gestalteter Themes für verschiedene Arten von Websites angezeigt. Zum Beispiel gibt es Vorlagen namens „Modern Business“, „Marketing Agency“ und „Mortgage Broker Theme“.

Sehen Sie sich die Optionen an und wählen Sie eine aus, die Ihren Bedürfnissen am besten entspricht, indem Sie auf das Häkchen-Symbol klicken.

Sobald Sie ein Theme ausgewählt haben, generiert SeedProd alle benötigten Theme-Vorlagen. Wie Sie diese Vorlagen anpassen können, erfahren Sie in unserem Leitfaden zum Thema Erstellen eines benutzerdefinierten WordPress-Themes.

Hinzufügen eines vertikalen Navigationsmenüs zu den Vorlagen Ihrer Website

Jetzt können Sie SeedProd verwenden, um Ihrer Theme-Vorlage ein vertikales Navigationsmenü hinzuzufügen. In diesem Tutorial fügen wir dem Blog-Index-Template ein Menü hinzu.

Sie müssen mit der Maus über diese Vorlage fahren und dann auf den Link 'Design bearbeiten' klicken.

Dies öffnet den Drag-and-Drop-Seitenersteller von SeedProd, wo Sie rechts eine Vorschau Ihrer Website und links ein Block-Panel sehen.

Scrollen Sie von hier aus nach unten durch die Blöcke, bis Sie zum Abschnitt "Erweitert" gelangen.

Sobald Sie den Navigationsmenü-Block gefunden haben, sollten Sie ihn auf Ihre Seitenleiste oder an eine beliebige Stelle ziehen, an der Sie das Navigationsmenü anzeigen möchten. Standardmäßig gibt es nur einen Menüpunkt: „Über uns“.

Nun müssen Sie die Einstellungen des Menüs ändern. Klicken Sie dazu auf das Menü, und die verfügbaren Optionen werden in der linken Spalte angezeigt.

Derzeit ist der Menütyp „Einfach“ ausgewählt. Dies ermöglicht es Ihnen, Ihr eigenes Navigationsmenü in SeedProd zu erstellen.

Für dieses Tutorial klicken wir jedoch auf den Typ „WordPress-Menü“, um stattdessen das WordPress-Navigationsmenü zu verwenden.

Schließlich müssen Sie auf die Registerkarte „Erweitert“ klicken. Hier finden Sie eine Option, um das Listenlayout vertikal oder horizontal auszurichten.

Wenn Sie auf die Schaltfläche „Vertikal“ klicken, werden Sie feststellen, dass sich die Vorschau sofort in ein vertikales Navigationsmenü ändert.

Vergessen Sie nicht, oben auf dem Bildschirm auf die Schaltfläche „Speichern“ zu klicken, um Ihr vertikales Menü zu speichern.

Erstellen eines responsiven vertikalen Navigationsmenüs für mobile Geräte

Es kann schwierig sein, ein Standardmenü auf dem kleinen Bildschirm eines Smartphones zu bedienen. Deshalb empfehlen wir Ihnen, die mobile Version Ihrer WordPress-Website in der Vorschau anzuzeigen, um zu sehen, wie Ihre Website auf Mobilgeräten aussieht.

Vertikale Menüs sind viel einfacher zu navigieren, insbesondere wenn Sie ein Vollbild-Responsive-Menü verwenden, das sich automatisch an verschiedene Bildschirmgrößen anpasst.

Um zu erfahren, wie Sie Ihr Navigationsmenü auf Mobilgeräten einfacher bedienbar machen, lesen Sie unseren Leitfaden zum Hinzufügen eines Vollbild-Responsive-Menüs in WordPress.

Erstellen eines Dropdown-Menüs in WordPress

Ein Dropdown-Menü sieht aus wie ein normales horizontales Navigationsmenü am oberen Bildschirmrand. Wenn Sie jedoch mit der Maus über einen der Einträge fahren, wird ein vertikales Untermenü angezeigt.

Wenn Sie eine Website mit vielen Inhalten haben, können Sie mit einem Dropdown-Menü die Menüstruktur nach Themen oder Hierarchien organisieren. Dies zeigt mehr Inhalte auf begrenztem Raum an.

Um ein Dropdown-Navigationsmenü auf Ihrer Website anzuzeigen, müssen Sie ein Theme mit Unterstützung für Dropdown-Menüs auswählen. Danach müssen Sie das Navigationsmenü erstellen und dann einigen der Menüeinträge Unterpunkte hinzufügen.

Wie Sie das Schritt für Schritt tun können, erfahren Sie in unserem Anfängerleitfaden zum Erstellen eines Dropdown-Menüs in WordPress.

Erstellen eines Mega-Menüs in WordPress

Ein Mega-Menü listet mehrere Menüs vertikal über die Seite auf. Sie ähneln Dropdown-Menüs, außer dass alle Untermenüs gleichzeitig angezeigt werden, sodass Benutzer Ihre besten Inhalte schnell und einfach finden können.

Mega-Menüs sind sehr ansprechend und interaktiv, da sie das Beste aus horizontalen und vertikalen Menüs kombinieren, um einen hilfreichen Überblick über die Inhalte Ihrer Website auf einem einzigen Bildschirm zu zeigen.

Wir haben kürzlich ein Mega-Menü zu WPBeginner hinzugefügt, um die Auffindbarkeit von Inhalten zu verbessern. Wir erklären, wie wir das in unserem Einblick hinter die Kulissen unseres neuen Website-Designs gemacht haben.

Mehr erfahren Sie in unserem Leitfaden zum Hinzufügen eines Mega-Menüs zu Ihrer WordPress-Website.

Bonus: Erstellen Sie ein Sticky Floating Navigationsmenü in WordPress

Sie können auch ein Sticky-Floating-Navigationsmenü für Ihre Website erstellen, um das Benutzerengagement zu verbessern. Ein Sticky-Menü bleibt auch dann auf Ihrem Bildschirm sichtbar, wenn Benutzer auf Ihrer Seite nach unten scrollen, was den Zugriff für Benutzer erleichtert.

Um Ihr Navigationsmenü fixiert zu machen, müssen Sie das Plugin Sticky Menu & Sticky Header installieren und aktivieren. Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Thema Installation eines WordPress-Plugins.

Gehen Sie nach der Aktivierung zur Seite Einstellungen » Sticky Menu und geben Sie #main-navigation neben der Option „Sticky Element (erforderlich)“ ein. Auf diese Weise können Sie sogar Ihr vertikales Navigationsmenü als „sticky“ (feststehend) machen.

Wenn Sie fertig sind, klicken Sie auf „Änderungen speichern“, um Ihre Einstellungen zu speichern. Weitere Anweisungen finden Sie in unserem Tutorial unter Erstellen eines Sticky Floating Navigationsmenüs in WordPress.

Wir hoffen, dieses Tutorial hat Ihnen geholfen zu lernen, wie Sie ein vertikales Navigationsmenü in WordPress erstellen. Möglicherweise möchten Sie auch lernen, wie Sie ein mobiles Menü in WordPress ausblenden oder unseren Leitfaden zum Thema Hinzufügen von Bildsymbolen zu Navigationsmenüs in WordPress.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.