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

Publié le 06/09/2018 | 2 commentaires

« 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 comprend pas, ça 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

footer qui apparait au scroll

Ça devrait vous plaire aussi :

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

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

Beaucoup d’utilisateurs se posent la question : comment optimiser le Responsive Design de Divi ? De nombreuses options sont disponibles nativement dans Divi pour améliorer le design sur vos divers écrans. Mais quelques fois, vous devrez aussi modifier les Medias Queries… Découvrez comment dans ce guide complet !

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

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

Quand je vous dis qu’on peut tout faire avec Divi ! Pas besoin de coder ou d’installer de nombreux plugins… Il suffit de savoir où chercher : les options sont là ! Dans cet article, je vous propose de découvrir comment créer un bouton « retour vers le haut » (back-to-top button) en seulement quelques clics !

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