Aller au contenu

Pied de page de Divi

Présentation du pied de page de Divi

Supprimer les puces des listes du pied de page dans Divi

Le pied de page de Divi ajoute automatiquement des puces dans les listes : voici le code CSS pour les supprimer.

CSS3 lignes
/* retirer les puces des listes du footer divi (ideoforge.com) */
#footer-widgets .footer-widget li:before { display: none; } 
html #footer-widgets .footer-widget .et_pb_widget:not(.woocommerce) ul li { line-height: 26px; padding-left: 0px; }

Où coller ce CSS

Le plus simple est le champ CSS personnalisé de Divi > Options du thème, onglet Général. Il s'applique à tout le site et survit aux mises à jour de Divi. Les autres emplacements possibles sont expliqués dans Ajouter ou modifier du CSS personnalisé dans Divi.

Ce correctif ne concerne que le pied de page standard de Divi, celui qui affiche des colonnes de widgets. Si vous avez créé un pied de page avec le Theme Builder (voir plus bas), les listes y sont des modules Divi et se règlent dans leurs propres options.

Le pied de page par défaut de Divi

Sans réglage particulier, le pied de page d'un site Divi se compose de deux parties :

  • une zone de widgets, répartie en colonnes, vide tant que vous n'y placez pas de widgets ;

  • une barre inférieure (bottom bar), avec des icônes de réseaux sociaux et le texte « Designed by Elegant Themes | Powered by WordPress ».

Il se modifie de trois façons, du simple réglage à la refonte complète.

1. Le Personnaliseur de thème : la mise en forme

Dans Divi > Personnaliseur de thème, la rubrique Footer (pied de page) regroupe cinq groupes de réglages :

  • Layout : la disposition (nombre de colonnes) de la zone de widgets ;

  • Widgets : la typographie et les couleurs des widgets ;

  • Footer Elements : l'affichage des icônes de réseaux sociaux ;

  • Footer Menu : l'apparence d'un menu de pied de page ;

  • Bottom Bar : la barre inférieure, ses couleurs et ses crédits.

Les changements s'affichent en direct dans l'aperçu ; cliquez sur Publier pour les enregistrer.

2. Les widgets : le contenu des colonnes

Le contenu des colonnes se gère comme dans tout thème WordPress classique, dans Apparence > Widgets : chaque colonne du pied de page correspond à une zone de widgets, dans laquelle vous placez un texte, une liste de liens, un menu ou une image.

C'est dans ces widgets que les listes reçoivent les puces que le CSS ci-dessus supprime.

Changer le texte « Designed by Elegant Themes »

Dans Divi > Personnaliseur de thème > Footer > Bottom Bar :

  1. Saisissez votre texte dans le champ Edit Footer Credits (modifier les crédits du pied de page), par exemple « © 2026 Nom de votre entreprise ». Le champ accepte le HTML, donc des liens vers vos mentions légales ou votre page de contact.

  2. Pour ne rien afficher du tout, une case permet de désactiver les crédits dans le même groupe de réglages.

  3. Cliquez sur Publier.

Le texte des crédits n'a rien d'obligatoire : vous pouvez le remplacer librement par le vôtre.

3. Le Theme Builder : un pied de page sur mesure

Pour aller au-delà des colonnes de widgets (une mise en page libre, un formulaire d'inscription, un plan d'accès), créez un pied de page avec le Theme Builder :

  1. Allez dans Divi > Theme Builder.

  2. Dans le modèle par défaut (Default Website Template), cliquez sur Add Global Footer, puis Build Global Footer.

  3. Construisez le pied de page comme une page ordinaire, avec des sections, des rangées et des modules.

  4. Enregistrez dans le constructeur, puis cliquez sur Save Changes dans l'écran du Theme Builder.

Ce pied de page global remplace celui du thème sur tout le site. Divi masque alors les réglages Footer du Personnaliseur, puisqu'ils ne s'appliquent plus : pour modifier le pied de page, il faut repasser par le Theme Builder. Vous pouvez aussi créer des modèles différents pour certaines pages (une page d'atterrissage sans pied de page, par exemple).

C'est la méthode la plus souple, et c'est aussi celle que la documentation de Divi 5 met en avant pour créer un pied de page personnalisé.

Pour aller plus loin

La leçon Theme Builder : en-tête et pied de page de la formation « Découvrir Divi » montre la création complète d'un pied de page avec le Theme Builder. Les autres tutoriels sont rassemblés dans Tutoriels Divi.

Vous n'avez pas encore Divi ? Découvrir Divi (lien affilié).

Auteur : Jean-Noël Mathonnet

Commentaires

Pas encore de commentaire. Soyez le premier !

Laisser un commentaire

Lorsque vous achetez via des liens sur ce site, nous pouvons toucher une commission d'affiliation. + d'infos