How to Create a Sticky Footer Reveal with Divi

[ad_1]

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: Update Footer Section Z-Index

First, we need to give our footer section a z-index of 0. This will allow the section to sit behind other sections or elements on the body of the page.

Open the settings for the footer section. Under the Advanced tab, update the following:

divi sticky footer reveal

2: Add Sticky Position to Footer Section

Next, we need to give the footer section a sticky position. Under Scroll Effects, update the sticky position so that it sticks to the bottom:

  • Sticky Position: Stick to Bottom

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!



[ad_2]

Try Divi Page Builder and Theme Today

Leave a Reply