Ein transparenter Header liegt direkt über dem großen Titelbild der Startseite: Logo und Menü stehen in Weiß auf dem Foto, ohne Balken darüber. Sobald du scrollst, bekommt der Header eine feste Hintergrundfarbe und bleibt oben stehen. So wirkt die Seite großzügig und das Menü bleibt trotzdem lesbar.
Wie du überhaupt einen Header im Theme Builder baust und ihn oben festhältst, steht in Divi Header anpassen. Hier geht es um die drei Dinge, die einen Header transparent machen. Und um einen Weg, der naheliegt, in Divi 5 aber nicht funktioniert. Getestet mit Divi 5.13 (deutsche Oberfläche), Stand November 2026.
Das Prinzip in drei Teilen
- Durchsichtig: Die Sektion des Headers und das Menü-Modul bekommen einen transparenten Hintergrund.
- Über dem Bild: Die erste Sektion der Seite muss unter den Header rutschen, sonst sitzt der durchsichtige Header nur auf weißem Grund.
- Farbe beim Scrollen: Der Header klebt oben und bekommt im Zustand „Sticky“ eine eigene Hintergrundfarbe.
Voraussetzung ist eine Seite, die mit einer Sektion mit Hintergrundbild beginnt. Gib ihr oben genug Innenabstand, bei mir sind es 260 Pixel, damit der Text nicht unter dem Menü verschwindet.
Schritt 1: Header mit hellem Logo und weißem Menü
Ich baue den Header im Theme Builder mit einer Zeile und einem Menü-Modul, das gleich das Logo mitbringt. Wie das Modul funktioniert, zeige ich in Menü in Divi 5 erstellen. Für den transparenten Header brauchst du eine helle Version deines Logos und im Reiter „Design“ unter „Menütext“ eine weiße „Menü Textfarbe“. Unter „Icons“ stellst du auch die „Hamburger Menü Icon Farbe“ auf Weiß.
Nicht erschrecken: Im Builder siehst du danach fast nichts mehr. Weiße Schrift auf der weißen Arbeitsfläche, bei mir blieb nur der farbige Kreis im Logo übrig. Das ist normal, live passt es.
Schritt 2: Den Hintergrund durchsichtig machen
Ich habe live nachgemessen: Die Header-Sektion ist standardmäßig weiß, und das Menü-Modul ebenfalls. Beide müssen weg.
Wähl im Pfad oben im Einstellungsfeld die „Sektion“. Im Reiter „Inhalt“ unter „Hintergrund“ ist das Feld „Hintergrundfarbe“ leer. Ich habe in „Farbe Auswählen“ rgba(0,0,0,0) getippt und Enter gedrückt. Divi macht daraus 000000 mit 0 % Deckkraft, also unsichtbar.
Die Zahl rechts neben dem Farbwert ist die Deckkraft. 0 heißt durchsichtig.Beim Menü-Modul zeigt dasselbe Feld grau „ffffff“ und „100“. Hier reicht es, die Deckkraft rechts auf 0 zu setzen. Vergisst du das Menü-Modul, siehst du später einen weißen Balken quer über dem Bild.
Schritt 3: Den Header klebrig machen
Bei der Sektion im Reiter „Erweitert“ öffnest du ganz unten „Scroll-Effekte“ und stellst „Klebrige Position“ von „Nicht kleben“ auf „Bleiben Sie oben“. Ja, so steht es da. Die übrigen Felder wie „Sticky-Top-Offset“ lässt du, wie sie sind.
„Bleiben Sie oben“ hält den Header beim Scrollen fest.Mehr zu den Scroll-Effekten insgesamt findest du in Scroll-Effekte in Divi 5.
Schritt 4: Die Farbe für den Sticky-Zustand
Jetzt der Teil, den viele suchen. Oben rechts im Einstellungsfeld, neben den Reitern, sitzt ein kleines Dreieck mit einem Bildschirm-Symbol. Ein Klick öffnet die Zustände: „Desktop“, „Tablet“, „Telefon“, „Hover“, „Fokus“, „Aktiviert“, „Aktiv“ und, sobald die Sektion klebrig ist, „Sticky“. Vorher fehlt der Eintrag. Das ist der Grund, warum Schritt 3 zuerst kommt.
„Sticky“ taucht erst auf, wenn „Klebrige Position“ gesetzt ist.Finger weg von „Einstellungen“ ganz unten in dieser Liste. Das öffnet die Breakpoints der gesamten Website. Ich habe dort nur auf „Abbrechen“ geklickt.
Wähl „Sticky“. Statt des Bildschirms steht jetzt eine Stecknadel oben rechts, und alles, was du einstellst, gilt nur für den geklebten Header. Unter „Inhalt“ → „Hintergrund“ trägst du deine Farbe ein, bei mir 1e2a3a mit 100 % Deckkraft. Danach schaltest du über dieselbe Liste zurück auf „Desktop“.
Im Zustand „Sticky“ wird die Sektion dunkel. Der weiße Balken ist hier noch der eigene Hintergrund des Menü-Moduls aus Schritt 2.Schritt 5: Den Header über das Titelbild legen
Der naheliegende Weg wäre die Position „Absolut“. Die findest du bei der Sektion unter „Erweitert“ in der Gruppe „Arbeitsstelle“, so heißt die Position in der deutschen Oberfläche wirklich. Ich habe es ausprobiert: Der Header lag damit schön über dem Bild, aber er klebte nicht mehr. Beim Scrollen lief er einfach mit nach oben weg, ohne Farbwechsel. Absolut und Klebrig vertragen sich in Divi 5.13 nicht.
Funktioniert hat ein negativer Außenabstand:
- „-Position“ bleibt auf „Relativ“.
- Im Reiter „Design“ unter „Zwischenraum“ setzt du den „-Innenabstand“ oben und unten auf je 10 px. Dann ist der Header schlanker, bei mir 96 Pixel hoch.
- Beim „-Außenabstand“ trägst du unter „Unten“ dieselbe Höhe mit Minus ein: -96.
Der negative Außenabstand zieht die erste Sektion der Seite unter den Header.Der Minus-Wert muss zur Höhe deines Headers passen. Ist er kleiner, beginnt das Titelbild erst unter dem Header, und oben bleibt ein weißer Streifen. Ändert sich die Höhe, etwa durch ein größeres Logo, passt du den Wert mit an.
Speichern, Beenden und im Theme Builder „Änderungen Speichern“, falls der Knopf dort aktiv ist.
Das Ergebnis
Ganz oben liegt der Header durchsichtig auf dem Titelbild.
Vor dem Scrollen: Logo und Menü direkt auf dem Bild.Schon nach wenigen Pixeln Scrollen setzt Divi den Header fest an den oberen Rand und gibt ihm die Sticky-Farbe. Scrollst du ganz nach oben, wird er wieder durchsichtig.
Nach dem Scrollen: fester, dunkler Header über dem Inhalt.Das Handy-Menü nicht vergessen
Hier bin ich reingefallen. Auf dem Handy sah der Header gut aus, aber das aufgeklappte Hamburger-Menü war weiß mit weißer Schrift. Lesbar war nur der aktive Menüpunkt. Logisch, denn die weiße „Menü Textfarbe“ gilt auch dort, und das mobile Menü hat standardmäßig einen weißen Hintergrund.
Die Lösung steckt beim Menü-Modul unter „Design“ → „Dropdown-Menü-Links“: „Mobile Menü Hintergrundfarbe“ auf deine dunkle Farbe, „Textfarbe Für Das Mobile Menü“ auf Weiß. Setz dort gleich auch die „Hintergrundfarbe Für Drop-Down-Menü“, sonst trifft es die Untermenüs am Desktop genauso.
Auf dem Handy: links der transparente Header, rechts das geöffnete Menü mit dunklem Hintergrund.Häufige Fragen
Gilt der transparente Header dann auf jeder Seite?
Nur, wenn du ihn so zuweist. Auf Seiten ohne Titelbild wäre weiße Schrift auf weißem Grund unlesbar. Leg ihn deshalb in eine eigene Vorlage im Theme Builder, die nur für die Startseite oder für bestimmte Seiten gilt. Die übrigen Seiten bekommen einen normalen Header.
Kann der Header beim Runterscrollen ganz verschwinden?
Dafür gibt es in Divi 5 keine Einstellung, es geht nur mit einem kleinen Skript. Die Anleitung steht in Divi-Header beim Scrollen ausblenden.
Warum sehe ich den Farbwechsel im Builder nicht?
Der Builder zeigt den normalen Zustand. Den Sticky-Look siehst du nur, wenn du oben im Einstellungsfeld auf „Sticky“ umschaltest, oder live beim Scrollen.
Du arbeitest noch nicht mit Divi? Preise und Lizenzen findest du direkt bei Elegant Themes (Werbung).
