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.

Insérer une liste dans un module "Texte" dans Divi

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.

Styler une liste dans le Divi Builder

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“.

.et_pb_text ul li {
    list-style-type: none;
}

.et_pb_text ul li::before {
    font-family: 'ETmodules';
    content: "\52";
    font-size: 120%;
    color: #cc692f;
    float: left;
    margin-left: -1em;
    margin-right: 0.5em;
}

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 directement ul li sans 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
  • 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 &#x par 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 :

Une liste dans Divi avec les puces remplacées par des icones

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.

/* Deuxième niveau de liste */
.et_pb_text ul li ul li:before {
    color:#36c0d5;
    content:"\4c";
}

/* Troisième niveau de liste */
.et_pb_text ul li ul li ul li:before {
    color:#a478fb;
    content:"\4b";
}

/* Ajustement de l'espacement entre les niveaux de listes */
.et_pb_text ul li ul, 
.et_pb_text ul li ul li ul {
    margin-bottom:-1em;
}

Vous obtenez donc le résultat suivant :

Une liste à plusieurs niveaux dans Divi avec les puces remplacées par des icones

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.

 

D'autres tutoriels pouvant vous intéresser: