Ein Menü in Divi besteht immer aus zwei Teilen: dem WordPress-Menü, in dem die Seiten und ihre Reihenfolge stehen, und dem Menü-Modul, das dieses Menü im Header anzeigt. Wer nur eins von beidem kennt, sucht sich schnell einen Wolf. Warum taucht ein neuer Menüpunkt nicht auf? Warum ist das Handy-Menü weiß auf weiß?
Ich zeige dir den ganzen Weg: Menü anlegen, ein Dropdown mit Unterpunkten bauen, das Menü-Modul einsetzen und das Hamburger-Menü fürs Handy gestalten. Dazu die Stolperfallen, über die ich beim Durchklicken selbst gefallen bin. Getestet mit Divi 5.13 (deutsche Oberfläche), Stand November 2026.
Menü-Modul oder Link-Modul?
Divi 5.13 bringt zwei Wege mit. Das klassische Menü-Modul holt sich ein komplettes WordPress-Menü, baut daraus die Dropdowns und auf dem Handy automatisch ein Hamburger-Menü. Daneben gibt es die neuen Module „Link“ und „Dropdown“, mit denen du ein Menü Stück für Stück selbst zusammensetzt.
Meine Empfehlung: Fang mit dem Menü-Modul an. Es ist in fünf Minuten fertig und reicht für die allermeisten Websites. Die Bausteine lohnen sich erst, wenn du ein Mega-Menü oder ein ganz eigenes Seitenmenü willst. Dazu mehr am Ende.
Schritt 1: Das WordPress-Menü anlegen
Geh in WordPress auf Design → Menüs. Gibt es noch kein Menü, siehst du nur das Feld „Name des Menüs“. Trag einen Namen ein, zum Beispiel „Hauptmenü“ (in meinem Test heißt es „Tutorial N2 Hauptmenü“), und klick auf „Menü erstellen“.
Links unter „Menüeinträge hinzufügen“ stehen die Kästen „Seiten“, „Beiträge“, „Individuelle Links“ und „Kategorien“. Im Kasten „Seiten“ wechselst du auf den Reiter „Alle anzeigen“, kreuzt die gewünschten Seiten an und klickst auf „Zum Menü hinzufügen“.
Den Text eines Menüpunkts änderst du, indem du den Eintrag über den kleinen Pfeil rechts aufklappst. Im Feld „Navigationsbeschriftung“ steht, was später im Menü erscheint. Der echte Seitentitel bleibt dabei unverändert, er steht darunter als „Ursprünglicher Name“.
Achtung, das ist mir passiert: Hinzugefügte Einträge sind erst im Menü, wenn du unten auf „Menü speichern“ klickst. Ich hatte die Seite vorher verlassen, und beim nächsten Aufruf war die Menü-Struktur leer. Also: erst speichern, dann weiterklicken.
Schritt 2: Unterpunkte für das Dropdown
Ein Dropdown entsteht, sobald ein Menüpunkt einem anderen untergeordnet ist. Klapp dafür den künftigen Unterpunkt auf und wähl im Feld „Übergeordneter Menüeintrag“ den Hauptpunkt, in meinem Beispiel „Leistungen“.
Über „Übergeordneter Menüeintrag“ wird „Webdesign“ zum Unterpunkt von „Leistungen“.In der Liste rückt der Eintrag danach ein und trägt kursiv den Zusatz „Unterpunkt“. WordPress erlaubt das auch per Ziehen mit der Maus. Ich habe das Feld genommen, weil man dort schwarz auf weiß sieht, unter welchem Punkt der Eintrag landet.
Webdesign, SEO-Beratung und Wartung hängen als Unterpunkte unter „Leistungen“.Unter „Menüposition“ siehst du noch „Primary Menu“, „Secondary Menu“ und „Footer Menu“. Für das Menü-Modul musst du dort nichts ankreuzen. In meinem Test war keine Position gesetzt, und das Menü ließ sich trotzdem im Modul auswählen und erschien live. Speichere zum Schluss mit „Menü speichern“.
Schritt 3: Das Menü-Modul im Header einsetzen
Das Menü gehört in den Header, und den baust du in Divi 5 im Theme Builder. Wie du dort einen globalen Header anlegst, steht ausführlich in Divi Header anpassen. Hier geht es nur um das Menü.
Fahr im Header mit der Maus über die Spalte, in die das Menü soll, und klick auf das Plus. Im Dialog „Modul Oder Zeile Einfügen“ tippst du „Menü“ ins Suchfeld und wählst das Modul „Menü“.
Die Suche nach „Menü“ findet genau ein Modul.Rechts öffnet sich das Einstellungsfeld. Im Reiter „Inhalt“, Gruppe „Inhalt“, wählst du im Feld „Menü“ dein Menü aus. Zur Wahl standen bei mir das eigene Menü und „Standard“.
Erst nach dem Klick auf den Eintrag erscheint der Haken und der blaue Punkt neben „Menü“.Kleine Falle: Das Feld zeigt den Menünamen schon grau an, bevor du überhaupt etwas gewählt hast. Klick ihn trotzdem an. Erst dann ist die Auswahl gespeichert.
Das Menü-Modul kann auch das Logo mitbringen. In der Gruppe „Logo“ klickst du im Feld „Logo“ auf die Fläche „Bild“ und wählst es aus der Mediathek. Bei mir erschien es danach in voller Größe und drückte „Kontakt“ in eine zweite Zeile. Die Lösung steckt im Reiter „Design“ unter „Logo“ → „Größe Einstellen“ → „Logo Maximale Höhe“. Mit 48 Pixeln passte alles in eine Zeile.
Schritt 4: Menü und Dropdown gestalten
Im Reiter „Design“ findest du die Gruppen, die fürs Menü zählen:
- Menütext: „Menü Textfarbe“, „Farbe Für Aktiven Link“ (die Seite, auf der man gerade ist), Schrift, Größe und Abstand.
- Dropdown-Menü-Links: Hintergrund, Linie, Schrift und aktive Farbe der Untermenüs, dazu die Farben fürs Handy-Menü.
- Layout: ganz unten „Dropdown-Menürichtung“ (abwärts oder aufwärts) und „Menüstil“ (Linksbündig, Zentriert oder Inline-zentriertes Logo).
Alle Farben fürs Dropdown und fürs Handy-Menü stehen in einer Gruppe.Eine Farbe setzt du, indem du den Wert ins Feld „Farbe Auswählen“ tippst und Enter drückst. Die „Linienfarbe Für Drop-Down-Menü“ ist der farbige Streifen oben am aufgeklappten Untermenü. Ein Feld heißt übrigens auch in der deutschen Oberfläche „Dropdown-Menü Active Link Color“.
Schritt 5: Das Handy-Menü gestalten
Für das Divi Mobile Menu musst du nichts extra bauen. Auf Tablet und Handy macht das Menü-Modul aus deinen Menüpunkten von selbst ein Hamburger-Menü. Was du einstellen solltest, sind die Farben, denn die Standardwerte passen selten zum Rest.
- Klick oben in der Leiste auf das Symbol fürs Telefon, dann siehst du die Handy-Ansicht.
- Im Reiter „Design“, Gruppe „Icons“, stellst du „Hamburger Menü Icon Farbe“ und „Hamburger Menü Icon Schriftgröße“ ein. Ich habe 36 Pixel genommen, damit man die drei Striche gut trifft.
- In der Gruppe „Dropdown-Menü-Links“ setzt du „Mobile Menü Hintergrundfarbe“ und „Textfarbe Für Das Mobile Menü“.
In der Telefon-Ansicht zeigt der Builder das Hamburger-Icon. Grau dargestellte Werte sind vom Desktop übernommen.Ein Punkt, den du kennen solltest: Im aufgeklappten Handy-Menü stehen die Unterpunkte immer offen und eingerückt unter ihrem Hauptpunkt. Zum Auf- und Zuklappen der Untermenüs habe ich im Menü-Modul keine Einstellung gefunden. Bei drei Unterpunkten stört das nicht, bei zwanzig wird das Handy-Menü sehr lang.
Das geöffnete Handy-Menü live: dunkler Hintergrund, weiße Schrift, Unterpunkte eingerückt.Speichern und live prüfen
Klick oben rechts auf „Speichern“, dann auf „Beenden“ und im Theme Builder auf „Änderungen Speichern“. Ohne den letzten Klick ist der Header nicht aktiv. Ruf die Seite danach am besten in einem privaten Fenster auf.
Fährt man über „Leistungen“, klappt das Dropdown mit den drei Unterpunkten auf.Der kleine Pfeil neben „Leistungen“ zeigt Besuchern, dass dort ein Untermenü wartet. Den baut Divi automatisch ein.
Die Alternative: Link- und Dropdown-Modul
Wenn dir das Menü-Modul zu starr ist, nimm die neuen Bausteine. Das Link-Modul kann sich über die Gruppe „Loop“ mit dem Abfragetyp „Menü“ die Einträge deines WordPress-Menüs holen und wiederholt sich dann für jeden Menüpunkt. Wie das geht, habe ich im Artikel Off-Canvas-Menü mit Canvases Schritt für Schritt durchgeklickt, dort baue ich damit ein Seitenmenü, das per Hamburger aufgeht.
Das Dropdown-Modul ist ein Container für Untermenüs bis hin zum Mega-Menü. Was es kann und wann sich doch ein Plugin lohnt, steht in Mega-Menüs in Divi 5.
Häufige Fragen
Warum fehlt ein neuer Menüpunkt im Header?
Meist ist das Menü unter Design → Menüs nicht gespeichert, oder im Theme Builder fehlt der Klick auf „Änderungen Speichern“. Prüf außerdem, ob im Menü-Modul wirklich dieses Menü gewählt ist.
Muss ich die Menüposition „Primary Menu“ setzen?
Kurze Antwort: nein. Im Menü-Modul wählst du das Menü direkt aus. Die Positionen nutzt Divis eingebauter Header, der nur greift, solange im Theme Builder kein eigener Header aktiv ist.
Wie bekommt ein Menüpunkt ein „Neu“-Label?
Über eine CSS-Klasse am Menüpunkt und ein paar Zeilen CSS. Die Anleitung steht in Label am Menüpunkt in Divi 5.
Geht auch ein Menü, das zu Abschnitten derselben Seite springt?
Ja, mit Ankerlinks als „Individuelle Links“. Wie das geht, zeige ich in One-Page-Navigation in Divi 5.
Du arbeitest noch nicht mit Divi? Preise und Lizenzen findest du direkt bei Elegant Themes (Werbung).
