Die Kurzfassung
- Das Problem: Die Linie unter dem Divi Header ist ein
box-shadow, keinborder-bottom— deshalb findet man ihn nicht im Customizer. - Schatten entfernen:
#main-headerund#main-header.et-fixed-headeraufbox-shadow: none !importantsetzen. - Schatten anpassen: Eigene
box-shadow-Werte mit!importantüberschreiben. - Wo einfügen: Divi → Theme Customizer → Zusätzliches CSS — oder Divi → Theme-Optionen → Benutzerdefiniertes CSS.
- Langfristig sauber: Mit dem Divi Theme Builder einen eigenen Custom Header bauen und den Standard-Header ersetzen.
Warum ist es ein Schatten — und kein Border?
Der Divi Page Builder gibt uns für Seiteninhalt enorme Gestaltungsfreiheit. Beim Standard-Header sieht das schon anders aus: Im Customizer gibt es nur wenige Einstellungsmöglichkeiten, und fast jeder Divi Header sieht dadurch gleich aus.
Das betrifft besonders die Linie unter dem Header. Sie ist keine border-bottom, sondern ein box-shadow. Zusätzlich verändert sich dieser Schatten, wenn jQuery den Header in den Fixed-Modus schaltet: Der Blur-Wert wird erhöht, was den Schatten weicher und ausgeprägter macht. Deshalb müssen Sie beide Zustände mit CSS ansprechen — den normalen Header (#main-header) und den fixierten (#main-header.et-fixed-header).
Das Snippet unten erledigt beides auf einmal. Wie Sie Custom CSS zu Divi hinzufügst, zeigt der verlinkter Artikel ausführlich.
Snippet 1: Schatten komplett entfernen
Wenn Sie die Linie unter dem Divi Header vollständig loswerden wollen, reicht dieses CSS:
#main-header,
#main-header.et-fixed-header {
box-shadow: none !important;
}Das !important ist nötig, damit Ihr Wert den Divi-Standard überschreibt. Ohne es greift das Inline-Style des Themes und Ihr CSS hat keine Wirkung.
Snippet 2: Schatten anpassen
Wollen Sie den Schatten nicht entfernen, sondern nach Ihrem Design anpassen — zum Beispiel stärker, farbig oder weicher — überschreiben Sie ihn mit eigenen Werten:
#main-header,
#main-header.et-fixed-header {
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5) !important;
}Passe die vier Werte nach Bedarf an:
- Offset X / Y (erste zwei Werte): Verschiebung des Schattens in Pixel. Bei
0px 0pxliegt er mittig unter dem Header. - Blur (dritter Wert): Weichheit des Schattens. Höhere Werte = weicherer Schatten.
- Spread (vierter Wert): Ausdehnung.
0pxentspricht der Breite des Elements. - Farbe (
rgba): Schwarz mit 50 % Opazität im Beispiel — ändere den letzten Wert für mehr oder weniger Transparenz.
#main-header-Element inspizieren und den Wert im Styles-Panel direkt bearbeiten.Wo Sie das CSS einfügst
Divi bietet zwei saubere Wege, Custom CSS einzubinden — ohne Child-Theme und ohne Plugin:
-
Divi → Theme Customizer → Zusätzliches CSS
Oben links im WordPress-Dashboard auf Divi klicken, dann Theme Customizer öffnen. Im Customizer finden Sie ganz unten links den Punkt Zusätzliches CSS. CSS hier ist sofort aktiv und live vorschaubar. -
Divi → Theme-Optionen → Benutzerdefiniertes CSS
Alternativ im Dashboard unter Divi → Theme-Optionen den Tab Benutzerdefiniertes CSS aufrufen. CSS hier wird ins<head>des Themes geladen.
Beide Methoden funktionieren. Der Theme-Customizer hat den Vorteil der Live-Vorschau. Mehr Details zur richtigen Einbindung finden Sie im Artikel Custom CSS in Divi: alle Wege im Überblick.
Divi-Projekt? Wir bauen das sauber.
Von der schnellen CSS-Korrektur bis zum komplett eigenen Theme-Builder-Layout — als WordPress-Agentur übernehmen wir das für Sie.
Die bessere Langfrist-Lösung: Custom Header im Theme Builder
CSS-Overrides sind schnell und praktisch — aber ein Pflaster. Wenn Sie den Divi Header grundlegend anders gestalten wollen, ist der Divi Theme Builder die sauberere Lösung.
Seit dem entsprechenden Update können Sie im Theme Builder einen vollständig eigenen Header erstellen — direkt mit dem Page Builder, ohne CSS-Tricks. Sie haben dabei vollkommene Design-Freiheit und können für verschiedene Seitentypen, Kategorien oder Post Types unterschiedliche Header (und Footer) einstellen. Das ist ein echter Game Changer, der vom Divi Theme ausgeliefert wird.
Den Custom Header erstellen Sie so:
- Im Dashboard zu Divi → Theme Builder navigieren.
- Auf Global Header hinzufügen klicken und einen neuen Header im Visual Builder gestalten.
- Speichern — der neue Header ersetzt den Standard-Header auf allen oder ausgewählten Seiten.
Der Standard-Header mit seinem box-shadow ist damit komplett vom Tisch, weil er schlicht nicht mehr geladen wird. Kein CSS-Override nötig.
Häufige Fragen zum Divi Header-Schatten
Warum zeigt der Divi Header eine Linie, obwohl ich keinen Border gesetzt habe?
Die sichtbare Linie unter dem Divi Header ist kein border-bottom, sondern ein box-shadow. Deshalb finden Sie sie nicht in den üblichen Border-Einstellungen des Customizers. Mit den CSS-Snippets in diesem Artikel können Sie den Schatten entfernen oder anpassen.
Funktioniert das Snippet auch für den Fixed Header (beim Scrollen)?
Ja. Das Snippet spricht beide Zustände an: #main-header für den normalen Header und #main-header.et-fixed-header für den fixierten Zustand beim Scrollen. Lassen Sie einen der beiden weg, bleibt der Schatten im jeweils anderen Zustand erhalten.
Warum brauche ich !important im CSS?
Divi setzt den box-shadow über interne Styles mit hoher Spezifizität. Ohne !important wird Ihr CSS von den Theme-Styles überschrieben und hat keine sichtbare Wirkung. !important ist in diesem Fall bewusst eingesetzt, kein Notbehelf.
Gibt es eine Möglichkeit, den Schatten im Customizer zu entfernen, ohne CSS?
Nicht direkt. Der Divi Customizer bietet keine native Option, den Header-Schatten zu deaktivieren. Die einfachste Lösung ohne Code ist der Divi Theme Builder: Erstellen Sie einen eigenen Custom Header, der den Standard-Header ersetzt — dann existiert der box-shadow gar nicht erst.
Beeinflusst das Entfernen des Schattens die Performance meiner Seite?
Minimal positiv, aber kaum messbar. Der box-shadow selbst ist keine große Render-Last. Den Schatten zu entfernen verbessert nicht spürbar die Core Web Vitals. Wer ernsthaft Performance optimieren will, sollte sich eher um Bildkomprimierung, Caching und sauberes Theme-Setup kümmern.
Joshua hat STARK 2016 gegründet und arbeitet seitdem intensiv mit Divi in Kundenprojekten. Die CSS-Snippets in diesem Artikel kommen aus dem echten Projektalltag.
Sie wollen das professionell gelöst haben?
30 Minuten Gespräch, kostenlos. Wir schauen gemeinsam, was Ihr Divi-Projekt braucht.