Divi Header kein Schatten

#main-header,
#main-header.et-fixed-header {
box-shadow:none !important;
}

Divi Header Schatten anpassen

#main-header,
#main-header.et-fixed-header {
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5)!important;
}

Das sind zwei CSS-Code-Snippets, welche ich sehr oft bei unseren Divi-Webdesign-Projekten verwende.

Der Divi Page Builder gibt uns unzählige Möglich­keiten, den Inhalt unserer Seite genau so zu stylen, wie wir uns das vorstellen — bei anderen Elementen sieht das dann schon wieder anders aus, bspw. beim Divi Header. Es gibt im Custo­mizer zwar ein paar Einstel­lungs­mög­lich­keiten, dennoch sieht jeder Divi Header eigentlich immer gleich aus. Insbe­sondere die Linie unter dem Header, welche keine border-bottom, sondern ein box-shadow ist, der sich beim JQuery-getrig­gerten Wechsel zum Fixed Header dahin­gehend verändert, das der Blur-Wert erhöht wird.

Wenn wir den Standard Divi Header beibe­halten wollen, können wir über diese Snippets nun feintunen, wie sich unser Header Schatten verhält — auf unserer Seite (siehe oben 🙃 ) haben wir uns für einen dunkleren Schatten, als im Divi Standard entschieden, um die Trennung zwischen Header und Content klarer hervorzuheben.

Anstatt den Standard Header über CSS anzupassen, können wir seit einigen Updates über den Divi Theme Builder einen ganz eigenen Custom Header erstellen. Dabei wird der Page Builder für das Design des Headers genutzt, was uns vollkommene Design-Freiheit verspricht. Es lässt sich sogar für verschiedene Seiten, Katego­rieren oder Post Types ein unter­schied­licher Header (sowie Footer / Body) einstellen. Ein massiver Game Changer aus der Elegant Themes Schmiede. Mehr Infor­ma­tionen zum Custom Header hier ↗.