How to create a footer that appears on scroll with Divi?

"A footer that appears on scroll".I couldn't think of a better name for this beautiful effect that can be found in some WordPress sites. Some premium themes offer this option but not Divi.

So how do you get a fixed footer that only appears when the mouse goes to the bottom of the page? And this, on a site that was created with Divi ?

We will see in this tutorial that it is very simple. All you need to do is add a small piece of CSS code to obtain this "footer-hidden" effect.

 

What does the basic footer look like?

When you use the Divi themeThe footer appears after the main content of the web page. This means that when the page is scrolled down, the footer follows. When I say "footer", I mean the bottom bar, the one where your credits are located, but also the part where the widgets are placed.

In this video, you can see what a basic footer looks like with the Divi theme:

 

What is a "scrollable footer"?

To make the difference, here's what your Divi footer will look like after adding the CSS rules you'll find a little further down in this article.

 

If you look closely, the footer is fixed behind the main content of your site. This makes it look like a curtain that reveals your footer.

 

Which CSS rules should be used?

In fact, to achieve this footer reveal effect, we need to use 4 specific CSS rules. It's good to understand them so that you can modify them as needed, depending on your projects... rather than copy and paste the code and leave me a comment saying "I don't understand, it doesn't work".

You should know that with CSS, everything works, there are no bugs like with Javascript for example. You just have to use the right properties and values and apply them to the right selectors.

Find out what you can do with the Divi theme

 

Rule 1: the z-index

This property allows you to define the position of your layers, a bit like in Photoshop. So, if you want an element to go behind another element, you must give a negative value (and vice versa). To learn more about the z-index, I invite you to read this article.

It is therefore this property that allows the footer section to be placed in the background with "z-index: -1". The main content, on the other hand, will have a "z-index: 2".

 

Rule 2: the fixed position

Then the Position property will be set to Fixed. This allows the footer to be fixed in the background (thanks to the z-index). Read this article to find out more about the "Position" property.

 

Rule 3: the box-shadow

This property allows you to add a nice shadow under the main content. This makes it really look like a curtain revealing the content of your footer. Without this property, the footer would look less like it's revealing itself. This articleThis section provides you with a better understanding of the box-shadow.

 

Rule 4: media queries

Media queries are used to define specific CSS rules according to screen size. It is thanks to media queries that we can make responsive websites. So this notion is very important because the footer that appears on scroll will need to be adjusted according to screen sizes.

To explain quickly, the Divi theme already embeds a .css stylesheet. If we don't redefine any rules, the Divi rules are applied. So in our case of hidden footer, we will need to redefine some rules according to the size of the screens.

In the code below, I have defined 4 different sizes using the media queries. If you find that they don't match what you're looking for, you can simply change the value of the margin-bottom property or even the values of the media queries.

In the meantime, you can read more about it here.

 

The code for a footer to be revealed WITHOUT widgets

 

If you only use the bottom bar of the footer - the one where the credits are - you don't need to bother, the following code should suffice:

/* code css si pas de widgets en pied de page */


#main-content {
margin-bottom: 53px;
z-index: 2;
-webkit-box-shadow: 1px 1px 10px 1px black; 
-moz-box-shadow: 1px 1px 10px 1px black; 
box-shadow: 1px 1px 10px 1px black;
}


#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}

 

The code for a footer to be revealed WITH widgets

On the other hand, if you use widgets in the footer, you will have to play with the margin-bottom and media queries values so that the footer display is adaptable to responsive screens.

 

The following code works in responsive, as shown in the video above (copy and paste in its entirety):

/* CSS POUR UN CODE AVEC WIDGET EN FONCTION DES TAILLES ECRAN */

/* pour les écrans de 1200px minimum */

@media screen and (min-width: 1200px) {

#main-content {
margin-bottom: 350px;
z-index: 2;
-webkit-box-shadow: 1px 1px 10px 1px black;
-moz-box-shadow: 1px 1px 10px 1px black;
box-shadow: 1px 1px 10px 1px black;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
}

/* pour les écrans compris entre 1000 et 1199px */

@media screen and (min-width: 1000px) and (max-width: 1199px) {

#main-content {
margin-bottom: 300px;
z-index: 2;
-webkit-box-shadow: 1px 1px 10px 1px black;
-moz-box-shadow: 1px 1px 10px 1px black;
box-shadow: 1px 1px 10px 1px black;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
}

/* pour les écrans compris entre 900 et 999px */

@media screen and (min-width: 900px) and (max-width: 999px) {

#main-content {
margin-bottom: 500px;
z-index: 2;
-webkit-box-shadow: 1px 1px 10px 1px black;
-moz-box-shadow: 1px 1px 10px 1px black;
box-shadow: 1px 1px 10px 1px black;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
}

/* pour les écrans compris entre 800 et 899px */

@media screen and (min-width: 800px) and (max-width: 899px) {

#main-content {
margin-bottom: 450px;
z-index: 2;
-webkit-box-shadow: 1px 1px 10px 1px black;
-moz-box-shadow: 1px 1px 10px 1px black;
box-shadow: 1px 1px 10px 1px black;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
}

 

You will note that screen sizes not defined in the above code will behave in the "basic" way, as defined by Divi.

Also be careful with the number of widgets used. If there are several per area, the footer effect that appears on scrolling will only be relevant on large screens. You can then get rid of some of the media queries so that the footer works in the basic way on small screens.

This is what the footer would look like when scrolling if you do NOT use media queries:

 

In this video you can see that the main content is always blocked at the same height (window level). This is not right because the design does not adapt to different screens: on a medium screen you see a white bar that you should not see and on a smaller screen the widgets are "cut off".

 

Where to insert CSS code in Divi?

If you have never added CSS to your WordPress/Divi site, you can do so easily: there are various solutions which will be the subject of a future article... In the meantime, you can add the CSS to the Appearance > Customise > Additional CSS.

 

In conclusion...

Divi is so easy to modify! With just a few clicks, you can set yourself apart from other sites created with Divi. On Divi Tips, there are already several tutorials that have been published on Divi's footer and others will come...