Stap-voor-stap gids¶
De Stap-voor-stap gids toont een genummerde reeks stappen, elk met een eigen titel, afbeelding en uitleg. Ideaal om een proces of werkwijze visueel uit te leggen.
Hoe het op de site verschijnt¶
Velden¶
Het blok bevat één veld Stappen dat je vult met meerdere stap-elementen. Per stap:
| Veld | Type | Verplicht | Wat erin? |
|---|---|---|---|
| Titel | Korte tekst | Ja | Wat is deze stap? Bv. "Maak een afspraak" |
| Beeld | Afbeelding | Nee | Visueel ondersteunend beeld bij de stap. Wordt gecropped naar 400px hoog. |
| Omschrijving | Tekst-editor met opmaak | Ja | Uitleg bij de stap, max 3 à 5 regels. |
Stappen toevoegen / herordenen¶
- Klik onderaan op + Toevoegen om een nieuwe stap toe te voegen.
- Sleep aan de greep links naast een stap om de volgorde te wijzigen.
- Het CMS nummert automatisch — handmatig nummeren in de titel is overbodig.
Hoe het rendert¶
- Per stap een rij met:
- Genummerd cirkel-icoon links naast de titel
- Titel in een vetgedrukte kop
- Beeld in de linker kolom (1/3 van de breedte) — als geen beeld is gekozen, valt het CMS terug op een gloeilamp-icoon
- Omschrijving in de rechter kolom (2/3 van de breedte)
- Een verticale lijn loopt van de eerste tot de laatste stap (visuele flow).
Wanneer gebruiken¶
- Hoe vraag je iets aan? — bv. een lening, een hypotheek, een afspraak.
- Hoe werkt onze service? — onboarding-flow voor klanten.
- Klachtenprocedure: duidelijk maken welke stappen iemand doorloopt.
Tips¶
- 3 à 5 stappen is ideaal. Meer wordt overweldigend, minder rechtvaardigt geen apart blok.
- Volgorde is essentieel: gebruik dit blok alleen als de stappen echt in volgorde gedaan worden. Voor een ongesorteerde lijst → Tekst 3-kolommen.
- Korte titels per stap (max 5 woorden), uitleg eronder.
- Consistent beeldformaat: gebruik portretten of pictogrammen in dezelfde stijl voor alle stappen.
Veelgemaakte fouten¶
- Te lange beschrijvingen per stap — als de uitleg meer is dan 5 regels, splits de stap of zet de details elders.
- Stap zonder duidelijke actie — elke stap moet een werkwoord hebben ("Maak een afspraak", niet "Afspraak").
- Verschillende beeldformaten door elkaar — geeft een ongelijk visueel resultaat.
- Geen beeld bij sommige stappen, wel bij andere — kies één lijn (allemaal beeld of geen) en gebruik anders een neutraal pictogram.