Sehr schöner Header 4.0
Hero Image gradient overlay / Mak
Ab Minute 21:30
Banners für Conversion /Device Sizes
Breite Desktop: 1920px
Breite Tablet: 768px
Breite Phone: 320px
Header mit Scroll Down Arrow
https://www.youtube.com/watch?v=7d7lO4NPCuI
Im Module fullwith Header title: Design/Scroll Down Icon
(im Video steht immer Fullwidth Layout aktivieren – habs auf Kita Website ohne gemacht um nicht Bilder zu verschieben – musste spacing justieren: Logo image margin bottom –vw erhöhen, Header text padding top/bottom 1vw erhöhen)
Video gibt CSS wenn Icon bouncen soll
Header mit CHANGING TEXT - cool!
Dividers Styles
Overlay Versions to make text better readable
Einfacher Overlay – Gradient Overlay – Header Text Shadow
100% height
Go to the section module settings:
– Click Advanced
– Scroll down under customer Css → Main Element
– type in the css code: height: 100vh;
(the “vh” means a % of the screen you are viewing from.
So “height: 10vh;” would be a very thin section.)
with columns that adjust to Mobiles
With CSS ID and CSS Code to add – at the end.
Content & Modules centered within a row
In Row settings:
- Design: Center
- Design: Spaltenhöhe anpassen à YES
- Add to row CLASS: “vertical-align”
- Add to Divi/Themeoptions/CSS:
.vertical-align {
display: flex;
flex-direction: column;
justify-content: center;
}
Achtung: Um bei amurparfumée.ch bei der ENTER-PAGE den ganzen Content auf der Seite vertikal zu zentrieren, habe ich zusätzlich die ROW Höhe auf 100% fixiert und genau auf Section-Höhe angepasst.
1) Row settings / Advanced / main element : Add “height: 100vh;”