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.
Auf vielen Websites hat der Header 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, lässt sich der Header grösstenteils blickdicht gestalten und erst im unteren Part mit zunehmender Transparenz versehen.
Dafür schlagen wir folgenden CSS-Code vor. 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 entsprechenden Webseiten gescrollt wird. Der Content verblasst zunächst und verschwindet erst dann ganz.
Werbung
Werbung
