Een voortgangsbalk toevoegen.

DXPR Builder lerenPagina’s bouwenContent toevoegenData en beweging

Je krijgt een gekleurde balk met een label die in één oogopslag toont hoever iets is. Gebruik hem voor projectstatus, fondsenwervingsdoelen, cursusvoortgang of vaardigheidsniveaus.

Paarse gestreepte voortgangsbalk op 73% met het label Website-herontwerp

Een voortgangsbalk toevoegen

Open je pagina terwijl je bent ingelogd: de builder-knoppen verschijnen als je met de muis over het inhoudsgebied beweegt. Je eerste pagina legt de basis uit.

  1. Beweeg over de kolom en klik op + in de besturingsbalk, of klik op Add Elements op een lege pagina. Open het tabblad Inhoud en klik op Voortgangsbalk. De voortgangsbalk komt bovenaan de kolom te staan en het dialoogvenster opent.
  2. Typ een Label voor de balk, zoals “Website-herontwerp”.
  3. Sleep Voortgang om in te stellen hoever de balk zich vult, of typ de waarde in het vak naast de schuifregelaar. Hier kiezen we 73 procent.
  4. Kies een Voorkleur voor het gevulde deel uit het palet.
  5. Kies lager in hetzelfde dialoogvenster of de balk Strepen krijgt. Hier vinken we Streeppatroon toevoegen aan.
  6. Klik in het dialoogvenster op Opslaan. Klik daarna op Opslaan in de werkbalk bovenaan het inhoudsgebied om de pagina op te slaan.

Wat je ziet

Een balk met je label vult zich tot de waarde die je hebt ingesteld, in de kleur die je hebt gekozen. Het label staat in het gevulde deel. In de video staat op de gestreepte balk Website-herontwerp en vult hij 73% van zijn spoor. Bezoekers zien hem zodra je de pagina opslaat en publiceert.

Je voortgangsbalk instellen

Beweeg over het element en open More > Settings in de besturingsbalk. Opties:

  • Label: de tekst op de balk. Je kunt ook op het label op de pagina klikken en het daar bewerken.
  • Voortgang: hoever de balk zich vult, van 0 tot 100 procent. De standaard is 50.
  • Balkhoogte: de hoogte van de balk in pixels. De standaard is 45.
  • Achterkleur: de kleur van het lege spoor.
  • Voorkleur: de kleur van het gevulde deel.
  • Groeianimatie: staat standaard uit. Als hij aanstaat begint de balk leeg en vult hij zich zodra de helft ervan in beeld is.
  • Strepen: Streeppatroon toevoegen voegt diagonale strepen toe. Strepen animeren (vereist streeppatroon) laat ze bewegen.

Als je het niet ziet

  • Voortgangsbalk staat niet in het tabblad Inhoud. Je gebruikersprofiel verbergt hem. Vraag een beheerder om hem in te schakelen in Gebruikersprofielen.
  • Hij is weg na het herladen. De pagina is niet opgeslagen. Voeg hem opnieuw toe en klik op Opslaan in de werkbalk bovenaan het inhoudsgebied.
  • De balk lijkt leeg. Voortgang staat op 0, of Groeianimatie staat aan en de balk is nog niet half in beeld. Scrol naar de balk, of beweeg over het element en open More > Settings om Voortgang te verhogen.
  • Er zijn geen strepen, of ze bewegen niet. Streeppatroon toevoegen is niet aangevinkt, en Strepen animeren (vereist streeppatroon) heeft het nodig. Vink Streeppatroon toevoegen aan onder Strepen.
  • Het gevulde deel valt weg tegen het spoor. Voorkleur en Achterkleur lijken te veel op elkaar. Kies een donkerdere Voorkleur of een lichtere Achterkleur.

Wat nu?

Tabblad Stijl om de witruimte en achtergrond van je voortgangsbalk aan te passen.