comment modifier les listes à puces sur Squarespace ?

La différence entre un site “meh” et un site “wow” ? Tout se joue dans les détails. Dans le tutoriel du jour, je vous explique comment changer simplement, avec quelques lignes de code CSS, les listes à puces de votre site Squarespace.

pourquoi modifier les listes à puces dans Squarespace ?

Les listes à puces peuvent sembler être un infime détail de votre site web… mais elles jouent un rôle crucial dans l'expérience de vos visiteurs. La manière dont l'information est présentée impacte directement la lisibilité et la compréhension générale de votre contenu.

Si on ne veut jamais présenter les bénéfices de son offre en mode “liste à puces” 😉 il faut admettre qu’elles sont parfois - souvent - indispensables pour structurer le contenu d’une page web.

Une liste à puces bien structurée rend la lecture plus fluide, permettant aux visiteurs de saisir rapidement les informations essentielles. Elles créent également un “rythme” visuel, invitant vos visiteurs à poursuivre leur lecture…

le code à utiliser pour modifier vos listes à puces :

ul[data-rte-list] li>*:first-child::before { 
content: "\2022"; /* Ajout unicode */ 
color: #F1B846; /* Couleur */ 
font-weight: 900; /* Gras */
}

le code à utiliser pour modifier la marge (à ajuster) :

ul[data-rte-list] { 
margin-left: -1rem;
} /* Marge */

plus d’articles autour
du code CSS et Squarespace

Webdesigner et consultante Squarespace, j’accompagne et je crée pour mes clients des sites intelligents, stratégiques et haut de gamme. On travaille ensemble ?

Personnalisez en quelques clics et copier-coller votre site Squarespace : intégrer votre police, personnaliser les cookies… sans apprendre à coder !