So erstellen Sie ein Dropdown-Menü in WordPress (Anfängerleitfaden)

Möchten Sie ein Dropdown-Menü in WordPress erstellen?

Ein Dropdown-Menü zeigt eine Liste von Links an, wenn Sie mit der Maus über einen Menüpunkt fahren. Sie können diese Menüs verwenden, um viele Optionen auf kleinem Raum anzuzeigen und Besuchern zu helfen, das zu finden, wonach sie suchen, indem Sie Links in Kategorien organisieren.

In dieser Anfängeranleitung zeigen wir Ihnen, wie Sie ein Dropdown-Menü in WordPress erstellen.

Warum Dropdown-Menüs in WordPress verwenden?

WordPress verfügt über ein integriertes Menüverwaltungssystem, mit dem Sie einfach Navigationsmenüs zu Ihrer Website hinzufügen können.

Navigationsmenüs sind Links zu den wichtigsten Seiten Ihrer Website und erscheinen normalerweise nebeneinander neben dem Logo Ihrer Website.

Wenn Sie einen WordPress-Blog starten oder eine Website erstellen mit nur wenigen Seiten, dann kann es sinnvoll sein, Ihr Menü als einzelne Zeile zu erstellen. Besucher können dann alle wichtigen Seiten auf einen Blick sehen.

Wenn Sie jedoch einen Online-Shop oder eine große Website betreiben, haben Sie möglicherweise viele Inhalte. Das Hinzufügen all dieser Links zum Menü kann überwältigend sein und Ihre Website unordentlich aussehen lassen.

Dropdown-Menüs lösen dieses Problem, indem sie Menülinks nur anzeigen, wenn ein Besucher mit der Maus über das übergeordnete Element fährt. Sie ermöglichen es Ihnen auch, Ihre Inhalte in Themen, Kategorien oder Gruppen zu organisieren. Sie können sogar Titel zu Ihren Menüs hinzufügen.

Ähnlich wie vertikale Navigationsmenüs sind sie perfekt, um viele Inhalte auf kleinem Raum anzuzeigen.

Nichtsdestotrotz wollen wir uns nun ansehen, wie Sie ganz einfach WordPress-Dropdown-Menüs erstellen und dann zu Ihrer Website hinzufügen können.

Video-Tutorial

WPBeginner abonnieren

Wenn Ihnen das Video nicht gefällt oder Sie weitere Anweisungen benötigen, lesen Sie einfach weiter.

Schritt 1: Auswahl eines Themes mit Dropdown-Menü-Unterstützung

WordPress verfügt über ein integriertes Menüverwaltungssystem, aber wie diese Menüs aussehen, hängt von Ihrem WordPress-Theme ab.

Fast alle WordPress-Themes unterstützen Dropdown-Menüs standardmäßig. Einige Themes unterstützen jedoch möglicherweise keine Dropdown-Funktion. Zuerst müssen Sie sicherstellen, dass Ihr Theme Dropdown-Menüs unterstützt.

Woher weiß ich, ob mein Theme Dropdown-Navigation unterstützt?

Wenn Sie das Theme aus dem offiziellen WordPress-Repository heruntergeladen haben, besuchen Sie einfach die Seite dieses Themes und klicken Sie auf die Schaltfläche „Vorschau“, um eine Live-Demo anzuzeigen.

Sie können dann prüfen, ob die Demo ein Dropdown-Menü enthält.

Wenn Sie ein Premium-WordPress-Theme verwenden, hat der Entwickler möglicherweise eine Live-Demo auf seiner Website. Sie können auch die Dokumentation des Themes für weitere Informationen prüfen.

Wenn Sie sich immer noch unsicher sind, können Sie den Entwickler jederzeit um Hilfe bitten. Weitere Informationen zu diesem Thema finden Sie in unserem Leitfaden zur richtigen Anfrage nach WordPress-Support und wie Sie ihn erhalten.

Wenn Ihr WordPress-Theme keine Dropdown-Menüs unterstützt, müssen Sie ein Theme finden, das dies tut. Viele Tipps finden Sie in unserem Leitfaden zur Auswahl des perfekten WordPress-Themes.

Um Ihnen zu helfen, hier sind einige ausgezeichnete Themes, die Dropdown-Menüs unterstützen:

• Astra – Ein vielseitiges WordPress-Theme, das mehrere Starter-Websites und unzählige Funktionen bietet.
• StudioPress-Themes – Aufbauend auf dem Genesis-Theme-Framework sollten diese professionellen Themes dazu beitragen, dass Ihre Website schneller geladen wird.
• OceanWP – Ein beliebtes WordPress-Theme, das für alle Arten von Websites geeignet ist.
• Ultra – Angetrieben vom Themify Builder, kommt dieses Drag-and-Drop-WordPress-Theme mit schönen Vorlagen und flexiblen Theme-Optionen.
• Divi – Ein beliebtes Theme von Elegant Themes, das den Divi Page Builder verwendet und mit unzähligen Drag-and-Drop-Funktionen, einschließlich Dropdown-Menüs, geliefert wird.

Nichtsdestotrotz wollen wir uns ansehen, wie man ein Dropdown-Menü in WordPress erstellt.

Schritt 2: Erstellen eines Navigationsmenüs in WordPress

Beginnen wir mit der Erstellung eines einfachen Menüs.

Wenn Sie bereits ein Navigationsmenü auf Ihrer Website eingerichtet haben, können Sie mit dem nächsten Schritt fortfahren.

Um zu beginnen, gehen Sie im WordPress-Dashboard zu Darstellung » Menüs und klicken Sie dann auf den Link „Neues Menü erstellen“.

Hinweis: Wenn Sie stattdessen Darstellung » Editor sehen, bedeutet dies, dass Ihr Theme die vollständige Website-Bearbeitung (FSE) unterstützt. In diesem Fall können Sie zum FSE-Abschnitt unten springen.

Geben Sie als Nächstes einen Namen für das Navigationsmenü ein.

Dies dient nur zu Ihrer Information, sodass Sie alles verwenden können, was Ihnen hilft, das Menü im WordPress-Adminbereich zu identifizieren.

Nachdem Sie einen Titel in das Feld „Menüname“ eingegeben haben, klicken Sie auf „Menü erstellen“. WordPress erstellt nun ein leeres Menü für Sie.

Als Nächstes müssen Sie die obersten Links zum Navigationsmenü hinzufügen. Dies sind die Elemente, die in der obersten Zeile Ihres Dropdown-Menüs erscheinen und als übergeordnete Elemente für alle anderen Beiträge und Seiten dienen.

Aktivieren Sie in der linken Spalte einfach das Kontrollkästchen neben jeder Seite, die Sie hinzufügen möchten. Klicken Sie dann auf die Schaltfläche „Zum Menü hinzufügen“.

Diese Seiten werden nun in der rechten Spalte unter „Menüstruktur“ angezeigt.

Sie können auch Blogbeiträge, Kategorien auswählen oder benutzerdefinierte Links hinzufügen. Detailliertere Anweisungen finden Sie in unserem Leitfaden unter so fügen Sie ein Navigationsmenü in WordPress hinzu.

Schritt 3: Unterpunkte zu einem Menü hinzufügen

Als Nächstes müssen wir Unterpunkte hinzufügen, die im Dropdown-Menü angezeigt werden. Sie können einen Unterpunkt unter jedem vorhandenen Menüpunkt hinzufügen.

In dieser Anleitung zeigen wir Ihnen, wie Sie Themenkategorien unter einem Menüpunkt 'Blog' hinzufügen. Die Schritte sind jedoch unabhängig davon, welche Inhalte Sie hinzufügen, ähnlich.

Wählen Sie in der linken Spalte einfach alle Seiten aus, die Sie als Unterpunkte hinzufügen möchten, und klicken Sie dann auf die Schaltfläche „Zum Menü hinzufügen“. Ihre Elemente werden nun in der rechten Spalte angezeigt.

Standardmäßig werden diese Links jedoch alle als normale Menüpunkte angezeigt, was bedeutet, dass sie zur obersten Zeile hinzugefügt werden.

Wir müssen sie stattdessen zu Unterpunkten eines übergeordneten Elements machen.

Um dies zu tun, ziehen Sie einfach einen Menüpunkt per Drag & Drop und platzieren Sie ihn unter dem gewünschten übergeordneten Element. Bewegen Sie ihn dann leicht nach rechts, und er wird zu einem Unterpunkt.

Wiederholen Sie nun einfach diesen Vorgang für jeden Unterpunkt, den Sie im Dropdown anzeigen möchten.

Wenn Sie mit der Einrichtung des Menüs zufrieden sind, vergessen Sie nicht, auf die Schaltfläche „Menü speichern“ zu klicken, um Ihre Änderungen zu speichern.

Schritt 4: Veröffentlichen Sie Ihr Dropdown-Menü

Wenn Sie ein Menü bearbeiten, das bereits auf Ihrer Website live ist, sehen Besucher Ihre Änderungen sofort.

Wenn Sie jedoch ein neues Menü erstellen, müssen Sie einen Speicherort für dieses Menü auswählen.

Jedes WordPress-Theme hat seine eigenen Menüpositionen, die Sie im Abschnitt 'Menüeinstellungen' auf der rechten Seite des Bildschirms finden. Aktivieren Sie einfach das Kontrollkästchen neben der Position, die Sie verwenden möchten, und klicken Sie dann auf die Schaltfläche 'Menü speichern'.

Alternativ können Sie benutzerdefinierte Navigationsmenüs in Ihrem WordPress-Theme hinzufügen.

Wenn das erledigt ist, können Sie Ihre Website besuchen, um das Dropdown-Menü in Aktion zu sehen.

So erstellen Sie ein Dropdown-Menü mit dem Full-Site-Editor

Wenn Sie ein blockbasiertes Theme wie Hestia Pro verwenden, können Sie mit dem Full-Site-Editor ein Dropdown-Menü zu jedem Teil Ihrer Website hinzufügen.

Um zu beginnen, gehen Sie einfach im WordPress-Dashboard zu Themes » Editor.

Standardmäßig zeigt der Full-Site-Editor die Home-Vorlage Ihres Themes an.

Um ein Dropdown-Menü zu einem anderen Teil Ihrer Website hinzuzufügen, klicken Sie entweder auf 'Vorlagen' oder 'Muster'.

Der Editor zeigt nun eine Liste aller Vorlagen oder Vorlagenteile an, aus denen Ihr WordPress-Theme besteht.

Klicken Sie einfach auf den Bereich, in dem Sie das Dropdown-Menü hinzufügen möchten. Wenn Sie beispielsweise ein Hauptnavigationsmenü erstellen, möchten Sie normalerweise den Vorlagenteil „Header“ auswählen.

WordPress zeigt nun eine Vorschau der Vorlage oder des Vorlagenteils an.

Um diese Vorlage zu bearbeiten, klicken Sie auf das kleine Stiftsymbol.

Wenn dies erledigt ist, klicken Sie auf das blaue Symbol '+' in der oberen linken Ecke.

Geben Sie in der erscheinenden Suchleiste „Navigation“ ein.

Wenn der rechte Block erscheint, ziehen Sie ihn per Drag & Drop in Ihr Design.

Klicken Sie nun einfach, um diesen Block auszuwählen, und Sie sehen alle verschiedenen Einstellungen, die Sie zur Anpassung des Navigationsblocks verwenden können.

Sie können beispielsweise das Layout ändern, die Anzeigeeinstellungen bearbeiten, die Farbe des Textes und des Hintergrunds ändern und die Schriftgröße anpassen.

Um die übergeordneten Seiten zu Ihrem Menü hinzuzufügen, klicken Sie einfach auf das '+'-Symbol.

Geben Sie im erscheinenden Popup den Titel oder die URL der Seite ein, die Sie hinzufügen möchten. Wenn die richtige Seite angezeigt wird, klicken Sie darauf, um sie zum Menü hinzuzufügen.

Wiederholen Sie einfach diesen Vorgang, um alle übergeordneten Elemente zum Dropdown-Menü hinzuzufügen.

Wenn das erledigt ist, können Sie jedem übergeordneten Element ein Untermenü hinzufügen.

Klicken Sie im rechten Menü auf das gepunktete Symbol neben dem übergeordneten Element. Wählen Sie dann „Untermenü-Link hinzufügen“.

Geben Sie im erscheinenden Popup den Titel oder die URL der Seite ein, die im Dropdown-Menü angezeigt werden soll.

Wenn die richtige Seite angezeigt wird, klicken Sie darauf, um sie als Untermenüpunkt hinzuzufügen.

Wiederholen Sie nun einfach diese Schritte für alle Elemente, die Sie im Dropdown-Menü anzeigen möchten.

Wenn Sie mit der Einrichtung des Menüs zufrieden sind, klicken Sie auf „Speichern“, um Ihre Änderungen zu speichern.

Wenn Sie nun Ihre Website besuchen, sehen Sie das Dropdown-Menü in Aktion.

Tipps zur Erstellung interaktiver Dropdown-Menüs

Navigationsmenüs sind wichtig, da sie der erste Ort sind, an den Besucher gehen, um interessante Inhalte oder spezifische Informationen zu finden.

Die korrekte Verwendung hilft Besuchern, sich auf Ihrer Website zurechtzufinden. Sie hilft Ihnen auch, mehr Conversions und Verkäufe zu erzielen und gleichzeitig Ihre Seitenaufrufe zu erhöhen und Ihre Absprungrate zu reduzieren.

In diesem Sinne sind hier einige Tipps zur Erstellung hilfreicher und benutzerfreundlicher Dropdown-Menüs.

1. Erstellen Sie mehrstufige Dropdown-Menüs

In dieser Anleitung haben wir Ihnen gezeigt, wie Sie eine obere Reihe und eine Reihe von Unterpunkten erstellen. Sie können jedoch auch einen Unterpunkt unter einem anderen Unterpunkt hinzufügen, um mehrstufige Dropdown-Menüs zu erstellen.

Dies kann für Websites nützlich sein, die viele Inhalte oder viele verschiedene Inhaltskategorien haben.

Zum Beispiel, wenn Sie einen Online-Shop betreiben, haben Sie möglicherweise eine Kategorie „Elektronik“ und eine Unterkategorie „Laptop“. Sie können jedoch auch weitere Unterkategorien haben, wie z. B. „Apple Laptops“ oder „Laptop-Taschen und -Hüllen“.

In diesem Fall kann es sinnvoll sein, ein mehrstufiges Dropdown zu erstellen. Ziehen Sie dazu einfach eine beliebige Seite unter einen Unterpunkt und verschieben Sie sie leicht nach rechts.

2. Mehrere Dropdown-Menüs erstellen

Sie können so viele Dropdown-Menüs erstellen, wie Sie möchten, und sie dann auf verschiedenen Bereichen Ihrer Website anzeigen. Sie könnten zum Beispiel ein Dropdown-Menü erstellen, das nur Produktkategorien anzeigt.

Dies ist großartig für Ihre Produktseiten, aber Sie möchten vielleicht auch ein einzigartiges Dropdown-Menü für Ihre Homepage erstellen, damit Käufer verschiedene Bereiche Ihrer Website finden können, wie z. B. das Kontaktformular und den Blog.

Erstellen Sie einfach ein neues Dropdown-Menü, indem Sie den gleichen oben beschriebenen Prozess befolgen, und verwenden Sie dann die Einstellungen für den „Standort“, um zu steuern, wo dieses Dropdown auf Ihrer Website angezeigt wird.

3. Menüs mit Live-Vorschau erstellen

Wenn die Erstellung Ihres Dropdown-Menüs im Dashboard zu kompliziert wird, können Sie zum WordPress Customizer wechseln. Gehen Sie einfach zu Darstellung » Anpassen, um den Live- WordPress Theme Customizer zu starten.

Klicken Sie von hier aus auf die Registerkarte „Menüs“ und wählen Sie dann das Navigationsmenü aus. Sie sehen nun einen Drag-and-Drop-Editor in der linken Spalte mit einer Live-Vorschau Ihrer Website im rechten Bereich.

Sie können nun an Ihrem Menü arbeiten, und alle Änderungen, die Sie vornehmen, werden in der Live-Vorschau angezeigt.

4. Erstellen eines großen Mega-Menüs als Dropdown in WordPress

Wenn Sie viele Inhalte haben, haben Sie möglicherweise Schwierigkeiten, diese mit einem Standard-Dropdown-Menü ordentlich zu organisieren.

Stattdessen können Sie die vollständige Struktur Ihrer Website als Mega-Menü anzeigen, das nur erscheint, wenn Benutzer mit der Maus über das Hauptmenü fahren.

Mega-Menüs ähneln einem Dropdown-Menü, können aber viel mehr Links, Untermenüs und andere Elemente anzeigen. Detaillierte Anweisungen finden Sie in unserem Schritt-für-Schritt-Tutorial zur Erstellung eines Mega-Menüs in WordPress.

4. Exportieren Sie Ihre Dropdown-Menüs

Betreiben Sie mehrere WordPress-Websites? In diesem Fall möchten Sie möglicherweise das gleiche Menülayout und Design auf allen Ihren Websites verwenden.

Die Standardfunktion zum Importieren/Exportieren von WordPress erlaubt es Ihnen nicht, Menüs allein zu importieren und zu exportieren, aber es ist möglich, Ihre Menüs mit einem Plugin zu übertragen.

Detaillierte Schritt-für-Schritt-Anleitungen finden Sie in unserem Leitfaden unter Importieren und Exportieren von Navigationsmenüs in WordPress.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie einfach ein Dropdown-Menü in WordPress erstellen. Vielleicht möchten Sie auch unseren Leitfaden lesen, wie Sie eine Suchleiste zu Ihrem Menü hinzufügen, oder unsere Expertenauswahl der besten Tutorials zum Beherrschen von WordPress-Navigationsmenüs ansehen.

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.