Le bloc Liste vous permet de créer des listes à base d'icônes pour mettre en évidence les fonctionnalités, les avantages ou tout ensemble d'éléments de votre page. Chaque élément de la liste combine une icône personnalisable avec du texte enrichi, vous offrant ainsi un contrôle total sur la présentation de votre contenu.
Que vous présentiez les caractéristiques d'un produit, résumiez les points clés ou établissiez une liste comparative, le bloc Liste vous permet de créer facilement des listes visuellement attrayantes qui correspondent à votre marque, sans aucun codage.
Ajouter le bloc Liste à vos pages
Suivez ces étapes pour ajouter un bloc Liste à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, glissez-déposez le bloc Liste dans la section souhaitée de votre page.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc Liste pour ouvrir ses paramètres. Dans l'onglet Contenu, créez les éléments de votre liste et configurez son apparence générale.
Liste :
- Éléments : chaque élément de la liste comporte une icône et un champ de texte. Cliquez sur un élément pour développer ses paramètres et modifier le texte (à l'aide de l'éditeur de texte enrichi pour mettre en gras, en italique, ajouter des liens, etc.) et choisir une icône à l'aide du sélecteur d'icônes. Vous pouvez faire glisser les éléments pour les réorganiser, dupliquer un élément ou le supprimer.
- Ajouter un nouvel élément : cliquez sur ce bouton pour ajouter un autre élément à votre liste.
- Couleur des icônes : définissez la couleur appliquée à toutes les icônes de la liste.
- Taille de la police : contrôlez la taille du texte pour tous les éléments de la liste, de 10 px à 72 px.
- Espace entre : ajustez l'espacement entre les éléments de la liste. Prend en charge les valeurs par appareil pour les ordinateurs de bureau, les tablettes et les mobiles.
- Alignement : définissez l'alignement horizontal de la liste : à gauche, au centre ou à droite. Prend en charge l'alignement par appareil.
Étape 3 : Personnalisez le design
Dans l'onglet Avancé, vous pouvez personnaliser l'apparence visuelle de votre bloc Liste.
Styles :
- Disposition de la liste : choisissez entre Vertical (éléments empilés les uns sur les autres) ou Horizontal (éléments affichés côte à côte).
- Typographie : personnalisez la police, le poids, la taille, l'interligne, l'espacement des lettres et la transformation du texte de votre liste.
- Couleur du texte : définissez la couleur du texte des éléments de la liste.
- Ombre du texte : ajoutez une ombre au texte de votre liste. Choisissez parmi Aucune, Très fine, Petite, Moyenne, Grande, Très grande ou 2 fois plus grande.
Espacement :
- Marge : contrôlez l'espacement extérieur autour de votre bloc Liste (haut, droite, bas, gauche).
- Remplissage : ajustez l'espacement intérieur de votre bloc Liste (haut, droite, bas, gauche). Prend en charge les valeurs par appareil pour les ordinateurs de bureau, les tablettes et les mobiles.
Attributs :
- CSS ID : Affiche l'identifiant unique généré automatiquement pour votre bloc Liste, créé automatiquement par SeedProd pour un style personnalisé ou un ciblage JavaScript.
- Classe personnalisée : ajoutez des classes CSS personnalisées pour appliquer des styles spécifiques à partir de votre thème ou de votre CSS personnalisé.
- Attributs personnalisés : ajoutez tous les attributs HTML à l'élément conteneur de la liste. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-de-l'attribut|valeur.
Visibilité des appareils :
- Masquer sur le bureau : masque le bloc Liste sur les écrans de bureau.
- Masquer sur tablette : masque le bloc Liste sur les tablettes.
- Masquer sur mobile : masquer le bloc Liste sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : choisissez un effet d'animation qui s'affiche lorsque le bloc Liste apparaît à l'écran, tel que Rebondir, Fondu en entrée, Zoom avant, Rotation vers l'intérieur, et bien d'autres encore.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc Liste et de personnaliser son apparence, veillez à enregistrer votre travail.
Vous avez ajouté avec succès un bloc Liste à votre page ! Le bloc Liste est un moyen polyvalent de présenter des fonctionnalités, des avantages ou tout autre ensemble d'éléments dans un format visuellement attrayant. Testez différentes icônes, mises en page, couleurs et polices pour créer une liste qui s'intègre parfaitement à votre page.