How to Create a Divi Footer Reveal Effect Without a Plugin

by | Nov 24, 2020 | DIVEMBER, Divi Tutorials | 1 comment

Welcome to D I V E M B E R (Divi + November) here at Divi Life! All month long during November we’re going LIVE on Facebook & YouTube, and publishing new tutorials, freebies, new product features, new product releases, and more! Make sure you subscribe to our email list so you don’t miss any of the action or awesome free stuff! And, follow us on Facebook & YouTube to be notified when we go LIVE.

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

  1. Add the CSS to Make the Footer Fixed & to Add Margin to the Main Content (CSS Provided)
  2. 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.

1 Comment

  1. Avatar

    Hello,
    Thanks for this tutorial.
    I set up on a site and it really gives a nice effect!

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This