Achieving a beautiful layered header style in Divi

GET EXCLUSIVE FREE ACCESS - Learn to create stunning WordPress websites—no code, no confusion! Watch now 👉https://emmakate.co/create

In this Divi Design Challenge, watch me recreate a beautiful layered Showit header in Divi.

You’ll learn a bunch of sneaky Divi tricks including:
» vertically aligning modules with a teensy bit of CSS
» creating a layered effect using negative margins and borders
» using the Divi Slider module to rotate fullwidth images and nothing else

What I did:

First Equalize Column Heights:
Row settings » Design » Sizing » toggle Equalize Column Heights to on

OPTION 1: Vertically align ALL modules and in ALL columns
(This was used to vertically align the button in the main menu section)
Row settings » Advanced » Custom CSS » add this code:
align-items:center;

OPTION 2: Vertically align modules in only some columns:
Row settings » click on the settings icon on the column/s you want » Advanced » Custom CSS » margin: auto;

OPTION 3: Vertically align modules within a single row
Handy if you set a viewport height on the row
(This was used to vertically align the text module in the left column of the hero section)
Row settings » Advanced » Custom CSS » add this code:
display: flex;
flex-direction: column;
justify-content: center;

Shout out to the original Showit template by wild-kind.co. You can view it here: https://thesophiatemplate.showit.site/

👋 Get more web designer resources & free stuff 👉 https://emmakate.co

Видео Achieving a beautiful layered header style in Divi канала Emma Kate