How to Create a Sticky Footer Reveal with Divi

Last Updated on September 16, 2022 by 15 Comments

How to Create a Sticky Footer Reveal with Divi
Blog / Divi Resources / How to Create a Sticky Footer Reveal with Divi

Adding a sticky footer reveal to your website can bring that extra little touch you were looking to give to the footer of your website. The footer reveal effect opens and closes the visibility of the footer as you scroll to and from the bottom of the page (unveiling the footer like a shutter on a window). Usually, this effect requires custom CSS that is limiting and hard to work with. But with Divi’s theme builder options, you can easily add a footer reveal effect to any custom footer design built with Divi’s built-in options.

In today’s Divi tutorial, we’re going to show you how to create a sticky footer reveal in Divi. All it takes is a few easy steps.

Let’s get started!

Sneak Peek

Here is a quick look at the sticky footer reveal design we’ll build in this tutorial.

Download the Global Footer Template with the Sticky Footer Reveal for FREE

To lay your hands on the template from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our newsletter by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

To import the template layout to your website, you will need to go to the Divi Theme Builder and use the portability option to import the .json file to the theme builder.

divi sticky footer reveal

Let’s get to the tutorial, shall we?

Creating a Sticky Footer Reveal with the Divi Theme Builder

Create New Footer Template

Start by going to the Divi Theme Builder in the backend of your WordPress website. There, add a new global or custom footer.

divi sticky footer reveal

Build the Footer Layout

Next, select the option “Choose A Premade Layout”. For this tutorial, we are going to use a premade layout to speed up the design process. But, you could start building one from scratch if you want.

divi sticky footer reveal

Under the Add From Library popup, find and use the Marina About Page Layout from the Marina Layout Pack.

divi sticky footer reveal

Once the layout has been loaded, delete all the sections except the bottom footer section. We will use this footer section to add the footer reveal effect.

divi sticky footer reveal

Add the Sticky Footer Reveal Effect to the Footer Section

To add the footer reveal effect to the footer section, we will need to do the following.

1: Add Sticky Position to Footer Section

First, we need to give the footer section a sticky position. To do this, open the section settings and click the Advanced tab. Under Scroll Effects, update the sticky position so that it sticks to the bottom:

  • Sticky Position: Stick to Bottom

divi sticky footer reveal

1: Update Z-Index for Sticky State

Next, we need to give our footer section a z-index of 0 when the section is in the sticky state. This will allow the section to sit behind other sections or elements on the body of the page when scrolling.

To do this, update the position Z Index by clicking the sticky icon next to the Z Index option to activate the sticky style tab. Then, update the Z Index to 0 under the sticky tab.

  • Z Index (sticky): 0

divi sticky footer reveal

3: Update Sticky Footer Placeholder Z Index

When an element is given a sticky position in Divi, a duplicate placeholder element is also created automatically behind the scenes. This helps deliver the functionality needed for positioning and designing the sticky elements using the Divi Builder. In this instance, a footer section placeholder is created with a default z-index of 1. We don’t want our actual sticky footer section (now with a Z Index of 0) to sit behind the placeholder section, so we need to update the placeholder’s Z Index to -1.

To do this, first add a custom CSS Class to the footer section as follows:

  • CSS Class: sticky-footer-reveal

divi sticky footer reveal

Then open the page settings of the footer template using the builder settings menu. In the Footer Template Settings modal, select the Advanced tab and enter the following CSS in the Custom CSS box:

.sticky-footer-reveal.et_pb_sticky_placeholder {

divi sticky footer reveal

This will force the placeholder section to sit behind the footer with the sticky footer reveal effect so that you can interact with the footer section content.

4: Save Changes

Once done, save the changes to the footer template and theme builder.

divi sticky footer reveal

Final Result

To view the final result, check out a live page and scroll away. Here it is!

Final Thoughts

In Divi, adding a sticky footer reveal to your website doesn’t require a plugin or complicated custom CSS. Using the theme builder, you can easily create a footer template and design a footer section with the footer reveal effect in minutes. Hopefully, this will provide a subtle boost to the design of your footer with an enticing interaction visitors will enjoy.

I look forward to hearing from you in the comments.


Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

How to Use Divi’s AI Website Builder (Guide)

How to Use Divi’s AI Website Builder (Guide)

Posted on July 11, 2024 in Divi Resources

Divi Quick Sites is one of the most exciting recent releases, helping you tremendously speed up your website creation process! This new feature provides you with two options: choose a Divi Starter Site to get your website up and running or use Divi’s AI Website Builder to generate an entire...

View Full Post
New Divi Starter Site for Real Estate (Quick Install)

New Divi Starter Site for Real Estate (Quick Install)

Posted on July 10, 2024 in Divi Resources

Divi empowers you to build the best websites possible, and now, Divi Quick Sites takes website creation to a whole new level! This revolutionary tool lets anyone, regardless of skill level, generate a complete website in under two minutes! Divi Quick Sites provides everything you need to launch...

View Full Post
Get a Free Water Non Profit Layout Pack For Divi

Get a Free Water Non Profit Layout Pack For Divi

Posted on July 8, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Water Non Profit Layout Pack that’ll help you get your next water non...

View Full Post


  1. Hi there…
    It is a little bit strange that I feel like a stupid boy when I cannot fix the issue if I do everything according to the tutorial.
    Yes, I have a fixed footer if to look at the page in Chrome. But if to enable Visual Builder and scroll down – the footer jumps up and does not want to hide if to scroll up!
    Why so???

  2. If the Content of the page is too long the sticky reveal issue shows on the middle of the page. Is there any fix on this issue?

    • My first thought would be to add a custom height to the body of the page that spans the full width of the browser window.

  3. I hope this can be applied to any customized footer you have already saved and just add the sticky feature.

    • caiylle,
      Yes. This should work for any customized footer.

  4. What worked for me was leaving out the CSS code part and lowering the z-index to below zero – instead of setting it to 0 like Jason suggested. I found I did not need any additional CSS after that.

    So in short: set the z-index to -10, just as a starting point. And leave out the CSS code.
    Hopefully that helps.

    • Thanks, Paul. Glad you figured out a solution.

    • This is exactly what worked for mee too. Thanks Paul!

  5. Hi,
    I followed step by step, but I am also having display issues.
    When I import the .json file everything works, but when I create a section and do all the settings it doesn’t work and the footer stays on top.
    What could be the problem?


    • Far,
      See my comment to Wendy above. I made the correction in the tutorial. Sorry about that!

      • Hi Jason,
        No, unfortunately there is something going wrong.
        I have tried several times. Now after this update, the footer is attached at the bottom of body, instead in your example footer remains below body.
        I also tried doing a copy and paste of the section style from your example to my section, but it didn’t work.
        Could you please check it?

        • Far,
          Sorry. I was unable to recreate that issue on my end. I would try starting from scratch with a new template and reassign the template to the page(s). Make sure to add the sticky position to the section first. Then set the sticky z index to 0. If it still doesn’t work, I would reach out to support.

          • Hi Jason,
            I started from scratch with a new template and it worked.
            Now the problem is that when a page has few content, the footer shows up in the middle of the page.
            How is it possible to keep the footer at the bottom of the screen?

  6. Hi! I love this quick and easy way to make a footer feel more special. I used an existing site I have to test it out and followed the step by step directions – setting the z index to 0 and applying stick to bottom, and the class to the section, then adding the CSS to the page styles – but it is still sitting above everything on the page. Is there something in the divi provided file that is not mentioned in the step-by-step instructions?

    • Wendy,
      Sorry about that. I updated the post with the correction. You need to add the sticky position, “stick to bottom”, to the section first. Then update the section’s z-index to 0 for the sticky state. Thanks for letting me know!

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today