Welcome back to a new tutorial using WordPress with Divi theme. You’ll learn how to create a nice footer reveal animation with only a few lines of CSS code. The inspiration to write this Divi tutorial came from Yates Design tutorial.

I really recommend that you click on the link above and check it out.

After reading that tutorial I was in awe. I tried to implement it a couple of times and it’s working perfectly.

Later on, after more digging in the subject – researching more about it in lots of different WordPress blogs and tutorials – I came up with the solution that I currently use in all my Divi client’s websites.

So, this tutorial is to share the CSS snippet that I use to easily achieve the footer reveal effect in the Divi theme.

How to create the footer reveal effect in Divi

The video above describes all the steps to reach the footer reveal effect. If you follow along with the written tutorial, you’ll find all that you need to replicate the same effect.

Some people rather learning with videos, so I’ll try to make a video for all my next WordPress and Divi tutorials.

Layout

The important thing to understand is that you’ll use the “normal” footer of the WordPress. The one you manage to create in the widgets configuration section.

As the footer need to be fixed in order to achieve this effect, you need to get a pixel-perfect number size of your footer total height.

I recommend using the standard footer of your WordPress theme because it has the correct <footer> tag and I think it may be good for overall SEO.

CSS

After creating your footer using widgets, add this CSS inside Divi > Theme Options > Custom CSS:

/* -- Footer reveal -- */
@media only screen and (min-width : 981px) {
#main-content {
  position: relative;
  z-index: 1;
  margin-bottom: 312px;
  -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  -moz-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
 }

#main-footer {
  position: fixed;
  z-index: -1;
  height: 312px;
  bottom: 0;
  left: 0;
  right: 0;
 }
}

There’re 2 important things to notice about the code to make it work.

01. You’ll use the media query @media only screen and (min-width: 981px) so the footer reveal effect works only in desktop.

You can manage to make it work on mobile too….

But… there are so many smartphones and tablets screen sizes nowadays that it’s hard to have a standard size that fits it all.

I rather removing something I’m not complete sure it’ll work than having the chance of my client spotting any huge layout problem in the website.

02. See the 312px in the margin-bottom and height properties? This values that you need to change based on your footer components total height.

To handle this math issue, you’ll need to – using the Chrome browserright click the footer > inspect.

Then, search for the footer components. In my demo example, I need to add main-footer container height (347px) plus footer credits footer-bottom height (53px).

If you play along with the inspect, you’ll easily learn how to find the height value of a section. This is a must to design pixel perfect websites.

Conclusion

I really hope you enjoyed and manage to learn a new trick today about applying the footer reveal effect in you Divi project.

Do you have a website that has this effect? Won’t you mind sharing it with me? I really enjoy looking into your Divi-related or WordPress projects.

Did you like it? Write a comment and I’ll glad answer as fast as I can.

See ya!