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

Published on 06/09/2018 | 2 comments

"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 qui apparait au scroll

footer qui apparait au scroll

You should like it too:

Responsive Design Divi : comment gérer les différentes tailles d’écran ?

Responsive Design Divi: how to manage different screen sizes?

Many users are asking the question: how can Divi's Responsive Design be optimized? Many options are available natively in Divi to enhance the design on your various screens. But sometimes you will also have to modify the Media Queries. Find out how in this complete guide!

Créez un bouton « retour vers le haut » personnalisé en quelques clics !

Create a custom "back up" button in just a few clicks!

When I tell you we can do anything with Divi! No need to code or install many plugins... You just have to know where to look: the options are there! In this article, I'll show you how to create a back-to-top button in just a few clicks!

2 Commentaires

  1. David

    En effet le code est à adapter en fonction de la configuration de son site.
    Par exemple, le shadow était trop important… J’ai mis le shadow de base.
    box-shadow: 0 0 10px 0 rgba(0,0,0,.2);

    Aussi je ne suis pas en pleine largeur… J’ai donc ajusté le pourcentage du footer
    width: 90%;
    et supprimé du coup la position left pour qu’il soit centré.

    Ensuite il faut ajuster le margin-bottom du #main-content dans toutes les configuration d’écran.

    En tous cas, merci pour ce bout de code que je cherchais.

    Dommage que le margin-bottom ne s’adapte pas automatiquement en fonction de la taille du footer –> Peut être que c’est possible –> A voir

  2. Lycia Diaz

    Merci pour ce retour David !

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This