How to Create a Divi Footer Reveal Effect Without a Plugin
In this tutorial, I’m going to show you how to create a engaging Footer Reveal Effect on your Divi Website!
Footer Reveals are a great way to take a boring and ordinary footer, that is typically ignored, and make it engaging so that your users actually look at it.
How to Create a Footer Reveal in Divi
- Add the CSS to Make the Footer Fixed & to Add Margin to the Main Content (CSS Provided)
- Adjust the CSS to Fit Your Exact Footer Size
That’s it! Super Simple!
Step One: Add the CSS to Make the Footer Fixed & to Add Margin to the Main Content (CSS Provided)
Copy and paste the CSS code shown in the box below to your custom CSS box within Divi Theme Options, or in your Divi Child Theme.
Step Two: Adjust the CSS to Fit Your Exact Footer Size
Depending on the height of your footer, you may have to adjust the CSS to accommodate the size of your footer.
So if your main content is not revealing the entire footer, or it’s revealing too much (showing whitespace), then you’ll need to adjust the value for the margin-bottom.
You can either eyeball it until you get it right. Or, you can inspect the element with your browser developer tools and get the exact height of your footer, and use that value for the margin-bottom.
Keep in mind your footer will change height at different widths, so test it on different browser widths to accommodate the shift in heights. You could also write media queries to adjust the shifts in footer height at different widths, but we won’t cover that in this tutorial.
And we’re done! We now have a sneak Footer Reveal effect that will engage our users and draw them into whatever the footer entails (so make your footer matter!).
Let us know what you think in the comments, and don’t forget to subscribe below to get access to all of our Divi Tutorials, Freebies, and more.