Ein gutes Menü zeigt Deinen Besuchern nicht einfach alle Seiten, die Du angelegt hast. Es führt sie gezielt zu den Inhalten, die für ihre Entscheidung wichtig sind. Innerhalb weniger Sekunden sollte erkennbar sein, was Du anbietest, wo weitere Informationen stehen und wie der nächste Schritt aussieht. Technisch besteht die Navigation bei einer Divi-Webseite aus zwei Teilen: Zuerst legst Du das Menü in WordPress an und bestimmst seine Inhalte. Anschließend bindest Du dieses Menü in Deinen Header ein und gestaltest es mit Divi. Wenn Du diese Reihenfolge kennst, ist die Umsetzung unkompliziert.
In dieser Anleitung erfährst Du, wie Du Deine Menüstruktur planst, ein WordPress-Menü erstellst, Unterpunkte sinnvoll einsetzt und die Navigation im Divi Theme Builder zusammen mit Deinem Logo gestaltest. Zum Schluss prüfst Du, ob das Menü auch auf Smartphone und Tablet verständlich funktioniert.
Was ein gutes Menü leisten muss
Besucher kennen die Struktur Deiner Webseite nicht. Sie sehen zunächst nur wenige Orientierungspunkte: Logo, Überschrift, Bilder, Schaltflächen und die Navigation. Das Menü sollte ihnen deshalb keine Rätsel aufgeben. Klare Begriffe sind wichtiger als besonders kreative Bezeichnungen.
Ein funktionierendes Menü hilft bei drei Fragen:
➡️ Wo befinde ich mich auf dieser Webseite?
➡️ Welche wichtigen Inhalte kann ich aufrufen?
➡️ Wie gelange ich zum Angebot, zur Kontaktmöglichkeit oder zum nächsten passenden Thema?
Das bedeutet nicht, dass jede vorhandene Seite in das Hauptmenü gehört. Zu viele gleichwertige Menüpunkte erschweren die Orientierung. Rechtliche Seiten stehen z.B. im Footer. Landingpages oder einzelne Blogartikel können gezielt aus anderen Inhalten verlinkt werden, ohne einen festen Platz in der Hauptnavigation zu benötigen.
Seitenstruktur und Menüstruktur sind nicht dasselbe
Die Seitenstruktur umfasst alle eigenständigen Seiten Deiner Webseite. Die Menüstruktur zeigt dagegen nur die ausgewählten Wege, die Besucher in der Navigation sehen sollen. Eine Seite kann also existieren, ohne im Hauptmenü aufzutauchen.
Bevor Du beginnst: Plane Dein Menü
Öffne nicht sofort den Menübereich und füge wahllos Seiten hinzu. Schreibe zunächst auf, welche Wege für Deine Besucher wirklich wichtig sind. Ausgangspunkt sind Dein Angebot, Deine Zielgruppe und das Hauptziel Deiner Webseite. Für eine kleine Dienstleistungswebseite kann eine übersichtliche Hauptnavigation beispielsweise so aussehen:
➡️ Startseite
➡️ Leistungen/Angebote
➡️ Über mich/Über uns
➡️ Kontakt
Die Startseite muss nicht zwingend als eigener Menüpunkt erscheinen, wenn Dein Logo gut erkennbar zur Startseite führt. Viele Besucher erwarten dieses Verhalten. Wenn Deine Zielgruppe mit dieser Konvention nicht vertraut sein könnte, kann der Menüpunkt „Startseite“ trotzdem sinnvoll sein.
Merke Dir
Ein Menü ist kein vollständiges Inhaltsverzeichnis. Nimm nur Seiten auf, die Besucher regelmäßig benötigen oder die zu Deinem wichtigsten Ziel führen.
Verständliche Menüpunkte formulieren
Ein Menü bietet wenig Platz. Verwende deshalb kurze, eindeutige Bezeichnungen. „Leistungen“ ist meist verständlicher als „Was ich für Dich tun kann“. „Kontakt“ funktioniert besser als „Lass uns gemeinsam starten“. Kreative Formulierungen können im Seitentext wirken, in der Navigation erschweren sie häufig die schnelle Orientierung. Achte außerdem darauf, dass die Bezeichnung zum Ziel der verlinkten Seite passt. Hinter „Über mich“ sollte keine Verkaufsseite liegen. Diese Übereinstimmung schafft Vertrauen und hilft zugleich der Zugänglichkeit Deiner Webseite.
WordPress-Menü erstellen: Schritt für Schritt
Schritt 1: Seiten in WordPress prüfen
Bevor Du das Menü anlegst, kontrollierst Du unter Seiten → Alle Seiten, ob die benötigten Seiten veröffentlicht sind. Entwürfe können zwar teilweise in der Verwaltung auftauchen, sind für normale Besucher aber nicht zuverlässig erreichbar. Du musst noch nicht jede später denkbare Unterseite fertigstellen. Beginne mit der kleinsten Struktur, die Dein aktuelles Angebot vollständig erklärt. Neue Seiten und Menüpunkte kannst Du jederzeit ergänzen.
Schritt 2: Ein neues Menü in WordPress erstellen
Die Inhalte des Menüs legst Du zunächst in WordPress fest. Wenn Du Divi als klassisches Theme verwendest, findest Du den Bereich normalerweise unter Design → Menüs. Der genaue Wortlaut kann je nach WordPress-Version und installierten Erweiterungen leicht abweichen.
- Öffne Design → Menüs.
- Wähle „Neues Menü erstellen“.
- Vergib einen internen Namen, zum Beispiel „Hauptmenü“.
- Bestätige mit „Menü erstellen“.
Der interne Menüname wird nicht automatisch auf Deiner Webseite angezeigt. Er hilft Dir lediglich dabei, mehrere Navigationen auseinanderzuhalten, etwa Hauptmenü, Footer-Menü oder eine zusätzliche Navigation für einen bestimmten Bereich.
Schritt 3: Seiten hinzufügen und Reihenfolge festlegen
Auf der linken Seite kannst Du vorhandene Seiten auswählen und über „Zum Menü hinzufügen“ übernehmen. Anschließend erscheinen sie in der Menüstruktur. Ziehe die Einträge per Drag-and-drop in die gewünschte Reihenfolge. Ordne die Navigation nicht nach dem Zeitpunkt, zu dem Du die Seiten erstellt hast. Überlege stattdessen, welche Reihenfolge für einen neuen Besucher logisch ist. Eine mögliche Abfolge lautet:
Startseite → Leistungen → Über mich → Kontakt.
Die Startseite erreichst Du zusätzlich über das Logo oder über einen eigenen Menüpunkt. Öffne jeden Menüeintrag, wenn Du seine Navigationsbeschriftung ändern möchtest. Dadurch kannst Du im Menü einen kurzen Begriff verwenden, obwohl der vollständige Seitentitel länger ist. Die Seite selbst und ihre URL werden dadurch nicht umbenannt.
Schritt 4: Untermenüs und Dropdowns anlegen
Wenn mehrere Seiten zu einem gemeinsamen Bereich gehören, kannst Du Unterpunkte anlegen. Ziehe einen Menüeintrag dafür leicht nach rechts unter den übergeordneten Punkt. WordPress zeigt ihn anschließend eingerückt an. Im Divi-Menü erscheint daraus normalerweise ein Dropdown. Ein Untermenü ist beispielsweise sinnvoll, wenn Du unter „Leistungen“ mehrere klar getrennte Angebote führst. Es ist nicht sinnvoll, wenn Du nur versuchst, möglichst viele Seiten in der Navigation unterzubringen.
➡️ Begrenze die Verschachtelung möglichst auf eine Unterebene.
➡️ Nutze kurze und unterscheidbare Bezeichnungen.
➡️ Vermeide leere Oberpunkte, die nur das Dropdown öffnen, wenn Besucher dort eigentlich Inhalte erwarten.
➡️ Prüfe, ob das Dropdown mit Maus, Tastatur und auf einem Touchscreen bedienbar ist.
Besonders auf dem Smartphone werden lange Untermenüs schnell unübersichtlich. Wenn ein Bereich sehr viele Seiten enthält, kann eine übersichtliche Einstiegsseite besser funktionieren als ein großes Dropdown.
Schritt 5: Menü speichern und Menüposition nicht verwechseln
Speichere Dein Menü nach jeder größeren Änderung. WordPress bietet bei klassischen Themes zusätzlich Menüpositionen an. Wenn Du Deinen Header vollständig mit dem Divi Theme Builder erstellst, wählst Du das Menü später direkt im Menümodul aus. Eine klassische Theme-Position ist dann häufig nicht entscheidend. Verwendest Du dagegen den Standard-Header des Divi-Themes, kann die Zuordnung zur primären Menüposition erforderlich sein. Entscheide Dich bewusst für einen Weg, damit nicht zwei unterschiedliche Header-Konfigurationen parallel gepflegt werden.
Schritt 6: Globalen Header im Divi Theme Builder öffnen
Nun wechselst Du zu Divi → Theme Builder. Der globale Header wird überall dort verwendet, wo keine abweichende Vorlage hinterlegt ist. Änderungen an diesem Bereich können daher viele oder alle Seiten Deiner Webseite betreffen.
- Öffne den Divi Theme Builder.
- Bearbeite den globalen Header oder lege einen neuen globalen Header an.
- Füge eine reguläre Sektion und eine Zeile ein.
- Wähle eine Spaltenaufteilung, die zu Logo und Navigation passt.
Für einen klassischen Aufbau eignet sich häufig eine schmalere Spalte für das Logo und eine breitere Spalte für das Menü. Die genaue Aufteilung hängt jedoch von der Form Deines Logos, der Anzahl Deiner Menüpunkte und der gewünschten Ausrichtung ab. Eine starre Vorgabe passt nicht zu jedem Header.
Schritt 7: Logo und Menü als getrennte Module einfügen
Füge in die erste Spalte ein Bildmodul für Dein Logo und in die zweite Spalte ein Menümodul ein. Diese Trennung gibt Dir mehr Kontrolle über Breite, Ausrichtung und Abstände als ein Aufbau, bei dem das Logo ausschließlich innerhalb des Menümoduls gesteuert wird. Im Menümodul wählst Du unter Inhalt das zuvor erstellte WordPress-Menü aus. Danach sollte die Navigation unmittelbar im Header erscheinen. Kontrolliere, ob wirklich das richtige Menü ausgewählt ist, besonders wenn Du mehrere Menüs angelegt hast.
Schritt 8: Logo sinnvoll dimensionieren
Die passende Logogröße lässt sich nicht auf eine einzige Pixelzahl festlegen. Ein breites Wortlogo benötigt andere Maße als ein quadratisches Signet. Entscheidend ist, dass es scharf dargestellt wird, den Header nicht unnötig vergrößert und die Navigation ausreichend Platz behält. Bereite die Bilddatei vor dem Hochladen sinnvoll auf. Für viele Wortlogos reicht eine Datei mit ungefähr 300 bis 600 Pixeln Breite aus, sofern sie nicht größer dargestellt wird.
Für Dein Logo ist SVG meist die beste Wahl, da es unabhängig von der Größe scharf dargestellt wird und häufig eine kleine Dateigröße hat. WordPress erlaubt SVG-Dateien aus Sicherheitsgründen allerdings standardmäßig nicht über die Mediathek.
Möchtest Du Dein Logo als SVG verwenden, kannst Du beispielsweise ein Plugin nutzen, das SVG-Dateien beim Hochladen überprüft und bereinigt. Möchtest Du kein zusätzliches Plugin installieren, verwende Dein Logo alternativ als WebP oder transparentes PNG. Für den Einstieg ist das vollkommen ausreichend. Lade SVG-Dateien außerdem nur aus vertrauenswürdigen Quellen hoch, da SVG-Dateien ausführbaren Code enthalten können.
➡️ Dateiabmessungen passend zur tatsächlichen Darstellung wählen
➡️ unnötig große Bilddateien vermeiden
➡️ transparenten Hintergrund verwenden, wenn das Design ihn benötigt
➡️ aussagekräftigen Dateinamen und passenden Alternativtext vergeben
➡️ Logo mit der Startseite verlinken
Der Header darf ruhig wirken, die Navigation muss lesbar bleiben und auf kleineren Bildschirmen darf nichts kollidieren. Ein einfaches Tool wie iloveimg hilft Dir das Logo zu verkleinern. Die Höhe wird automatisch angepasst.
Schritt 9: Navigation in Divi gestalten
Passe Schriftart, Schriftgröße, Farbe, Ausrichtung und Abstände im Design-Tab des Menümoduls an. Orientiere Dich an Deinem bestehenden Gestaltungssystem, damit die Navigation nicht wie ein unabhängiges Element wirkt. Der aktive Menüpunkt und der Hover-Zustand sollten erkennbar sein, aber nicht stärker wirken als Deine wichtigste Handlungsaufforderung. Wenn Du im Header einen hervorgehobenen Kontakt- oder Buchungsbutton verwendest, sollte er visuell klar vom normalen Menü getrennt sein. Achte außerdem auf ausreichende Kontraste. Sehr helles Grau auf weißem Hintergrund oder dünne Schrift kann elegant aussehen, ist aber schlechter lesbar. Effekte sollten niemals die Verständlichkeit ersetzen.
Schritt 10: Mobile Menüansicht prüfen
Divi stellt die Navigation auf kleineren Bildschirmen üblicherweise als Burger-Menü dar. Verlasse Dich trotzdem nicht allein auf die automatische Umwandlung. Prüfe den Header in der responsiven Vorschau und zusätzlich auf einem echten Smartphone.
Kontrolliere dabei:
➡️ Bleibt das Logo vollständig sichtbar?
➡️ Ist das Burger-Symbol eindeutig erkennbar und gut anklickbar?
➡️ Öffnet und schließt sich das Menü zuverlässig?
➡️ Sind Unterpunkte verständlich erreichbar?
➡️ Ist der Text groß genug und kontrastreich?
➡️ Wird kein Menüpunkt abgeschnitten?
➡️ Funktioniert die Navigation sowohl im Hoch- als auch im Querformat?
Prüfe außerdem, ob der Header beim Scrollen zu viel Bildschirmhöhe einnimmt. Ein sehr hoher, dauerhaft fixierter Header kann auf dem Smartphone mehr stören als helfen.
Typische Fehler bei WordPress- und Divi-Menüs
Fehler 1: Zu viele Punkte im Hauptmenü
Wenn jede Seite im Hauptmenü steht, konkurrieren alle Inhalte um Aufmerksamkeit. Bündele zusammengehörende Seiten oder verlinke ergänzende Inhalte innerhalb Deiner Seiten und im Footer.
Fehler 2: Unklare oder zu kreative Bezeichnungen
Besucher sollten nicht erst interpretieren müssen, was sich hinter einem Menüpunkt verbirgt. Nutze gelernte Begriffe wie Leistungen, Über mich, Wissen und Kontakt, solange keine fachlich genauere Bezeichnung notwendig ist.
Fehler 3: Zu viele Unterebenen
Mehrfach verschachtelte Dropdowns sind mit Maus und Tastatur schwieriger zu bedienen und auf kleinen Bildschirmen schnell unübersichtlich. Plane lieber eine klare Übersichtsseite für umfangreiche Themenbereiche.
Fehler 4: Rechtliche Seiten im Hauptmenü
Impressum und Datenschutzerklärung müssen leicht erreichbar sein, benötigen aber normalerweise keinen prominenten Platz in der Hauptnavigation. Sie werden üblicherweise im Footer verlinkt.
Fehler 5: Nur die Desktop-Ansicht kontrollieren
Ein Menü kann am großen Bildschirm perfekt wirken und mobil trotzdem zu lang, zu eng oder schwer bedienbar sein. Die responsive Prüfung gehört deshalb zur Umsetzung und nicht zu einem optionalen späteren Schritt.
Fehler 6: Änderungen nicht auf echten Seiten testen
Öffne nach dem Speichern mehrere Seiten Deiner Webseite. Kontrolliere nicht nur die Startseite, sondern auch Unterseiten, Blogartikel und besondere Vorlagen. So erkennst Du, ob der globale Header überall greift und aktive Zustände korrekt dargestellt werden.
Checkliste: Ist Dein Menü fertig?
- Die wichtigsten Seiten sind vorhanden und veröffentlicht
- Das Hauptmenü enthält nur die wirklich wichtigen Wege
- Menüpunkte sind kurz und eindeutig bezeichnet
- Zusammengehörende Seiten sind sinnvoll geordnet
- Untermenüs bleiben übersichtlich und möglichst einstufig
- Logo und Navigation besitzen ausreichend Platz
- Das Logo führt zur Startseite
-
Aktiver Menüpunkt und Hover-Zustand sind erkennbar
- Kontraste und Schriftgröße sind gut lesbar
- Burger-Menü und Unterpunkte funktionieren auf dem Smartphone
- Alle Links wurden auf mehreren Seiten getestet
Häufig gestellte Fragen
Wie viele Punkte sollte ein Hauptmenü haben?
Es gibt keine feste Zahl. Für viele kleine Unternehmenswebseiten sind ungefähr vier bis sieben klar bezeichnete Hauptpunkte übersichtlich. Entscheidend ist nicht die Zahl allein, sondern ob Besucher die Auswahl schnell verstehen.
Muss die Startseite im Menü stehen?
Nein. Wenn Dein Logo gut erkennbar zur Startseite führt, kann ein zusätzlicher Menüpunkt entfallen. Du kannst „Startseite“ trotzdem aufnehmen, wenn es für Deine Zielgruppe oder den Aufbau Deiner Webseite verständlicher ist.
Wo gehören Impressum und Datenschutz hin?
Sie müssen leicht auffindbar sein und werden bei Unternehmenswebseiten üblicherweise im Footer verlinkt. Im Hauptmenü sind sie normalerweise nicht notwendig.
Brauche ich für jedes Angebot einen Menüpunkt?
Nicht zwingend. Eine gemeinsame Leistungsübersicht kann mehrere Angebote bündeln. Einzelne Leistungen können als Unterpunkte erscheinen, wenn sie unterschiedliche Zielgruppen, Probleme oder Suchintentionen besitzen und jeweils eine eigene Seite benötigen.
Warum erscheint mein erstelltes Menü nicht in Divi?
Prüfe zuerst, ob das Menü gespeichert wurde und ob Du im Menümodul das richtige Menü ausgewählt hast. Kontrolliere danach, ob der bearbeitete globale Header tatsächlich für die aufgerufene Seite gilt oder von einer anderen Theme-Builder-Vorlage überschrieben wird.
Kann ich später weitere Menüpunkte ergänzen?
Ja. Ein Menü darf mit Deiner Webseite wachsen. Ergänze neue Punkte erst dann, wenn die zugehörigen Seiten veröffentlicht sind und der zusätzliche Weg Deinen Besuchern wirklich hilft.
Fazit: Erst planen, dann in WordPress und Divi umsetzen
Ein WordPress-Menü ist technisch schnell erstellt. Die eigentliche Qualität entsteht durch die Auswahl und Reihenfolge der Inhalte. Wenn Du Seitenstruktur und Menüstruktur voneinander trennst, bleibt Deine Hauptnavigation übersichtlich, obwohl Deine Webseite später weiterwächst. Lege das Menü zuerst in WordPress an, ordne die wichtigsten Seiten und verwende Unterpunkte nur dort, wo sie Orientierung schaffen. Anschließend bindest Du die Navigation im Divi Theme Builder ein und gestaltest Logo, Abstände, Farben und mobile Ansicht als zusammenhängenden Header.
Prüfe das Ergebnis nicht nur in der Vorschau. Öffne Deine Webseite auf mehreren Geräten und teste jeden wichtigen Weg selbst. Ein gutes Menü fällt nicht durch besondere Effekte auf. Es sorgt dafür, dass Besucher ohne Umwege verstehen, wo sie die gewünschten Informationen finden.
Wenn Du vor dem Menü zunächst Angebot, Zielgruppe und Seitenstruktur ordnen möchtest, hilft Dir mein kostenloser Leitfaden „Dein roter Faden“ bei der Planung Deiner gesamten Webseite.
