Dein Menü ist schon etwas verstaubt und braucht mal ein Upate? Oder du hast eine neue Website, möchtest dein erstes Menü erstellen und findest die richtigen Einstellungen nicht?

Keine Sorge, in diesem Artikel erfährst du Schritt für Schritt, wie du dein WordPress-Menü erstellen und anpassen kannst.

Denn ein gut strukturiertes Menü ist ein wesentlicher Bestandteil jeder WordPress-Website. Es erleichtert deinen Besuchern die Navigation und hilft ihnen, schnell die gewünschten Informationen zu finden. Dabei ist es völlig egal, ob du einen Blog, einen Online-Shop oder eine Unternehmenswebsite hast – ein übersichtliches Menü trägt maßgeblich zur Benutzerfreundlichkeit bei.

Hier findest du die Menü-Einstellungen in WordPress

Wenn du mich fragst, sind die Einstellungen fürs Menü in WordPress tatsächlich eine der Funktionen, die am wenigsten intuitiv zu finden sind. Um dein(e) Menü(s) inhaltlich anzupassen, gehe wie folgt vor.

1. Melde dich in deinem WordPress-Dashboard an.
2. Navigiere in der linken Seitenleiste zu „Design„
3. Klicke auf den Unterpunkt „Menüs„.

Möchtest du das Design anpassen, wird es etwas komplizierter. Dazu kommen wir weiter unten.

Wie du in WordPress ein Menü erstellst

Wenn du noch kein Menü hast, kannst du jetzt hier ein Neues anlegen:

Klicke in den Menü-Einstellungen auf „Erstelle ein neues Menü“ und gib deinem Menü einen Namen (z.B. „Hauptmenü“ oder „Footer-Navigation“).

Jetzt musst du dein neues Menü noch einer sogenannten „Menüposition“ zuweisen. Die verfügbaren Positionen hängen von deinem Theme ab, umfassen aber in der Regel Bereiche wie „Hauptmenü“, „Footer-Menü“ oder „Mobile Navigation“. Wähle die gewünschte Position aus (z.B. „Hauptmenü“) und klicke auf „Menü erstellen„.

So bearbeitest du dein WordPress-Menü

Jetzt, da du weißt, wie du ein Menü erstellst, wird es Zeit, dass du es mit Inhalten füllst und strukturierst.

So fügst du Menüpunkte hinzu

Um deinem Menü Punkte hinzuzufügen, folge diesen Schritten:

1. Gehe zu „Design“ > „Menüs“ in deinem WordPress-Dashboard.
2. Wähle das Menü aus, das du bearbeiten möchtest (auf „Auswählen“ klicken nicht vergessen).
3. Auf der linken Seite findest du verschiedene Boxen mit Elementen, die du deinem Menü hinzufügen kannst, in der Regel sind das Seiten, Beiträge, Benutzerdefinierte Links und Kategorien (evtl auch mehr, wenn du z. B. Woocommerce installiert hast)
4. Wähle die gewünschten Elemente aus und klicke auf „Zum Menü hinzufügen“.

Exkurs: So fügst du bestimmte Abschnitte auf deiner Webseite zum Menü hinzu

Manchmal möchtest du vielleicht nicht nur auf ganze Seiten, sondern auf spezifische Abschnitte innerhalb einer Seite verlinken. Das kommt insebesondere bei sogenannten One-Pagern (also Websites, die nur aus einer Seite bestehen) gerne zum Einsatz.

Damit das funktioniert, kannst du mit sogenannten CSS-Ankern arbeiten. Sie ermöglichen es dir, präzise Verknüpfungen zu bestimmten Stellen auf deiner Website zu erstellen.

CSS-Anker sind gelinde gesagt kleine „Code-Schnipsel“, die einem Element auf deiner Webseite eine eindeutige ID zuweisen. Diese ID kann dann als Ziel für Links verwendet werden.

So fügst du Anker auf deiner Webseite hinzu

Wie du eine solche ID hinzufügen kannst, unterscheidet sich leider sehr stark je nachdem, welches Theme/welchen Pagebuilder du nutzt.

Elementor hat sogar ein eigenes „Menü-Anker“-Element, was du für diese Zwecke verwenden kannst.

In Divi kannst du jedem „Kasten“ (Modul/Zeile/Abschnitt) in den erweiterten Einstellungen eine CSS-ID zuweisen.

Auch im Gutenberg-Editor gibt es diese Möglichkeit, indem du bei einem Block unter „Erweitert“ das Feld „HTML-Anker“ benutzt:

Solltest du nichts in dieser Richtung finden, bleibt dir noch die Option, das HTML selbst anzupassen. Dazu hast du in der Regel in WordPress in Texteditoren die Möglichkeit, zwischen „Visuell“ und „Text“ umzuschalten. In der Text-Version siehst du den generierten HTML-Code.

Dort suchst du dir das gewünschste Element aus (in der Regel die Überschrift) und fügst dort folgenden Code ein (fett markiert):

<h2 id=“mein-abschnitt“>Überschrift des Abschnitts</h2>

Wichtig ist, dass du diesen Teil genau vor dem „>“ platzierst). Statt mein-abschnitt kannst du schreiben, was immer du möchtest.

So verlinkst du zu einem CSS-Anker:

Auf diesen Anker kannst du jetzt verlinken, indem du die ID mit einem Rautezeichen (#) am Ende der URL verwendest:
https://deinewebsite.de/seite/#mein-abschnitt

Diesen Link wiederum kannst du dann als „benutzerdefinierten Link“ deinem Menü hinzufügen. Im Feld „Linktext“ gibst du den gewünschten Anzeigetext für den Menüpunkt ein und das wars.

So kannst du die Menüpunkte umordnen

Nachdem du Menüpunkte hinzugefügt hast, kannst du sie ganz einfach neu anordnen:

1. Klicke auf einen Menüpunkt und halte die Maustaste gedrückt.
2. Zieh den Punkt an die gewünschte Position.
3. Lass die Maustaste los, um den Punkt dort zu platzieren.

So erstellst du Untermenüs

Um ein Untermenü (auch als „Drop-down-Menü“ bekannt) zu erstellen:

1. Ziehe einen Menüpunkt leicht nach rechts unter einen anderen Punkt.
2. Lass ihn dort los – er wird jetzt eingerückt dargestellt.
3. Dieser Punkt ist jetzt ein Unterpunkt des darüberliegenden Hauptpunkts.

So bearbeitest oder löschst du Menüpunkte

Um einen Menüpunkt zu bearbeiten:

1. Klicke auf den Pfeil rechts neben dem Menüpunkt.
2. Hier kannst du unter „Angezeigter Name“ eingeben, welcher Text im Menü für diesen Punkt erscheinen soll.
3. Wenn es sich um einen benutzerdefinierten Link handelt, kannst du hier auch das Ziel des Links anpassen,

Um einen Menüpunkt zu löschen:

1. Klappe den Menüpunkt auf, indem du auf den Pfeil klickst.
2. Klicke ganz unten auf „Entfernen„.

Vergiss nicht, nach jeder Änderung auf „Menü speichern“ zu klicken!

Design-Einstellungen für dein WordPress-Menü

Jetzt, da du weißt, wie du Menüpunkte hinzufügst und organisierst, können wir uns anschauen, wie du das Aussehen deines Menüs anpassen kannst. Je nach Theme/Pagebuilder ist das Vorgehen da etwas anders.

Menü Design anpassen im Theme Customizer

Die meisten Themes bieten die Möglichkeit, dein(e) Menü(s) zumindest rudimentär anzupassen. Das funktioniert in der Regel mit dem Theme Customizer.

Gehe dazu in deinem WordPress-Dashboard zu „Design“ > „Customizer“ (evtl auch „Anpassen“). Suche nach der Option „Menüs“, „Navigation“ o. ä. Solltest du nicht fündig werden, hilft hier ggf. auch eine kleine Internetsuche nach „Theme + Menü anpassen“, wobei du „Theme“ natürlich durch den Namen deines Themes ersetzt.

Je nach deinem Theme findest du hier verschiedene Optionen, wie zum Beispiel:

• Schriftart und -größe ändern
• Farben für Text, Hintergrund und Hover-Effekte anpassen
• Abstände zwischen Menüpunkten einstellen
• Ausrichtung des Menüs ändern (z.B. links, zentriert, rechts)

Nutzt du einen Pagebuilder, hast du dort oft sogar noch mehr Möglichkeiten, dein Menü anzupassen. Die Anleitungen für Divi und Elementor findest du unten. Für alle anderen Pagebuilder lohnt sich auch hier eine kurze Internetsuche.

Menü-Design mit Divi anpassen

Wenn du Divi* als Theme verwendest, hast du noch mehr Möglichkeiten, dein Menü zu gestalten:

1. Öffne den Divi Theme Builder (unter „Divi“ -> „Theme Builder“)
2. Klicke auf „Header“ (oder „Footer“ fürs Footer-Menü) oder erstelle ein neues Header/Footer-Layout.
3. Füge ein Menü-Modul hinzu und hinterlege das gewünschte Menü (welches wir ja schon angelegt haben)
4. Dieses Modul kannst du jetzt wie gewohnt in Divi bearbeiten und jede Menge Einstellungen vornehmen.

Menü-Design mit Elementor Pro gestalten

Die Pro-Version von Elementor* bietet ebenfalls leistungsstarke Werkzeuge zur Menügestaltung: 

1. Öffne den Theme Builder  (unter „Templates“ -> „Theme Builder“)
2. Bearbeite die Vorlage für deinen Header/Footer (je nachdem, welches Menü du bearbeiten möchtest) oder lege eine neue Vorlage an.
3. Füge das „WordPress Menü“ (früher „Nav Menu“) Widget hinzu und wähle das zu verwendende Menü aus.
4. Dieses Modul kannst du jetzt wie gewohnt in Elementor bearbeiten und jede Menge Einstellungen vornehmen.

Tipps für ein benutzerfreundliches Menü

Zum Abschluss möchte ich dir noch einige Tipps und Best Practices mitgeben, die dir helfen, dein WordPress-Menü zu optimieren:

1. Halte es übersichtlich: Beschränke dich auf 5-7 Hauptmenüpunkte. Zu viele Optionen können Besucher:innen überfordern.
2. Verwende klare Bezeichnungen: Wähle eindeutige, selbsterklärende Namen für deine Menüpunkte. Vermeide Fachbegriffe oder interne Bezeichnungen.
3. Logische Reihenfolge: Ordne deine Menüpunkte in einer logischen Reihenfolge an. Wichtige Seiten wie „Über uns“ oder „Kontakt“ solltest du leicht auffindbar platzieren.
4. Nutze Dropdown-Menüs sinnvoll: Verwende Untermenüs, um verwandte Inhalte zu gruppieren, aber übertreibe es nicht. Mehr als zwei Ebenen können unübersichtlich werden.
5. Mobile Optimierung: Stelle sicher, dass dein Menü auch auf mobilen Geräten gut funktioniert.
6. Konsistenz wahren: Dein Hauptmenü sollte auf allen Seiten deiner Website gleich (oder zumindest ähnlich) aussehen und funktionieren.
7. Aktuelle Seite hervorheben: Nutze für den aktiven Menüpunkt z.B. eine andere Farbe oder Unterstreichung, um anzuzeigen, auf welcher Seite sich Besucher:innen gerade befinden.

So schaffst du eine intuitive und effektive Navigation, die deinen Besucher:innen hilft, sich auf deiner Website zurechtzufinden und die gewünschten Informationen schnell zu erreichen.

Fazit: Es lohnt sich, das WordPress-Menü regelmäßig zu optimieren

Ein gut strukturiertes und ansprechendes Menü ist der Schlüssel zu einer benutzerfreundlichen WordPress-Website. Jetzt weißt du, wie du Schritt für Schritt ein effektives Menü erstellst und optimierst.

Und bevor du dein Menü jetzt wieder jahrelang nicht anfasst, möchte ich dir noch eine Sache mitgeben: Ein gutes Menü entwickelt sich mit deiner Website.

Deshalb scheue dich nicht, regelmäßig Anpassungen vorzunehmen und auf das Feedback deiner Besucher:innen zu hören. Experimentiere mit verschiedenen Layouts und Designs, aber behalte dabei immer die Benutzerfreundlichkeit im Blick.

Hast du Fragen zum Thema WordPress-Menüs oder zur Gestaltung deiner Website? Lass es mich in den Kommentaren wissen – ich freue mich darauf, dir weiterzuhelfen!