Resources by A Girl and Her Mac
  • Divi Stuff
    • All Resources
    • CSS Tutorial
    • Free Layout
    • WooCommerce
Select Page

Last Updated on September 8, 2019

Fullscreen Hero & Sticky Bottom Row with Bloom

Aug 5, 2016 | Free Layout

Post Views: 7,184

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.

Free Divi Layout | A Girl and Her Mac
View DemoDownload

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

Screen Shot 2016-08-05 at 6.24.44 PM

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.

Screen Shot 2016-08-05 at 7.07.28 PM

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.
  • A Girl and Her Mac
  • All Resources
  • Woo Styling
  • Free Layouts
  • CSS Tutorials
Resources by A Girl and Her Mac Ā  — Ā  This site does have a few affiliate links Ā  — Ā  The Fine Print

Read next article ...

Side By Side Customizable HTML Buttons