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

Published 06/09/2018 | 6 comments

"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. You just have to add a little CSS code to get 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 that when the page scrolls, the footer follows. When I say "footer", I mean the bottom bar, where your credits are located but also the part where 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. Thus, it looks like a curtain reveals your footer.

 

Which CSS rules to use?

In fact, to do this footer reveal effect, we need to use 4 specific CSS rules. It's good to understand them so 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".

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.

See 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 learn more about the "Position" property.

 

Rule 3: the box-shadow

This property allows you to add a nice shading under the main content. This way, it really looks like a curtain that reveals the content of your footer. Without this property, the footer would look less like it's revealing itself. This articleThis section will help you to understand the box-shadow.

 

Rule 4: media queries

The medias queries are used to define specific CSS rules according to the size of the screens. It is thanks to medias queries that we can make responsives websites. So this notion is very important because the footer that appears on scroll will need an adjustment according to the 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 screen size.

In the code below, I've 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 with the credits - you don'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 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 screens = responsive.

 

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'll notice that screen sizes not defined in the above code 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 when scrolling 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 would look like 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 it easily: there are various solutions that will be the subject of a future article... In the meantime, you can add the CSS to the Appearance > Customize > 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...

footer qui apparait au scroll

footer qui apparait au scroll

1,361 words

5

You should like it too:

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Custom 404 error page: with and without the Divi Theme Builder

Have you thought about customising your site's 404 error page? No ? Well, you should: not only is it easy to do, but it could also lower your bounce rate! The idea is to keep the user who passes through your site on your site. Discover the step by step tutorial + video.

Appliquer des masques et des formes sur vos images avec Divi

Apply masks and shapes to your images with Divi

Masks make your images look more graphic and give your layout an original look. Did you know that you can easily create them using the Divi Visual Builder? I show you how in this tutorial and in this video.

6 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 !

  3. Steven

    Bonjour et merci pour l’astuce.

    Je rencontre un problème, les liens du footer ne sont plus cliquable, est-ce normale ?

    En vous remerciant par avance.

  4. Lycia Diaz

    Salut Steven, non ce n’est pas normal, tes liens devraient être cliquable.

  5. Bruno

    Bonjour.

    Cela ne fonctionne pas pour moi.

    Pourtant j’avais fait un essai concluant il y quelque temps, depuis j’ai réalisé beaucoup de modifications.

    Est-ce du au fait que j’utilise dorénavant le theme builder et que j’assigne un footer global à toutes mes pages ?

    Merci et bonne journée.

  6. Lycia Diaz

    Oui Bruno, ça vient de là. Le tutoriel ici présent n’est pas optimisé pour le footer global.

Soumettre un commentaire

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

Je souhaite recevoir les news du blog Astuces Divi !

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