CMS: Een voortgangsbalk toevoegen en instellen
8 min
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, lees je Werken met de voortgangsbalk-API] (in het Engels)(data-composite="true" href="https://dev.wix.com/docs/velo/api-reference/$w/progress-bar/introduction" target="_blank").
Voordat je begint:
[Voeg het CMS toe aan je website en maak een verzameling die een numeriek veldtype bevat voor je voortgangswaarde. Als je een dynamische waarde voor de doelwaarde wilt gebruiken, voeg dan ook een 'Nummer'-veld toe dat het doel vertegenwoordigt.
Om een voortgangsbalk toe te voegen en in te stellen:
Wix Editor
Studio Editor
- Ga naar je editor.
- Zorg ervoor dat je Velo hebt ingeschakeld in je editor.
- Klik bovenaan op Dev-modus.
- Klik op Dev-modus inschakelen.
- Klik links in de Editor op Elementen toevoegen
. - Klik op Interactief.
- Klik onder Indicatoren op Voortgangsbalk.
- Klik en sleep de voortgangsbalk van je keuze naar de pagina.
- Klik in de voortgangsbalk op Instellingen.
- Voer een Label in dat bezoekers en schermlezers laat weten wat de balk vertegenwoordigt (bijvoorbeeld: 'Voortgang naar het doel')
- Kies of je de doelwaarde wilt instellen als een dynamische waarde of een statische waarde:
Dynamische streefwaarde
op het Voortgangsbalk-element. 
om de indeling van de balk te bewerken:
en kies een vooraf ingesteld ontwerp of pas het bestaande ontwerp verder aan. Statische streefwaarde
