Sélectionner une page

Marre du footer et des widgets… Vous souhaitez avoir un Footer Fixe configurable à l’aide du Divi Builder ? Ne bougez plus, vous êtes au bon endroit.

Si je devais placer un tutoriel dans le TOP 3, celui-ci en ferait définitivement partie. J’ai découvert cette astuce sur le super site de Geno Quiroz que je vous recommande par ailleurs – Voir l’article original !

Créez la section de votre footer

Rendez-vous dans votre Back Office pour créer votre section Footer :

  • Divi > Bibliothèque Divi > Ajouter un nouveau

Définissez un nom (en général je choisis « Footer »), choisissez le modèle « Section » puis validez la création du nouveau modèle.

À partir de là, rien de bien compliqué – Construisez à l’aide du Divi Builder votre footer en y ajoutant autant de lignes et de modules que vous le souhaitez… Un conseil : Restez simple… De mon point de vue, les footers SEO sont démodés 😉 !

Injectez la section « Footer » dans votre fichier « footer.php »

Assurez-vous d’avoir un thème enfant comprenant une copie du fichier « footer.php » du thème parent « Divi ». Si ce n’est pas déjà fait, consultez cet article.

1. Récupérez le numéro de votre section

Ouvrez la section « footer » précédemment créée et retrouvez dans l’URL le numéro situé derrière « post= ». Copiez ce numéro, il est unique et correspond à la section en question.

Ex : Pour le footer de Divi Rocket, l’URL de la section footer est la suivante : https://divirocket.fr/wp-admin/post.php?post=163&action=edit – Je copie ici le numéro 163 !

Numéro de la section utilisée pour le footer

2. Insérez le code suivant dans votre fichier « Footer.php »

Rendez-vous dans l’éditeur d’apparence de votre thème enfant et sélectionnez le fichier « footer.php ».

Téléchargez le fichier suivant et copiez la ligne de code qu’il contient – Je ne peux l’afficher ici, car il fait sauter l’affichage de ma page :

TÉLÉCHARGER LE FICHIER

Insérez le code dans votre fichier « footer.php » juste en dessous de la ligne de code :

  • <footer id="main-footer">

Puis remplacez la mention « VOTRE NUMÉRO » par le numéro trouvé précédemment dans l’URL de votre section.

Code à insérer dans le fichier footer.php du thème enfant divi

Voilà, videz le cache, actualisez votre page et votre nouveau footer devrait apparaître sur l’ensemble des pages et articles de votre site !

Superbe non ?

Encore + : Site Multilingue sous Polylang

Cette astuce fonctionne avec le pluggin Polylang que je recommande à tous pour la création d’un site ou boutique avec plusieurs langues.

Dans mon cas, je souhaitais utiliser ce footer fixe pour un site Anglais / Français – Il me fallait donc trouver une petite astuce pour afficher le bon footer en fonction de la langue de l’utilisateur.

Pour faire simple :

  • Créez autant de footer que vous avez de langue : FOOTER-EN ; FOOTER-FR…
  • Téléchargez ce fichier et copiez le code
  • Insérez le code au même endroit qu’indiqué plus haut dans cet article
  • Ajoutez manuellement d’autres langues si nécessaire
  • Modifiez les numéros avec ceux de vos différentes sections

Tadaaaa ! Votre site est équipé d’un footer fixe qui change en fonction de la langue de l’utilisateur ! Elle est pas belle la vie ?

N’hésitez pas à partager l’article et à me donner votre avis dans les commentaires.

Baptiste.