Een cirkelteller toevoegen.

DXPR Builder lerenPagina’s bouwenContent toevoegenData en beweging

Je krijgt een geanimeerde ring die zich vult om één kerngetal te tonen, zoals een percentage of een score. Gebruik hem om een statistiek te laten opvallen op een landingspagina of een over-pagina.

Cirkelteller met een paarse voortgangsboog gevuld tot 78%, een grafiekpictogram en het label Vernieuwingspercentage

Een cirkelteller 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 Cirkelteller. De cirkelteller komt bovenaan de kolom te staan en het dialoogvenster opent.
  2. Sleep de schuifregelaar Percentage om in te stellen hoever de ring zich vult, of typ de waarde in het vak ernaast. Hier stellen we 78 in.
  3. Kies de boogkleur in Voorgrondkleur.
  4. Open de sectie Cirkelinhoud en typ een Tekst-label voor de metric.
  5. Typ in het veld Pictogram hieronder chart in het vak Zoeken en klik op een pictogram in het raster.
  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 ring vult zich tot het percentage dat je hebt ingesteld, met je pictogram en label in het midden. In de video is hij paars, vult hij zich tot 78 procent en staat er Vernieuwingspercentage. De ring animeert zodra hij in beeld scrolt. Bezoekers zien hem zodra je de pagina opslaat en publiceert.

Je cirkelteller instellen

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

  • Percentage: hoever de ring zich vult, van 0 tot 100.
  • Afmeting: de grootte van de cirkel in pixels, van 100 tot 500.
  • Voorgrondkleur: de kleur van de gevulde boog.
  • Achtergrondkleur: de kleur van het lege spoor.
  • Vulkleur: de kleur in de cirkel.
  • Boogdikte: de dikte van de boog.
  • Animatie: vult de boog vanaf nul. Animatieduur en Animatievertraging bepalen de timing in milliseconden.
  • Animatie in beeld: wacht met animeren tot de cirkel in beeld scrolt.

Elke schuifregelaar heeft een getalvak ernaast voor exacte waarden. De sectie Cirkelinhoud bepaalt wat er in het midden staat:

  • Voortgang tonen: toont het percentage in plaats van je eigen tekst en pictogram. Staat standaard uit.
  • Tekst: een kort label. Lettergrootte en Tekstkleur stijlen het.
  • Info: een kleinere tweede regel onder de tekst.
  • Pictogram: een pictogram voor de tekst. De vervolgkeuzelijst naast Zoeken beperkt het raster tot één pictogramset. Pictogramgrootte en Pictogramkleur stijlen het.

Als je het niet ziet

  • Cirkelteller 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 ring is vaag of ontbreekt. Voorgrondkleur en Achtergrondkleur liggen te dicht bij de paginakleur. Beweeg over het element en open More > Settings en kies kleuren met meer contrast.
  • De ring animeert niet. Animatie staat uit, of de ring wacht tot hij in beeld scrolt. Zet Animatie aan en scrol de cirkel in beeld.
  • Je tekst en pictogram verschijnen niet. Voortgang tonen staat aan, dus de ring toont het percentage. Zet Voortgang tonen uit onder Cirkelinhoud.

Wat nu?

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