Pied de page fixe révélé après défilement pour Divi

23 Oct 2017

Bonjour à tou-te-s, les Divi fans !

Je voudrais vous proposer aujourd’hui un petit tuto pour « fixer » le pied de page de Divi, en le révélant au scrolling. Un espèce d’effet « parallax » qui ne s’assume pas !

Exemple sur ce site-même, en bas de page, uniquement pour une largeur d’écran supérieure à 768 pixels.

Idée inspirée par Pierre Bichet de Divi Thème France et cet autre tutoriel pour révéler le pied de page fixe que j’ai simplifié car je trouvais le code un peu complexe, et surtout avec pas mal de choses inutiles !

Remarques préliminaires

Afin de garder un code CSS simple et clair, j’ai pris la liberté de fixer quelques marges et paddings verticaux dans le footer de Divi. En effet, Divi positionne ces derniers en pourcentages, qui diffèrent en plus en fonction de la largeur de gouttière de la page, ce qui rend la combinatoire un peu complexe lorsqu’on veut calculer la hauteur du pied de page. Et en plus je trouve ça plus harmonieux 😉

Evidemment, la solution ci-dessous dépend largement du contenu du pied de page (nombre de widgets, hauteur des widgets, ligne de copyright), et il conviendra de l’adapter pour le vôtre. J’essaierai de vous donner des pistes dans les explications…

Le code CSS

#footer-widgets {
  padding: 80px 0 0 0;
}
.footer-widget,
#footer-widgets .footer-widget:nth-child(n),
#footer-widgets .footer-widget:last-child {
  margin-bottom: 75px !important;
}

@media only screen and (min-width: 769px) {
  #main-content {
    position: relative;
    z-index: 1;
  }
  #main-footer {
    position: fixed;
    z-index: 0; width: 100%;
    bottom: 0;
  }
  #main-content {
    margin-bottom: 340px;
  }
}

@media only screen and (min-width: 769px) and (max-width: 980px) {
  .footer-widget:last-child { display: none; }
}

Explications

La partie commune du code se charge simplement de fixer les marges verticales dans le pied de page :

  • le padding supérieur du bloc pied de page,
  • la marge inférieure des widgets (plusieurs classes afin d’écraser toutes les spécificités des marges originales de Divi).

La marge inférieure des widgets représente l’espace entre les widgets et le bas de page en mode desktop, mais aussi l’espace vertical entre les widgets en mode mobile. On pourrait dissocier les deux avec des media query, mais dans mon cas ça me plait comme ça.

La seconde partie est le cœur du sujet…

Pour les desktops et tablettes uniquement, on paramètre les z-index du #main-content et du #main-footer afin que le premier soit « au-dessus » du second. On positionne le #main-footer en fixed pour qu’il ne défile pas, et le #main-content en relative uniquement parce que c’est nécessaire pour la prise en compte du z-index.

Et puisque le pied de page est « fixé », il faut également spécifier sa position et sa largeur.

Enfin, on fixe la marge inférieure du contenu principal avec la hauteur du pied de page (voir le calcul plus bas), ce qui permet de le dévoiler lorsqu’on fait défiler la page au maximum.

Remarque : Pour les écrans d’une largeur inférieure à 768 pixels, je conserve le fonctionnement normal (pied de page défilant avec la page) car il y a de fortes chances que le pied de page ne tienne pas sur la hauteur de l’écran et donc qu’il soit largement masqué dans sa partie supérieure. C’est encore plus vrai si on bascule le téléphone en mode paysage.

La partie concernant les tablettes permet de désactiver l’affichage du troisième widget, ici le logo, car sinon il apparaît tout seul sur une deuxième ligne et ce n’est pas beau (de plus cela augmente fortement la hauteur du pied de page qui pourrait devenir plus grand que la hauteur de l’écran, cf. remarque ci-dessus).

Ajustements

Le padding supérieur et les deux marges inférieures dans le code permettent de définir marges et hauteur du pied de page.

Et voici les principaux éléments qui vous permettront d’adapter ce tuto à votre site…

Nombre de widgets

Comme expliqué précédemment, j’ai choisi ici de masquer le troisième widget en mode tablette. Si vous voulez conserver tous les widgets même en mode tablette (parce que par exemple vous en avez quatre et qu’ils ne sont pas trop hauts), oubliez la dernière partie du code.

Au contraire, si vous en quatre et si vous voulez en désactiver deux, la troisième partie devient par exemple pour les deux derniers :

@media only screen and (min-width: 769px) and (max-width: 980px) {
  .footer-widget:nth-last-child(-n+2) {
    display: none;
  }
}

Calcul de la hauteur du pied de page

La hauteur du #main-footer se trouve rapidement, soit :

  • en additionnant padding supérieur, hauteur du plus haut widget, marge inférieure des widgets et hauteur du copyright ;
  • en inspectant la page avec votre navigateur en mode desktop sans les modifications de ce tuto.

Dans le premier cas, si vous souhaitez conservez deux lignes de widgets en mode tablette, il vous faudra ajouter en plus la hauteur des widgets et leur marge inférieure.

Conclusion

Pour écrire un minimum de code et en faciliter sa maintenance, j’ai donc ajouté des contraintes sur les marges verticales (que je ne trouve pas si contraignantes). Vous pourrez bien sûr conserver celles de Divi, mais le calcul de la hauteur du pied de page va devenir plus complexe. Je pense qu’avec l’instruction « calc », on doit pouvoir réaliser l’addition avec un minimum de combinatoire, mais dans mon cas ce n’était vraiment pas nécessaire, alors je vous laisse le loisir d’expérimenter !

Attention aussi à vos widgets, car si leur hauteur varie en fonction de la largeur de la fenêtre, ça risque d’être moche : au mieux, de déséquilibrer l’agencement ; au pire, de masquer une partie du pied de page !