footer qui apparait au scroll de la souris

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

Mis à jour le 02/06/24

1352 mots

5 minutes de lecture
9 commentaires

Cet article contient des liens d’affiliation reconnaissables grâce à l'icône du pourcentage (%) → je suis un lien d'affiliation

« 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…

footer qui apparait au scroll

Obtenir Divi

Formation Divi

Ebook Divi PDF

Astuces gratuites

Quiz Divi

Coaching Visio Divi

icon 256x256

Fièrement traduit par wpLingua, l'extension de traduction pour WordPress que je développe ! SEO-Friendly / Automatique / Éditable

9 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.

  7. minne

    Bonjour cela fonctionne très bien si on utilise un footer avec widget.

    Par contre comment faire si on a un footer créé avec le thème builder ?

    Cela ne fonctionne pas ?

    Qqun pourrait me venir en aide svp …. merci

  8. Lycia Diaz

    Voilà encore un sujet que j’ai traité dans ma formation Divi Vidéo Boost, qui regorge d’astuce de ce type 😉

  9. Caroline

    Bonjour, même procédé avec un thème autre que DIVI ? Merci

Soumettre un commentaire

Votre adresse e-mail 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.