Paramètres des cookies

En cliquant sur « Accepter », vous acceptez le stockage de cookies sur votre appareil afin d'améliorer la navigation sur le site, d'analyser l'utilisation du site et de contribuer à nos efforts de marketing. Consultez notre politique de confidentialité pour plus d'informations.

Accepter
Préferences

Personnaliser une liste à puces (list item) sur webflow

Tutoriel
3 min
Publié le Jul 19, 2022
Dernière mise à jour le
Webflow tuto avec icône power jaune
Résumez cet article avec une IA
ChatGPT
Claude
Grok
Perplexity
Google AI
Points clés de l'article

Les listes à puces (ou bullet point) sont des éléments très intéressants à mettre sur un site web. Elles permettent :

  • Mettre en évidence l'information
  • Structurer l'information
  • Simplifier la lecture et la compréhension de l'information

Sur Webflow, il est tout à fait possible d'ajouter des listes à puces dans son projet ou même d'en insérer dans des rich text (pour des articles de blog par exemple). Cependant, les possibilités de design nativement dans Webflow sont limitées pour ces éléments.

Dans notre tutoriel, nous allons vous montrer comment changer le style de vos listes à puces en changeant le point par l'image que vous souhaitez !

Étape 1 : Ajoutez une liste à puces dans Webflow

La première étape de ce tutoriel va consister à insérer l'élément "List" dans votre projet. Vous allez devoir donner une classe à cette liste à puces.  

Si vous souhaitez personnaliser l'apparence des listes à puces dans vos rich text, vous pouvez vous rendre dans votre style guide ou insérer un élément rich text à qui vous allez donner une classe.

Rich Text list à puces webflow

Étape 2 : Uploadez votre fichier média dans Webflow

En parallèle, vous pouvez ajouter dans vos assets (bibliothèque Webflow), le fichier média qui remplacera les points habituels de la liste à puces.

Assets details webflow

Étape 3 : Ajoutez le code suivant dans votre projet

Vous allez maintenant venir insérer le code suivant.

Si la personnalisation se fait pour un élément list :

<style>
ul.nom-de-votre-classe {
  list-style-type: none;
}

ul.nom-de-votre-classe li:before {  
  content: '';
  display: inline-block;
  height: 10px;
  width: 10px;
  background-size: 10px;
  background-image: url("lien-de-votre-fichier-média");
  background-repeat: no-repeat;
  margin-right: 10px;
  }
</style>

Si la personnalisation se fait pour un rich text :

<style>
.nom-de-votre-classe ul {
  list-style-type: none;
}

.nom-de-votre-classe ul li:before {  
  content: '';
  display: inline-block;
  height: 10px;
  width: 10px;
  background-size: 10px;
  background-image: url("lien-de-votre-fichier-média");
  background-repeat: no-repeat;
  margin-right: 10px;
  }
</style>

Vous pouvez ajouter ce code dans la partie dans la partie head (Inside <!-- fs-richtext-ignore --><head> tag).

Étape 4 : Personnalisez le code en fonction de votre projet

Maintenant, vous n'avez plus qu'à modifier 2 parties du code ci-dessus. Tout d'abord, il faudra remplacer "nom-de-votre-classe" (après ul. si élément list ou avant ul si rich text) par le nom de la classe de votre élément "List" ou de votre Rich Text. Si vous souhaitez que toutes les listes à puces de votre site utilisent le même fichier média, vous pouvez supprimer la partie du code suivante : ".nom-de-votre-classe".

Ensuite, vous devrez remplacer "lien-de-votre-fichier-média" par le lien de votre fichier média. Il est possible de récupérer le lien directement depuis les assets en cliquant sur l'icône de maillage.

Vous pouvez bien entendu modifier les autres paramètres CSS à votre convenance.

code personnalisé pour personnaliser style liste à puces

Étape 5 : Publiez votre projet

Lorsque toutes ces étapes ont été réalisées, vous pouvez publier votre projet pour voir le rendu en live. En effet, vous ne pourrez pas voir le rendu directement dans Webflow sauf si vous mettez le code dans un élément embed Webflow.

Liste à puces personnalisée sur site Webflow

Voilà, vous pouvez maintenant personnaliser vos listes à puces (bullet point) dans Webflow et transmettre une information claire. Pour d'autres tutoriel Webflow, restez connectés !

Thibaut Legrand
Thibaut Legrand
Technical Solutions Architect & Webflow Expert

Articles qui devraient vous intéresser

Entrée principale de VivaTech 2026 à Paris avec l’affiche officielle célébrant les 10 ans de l’événement, considéré comme le plus grand salon européen dédié à la technologie et à l’innovation.
Evénements

VivaTech : deux jours au coeur de la tech Européenne

VivaTech : deux jours au coeur de la tech Européenne
Vue générale de la scène de 2036 by Yuri & Neil, réunissant plus de 400 décideurs marketing autour du futur du rôle du CMO à l’ère de l’intelligence artificielle.
Evénements
IA

Retour sur notre participation à 2036, l’événement marketing des CMO par Yuri & Neil

Retour sur notre participation à 2036, l’événement marketing des CMO par Yuri & Neil
Participants networking during flowConf 2026 in Belgrade, a European conference focused on the future of web, Webflow, and AI, inside a modern industrial venue featuring “Future of Web Unpacked” banners.
Evénements

L’édition 2026 de la flowConf incarne bien le tournant de l’écosystème Web(flow) européen.

L’édition 2026 de la flowConf incarne bien le tournant de l’écosystème Web(flow) européen.
Voir tous les articles

Transformez votre site web en un moteur de croissance.

Nous contacter