Les listes à puces sont souvent négligées lors de la conception d’un site, que celui-ci soit construit avec Divi ou non.
Pourtant, il s’agit d’une pièce importante de la mise en page car les listes permettent de mettre en valeur et de structurer l’information afin de la rendre plus lisible.
Je vais répondre dans ce tuto à une question qui a été plusieurs fois posée sur notre groupe Facebook Support Divi Community.
Voyons donc comment remplacer, dans une liste non-ordonnée, les classiques puces rondes, carrées ou circulaires par des icones plus graphiques.
Préparez une liste
Avant tout, il nous faut une liste !
Insérez donc un module Texte et ajoutez du contenu en liste en cliquant sur l’icone de liste non-ordonnée.
Vous pouvez, si vous le souhaitez, apporter déjà quelques modifications au style de votre liste (corps du texte, couleur…) en allant dans l’onglet Style de votre module Texte, puis en choisissant l’onglet correspondant aux listes non-ordonnées.
Remplacez les puces des listes par des icones
Quand je fais ce genre de petite personnalisation, j’aime bien utiliser des éléments déjà présents dans Divi.
En l’occurence, je veux parler de la police ET Modules, la police d’icones d’Elegant Themes qui sert déjà en de nombreux endroits dans le thème (par exemple pour les icones des blurbs (module Résumé) ou encore les icones qui s’affichent en superposition des images, etc.).
Si vraiment vous ne trouvez pas votre bonheur parmi les 360 icones proposés par cette police, libre à vous d’utiliser par exemple FontAwesome ou une autre police d’icones.
Ci-dessous les CSS dont nous allons avoir besoin.
Vous voulez savoir où insérer ce code CSS ? Lisez notre article 7 manières d’ajouter des CSS à Divi.
Détaillons ce code
- Lignes 1 et 5 :
- la classe .et_pb_text cible les modules Texte qui accueillent les listes.
Notez qu’on pourrait très bien utiliser directementul lisans préciser de classe, ce qui aurait pour but de cibler toutes les listes non-ordonnées du site.
En ce qui me concerne, je préfère être précis dans mon ciblage pour éviter d’avoir des surprises par la suite…
Si vous avez des difficultés à trouver la bonne classe, la lecture notre article Utiliser les outils de développement du navigateur pourrait vous être utile. - Si par exemple vous ne souhaitez personnaliser les puces que d’une seule liste :
- ajoutez une classe au module Texte dans lequel se trouve votre liste (Avancé -> ID et classes CSS -> Classe CSS)
- remplacez dans le code CSS ci-dessus la classe .et_pb_text par la classe que vous aurez choisie
- Si vous souhaitez personnaliser les puces présentes dans vos articles qui n’utilisent pas le Divi Builder, remplacez .et_pb_text par .et_pb_post
- la classe .et_pb_text cible les modules Texte qui accueillent les listes.
- Ligne 2 : on supprime les puces des listes non-ordonnées ciblées
- Ligne 5 : on ajoute une pseudo-classe :before pour insérer nos puces personnalisées avant les éléments de la liste
- Ligne 6 : on choisit la police d’icones d’Elegant Themes
- Ligne 7 : on sélectionne un caractère (ici une coche dans un cercle)
Sur cette page du site d’Elegant Themes, vous retrouverez tous les icones disponibles et leur entité HTML correspondante.
Notez juste qu’il vous faudra modifier légèrement ce code pour qu’il soit fonctionnel en CSS.
Si je reprends l’exemple de l’icone que j’ai utilisé, son entité HTML listée sur la page est R
Il faut juste remplacer&#xpar un\et supprimer le;pour le convertir en un Unicode utilisable en CSS. - Ligne 8 (optionnel) : j’ai légèrement agrandi la taille de l’icone
- Ligne 9 : on donne un couleur à notre icone
- Ligne 10 : on le place l’icone à gauche
- Ligne 11 et 12 : on joue sur les marges gauche et droite pour ajuster la position de l’icone par rapport au bord gauche du module Texte et l’élément de la liste
Vous obtenez donc le résultat suivant :
Pour aller plus loin
Quand on utilise des listes à puces, il faut pouvoir gérer les différents niveaux d’une liste.
Vous pouvez donc ajouter au code précédent les lignes suivantes qui gèrent 2 niveaux supplémentaires de listes.
Vous obtenez donc le résultat suivant :
En conclusion
Nous venons de voir que changer les icones des listes à puces dans Divi est une manipulation facile à réaliser en CSS.
Elle permet également d’apporter à son site une plus-value graphique non négligeable.
Avec les possibilités quasi infinies offertes par CSS, on peut même par exemple imaginer des puces animées afin de dynamiser encore plus son interface graphique.
cela ne marche pas ou plus.. j’avais essayer une fois et ça marchait très bien mais là.. ça n’affiche aucun changement ou bien une erreur de code..
Bonjour Laura, revérifie tes CSS, il doit y avoir une erreur quelque part. 😉
Bonjour, même chose pour moi, j’ai simplement c/c le code ci dessus, d’abord dans le custom css du module texte > “expected RBRACE” sous la ligne 1 puis “unexpected token “}” à la fin du bloc.
Puis j’ai c/c dans le custom css de la page, et là j’obtiens bien les icônes mais impossible de changer les icônes des niveaux 2 et 3, tous mes niveaux ont le content attribué au niveau 1.
Autre bizarrerie, le \ de mon content(\e052)disparait intempestivement… du coup je me retrouve avec 4 icônes..
Si vous avez une idée, un avis, une remarque, je suis preneur, je lutte depuis des heures sur ce truc..
Bonjour Nico,
tout d’abord, il n’est pas possible d’ajouter ces CSS dans les CSS persos d’un module, car on ne peut y spécifier d’identifiant ou de classe étant donné que le sélecteur est déjà défini par le module lui-même. D’où la première erreur que tu as obtenu.
Ensuite, pour l’icone que tu souhaites, as-tu bien saisi content:”\e052″; ?
Si tu veux en discuter plus en détails, je t’invite à nous rejoindre sur notre groupe d’entre-aide Facebook où nous serons plus à l’aise pour en parler. 🙂
Merci pour l’explication : c’est vraiment très bien détaillé et m’a été bien utile, depuis le temps que je voulais modifier les puces standard de Divi !
Merci beaucoup pour ce tuto. c’est très clair même pour moi qui ne suis pas développeuse et ça a bien fonctionné.
j’ai un module “Appel à l’action” dans lequel j’ai une liste à puce, et j’aimerais l’harmoniser avec le reste des listes sur mon site.
est-ce que c’est possible ? j’ai tenté de d’utiliser votre code en remplaçant “.et_pb_text” en “.et_pb_cta”, et ce directement dans le css du module (j’ai tenté dans élément principal), mais j’ai été retoquée dès la saisie du code.
je vous remercie par avance
Hello, essaye de le mettre dans Apparence->Personnaliser ou dans le fichier style.css de ton thème enfant. Tu as une URL à nous montrer?
Bonjour Julien.
Merci beaucoup pour votre réponse.
je n’ai pas encore d’url, je travaille pour l’instant en local. Je vais tenter ce que vous conseillez dans le “apparence > personnaliser” (en revanche, je n’utilise pas de thème enfant, je vais vite aller voir vos articles sur le sujet pour voir pourquoi et comment faire). Si je n’ai pas réussi, je mettrai en ligne comme ça, et je me permettrai de revenir vers vous avec une url.
Merci pour ce tuto. Top !
ça fonctionne très bien, jusque pour la seconde ligne, le style est en inside.
C’est à dire que lorsque le texte de la puce est long, il va en dessous mais ne s’aligne pas avec le premier mot.
Peut-être une solution ?
Merci 😉
Julien
Regarde pour ajouter sur .et_pb_text ul li une règle text-indent avec une valeur négative.
Note qu’il faudra certainement réajuster les marges de .et_pb_text ul li::before.
Merci Pierre.
ça fonctionne avec text-indent : -0.3em;
Super 😉
Julien
Bonjour et merci pour votre tuto.
J’ai bien copié tous vos codes dans divi – apparence – personnaliser – css additionnel.
Pour ce qui est de la première partie ça fonctionne bien mais je ne sais pas ce qu’il faut faire pour accéder aux niveaux inférieurs.
Je veux dire, quelle touche du clavier utiliser pour indiquer qu’on veut aller à un niveau inférieur ?
C’est sans doute basique et je m’en excuse mais je vous remercie par avance pour votre réponse.
Bonne journée.
Dans ton module “texte”, dans la barre d’outils au-dessus du champ de saisie de texte, c’est le 6e icone en partant de la fin.
Rebonjour et désolée pour ma question mais de la poser m’a donné l’inspiration de suite après.
La touche Tab bien évidemment, la fatigue sans doute !
Avec mes excuses et merci encore.
Bonjour Pierre,
Merci beaucoup pour ce tutoriel.
Ce système a bien fonctionné jusqu’à la nouvelle version de WordPress de novembre 2021. Depuis, les puces n’apparaissent plus sur mon site.
Est ce que vous êtes au courant de ce problème ?
Merci de votre attention.
J’ai encore utilisé ce principe cette semaine sans problème.
Je te suggère de vérifier tes CSS et de voir s’il n’y a pas un souci cache. 😉