Divi Footer Reveal

Footer reveal on scroll layout & tutorial

This free Divi layout and tutorial is from the Elegant Themes website blog post “How to Create Beautiful Footer Scroll Reveals Below Divi’s Section Dividers”.

The footer reveal effect is popular as it hides your (messy) footer section behind your main page content until the user scrolls to the bottom of the pages main content. This layout does not reveal the content of your WordPress footer (where you put your widgets) but creates a faux footer using the Divi builder. This means that you would need to add the footer section to each of your website pages.

The tutorial will show you how to;

• Add sections to your page with different z-index settings so the footer section is hidden until the scroll
• Create a faux footer using the Divi Builder
• Fix the bottom footer section using custom section CSS of position: fixed; bottom: 0;
• Add section dividers to cover the hidden footer
• Add bottom margin to the footer section so it appears on scroll

Download this layout on the Elegant Themes blog

To download the JSON layout file for this tutorial you will need to enter an email into the subscription box on the blog post. If you are already signed up to the Elegant Themes mailing list you will not be re-added. This sign-up form is found just below the layout Demos near the top of the post.

To import the layout to your Divi website you will need to extract the zip file and drag-and-drop the JSON file into your Divi Builder page.

Affiliate disclosure* –  Links to layouts on Elegant Themes and 3rd party websites may contain affiliate code. You will never pay any extra for using these links. Thanks for supporting Divi Theme Examples.