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

How then to obtain a fixed footer that only appears when the mouse moves down 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. It will be enough to 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. That is to say, when the page is scrolled, 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" with the Divi theme looks like:

 

What is a "footer that appears on the scroll"?

To make the difference, here is what the footer of your Divi site will look like after adding the CSS rules that you will find below in this article.

 

If you look closely, the footer is fixed behind the main content of your site. As a result, it looks like a curtain unveils your footer.

 

Which CSS rules to use?

In fact, to achieve this footer unveiling effect, we must use 4 specific CSS rules. It is good to understand them so that you can modify them if necessary, according to your plans... rather than copy and paste the code and leave me a comment saying "I don't understand, it doesn't work".

Be aware that with CSS, everything works, there are no bugs as with Javascript for example. It is enough to use the right properties and values and especially to apply them to the right selectors.

Discover all you can do with the Divi theme

 

Rule number one: 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 pass 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 to place the footer section in the background with "z-index : -1". The main content, on the other hand, will have a "z-index: 2".

 

Rule n°2: the fixed position

Then, the Position property will have the value Fixed. This allows the footer to be fixed so that it is fixed in the background (thanks to the z-index). Reading this article to learn more about the "Position" property.

 

Rule number three: the box-shadow

This property allows you to add a nice shading under the main content. So it really looks like it's a curtain that unveils the content of your footer. Without this property, we would have less of a feeling that the footer is unveiling itself. This articleallows you to better understand the box-shadow.

 

Rule 4: Queries media

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

To explain quickly, the Divi theme already includes a.css style sheet. If no new rules are defined, Divi's 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 I present below, I have defined 4 different sizes thanks to the media queries. If you find that they do not match what you are looking for, you just have to change the value of the margin-bottom property or even the values of the media queries.

In the meantime, you can find out more about it here.

 

The code for a footer to unveil WITHOUT widgets

 

If you use only the bottom bar of the footer - the one where the credits are located - you won't need to worry about it, the following code should be enough:

/* 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 unveil WITH widgets

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

 

The following code works in responsive mode, as shown in the video above (to be copied and pasted 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 notice that screen sizes that are not defined in the code above will behave in the "basic" way, the one defined by Divi.

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

Here is what the footer that appears on the scroll would look like if you do NOT use the queries media:

 

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

 

Where to insert the CSS code in Divi?

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

 

In conclusion....

Divi is so easy to change! With a few clicks, you can stand out 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...

footer that appears on the scroll

Praesent facilisis Sed ut porta. suscipit mi, Nullam lectus libero diam

Pin It on Pinterest

Shares
Share This