Skip to content

Progressie bar

Met een progressie bar geef jij op een actieve en visuele manier getallen weer. Je werkt met procenten en kunt hier bijvoorbeeld expertises invullen, onderwerpen van je blogberichten, onderzoekcijfers, etc.

Kijk bijvoorbeeld eens naar dit template, waarbij we de progressie bar gebruiken om expertises aan te geven.

logo-webnemer-wit

Tabbladen binnen de module

De module voor een progressie bar bevat meerdere tabbladen. We leggen per tabblad uit welke acties jij allemaal in kunt stellen, zodat jouw module zijn werk goed doet.

Standaard
Verschijning barKies hier het uiterlijk van jouw bar. Je kunt hier kiezen uit een horizontale, verticale, cirkelvormige en halfronde verschijning. Kijk eens op welke manier jij je progressie bar het beste kunt tonen.
Progressie bar itemsMaak hier nieuwe items aan en kopieer of bewerk bestaande items. Je kunt hier al aan de slag met 1 progressie bar, je kunt ook meerdere bars toevoegen.
Horizontale verschijningKies jij voor een horizontale verschijning? Selecteer dan per bar de volgende aspecten:
* Waarde: een percentage van 0 - 100%.
* Titel: typ hier de titel die jij aan deze bar wilt geven.
* Stijl: selecteer hier je type voortgang (enkele kleur, verloop of afbeelding) en kies hierna je kleuren of afbeelding uit. De achtergrondkleur stel je in voor het stukje bar dat eventueel leeg blijft.
Verticale verschijningKies jij voor een verticale verschijning? Selecteer dan per bar de volgende aspecten:
* Waarde: een percentage van 0 - 100%.
* Titel: typ hier de titel die jij aan deze bar wilt geven.
* Stijl: selecteer hier je type voortgang (enkele kleur, verloop of afbeelding) en kies hierna je kleuren of afbeelding uit. De achtergrondkleur stel je in voor het stukje bar dat eventueel leeg blijft.
Cirkelvormige verschijningKies jij voor een cirkelvormige verschijning? Selecteer dan per bar de volgende aspecten:
* Waarde: een percentage van 0 - 100%.
* Tekst voor en na het nummer: geef hier aan welke tekst jij voor en na het nummer wilt zien. Wanneer jij deze leeg laat, zal er geen tekst verschijnen.
* Stijl: kies hier je kleuren uit. De achtergrondkleur stel je in voor het stukje bar dat eventueel leeg blijft.
Halfronde verschijningKies jij voor een halfronde verschijning? Selecteer dan per bar de volgende aspecten:
* Waarde: een percentage van 0 - 100%.
* Tekst voor en na het nummer: geef hier aan welke tekst jij voor en na het nummer wilt zien. Wanneer jij deze leeg laat, zal er geen tekst verschijnen.
* Stijl: kies hier je kleuren uit. De achtergrondkleur stel je in voor het stukje bar dat eventueel leeg blijft.
Stijl
Algemene uitlijningSelecteer hier de algemene uitlijning voor je module. Kies hier voor een uitlijning links, gecentreerd of rechts.
TussenruimteDe tussenruimte tussen de elementen (bars). Stel hier de pixels in voor je tussenruimte.
Opmaak horizontaalPer verschijning heb je verschillende elementen om in te stellen. Voor de horizontale verschijning stel je in waar je het nummer en de tekst wilt tonen. De dikte van de bar in pixels en de ruimte onder de titel, ook in pixels.
Daarnaast stel je in of de bar een rand moet hebben en de radius van de hoeken. Hoe hoger je radius, hoe meer de hoek buigt.
Voor de animatiesnelheid stel je de snelheid in (hoe lang doet de animatie erover om bij het einde te komen) en je stelt de vertraging in (na hoeveel seconden start de animatie).
Opmaak verticaalPer verschijning heb je verschillende elementen om in te stellen. Voor de verticale verschijning stel je in waar je het nummer en de tekst wilt tonen. De hoogte en breedte van de bar in pixels en eventueel de hoogte en breedte voor responsieve grootte (bijvoorbeeld op de mobiel).
Daarnaast stel je in of de bar een rand moet hebben en de radius van de hoeken. Hoe hoger je radius, hoe meer de hoek buigt.
Voor de animatiesnelheid stel je de snelheid in (hoe lang doet de animatie erover om bij het einde te komen) en je stelt de vertraging in (na hoeveel seconden start de animatie).
Opmaak cirkelvormigPer verschijning heb je verschillende elementen om in te stellen. Voor de cirkelvormige verschijning stel je in hoe breed de cirkel is en de dikte van de lijn. Deze instellingen kun je ook maken voor de responsieve grootte (bijvoorbeeld op de mobiel).
Voor de animatiesnelheid stel je de snelheid in (hoe lang doet de animatie erover om bij het einde te komen) en je stelt de vertraging in (na hoeveel seconden start de animatie).
Opmaak halfrondPer verschijning heb je verschillende elementen om in te stellen. Voor de halfronde verschijning stel je in hoe breed de 'cirkel' is en de dikte van de lijn. Deze instellingen kun je ook maken voor de responsieve grootte (bijvoorbeeld op de mobiel).
Voor de animatiesnelheid stel je de snelheid in (hoe lang doet de animatie erover om bij het einde te komen) en je stelt de vertraging in (na hoeveel seconden start de animatie).
Lettertype
TagStel hier de HTML Tag in voor je tekst. Gebruik maximaal 1 keer een H1 tag per pagina. Kies voor H2 of H3 om aan te geven welke kopjes belangrijk zijn voor Google. H2 is bijvoorbeeld belangrijker dan H3.
LettertypeWil jij het lettertype gebruiken dat je hebt ingesteld via de customizer? Laat dan de instellingen "standaard" en "default" staan. Wil jij een alternatief lettertype gebruiken? Kies hier dan een andere uit.
TekengrootteStel hier je tekengrootte in. Dit doe je in pixels. Klik je op het pijltje naar rechts, dan kun je meteen je tekengrootte voor de tablet en mobiel instellen.
RegelhoogteStel hier je regelhoogte in. Dit doe je in pixels. Klik je op het pijltje naar rechts, dan kun je meteen je regelhoogte voor de tablet en mobiel instellen.
KleurSelecteer hier de kleur die jij je tekst wilt geven.
Scroll To Top