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.
Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
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.
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.
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.
Under the Add From Library popup, find and use the Marina About Page Layout from the Marina Layout Pack.
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.
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:
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:
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:
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:
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.
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!
This content was originally published here.