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 avant un objectif de collecte de fonds, afficher des niveaux de compétence, montrer l'avancement d'une campagne ou communiquer des indicateurs basés sur des pourcentages, ce bloc vous permet de présenter facilement 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êts à l'emploi, puis affinez la typographie, la couleur d'arrière-plan, le rayon de la bordure 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, glissez-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 le libellé, le pourcentage et la couleur de remplissage de la barre.
- Texte de la barre : saisissez le libellé qui s'affiche dans la partie remplie de la barre de progression (par exemple, « 75 % terminé », « Objectif de financement » ou le nom d'une compétence). Ce texte recouvre le remplissage de la barre afin 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 partie 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 : Choisissez 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 modèles différents, chacun avec un style visuel et des couleurs uniques. Cliquez sur n'importe quel modèle pour l'appliquer instantanément. Vous pouvez toujours revenir aux onglets Contenu et Avancé pour effectuer d'autres ajustements après avoir sélectionné un style.
Étape 3 : Personnalisez le design
Dans l'onglet Avancé, vous pouvez affiner l'apparence de votre barre de progression à l'aide de la typographie, des couleurs, des effets d'ombre, etc.
Styles :
- Typographie : définissez la police, 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éfinit la couleur de la partie non remplie (piste) de la barre de progression, c'est-à-dire l'arrière-plan visible derrière la section remplie. La valeur par défaut est un gris clair (
#F7F7F7). - Rayon de bordure : définissez l'arrondi des coins pour la piste de barre et le remplissage (0-25 px). 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 les tailles prédéfinies (Aucune, Très fine, Petite, Moyenne, Grande, Très grande, 2 fois plus 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 global de la barre de progression afin de lui donner un effet de profondeur et de le séparer de 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.
- Remplissage : ajustez l'espacement intérieur dans 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 le personnalisation du style ou le 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 n'importe quel attribut HTML à l'élément conteneur du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-de-l'attribut|valeur (par exemple, data-progress|75).
Visibilité des appareils :
- Masquer sur le bureau : masque le bloc Barre de progression sur les écrans de bureau.
- Masquer sur tablette : masque le bloc Barre de progression sur les tablettes.
- Masquer sur mobile : masque le bloc Barre de progression sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : choisissez parmi divers effets d'animation qui s'affichent lorsque le bloc de la barre de progression apparaît à l'écran. Les options comprennent Rebond, Fondu entrant, Zoom avant, Rotation entrante et bien d'autres encore. Elles sont idéales pour attirer l'attention sur un indicateur important 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, veillez à enregistrer votre travail.
Vous avez ajouté avec succès un bloc Barre de progression à votre page ! Les barres de progression sont un moyen efficace de communiquer en un coup d'œil l'état d'avancement, les niveaux de compétence, les objectifs de collecte de fonds ou toute autre mesure basée sur un pourcentage. Testez 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.