Le Bloc Liste vous permet de créer des listes basées sur des icônes pour mettre en avant des fonctionnalités, des avantages ou tout ensemble d'éléments sur votre page. Chaque élément de liste combine une icône personnalisable avec du texte enrichi, vous donnant un contrôle total sur la présentation de votre contenu.
Que vous présentiez les fonctionnalités d'un produit, résumiez des points clés ou construisiez une liste de comparaison, le Bloc Liste facilite la création de 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, faites glisser et 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 vos éléments de liste et configurez l'apparence générale.
Liste :
- Éléments : Chaque élément de liste possède une icône et un champ de texte. Cliquez sur un élément pour développer ses paramètres et modifier le Texte (en utilisant l'éditeur de texte enrichi pour le gras, l'italique, les liens, et plus encore) 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 de l'icône : 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 liste, de 10px à 72px.
- Espace entre : Ajustez l'espacement entre les éléments de liste. Prend en charge les valeurs par appareil pour ordinateur, tablette et mobile.
- Alignement : Définissez l'alignement horizontal de la liste — Gauche, Centre ou Droite. Prend en charge l'alignement par appareil.
Étape 3 : Personnaliser 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 en ligne côte à côte).
- Typographie : Personnalisez la famille de polices, le poids, la taille, la hauteur de ligne, l'espacement des lettres et la transformation du texte pour le texte de votre liste.
- Couleur du texte : Définissez la couleur du texte des éléments de liste.
- Ombre du texte : Ajoutez une ombre à votre texte de liste. Choisissez parmi Aucune, Cheveu, Petite, Moyenne, Grande, Très grande ou Extrêmement grande.
Espacement :
- Marge : Contrôlez l'espacement extérieur autour de votre Bloc Liste (Haut, Droite, Bas, Gauche).
- Rembourrage : Ajustez l'espacement intérieur de votre Bloc Liste (Haut, Droite, Bas, Gauche). Prend en charge les valeurs par appareil pour ordinateur, tablette et mobile.
Attributs :
- ID CSS : 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 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-attribut|valeur.
Visibilité de l'appareil :
- Masquer sur ordinateur : Masquer le bloc Liste sur les écrans d'ordinateur.
- Masquer sur tablette : Masquer le bloc Liste sur les appareils 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 se joue lorsque le bloc Liste apparaît à l'écran, tel que Rebondir, Fondu, Zoom avant, Rotation avant, et bien d'autres.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc Liste et de personnaliser son apparence, assurez-vous de sauvegarder 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 ensemble de points dans un format visuellement attrayant. Expérimentez avec différentes icônes, mises en page, couleurs et typographies pour créer une liste qui correspond parfaitement à votre page.