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.
- 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.