Wix Helpcentrum
    Home
  1. Een website maken
  2. Geavanceerde functies
  3. CMS
  4. Gebruikersinvoer aan het CMS koppelen
    5. CMS: Een voortgangsbalk toevoegen en instellen

CMS: Een voortgangsbalk toevoegen en instellen

Leestijd 6 minuten
Voeg een voortgangsbalk toe om een visuele weergave te geven van de voortgang bij het bereiken van een doel. Je kunt Velo-codering of een CMS-verzamelingsveld gebruiken om de voortgangswaarde weer te geven. Voor de streefwaarde kun je een statische waarde instellen die niet verandert, of een dynamische waarde instellen met Velo of door een verzamelingsveld te koppelen.   
Voorbeelden van het gebruik van voortgangsbalken:
  • Laat zien hoeveel taken als 'klaar' zijn gemarkeerd op een takenlijst
  • Toon het percentage stappen dat tijdens een onboardingproces is voltooid
  • Toon het bedrag dat is ingezameld voor een fondsenwervingsdoel
  • Toon het aantal mensen dat een petitie heeft ondertekend die een bepaald aantal stemmen nodig heeft
Tip:
Je kunt Velo gebruiken om de waarde van de voortgangsbalk bij te werken zonder verbinding te maken met de CMS. Om te lezen hoe, ga je naar het artikel Werken met het voortgangsbalk-element.
Voordat je begint:
Voeg het CMS toe aan je website en maak een verzameling die een numeriek veld bevat voor je voortgangswaarde. 

Om een voortgangsbalk toe te voegen en in te stellen:

Wix Editor
Editor X
Studio Editor
  1. Ga naar je Editor.
  2. Zorg ervoor dat je Velo hebt ingeschakeld in je Editor: 
    1. Klik bovenaan op Dev-modus.
    2. Klik op Dev-modus inschakelen. 
  3. Klik links in de Editor op Elementen toevoegen.
  4. Klik op Interactief. 
  5. Klik onder Indicatoren op Voortgangsbalk. 
  6. Klik en sleep de voortgangsbalk van je keuze naar de pagina. 
  7. Klik op het Aan CMS koppelen-pictogramop het Voortgangsbalk-element. 
  8. Klik op de Kies een dataset-dropdown en selecteer een bestaande dataset die aan je verzameling koppelt. Je kunt ook op Dataset maken klikken, vervolgens de verzameling kiezen die je wilt koppelen, de dataset een naam geven en op Maken klikken.
  9. Klik op de Voortgangswaarde linkt naar-dropdown en selecteer het veld dat je wilt gebruiken om de voortgang bij het bereiken van het doel weer te geven.
  10. Stel de streefwaarde in als een statisch getal dat altijd hetzelfde blijft of als een dynamische waarde:
    • Statische streefwaarde instellen: Klik op Streefwaarde instellen op het Voortgangsbalk-element en voer de waarde in het Streefwaarde-veld in.  
    • Stel dynamische streefwaarde in: Klik op de Voortgangswaarde linkt naar-dropdown en selecteer het veld dat je wilt gebruiken om het doel weer te geven.
  11. Klik op het Indeling-pictogramen kies de richting waarin de voortgang beweegt. 
  12. Klik op het Ontwerp-pictogramen kies een vooraf ingesteld ontwerp of pas het bestaande ontwerp verder aan. 
  13. (Optioneel) Klik op het Animatie-pictogramom een animatie-effect aan het element toe te voegen. 

Vond je dit artikel nuttig?

|