Comment créer et personnaliser une liste sur Webflow

Comment créer et personnaliser une liste sur Webflow

Résumez cet article avec une IA
min
de lecture
Publié le
July 6, 2021
Mis à jour le
This is some text inside of a div block.
Et si on bossait ensemble ?
+ 350 projets réalisés
100% de satisfaction
Éligibles CII
Devis gratuit

L'élément List peut être utilisé pour créer des listes numérotées ou à puces.

Créer la liste

Pour ajouter une liste à votre projet, cliquez sur le panneau d'ajout d'éléments et faites glisser une liste sur le canevas.

En fonction des paramètres, l'élément de liste principal sera une liste non ordonnée (à puces) ou une liste ordonnée (numérotée). Par défaut, la liste n'est pas ordonnée, ce qui entraîne l'affichage de puces à gauche de chaque élément de la liste.

Vous pouvez passer d'une liste ordonnée à une liste non ordonnée en allant dans les paramètres de la liste, mais aussi supprimer les puces. Pour ce faire, vous pouvez au choix :

  • Sélectionnez la liste et appuyer sur ENTRER
  • ou
  • Sélectionnez la liste et allez dans l'onglet Settings (Paramètres) du panneau de style
créer une liste sur Webflow

Styliser la liste

L'élément Liste principal peut être stylisé en créant une classe ou en stylisant la balise elle même (HTML Tag). Lorsque vous attribuez un style à la balise All ordered lists ou All unordered lists, vous définissez le style par défaut de ces éléments dans l'ensemble de votre projet.

Comme toujours, pour styliser votre élément, allez dans l'onglet style du panneau à gauche de votre canevas et faites vos choix !

Bien sûr, vous êtes également libres de styliser les éléments Contenus dans la liste.

personnaliser une liste sur Webflow
Besoin d'aide ?
Contactez un expert
Ça s'agite là-bas dedans ?

Vos questions,
nos réponses !

Comment changer le style des puces ou numéros dans une liste Webflow ?

Dans Settings, changez le List Type : disc, circle, square... ou supprimez-les complètement avec 'None'. Pour du custom, ajoutez List Type: None puis créez vos propres puces avec des icônes ou du CSS custom. Soyez créatif !

Comment créer une liste horizontale dans Webflow ?

Transformez votre liste verticale en horizontale : sélectionnez la List, Display > Flex, Direction > Row. Supprimez les puces (List Type: None) et ajoutez des marges. Parfait pour créer des menus de navigation ou des listes de tags !

Peut-on imbriquer des listes dans Webflow et comment les styliser ?

Absolument ! Glissez une nouvelle List dans un List Item pour créer des sous-listes. Stylisez chaque niveau avec des classes différentes. Pro tip : utilisez des marges croissantes pour chaque niveau, ça crée une belle hiérarchie visuelle.

Ma question est plus complexe ?

Réserver un call avec un expert
Contactez NocodeFactory
Assez parlé,
à vous de jouer !
🥳 Estimation gratuite !
Merci ! Votre message a bien été envoyé 🥳
😿 Une erreur est survenue. Merci de recommencer
+ 350 projets
déjà réalisés