Fullscreen Hero & Sticky Bottom Row with Bloom

This Divi section layout is for the header (aka hero) area. I love the look of it, I think it’s pretty snazzy and my clients seem to love it. It’s fullscreen and the bottom row is sticky on the appropriate device sizes.

A matching Bloom optin is included. Most of the CSS is in the modules themselves for this layout, a bit of external CSS is required for a few media queries written for the sticky row on certain device sizes and orientations – freakin’ tablets! 😛

For best results install on a fresh WP installation.

Install the layout

• Go to your Divi Library > Import & Export > choose Import and locate the .json layout file from your UNZIPPED folder and upload it.
• Start a new page, load the layout from your Divi Library

Install the Bloom optin

• Go to Bloom > Optins > look for the 2 arrows and click > import the Bloom .json file in your folder and upload. Don’t forget to set up your email service and activate the optin.

Notes

• The CSS can go in your Divi options panel, child stylesheet, or page CSS panel.
• It would be ideal to use ‘hide nav before scroll’ here (upper right settings).
• Depending on the lightness of your background image you may want to add some text shadow to your upper text, or try a completely different module there. Experiment!
• In my customizer settings I’ve made my headings bigger site-wide so your headings in section 2 and 3 may not quite match up. In the customizer go to general > typography > change the header text size to 40.