Comment créer un footer qui apparait au scroll avec Divi ?

« Un footer qui apparaît au scroll », je n’ai rien trouvé de mieux pour nommer cet effet superbe que l’on peut trouver dans certains sites WordPress. Certains thèmes premiums proposent cette option mais pas Divi.

Comment faire alors pour obtenir un pied de page fixe qui n’apparait que lorsque la souris descend jusqu’au bas de la page ? Et ce, sur un site qui a été créé avec Divi ?

Nous allons voir dans ce tutoriel que c’est super simple. Il suffira d’ajouter un petit bout de code CSS pour obtenir cet effet « footer-caché ».

À quoi ressemble le footer de base ?

Lorsque vous utilisez le thème Divi, le pied de page – footer – apparait à la suite du contenu principal de la page web. C’est à dire qu’au défilement de la page, le footer suit. Quand je dis « footer », je parle bien de la barre inférieure, celle où se trouvent vos crédits mais également la partie où sont placés les widgets.

Dans cette vidéo, vous pouvez voir à quoi ressemble un « footer basique » avec le thème Divi :

Qu’est-ce qu’un « footer qui apparait au scroll » ?

Pour bien faire la différence, voici à quoi ressemblera le footer de votre site Divi après l’ajout des règles CSS que vous trouverez un peu plus bas dans cet article.

Si vous regardez bien, le footer est fixé derrière le contenu principal de votre site. De ce fait, on dirait qu’un rideau dévoile votre pied de page.

Quelles règles CSS utiliser ?

En fait, pour effectuer cet effet de dévoilement du footer, nous devons faire appel à 4 règles CSS spécifiques. Il est bien de les comprendre afin de pouvoir les modifier au besoin, selon vos projets… plutôt que copier-coller le code et me laisser un commentaire en me disant « je ne comprends pas, ça ne marche pas ».

Sachez qu’avec le CSS, tout marche, il n’y a pas de bugs comme avec le Javascript par exemple. Il suffit d’utiliser les bonnes propriétés et les bonnes valeurs et surtout de les appliquer aux bons sélecteurs.

Découvrez tout ce que vous pouvez faire avec le thème Divi

Règle n°1 : le z-index

Cette propriété permet de définir la position de vos calques, un peu comme sur Photoshop. Donc, si vous souhaitez qu’un élément passe derrière un autre élément, vous devez donner une valeur négative (et inversement). Pour en savoir plus sur le z-index, je vous invite à lire cet article.

C’est donc cette propriété qui permet de placer la section du footer en arrière plan avec « z-index : -1 ». Le contenu principal, quant à lui, aura un « z-index : 2 ».

Règle n°2 : la position fixed

Ensuite, la propriété Position aura la valeur Fixed. Cela permet de fixer le footer afin que celui-ci soit figé en arrière-plan (grâce au z-index). Lire cet article pour en savoir plus au sujet de la propriété « Position ».

Règle n°3 : le box-shadow

Cette propriété permet d’ajouter un joli ombrage sous le contenu principal. De ce fait, on dirait vraiment que c’est un rideau qui dévoile le contenu de votre pied de page. Sans cette propriété, on aurait moins l’impression que le footer se dévoile. Cet article, vous permet de mieux comprendre le box-shadow.

Règle n°4 : les médias queries

Les medias queries servent à définir des règles CSS spécifiques en fonction de la taille des écrans. C’est grâce aux medias queries que l’on peut faire des sites web responsives. Donc cette notion est très importante car le footer qui apparait au scroll aura besoin d’un ajustement en fonction des tailles d’écran.

Pour expliquer rapidement, le thème Divi embarque déjà une feuille de style.css. Si on ne redéfini pas de règles, ce sont celles de Divi qui sont appliquées. Donc dans notre cas de footer-caché, nous aurons besoin de redéfinir certaines règles en fonction de la taille des écrans.

Dans le code que je vous présente plus bas, j’ai défini 4 tailles différentes grâce aux medias queries. Si vous trouvez quelles ne correspondent pas à ce que vous recherchez, il vous suffira de changer la valeur de la propriété margin-bottom ou même les valeurs des medias queries.

En attendant, vous pouvez vous documenter à ce sujet ici.

Le code pour un footer à dévoiler SANS widgets

Si vous utilisez seulement la barre inférieure du pied de page – celle où se trouvent les crédits – vous n’aurez pas besoin de vous prendre la tête, le code suivant devrait suffire :

/* 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;
}

Le code pour un footer à dévoiler AVEC widgets

Par contre, si vous utilisez les widgets en pied de page, vous devrez jouer avec les valeurs du margin-bottom et des medias queries afin que le dévoilement du pied de page soit adaptable aux écrans = responsive.

Le code suivant fonctionne en responsive, comme le montre la vidéo ci-dessus (à copier et coller dans sa totalité) :

/* 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;
}
}

Vous noterez que les tailles d’écrans qui ne sont pas définies dans le code ci-dessus se comporteront de la manière « basique », celle définie par Divi.

Attention également au nombre de widgets utilisés. S’il y en a plusieurs par zone, l’effet de footer qui apparait au scroll ne sera pertinent que sur les grands écrans. Vous pourrez alors vous débarrasser de certains medias queries pour que le footer fonctionne de la manière basique sur les petits écrans.

Voici à quoi ressemblerait le footer qui apparait au scroll si on n’utilise PAS les medias queries :

Dans cette vidéo, vous voyez que le contenu principal est bloqué toujours à la même hauteur (niveau de la fenêtre). Cela n’est pas convenable puisque le design ne s’adapte pas en fonction des écrans : sur écran moyen on voit une barre blanche qu’on ne devrait pas voir et sur écran plus petit, les widgets sont « coupés ».

Où insérer le code CSS dans Divi ?

Si vous n’avez jamais ajouté de CSS dans votre site WordPress/Divi, vous pourrez le faire facilement : il existe diverses solutions qui feront l’objet d’un prochain article… En attendant, vous pourrez ajouter le CSS à l’onglet Apparence > Personnaliser > CSS additionnel.

En conclusion…

Divi est si facile à modifier ! En quelques clics, vous pouvez vous démarquer des autres sites créés avec Divi. Sur Astuces Divi, il y a déjà plusieurs tutoriels qui ont été publiés sur le footer de Divi et d’autres viendront…