Eine Kopfzeile besteht oft aus mehr als Logo und Menü: Ganz oben sitzt eine schmale Leiste mit Telefonnummer und E-Mail-Adresse, darunter folgt die eigentliche Navigation. In Divi 5 baust du das im Theme Builder aus normalen Modulen, und die fertige Kopfzeile erscheint auf jeder Seite deiner Website.
Dieser Beitrag zeigt dir genau diese zweiteilige Variante von Grund auf. Wie du einen vorhandenen Header über den Customizer oder mit Sticky-Verhalten und Handy-Feinschliff anpasst, steht in Divi-Header anpassen, einen Überblick über alle Vorlagen findest du in Theme Builder im Überblick. Hier geht es nur ums Bauen.
Getestet mit Divi 5.13 (deutsche Oberfläche), Stand Oktober 2026. Die Beschriftungen stehen so da, wie Divi sie anzeigt, auch die englischen.
Was „global“ bedeutet
Der Theme Builder hat eine Standardvorlage, das „Standard-Website-Template“. Alles, was du dort als globalen Header einträgst, gilt für die ganze Website, solange keine andere Vorlage greift. Ich habe die fertige Kopfzeile auf der Startseite, der Datenschutzerklärung und der Beispielseite aufgerufen: Überall stand dieselbe Leiste, und Divis eingebauter Header war verschwunden. Du musst also nichts pro Seite einstellen.
Voraussetzung: ein Menü
Das Menü-Modul zeigt ein Menü, das du vorher unter Design → Menüs angelegt hast. In meinem Test hieß es „Vorübergehendes Menü (Neutexte)“, du nimmst natürlich dein eigenes. Auch das Logo sollte schon in der Mediathek liegen.
Schritt 1: Globalen Header anlegen
Öffne Divi → Theme Builder. Oben links steht ein blauer Knopf „All Changes Saved“, darunter die Karte „Standard-Website-Template“ mit drei gestrichelten Feldern. Klick auf „Globalen Header Hinzufügen“ und wähle im dunklen Menü „Globalen Header Erstellen“. Die Alternative „Aus Bibliothek hinzufügen“ lädt ein gespeichertes Layout.
Zwei Wege: selbst bauen oder ein Layout aus der Bibliothek holen.
Der Visual Builder öffnet sich im selben Fenster. Rechts steht der Kasten „Kopfzeile“. Im Feld „Titel“ steht „Layout für Standard-Website-Template“. Gib dem Layout hier einen Namen, den du später wiederfindest.
Stolperfalle: Ein Tooltip mit dem Text „Globalen Header Erstellen“ schwebt über dem Menüeintrag und kann den Klick abfangen. Klick auf den blauen Eintrag selbst, nicht auf die Sprechblase.
Schritt 2: Die Infoleiste
Klick auf das grüne Plus und wähle im Dialog „Zeile einfügen“ unter „Gleiche Spalten“ das Layout mit zwei Spalten. Divi legt den Abschnitt automatisch an. In die linke Spalte fügst du über das Plus ein Text-Modul ein (das Suchfeld trägt den englischen Platzhalter „Search for a module“). Im Feld „Fließtext“ ersetzt du den Platzhalter durch deine Telefonnummer. In die rechte Spalte kommt ein zweites Text-Modul mit der E-Mail-Adresse. Die Knöpfe des Editors sind englisch beschriftet, für die rechte Spalte klickst du „Align right“.
Damit die Leiste später etwas hermacht, färbst du sie ein:
- Wähle das Textmodul über das Zahnrad in der Hover-Leiste, dann Reiter „Design“ → Gruppe „Text“ → „Text Textfarbe“, und trag
#ffffff ein. Das machst du für beide Module einzeln.
- Klick im Pfad oben im Einstellungsfeld („Kopfzeile › Sektion › Zeile › Spalte“) auf „Sektion“. Dann Reiter „Inhalt“ → Gruppe „Hintergrund“ → „Hintergrundfarbe“. Im Feld „Farbe Auswählen“ trägst du
#1e2a3a ein und bestätigst mit Enter.
Schritt 3: Der zweite Abschnitt für Logo und Menü
Fahr mit der Maus über den Abschnitt: Unter ihm erscheint ein blaues Plus. Es öffnet den Dialog „Abschnitt einfügen“. Hier fällt eine Eigenheit von Divi 5 auf: Im Dialog heißt die Einheit „Abschnitt“, im Einstellungsfeld und im Pfad dagegen „Sektion“. Gemeint ist dasselbe. Unter „Spalten Versetzen“ wählst du die Kachel mit einer schmalen und einer breiten Spalte.
Der Dialog heißt „Abschnitt einfügen“, im Einstellungsfeld steht dafür „Sektion“.
Logo
In die schmale Spalte kommt das Bild-Modul. Klick auf die graue Bildfläche, im Dialog „Bild auswählen“ wechselst du in den Reiter „Mediathek“, klickst dein Logo an und dann unten rechts auf „Ein Bild hochladen“. Der Knopf heißt auch beim Auswählen aus der Mediathek so.
Danach ist das Logo vermutlich riesig, weil es die ganze Spalte füllt. Geh auf Design → „Größe Einstellen“ → „Maximale Breite“ und trag zum Beispiel 200px ein.
Die Maximale Breite hält das Logo in Form.
Menü
In die breite Spalte fügst du das Menü-Modul ein. Im Feld „Menü“ öffnest du die Auswahlliste und wählst dein Menü. Ohne diese Auswahl bleibt die Kopfzeile ohne Navigation.
Das Feld „Menü“ zeigt die vorhandenen WordPress-Menüs.
Zuletzt sorgst du dafür, dass Logo und Menü auf einer Höhe sitzen. Wähle die Zeile, dann Reiter „Design“ → Gruppe „Layout“ → „Elemente Ausrichten“. Aktiv ist standardmäßig das vierte Symbol (strecken). Das zweite Symbol zentriert die Elemente vertikal.
Die fertige Kopfzeile im Builder.
Schritt 4: Speichern, beenden, Theme Builder sichern
Klick oben rechts auf „Speichern“ und danach auf „Beenden“. Du landest wieder im Theme Builder, und aus dem gestrichelten Feld ist ein grünes Feld „Globaler Header“ geworden. Der Header ist aber noch nicht live: Oben links steht jetzt „Änderungen Speichern“. Erst nach einem Klick darauf springt der Knopf zurück auf „All Changes Saved“.
Der Header ist angelegt, die Vorlage aber noch nicht gesichert.
Wer diesen letzten Klick vergisst, sucht später den Fehler an der falschen Stelle: Das Layout ist gespeichert, die Vorlage aber nicht.
Das Ergebnis
Ruf deine Website ausgeloggt oder in einem privaten Fenster auf. Oben steht die dunkle Infoleiste, darunter Logo und Menü.
Desktop-Ansicht der fertigen Kopfzeile.
Auf dem Handy stapelt Divi die Elemente untereinander: erst Telefon und E-Mail, dann Logo, dann das Hamburger-Menü. Das ist ein brauchbarer Startpunkt, aber bei einer Infoleiste mit zwei Einträgen kostet er viel Höhe. Prüf deshalb die Handy-Ansicht oben in der Mitte der Leiste im Builder, und kürze dort notfalls den Text.
Auf dem Handy rutscht alles untereinander.
Wie du die Kopfzeile beim Scrollen fixierst oder auf dem Handy nebeneinander hältst, zeigt der Header-Artikel. Den Theme Builder selbst bekommst du mit Divi, die Mitgliedschaft gibt es bei Elegant Themes (Werbung).
Häufige Fragen
Warum sehe ich meine neue Kopfzeile nicht?
Meistens fehlt der Klick auf „Änderungen Speichern“ im Theme Builder. Prüf außerdem, dass du ausgeloggt oder im privaten Fenster schaust und der Seiten-Cache geleert ist.
Wo ändere ich die Kopfzeile später?
Im Theme Builder auf das Stift-Symbol im grünen Feld „Globaler Header“ klicken. Danach wieder „Speichern“, „Beenden“ und „Änderungen Speichern“.
Funktioniert der Customizer weiter?
Nein. Sobald ein globaler Header aktiv ist, verschwindet Divis eingebauter Header, und die Header-Einstellungen im Customizer wirken nicht mehr.
