Each section in this long form sales page is clearly defined using colours and the built in section divider options. The template also uses the same script font I use on my own site design, which will import along with the layout. All the design is in the sections, rows and modules, with only a tiny bit of custom CSS!
I still see people using external code to create a sticky shrinking Divi header, but this is easily achievable with the built in settings.
I’ve created a free template that you can import into a Theme Builder layout and style to your needs. It has a notification bar that scrolls away with the page, but the menu sticks to the top. It also shrinks on scroll, and returns to its original size when you scroll back to the top.
How to use this template.
Unzip the download file and import the JSON layout into a page or Theme Builder layout.
I designed this template without any significant styling, and just the sticky scroll functionality so that it’s easy for you to modify for your needs, but there are a few things you may want to adjust.
- Row padding – This had been modified in both rows within the section: Row settings > Design > Spacing.
- Background colours – This is set in each of the rows: Row settings > Content > Background.
- Logo size – You might want to adjust the standard size, and the reduced size on scroll: Menu settings > Design > Sizing > Logo width (desktop & sticky).
- Menu link height on scroll – This is defined using padding: Menu settings >Advanced > Custom CSS > Menu Link > Sticky.
Everything else is easily adjusted in the various module settings.
Learn how to create Divi Child Themes that sellDivi child theme course - Reloaded!
- Use your existing industry knowledge to define and harness your niche
- Productise your business with affordable website solutions for clients
- Add a new revenue stream to your business that pays while you sleep
Struggling with Divi?
Divi child themes
You might like!
This layout uses the native Divi slider module on the right, a few text modules and a button module on the left, and some custom CSS. You can have as many or as few images in the slider as you like, the controllers will adjust to fit the width automagically.