How to Create a Sticky Footer Reveal with Divi

Posted on September 21, 2021 by in Divi Resources | 14 comments

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 Divi Daily email list 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 {
z-index:-1;
}

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.

Cheers!

Premade Layouts

Check Out These Related Posts

14 Comments

  1. 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!

  2. 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?

    Thanks

    • 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?

  3. 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.

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

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

  5. 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.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today

Pin It on Pinterest