Système de gestion de contenu (CMS) : Ajouter et configurer une barre de progression

Temps de lecture : 7 min
Ajoutez une barre de progression pour afficher une représentation visuelle des progrès vers la réalisation d'un objectif. Vous pouvez utiliser le codage Velo ou un champ de collection du système de gestion de contenu (CMS) pour représenter la valeur de progression. Pour la valeur cible, vous pouvez définir une valeur statique qui ne change pas, ou définir une valeur dynamique avec Velo ou en connectant un champ de collection.   
Exemples d'utilisation des barres de progression :
  • Affichez le nombre de tâches marquées comme « terminées » sur une liste de tâches.
  • Affichez le pourcentage d'étapes complétées au cours d'un processus d'intégration. 
  • Affichez le montant collecté pour un objectif de collecte de fonds.
  • Affichez le nombre de personnes qui ont signé une requête qui nécessite un certain nombre de votes.
Suggestion :
Vous pouvez utiliser Velo pour mettre à jour la valeur de la barre de progression sans vous connecter au Système de gestion de contenu (CMS). Pour en savoir plus, voir Travailler avec l'élément de la barre de progression.
Avant de commencer :
Ajouter le système de gestion de contenu (CMS) à votre site et créer une collection qui comprend un champ numérique pour votre valeur de progression. 

Pour ajouter et configurer une barre de progression :

Éditeur Wix
Editor X
Éditeur de Studio
  1. Accédez à votre Éditeur.
  2. Assurez-vous que vous avez activé Velo dans votre Éditeur : 
    1. Cliquez sur Mode développeur en haut de la page.
    2. Cliquez sur Activer le mode développeur
  3. Cliquez sur Ajouter des éléments sur le côté gauche de l'Éditeur.
  4. Cliquez sur Interactif
  5. Cliquez sur la barre de progression sous Indicateurs
  6. Cliquez et faites glisser la barre de progression de votre choix sur la page. 
  7. Cliquez sur l'icône Connecter au Système de gestion de contenu (CMS) sur l'élément Barre de progression. 
  8. Cliquez sur le menu déroulant Choisir un dataset et sélectionnez un dataset existant qui se connecte à votre collection. Vous pouvez également cliquer sur Créez un dataset, puis choisissez la collection à laquelle vous souhaitez connecter, donnez un nom au dataset et cliquez sur Créer.
  9. Cliquez sur le menu déroulant Valeur de progression connectée à et sélectionnez le champ que vous souhaitez utiliser pour représenter la progression vers l'objectif cible.
  10. Définissez la valeur cible comme un nombre statique qui reste toujours le même ou comme une valeur dynamique :
    • Définir la valeur cible statique : Cliquez sur Définir la valeur cible dans l'élément Barre de progression et saisissez la valeur dans le champ Valeur cible .  
    • Définir la valeur cible dynamique : Cliquez sur le menu déroulant La valeur cible se connecte à et sélectionnez le champ que vous souhaitez utiliser pour représenter l'objectif cible.
  11. Cliquez sur l'icône Mise en page  et choisissez la direction dans laquelle la progression se déplace. 
  12. Cliquez sur l'icône Design  et choisissez un design prédéfini ou personnalisez davantage le design existant. 
  13. (Facultatif) Cliquez sur l'icône Animation  pour ajouter un effet d'animation à l'élément. 

Cela vous a-t-il aidé ?

|