Comment styliser les bullet point dans Webflow ?

Pourquoi personnaliser les bullet points ?

Dans Webflow, il est tout à fait possible de personnaliser les puces d’une liste afin de sortir du style par défaut et donner une identité visuelle parfaitement adaptée à la charte graphique de ton client.

Les listes désordonnées, aussi appelées liste à puces n’offrent pas d’option de personnalisation. Afin de parfaire le branding et d'appliquer la charte graphique dans les détails vous aller devoir personnaliser les liste à puces de votre site ou blog. Pour créer une tonalité légère voire fun avec des emojis. Certain textes ont parfois besoin d'être stylisés pour renforcer la compréhension du contenu avec des symboles plus évocateurs et plus précis.

Comment modifier les bullet points ?

Pour personnaliser une liste, deux options sont possibles :

1. Modifier la couleur
2. Remplacer les puces par un autre symbole

Pour modifier les bullet points des articles d'un blog, il faut ajouter le code ci-dessous :

 <style>
ul {
  list-style: none;
}

ul li::before {
  content: "\2022";
  color: #617fd8;
  display: inline-block;
  margin-left: -1em;
}
</style>

Ce code CSS se compose ainsi :

• list-style: none; : supprime le style par défaut de Webflow
• ul li::before : ce sélecteur cible les éléments <li> à l'intérieur des listes <ul>
• content: " "; : définit le contenu inséré avant chaque élément de liste

Ensuite, vous pouvez ajouter les éléments de style CSS pour peaufiner vos bullets points : couleur, position, etc.

J'ai laissé le caractère Uniccode du bullet point : "\2022". L'aspect graphique de la puce est variable suivant la font utilisée.

Remplacer des bullet points par des symboles ou des emojis

Si jouer avec la couleur et certaines propriétés ne répond pas entièrement à la demande du client, alors on peut remplacer la puce par un autre symbole ou un emojis.

Pour retrouver tous les symboles et tous les emojis il suffit d'aller sur Symbl. Retrouver des Emojis, des flèches, des étoiles, des alphabets, symboles.... inspirant catalogue.

Pour chaque élément, il y a un aperçu selon le navigateur, plateforme ou device. Toutes les Information techniques sont facilement accessibles : il suffit alors de copier le code CSS pour renseigner content " ".
Si le navigateur Mozilla ne prend pas en compte un emoji alors il est remplacé par la puce de base.

‍

Et avec les custom properties de Webflow c'est possible ?

Que ce soit pour un simple élément texte ou un bloc issu du CMS via un Rich Text, il suffit

1. d’importer l’icône souhaitée
2. de copier son URL
3. et de l’intégrer en CSS avec la propriété list-style-image

‍
Pense bien à supprimer les puces natives grâce à : list-style-type: ""
puis en appelant votre propre icône, vos listes prennent immédiatement un aspect unique et professionnel.
‍

Dans custom properties copier/coller :
list-style-type: none;
list-style-image: url("https://cdn.prod.website-files.com/bullet-rich-text.svg");

Cette technique fonctionne aussi bien pour homogénéiser l’apparence de toutes vos listes que pour styliser uniquement un composant précis.
Résultat : une meilleure cohérence graphique et une expérience utilisateur optimisée directement dans Webflow.

‍

‍

‍