Die Webseiten-Navigation ist der Schlüssel dazu, dass deine Benutzer zum gewünschten Ziel gelangen. Ein gut gestaltetes Menü kann die User Experience (UX) erheblich verbessern und sogar die Absprungrate verringern. Ein schlecht gestaltetes Menü kann jedoch genau das Gegenteil bewirken.
Glücklicherweise kannst du mit WordPress individuelle Menüs erstellen, die den Anforderungen deiner Webseite entsprechen. Du kannst sogar systemeigene Funktionen verwenden, um ein kompaktes WordPress-Dropdown-Menü hinzuzufügen, das Platz spart und gleichzeitig eine klare Orientierung für deine Besucher bietet.
In diesem Beitrag werden wir erörtern, warum die Webseiten-Navigation wichtig ist und wie Dropdown-Menüs besonders nützlich sein können. Dann führen wir dich durch die Erstellung in WordPress und stellen dir einige Plugins vor, die dir dabei helfen können.
Lass uns starten!
Eine Einführung in die Navigation und die Dropdown-Menüs von WordPress
Auch wenn sie unscheinbar sind, sind Navigationsmenüs ein wesentliches Element jeder Webseite. Sie helfen den Benutzern, schnell die für die Erreichung ihrer Ziele wichtigsten Seiten zu finden, und geben gleichzeitig Erstbesuchern eine Vorstellung davon, was sie zu bieten haben:
Ein gut durchdachtes Navigationsmenü ist der Schlüssel zur Steigerung der Conversions und zur Verringerung der Absprungrate. Wenn die Benutzer die Seiten, auf denen sich dein Produkt, dein E-Mail-Anmeldeformular oder andere konvertierende Inhalte befinden, leicht finden können, ist es einfacher, sie zum Kauf oder zur Anmeldung zu bewegen.
Und wenn die Benutzer sich auf deiner Webseite sicher zurechtfinden, müssen sie nicht mehr von den Seiten zurück, weil sie an der falschen Stelle gelandet sind. Wenn man ihnen hilft, es beim ersten Mal richtig zu machen, kann man sowohl die UX verbessern als auch die Frustration minimieren.
In WordPress sind Menüs eine wichtige Funktion. Jede mit der Plattform erstellte Webseite kann eines oder mehrere davon anzeigen. WordPress-Themes spielen jedoch auch eine wichtige Rolle, wenn es um die Gestaltung und Platzierung deines Menüs oder deiner Menüs geht.
Aus diesem Grund kann dein WordPress-Menü viele verschiedene Formen annehmen. Die bekannteste ist das Standard-Kopfmenü:
Oft kannst du auch ein zusätzliches Fußzeilenmenü am unteren Rand deiner Seiten einfügen. Es kann den gleichen Inhalt wie dein Hauptmenü anzeigen oder etwas andere Optionen bieten:
Ein weiterer Stil ist die Menüüberlagerung, die der Benutzer nach Belieben öffnen und schließen kann:
Alternativ kannst du die Verwendung eines Seitenleistenmenüs in Betracht ziehen:
Oder du kannst ein Dropdown-Menü einbauen, auch manchmal als „verschachteltes“ Menü bezeichnet:
Diese Art der Navigation eignet sich für viele Arten von Webseiten. Sie verdeckt deinen Inhalt nicht wie ein Overlay-Menü, ist aber auch nicht so aufdringlich wie eine große Kopfleiste oder ein Seitenleistenmenü.
Indem man einige Inhalte so lange verbirgt, bis sie benötigt werden, spart man Platz auf dem Bildschirm und bietet den Benutzern dennoch eine einfache Möglichkeit, sich zu bewegen.
Wie man ein Dropdown-Menü in WordPress erstellt (in 5 Schritten)
Wenn du dich entschieden hast, dass ein Dropdown-Menü für deine WordPress-Seite gut geeignet ist, ist die Einrichtung eines solchen Menüs ganz einfach. Durch die Verwendung der in WordPress verfügbaren Menüfunktionen kannst du in nur fünf Schritten ein individuelles Navigationssystem erstellen, das deinen Bedürfnissen entspricht.
Schritt 1: Erstelle deine Menüpunkte
Der erste Schritt zur Erstellung eines Menüs ist die Entscheidung, was darin enthalten sein soll. Beginne, indem du in deinem WordPress-Dashboard zu Darstellung > Menüs navigieren gehst:
Was du im Menü-Editor siehst, wird je nach Theme leicht variieren.
Wichtig ist jedoch vorerst die erste Option im Register „Menüs bearbeiten„. Du solltest eine Option sehen, mit der du eines deiner bestehenden Menüs zum Bearbeiten auswählen kannst, sowie eine Option zum Erstellen eines neuen Menüs:
Für dieses Beispiel wähle die letztere Option und erstelle ein neues Menü. Dazu füge einen Titel hinzu und klicke dann auf die Schaltfläche Menü erstellen:
Jetzt kannst du damit beginnen, deinem WordPress-Menü Einträge hinzuzufügen. In den meisten Fällen ist es am besten, das Menü so einfach wie möglich zu halten und gleichzeitig den Benutzern genügend Informationen zu geben, um an dein Ziel zu gelangen.
Die Aufnahme zu vieler Seiten kann Besucher überfordern und die Navigation erschweren statt erleichtern.
Es gibt einige verschiedene Möglichkeiten, deine Menüpunkte hinzuzufügen. Die ersten beiden sind Pages und Posts, und sie funktionieren sehr ähnlich.
Markiere in der Seitenleiste des Menü-Editors einfach die Kontrollkästchen für jede Seite oder jeden Beitrag, den du aufnehmen möchtest, und klicke auf die Schaltfläche Zum Menü Hinzufügen:
Deine nächste Option ist die Einbindung von Benutzerdefinierten Links. Dazu muss die URL für die Seite angegeben werden, zu der du die Benutzer leiten möchtest, und dann eine kurze, aber beschreibende Bezeichnung für diese Seite erstellst. Danach kannst du erneut auf Add to Menu (Zum Menü Hinzufügen) klicken:
Schließlich kannst du auch Seiten- und Beitragskategorien zu deinem Navigationsmenü hinzufügen. Dies führt die Benutzer zu einer Archivseite, auf der sie alle Inhalte zu einem bestimmten Thema einsehen können.
Für Blogs und andere inhaltsintensive Webseiten kann diese Funktion besonders nützlich sein:
Wie bei den Optionen Pages und Posts markierst du einfach die Kontrollkästchen der Kategorien, die du aufnehmen möchtest, und wählst Add to Menu.
Schritt 2: Organisiere dein WordPress-Menü
Wenn du alle deine Menüpunkte hinzugefügt hast, solltest du sie in einzelnen Kacheln unter „Menüstruktur“ im Editor aufgelistet sehen:
Zunächst werden die Menüpunkte in der Reihenfolge angezeigt, in der du sie hinzugefügt hast. Du kannst deine Anordnung jedoch leicht ändern, indem du sie per Drag & Drop an die gewünschte Stelle ziehst. Auf diese Weise kannst du ein einfaches Menü ohne Dropdown-Funktionalität erstellen.
Es gibt mehrere Möglichkeiten, deinem WordPress-Menü Dropdown-Menüs hinzuzufügen.
Die einfachste ist, mit dem Ziehen und Ablegen fortzufahren, aber bestimmte Menüpunkte unter anderen zu verschachteln:
In der obigen Abbildung haben wir beispielsweise die drei Beitragskategorien, die wir dem Menü unter Blog hinzugefügt haben, verschoben und zu „Unterpunkten“ gemacht. Im Frontend wird dadurch ein Dropdown-Menü erstellt, das wie folgt aussieht:
Wenn du ein Dropdown-Menü hinzufügen möchtest, das alle Kategorien auf deiner Webseite enthält, kannst du dies tun, indem du einen benutzerdefinierten Link zu deinem Menü hinzufügst. Verwende „#“ als URL und „Kategorien“ oder etwas Ähnliches für das Label:
Du kannst dann alle deine Kategorien zum Menü hinzufügen und sie unter diesem Label verschachteln. Jede Kategorie wird anklickbar sein, aber das Label wird nicht anklickbar sein:
Mit einer ähnlichen Technik kannst du auch alle deine Menüpunkte in einem einzigen Dropdown-Menü ausblenden.
Füge einen weiteren benutzerdefinierten Link hinzu, indem du „#“ als URL und „Menü“ als Bezeichnung verwendest. Schachtel dann alle deine anderen Menüeinträge unter diesem ein:
Das Ergebnis auf dem Frontend wird ein Dropdown-Menü sein, das die Schlüsselseiten deiner Webseite enthält.
Wie du unter dem Punkt Kategorien unten sehen kannst, wird jeder Inhalt, der unter einem Unterpunkt verschachtelt ist, in einem Untermenü angezeigt:
Wenn du den Drag-and-Drop-Menü-Editor auf diese Weise verwendest, kannst du jeden Stil und jede Kombination von WordPress-Dropdown-Menüs erstellen. Denke jedoch daran, dass zu viele Menüpunkte für die Benutzer verwirrend sein können.
Es ist auch gut, die Anzahl der Untermenüs zu begrenzen, um die Navigation nicht zu überladen.
Schritt 3: Integriere Bilder in dein WordPress-Menü
Wenn dein Dropdown-Menü am Ende von Schritt 2 genau so aussieht, wie du es dir vorgestellt hast, kannst du zu Schritt 5 springen, um es zu veröffentlichen. Es gibt jedoch noch weitere Schritte, die du möglicherweise durchführen möchtest, wenn du dein Menü mit Anpassungen erweitern möchtest.
Eine Taktik, die du in Betracht ziehen solltest, ist die Aufnahme visueller Elemente in deine Menüs, um den Besuchern weitere Hinweise zu geben. Während beschreibende Etiketten von entscheidender Bedeutung sind, kann ein Bild oder ein Symbol den Benutzern manchmal helfen, schneller festzustellen, wohin ein bestimmter Navigationslink führt.
Es ist möglich, Bilder mit Hilfe von benutzerdefiniertem CSS hinzuzufügen, was wir in Kürze besprechen werden. Wir empfehlen jedoch die Verwendung eines Plugins wie Menu-Image, Icons Made Easy:
Auf diese Weise musst du dich nicht mit irgendeinem Code herumschlagen, um dein Dropdown-Menü visuell interessant zu gestalten.
Installiere einfach das Plugin und kehre dann zu Erscheinung > Menüs zurück:
Du wirst sehen, dass es jetzt Bildoptionen für jede Seite gibt, die du in dein Menü aufgenommen hast. Du kannst für jede Seite das Foto, die Größe und die Position auswählen. Denke daran, deine Änderungen zu speichern, wenn du fertig bist.
Schritt 4: Füge benutzerdefiniertes CSS zu deinem Dropdown-Menü hinzu
Obwohl es nicht für Anfänger empfohlen wird, möchten fortgeschrittene Benutzer vielleicht ihr eigenes Styling in ihre WordPress-Dropdown-Menüs integrieren. Bevor du jedoch direkt in das CSS springst, musst du eine Klasse zu deinem Menü hinzufügen.
Wenn du diesen Schritt überspringst, kann dein benutzerdefiniertes CSS Probleme für alle anderen Menüs auf deiner Webseite verursachen. Beispielsweise kannst du versehentlich ein Styling auf dein Fußzeilenmenü anwenden, das du nur für dein Haupt-Dropdown-Menü gedacht hast.
Klicke im Menü-Editor oben rechts auf Bildschirmoptionen:
Then, check the box for CSS Classes:
Dadurch wird jeder Seite in deinem Menü ein CSS-Klassen-Feld hinzugefügt:
Sobald du eine oder mehrere CSS-Klassen zu deinen Menüpunkten hinzufügst, wird jeder benutzerdefinierte Code, den du in dein Stylesheet einfügst, nur auf die Einträge in deinem Menü mit der von dir angegebenen Klasse angewendet.
Du kannst jetzt zu deinem Stylesheet oder dem Customizer wechseln und mit der Arbeit an deinem benutzerdefinierten Styling beginnen.
Schritt 5: Veröffentliche dein Menü an den besten Plätzen
Sobald dein WordPress-Dropdown-Menü so strukturiert ist, dass es deinen Bedürfnissen entspricht, und du alle gewünschten Anpassungen vorgenommen hast, kannst du es auf deiner Webseite veröffentlichen.
Dieser Prozess wird leicht variieren, je nachdem, welches Theme und welche Menüpunkte es unterstützt. Für dieses Beispiel werden wir das Twenty Twenty Theme verwenden.
Blättere im Menü-Editor nach unten zum Abschnitt Menüeinstellungen:
Du kannst das erste Kontrollkästchen aktivieren, wenn du möchtest, dass neue Seiten automatisch zu deinem Menü hinzugefügt werden. Wenn du gerade erst mit deiner Webseite beginnst und noch nicht alle Schlüsselseiten hinzugefügt hast, kann dies nützlich sein. Achte jedoch darauf, dass du nicht versehentlich zu viele Einträge zu deinem Menü hinzufügst.
Unterhalb dieser Option siehst du eine Liste von Kontrollkästchen, die die verschiedenen Bereiche deiner Webseite aufzeigt, in denen du dein Menü anzeigen kannst.
Das Twenty Twenty Theme umfasst verschiedene Menübereiche: Horizontales Desktop-Menü, Erweitertes Desktop-Menü, Mobiles Menü, Fußzeilenmenü, Soziales Menü.
In diesem Fall eignet sich das von uns erstellte Menü am besten für die Position des horizontalen Desktop-Menüs, das sich in der Kopfzeile der Webseite befindet:
Du kannst auch in Erwägung ziehen, zur Registerkarte Locations verwalten im Bereich Menüs deines Dashboards zu navigieren. Hier siehst du alle von deinem Theme unterstützten Menüpunkte sowie das Menü, das du jedem einzelnen zugeordnet hast:
Wenn du deine Menüs platzierst, kann es hilfreich sein, zu sehen, wie sie auf dem Frontend aussehen werden.
Klicke auf die Schaltfläche Verwalten mit Live-Vorschau, um zu sehen, wie dein Menü an dem von dir gewählten Ort mit dem WordPress Customizer angezeigt wird:
Danach kannst du dein Menü oder deine Menüs direkt aus dem Customizer heraus veröffentlichen. Wenn du jemals Einträge zu deinem Dropdown-Menü hinzufügst oder entfernst, kannst du einfach zum Menü-Editor zurückkehren und die erforderlichen Anpassungen vornehmen.
WordPress-Plugins zur Verbesserung des Dropdown-Menüs
Obwohl du voll funktionsfähige WordPress-Navigationsmenüs ohne zusätzliche Tools erstellen kannst, kann es manchmal nützlich sein, die Funktionalität deines Menüs zu erweitern. Wenn das bei deiner Webseite der Fall ist, solltest du dir einige populäre WordPress-Menü-Plugins ansehen.
Verschachtelte Seiten sind eine effiziente Möglichkeit für inhaltsreiche Blogs, Dropdown-Menüs zu erstellen. Während es in erster Linie für die Organisation von Beiträgen und Seiten verwendet wird, generiert dieses Plugin auch automatisch ein Menü, das die Struktur deines Inhalts widerspiegelt:
Es ist zwar nicht unbedingt ratsam, eine große Anzahl von Punkten in deine Menüs aufzunehmen, aber manchmal ist es unvermeidlich.
Wenn das bei deiner Webseite der Fall ist, kann Max Mega Menu dir helfen, deine bestehenden WordPress-Menüs zu einem „Mega-Menü“ zusammenzufassen:
Da das mobile Surfen immer mehr zunimmt, ist es wichtig sicherzustellen, dass deine Menüs auch auf mobilen Geräten noch lesbar sind.
WP Mobile Menu ist mit jedem responsive Theme kombinierbar und hilft dir, ein Navigationssystem für die Benutzer deiner Webseite zu erstellen, die sie gerade nutzen:
Schließlich kann es, wie wir bereits diskutiert haben, Situationen geben, in denen beschreibende Menüpunkte nicht ausreichen. In diesen Situationen solltest du vielleicht die Verwendung von Menu Image, Icons Made Easy in Betracht ziehen, wie wir in Schritt 3 oben beschrieben haben.
Du kannst jedes dieser Plugins verwenden, um dein aktuelles Navigationssystem zu verbessern und dein WordPress-Dropdown-Menü effektiver zu gestalten. Denke nur daran, dass es manchmal besser ist, wenn es um die Navigation geht, einfacher zu sein. Füge nur dann zusätzliche Funktionen hinzu, wenn dies deine UX verbessert und eine Überlastung deiner Webseite verhindert.
Fehlerbehebung für dein WordPress-Dropdown-Menü
Wenn du das Menü wie oben beschrieben konfiguriert hast, aber die Dropdown-Funktionalität nicht funktioniert, gibt es mehrere mögliche Ursachen.
Wir können zwar nicht alle hier behandeln, aber wir können dir helfen, die Ursache deines Problems einzugrenzen, damit du die richtige Lösung finden kannst.
Häufig ist ein nicht funktionierendes Menü das Ergebnis von widersprüchlichem Code zwischen deinem benutzerdefinierten Menü und deinem Theme. Wenn dein Menü nicht funktioniert, solltest du als erstes auf ein Standardtheme wie Twenty Twenty umschalten. Wenn dein Menü wieder funktioniert, wirst du wissen, dass das Problem mit deinem Theme zu tun hatte. Du kannst dich dann an den Entwickler deines Themes wenden, um nach einer Lösung zu suchen.
Es gibt noch einige andere mögliche Ursachen:
- Falsch eingegebener Code: Überprüfe, ob die von dir hinzugefügten benutzerdefinierten CSS korrekt sind und ob du CSS-Klassen verwendest, wie in Schritt 4 beschrieben.
- Inkompatibilität des Plugins: Versuche, alle menübezogenen Plugins, die du installiert hast, zu deaktivieren, um zu sehen, ob das Problem dadurch gelöst wird.
- Veraltete jQuery: Aktualisiere auf die neueste Version von jQuery und versuche erneut, das Dropdown-Menü zu öffnen.
Wie wir bereits erwähnt haben, sind die möglichen Ursachen für das fehlerhafte Menü jedoch zahlreich. Wenn keine der oben genannten Lösungen zu funktionieren scheint, empfehlen wir, die WordPress-Support-Foren zu besuchen, sich an unser fachkundiges WordPress-Support-Team von Kinsta zu wenden oder einen WordPress-Entwickler zu beauftragen, das Problem für dich zu beheben.
Zusammenfassung
Auch wenn es wie eine Kleinigkeit aussieht, kann die Navigation deiner WordPress-Seite über den Erfolg entscheiden. Die Verwendung von Dropdown-Menüs kann Platz auf den Bildschirmen der Besucher sparen und gleichzeitig es ermöglichen, dass sich die Benutzer leicht auf deiner Webseite zurechtzufinden und zudem deine Conversions verbessern.
