Transparenzverlauf statt harte Linie im Divi-Header

12. September 2021 | CSS-Stylesheet, Divi-Theme

Geschätzte Lesezeit für diesen Beitrag: ca. 2 Minuten.

Besonders wenn der Header des Divi-Themes farblich Ton in Ton ist mit der restlichen Website, entsteht beim Scrollen eine harte Linie, wenn der Inhalt unter dem Header verschwindet. Auf vielen Websites wird dies mit einer Trennlinie in anderer Farbe gelöst. Wer dies nicht möchte, weicht vielleicht lieber auf eine leicht transparente «Übergangszone» aus. Wie das geht, zeigen wir hier.

Der Header der Website, auf der Sie sich gerade befinden hat die Hintergrundfarbe weiss – ebenso wie alle anderen Bereiche der Website. Damit beim Scrollen der Content nicht einfach Knall auf Fall unter der ansonsten nicht sichtbaren Grenze verschwindet, haben wir den Header grösstenteils blickdicht gestaltet und erst im unteren mit zunehmender Transparenz versehen.

Dafür haben wir folgenden CSS-Code eingesetzt. Sie können ihn in das CSS-Stylesheet Ihrer Website (unter Design/Customizer/Zusätzliches CSS) einfügen:

#main-header, .et_menu_container, .logo_container {
background:
linear-gradient(to bottom,
#ffffff 85%,
rgba(255,255,255, 0.0)) !important;
}

Im Code wird zunächst die weisse Farbe #ffffff «blickdicht» festgelegt. Erst auf den unteren 15% der Headerhöhe haben wir einen Verlauf der weissen Farbe (diesmal rgb-Werte) von 0 auf 100% eingefügt.

Der Effekt wird sichtbar wenn Sie auf den Seiten dieser Internetpräsenz scrollen. Der Content verblasst zunächst und verschwindet erst dann ganz.

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.









Vielen Dank.

Pin It on Pinterest

Share This