Ajouter un compteur circulaire.

Vous obtenez un anneau animé qui se remplit pour afficher un chiffre clé, comme un taux ou un score. Utilisez-le pour faire ressortir une statistique sur une page de destination ou une page à propos.

Ajouter un compteur circulaire

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 Compteur circulaire. L’élément apparaît en haut de la colonne et sa boîte de dialogue de paramètres s’ouvre.
2. Faites glisser le curseur Percent pour définir le remplissage de l’anneau, ou saisissez la valeur dans la case voisine. Ici, nous saisissons 78.
3. Choisissez la couleur de l’arc dans Foreground color.
4. Ouvrez la section Circle content et saisissez un libellé Text pour l’indicateur.
5. Dans le champ Icon ci-dessous, saisissez chart dans la case Search et cliquez sur une icône de la grille.
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

L’anneau se remplit jusqu’au pourcentage défini, avec votre icône et votre libellé au centre. Dans la vidéo, il est violet, rempli à 78 pour cent et affiche Renewal rate. L’anneau s’anime lorsqu’il entre dans la zone visible. Les visiteurs le voient une fois la page enregistrée et publiée.

Configurer votre compteur circulaire

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

• Percent : le remplissage de l’anneau, de 0 à 100.
• Dimension : la taille du cercle en pixels, de 100 à 500.
• Foreground color : la couleur de l’arc rempli.
• Background color : la couleur de la piste vide.
• Fill color : la couleur à l’intérieur du cercle.
• Foreground width : l’épaisseur de l’arc.
• Animation : remplit l’arc depuis zéro. Animation duration et Animation delay définissent le minutage en millisecondes.
• Animation in-viewport : attend que le cercle entre dans la zone visible pour animer.

Chaque curseur a une case numérique voisine pour des valeurs exactes. La section Circle content définit ce qui s’affiche au centre :

• Show progress : affiche le nombre du pourcentage au lieu de votre texte et de votre icône. Désactivé par défaut.
• Text : un libellé court. Font size et Text color le mettent en forme.
• Info : une deuxième ligne plus petite sous le texte.
• Icon : une icône devant le texte. Le menu déroulant à côté de Search limite la grille à un jeu d’icônes. Icon size et Icon color la mettent en forme.

Si rien ne s’affiche

• Le compteur circulaire ne figure pas dans l’onglet Contenu. Votre profil d’utilisateur le masque. Demandez à un administrateur de l’activer dans Profils d’utilisateurs.
• Il a disparu après rechargement. La page n’a pas été enregistrée. Ajoutez-le de nouveau et cliquez sur Enregistrer dans la barre d’outils en haut de la zone de contenu.
• L’anneau est pâle ou absent. Foreground color et Background color sont trop proches de la couleur de la page. Survolez l’élément et ouvrez Plus > Paramètres, puis choisissez des couleurs plus contrastées.
• L’anneau ne s’anime pas. Animation est désactivé, ou l’anneau attend d’entrer dans la zone visible. Activez Animation et faites défiler pour amener le cercle dans la zone visible.
• Votre texte et votre icône ne s’affichent pas. Show progress est activé, l’anneau affiche donc le pourcentage. Désactivez Show progress sous Circle content.

Et ensuite ?

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