Ajouter une barre de progression.

Vous obtenez une barre colorée avec un libellé qui montre d’un coup d’œil l’avancement de quelque chose. Utilisez-la pour l’état d’un projet, des objectifs de collecte, la progression d’un cours ou des niveaux de compétence.

Ajouter une barre de progression

Ouvrez votre page une fois la session ouverte : les commandes du constructeur apparaissent au survol de la zone de contenu. Votre première page présente les bases.

1. Survolez la colonne et cliquez sur + dans sa barre de contrôle, ou cliquez sur Ajouter des éléments sur une page vide. Ouvrez l’onglet Contenu et cliquez sur Barre de progression. L’élément apparaît en haut de la colonne et sa boîte de dialogue de paramètres s’ouvre.
2. Saisissez un Label pour la barre, par exemple « Website redesign ».
3. Faites glisser Progress pour définir le remplissage de la barre, ou saisissez la valeur dans la case à côté du curseur. Ici, nous choisissons 73 pour cent.
4. Choisissez une Front color pour la partie remplie dans la palette.
5. Plus bas dans la même boîte de dialogue, choisissez si la barre reçoit des Stripes. Ici, nous cochons Add striped pattern to bar.
6. Cliquez sur Enregistrer dans la boîte de dialogue, puis sur Enregistrer dans la barre d’outils en haut de la zone de contenu pour stocker la page.

Ce que vous voyez

Une barre avec votre libellé se remplit jusqu’à la valeur définie, dans la couleur choisie. Le libellé se trouve dans la partie remplie. Dans la vidéo, la barre à rayures affiche Website redesign et remplit 73 % de sa piste. Les visiteurs la voient une fois la page enregistrée et publiée.

Configurer votre barre de progression

Survolez l’élément et ouvrez Plus > Paramètres dans sa barre de contrôle. Options :

• Label : le texte sur la barre. Vous pouvez aussi cliquer sur le libellé sur la page et le modifier là.
• Progress : le remplissage de la barre, de 0 à 100 pour cent. La valeur par défaut est 50.
• Bar height : la hauteur de la barre en pixels. La valeur par défaut est 45.
• Back color : la couleur de la piste vide.
• Front color : la couleur de la partie remplie.
• Grow animation : désactivé par défaut. Quand elle est activée, la barre démarre vide et se remplit une fois à moitié visible.
• Stripes : Add striped pattern to bar ajoute des rayures diagonales. Animate stripes (requires striped pattern) les fait bouger.

Si rien ne s’affiche

• La barre de progression ne figure pas dans l’onglet Contenu. Votre profil d’utilisateur la masque. Demandez à un administrateur de l’activer dans Profils d’utilisateurs.
• Elle a disparu après rechargement. La page n’a pas été enregistrée. Ajoutez-la de nouveau et cliquez sur Enregistrer dans la barre d’outils en haut de la zone de contenu.
• La barre semble vide. Progress est sur 0, ou Grow animation est activée et la barre n’est pas encore à moitié visible. Défilez jusqu’à la barre, ou survolez l’élément et ouvrez Plus > Paramètres pour augmenter Progress.
• Il n’y a pas de rayures, ou elles ne bougent pas. Add striped pattern to bar n’est pas coché, et Animate stripes (requires striped pattern) en a besoin. Cochez Add striped pattern to bar sous Stripes.
• La partie remplie se fond dans la piste. Front color et Back color sont trop proches. Choisissez une Front color plus foncée ou une Back color plus claire.

Et ensuite ?

Onglet Style pour modifier l’espacement et l’arrière-plan de votre barre de progression.