Le bloc Barre de Progression vous permet d'ajouter des barres de progression animées et visuelles à n'importe quelle page SeedProd. Que vous souhaitiez mettre en évidence un objectif de collecte de fonds, afficher des niveaux de compétences, montrer l'achèvement d'une campagne ou communiquer toute métrique basée sur un pourcentage, ce bloc facilite la présentation de ces informations de manière claire et attrayante.
Chaque barre de progression est entièrement personnalisable — définissez le texte de l'étiquette, le pourcentage de progression et la couleur de la barre dans l'onglet Contenu, choisissez parmi quatre modèles de style prédéfinis, puis affinez la typographie, la couleur d'arrière-plan, le rayon des bordures et les effets d'ombre dans l'onglet Avancé. Le bloc comprend également des contrôles d'espacement et de visibilité par appareil afin que vos barres de progression s'affichent parfaitement sur toutes les tailles d'écran.
Ajouter le bloc Barre de Progression à vos pages
Suivez ces étapes pour ajouter un bloc Barre de Progression à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, faites glisser et déposez le bloc Barre de Progression dans la section souhaitée de votre page.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc Barre de Progression pour ouvrir ses paramètres. Dans l'onglet Contenu, la section Barre de Progression vous permet de définir l'étiquette, le pourcentage et la couleur de remplissage de la barre.
- Texte de la barre : Entrez l'étiquette affichée à l'intérieur de la partie remplie de la barre de progression (par exemple, « 75 % Terminé », « Objectif de financement » ou un nom de compétence). Ce texte se superpose au remplissage de la barre, de sorte que les visiteurs voient immédiatement ce que représente la progression.
- Pourcentage : Définissez le niveau de remplissage de la barre à l'aide du curseur (0-100). Cette valeur contrôle la quantité de la barre qui est visuellement remplie et représente le pourcentage de progression affiché aux visiteurs.
- Couleur : Définissez la couleur de remplissage de la barre. Cette couleur s'applique à la partie remplie (progression) de la barre, tandis que la couleur d'arrière-plan non remplie est définie séparément dans l'onglet Avancé.
Étape 2a : Choisir un style de modèle
Dans l'onglet Modèles, vous pouvez choisir parmi des styles de barres de progression prédéfinis pour modifier rapidement l'apparence générale de votre barre.
- Modèles de style : Choisissez parmi 4 conceptions de modèles différentes, chacune avec un style visuel et un traitement de couleur uniques. Cliquez sur n'importe quel modèle pour l'appliquer instantanément — vous pouvez toujours revenir aux onglets Contenu et Avancé pour apporter des ajustements supplémentaires après avoir sélectionné un style.
Étape 3 : Personnaliser le design
Dans l'onglet Avancé, vous pouvez affiner l'apparence de votre barre de progression avec la typographie, les couleurs, les effets d'ombre, et plus encore.
Styles :
- Typographie : Définissez la famille de polices, la taille, le poids, la hauteur de ligne, l'espacement des lettres et la transformation du texte pour le texte de l'étiquette de la barre.
- Couleur d'arrière-plan : Définissez la couleur de la partie non remplie (piste) de la barre de progression — l'arrière-plan visible derrière la section remplie. Par défaut, gris clair (
#F7F7F7). - Rayon de bordure : Définissez l'arrondi des coins pour la piste de la barre et le remplissage (0-25px). Augmentez cette valeur pour créer une barre en forme de pilule ou entièrement arrondie.
- Ombre du texte : Ajoutez un effet d'ombre au texte de l'étiquette de la barre. Choisissez parmi des tailles prédéfinies (Aucune, Cheveux, Petite, Moyenne, Grande, Très grande, 2X grande) pour ajouter de la profondeur ou rendre l'étiquette plus lisible par rapport à la couleur de la barre.
- Ombre : Ajoutez une ombre portée à l'élément de la barre de progression global pour lui donner un sentiment de profondeur et de séparation par rapport à l'arrière-plan de la page.
Espacement :
- Marge : Contrôlez l'espacement extérieur autour de votre bloc Barre de progression (Haut, Droite, Bas, Gauche). Cela détermine l'espace qui apparaît entre la barre et les éléments environnants sur la page.
- Rembourrage : Ajustez l'espacement intérieur de votre bloc Barre de progression (Haut, Droite, Bas, Gauche). Cela crée un espace entre la barre et les bords du bloc.
Attributs :
- ID CSS : Affiche l'identifiant unique généré automatiquement pour votre bloc Barre de progression. Cet ID est 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 des attributs HTML à l'élément enveloppant du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-attribut|valeur (par exemple, data-progress|75).
Visibilité de l'appareil :
- Masquer sur ordinateur : Masquez le bloc Barre de progression sur les écrans d'ordinateur.
- Masquer sur tablette : Masquez le bloc Barre de progression sur les appareils tablettes.
- Masquer sur mobile : Masquez le bloc Barre de progression sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : Choisissez parmi divers effets d'animation qui se jouent lorsque le bloc Barre de progression défile dans la vue. Les options incluent Rebondir, Fondu, Zoom avant, Rotation avant, et bien d'autres — idéal pour attirer l'attention sur une métrique importante lorsque les visiteurs font défiler votre page.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc Barre de progression et de personnaliser son apparence, assurez-vous de sauvegarder votre travail.
Vous avez ajouté avec succès un bloc Barre de progression à votre page ! Les barres de progression sont un moyen puissant de communiquer en un coup d'œil l'achèvement, les niveaux de compétence, les objectifs de collecte de fonds ou toute métrique basée sur un pourcentage. Expérimentez avec différents styles de modèles, couleurs de remplissage, valeurs de rayon de bordure et animations d'entrée pour créer des barres de progression qui attirent l'attention et renforcent le message de votre page.