Custom modules
Maak herbruikbare custom modules met eigen velden en HTML/CSS, en gebruik ze op elke pagina.
Custom modules geven je de vrijheid om je eigen bloktypen te maken met precies de velden en opmaak die je nodig hebt. Ze combineren de flexibiliteit van code met het gemak van de visuele editor.
π¬ Video volgt: Custom module bouwen β van idee naar herbruikbaar blok
Stap 1: Ga naar Modules
Klik op Modules in de zijbalk. Je ziet een overzicht van bestaande modules en de beschikbare standaard bloktypen.
Stap 2: Maak een nieuwe module
Klik op + Nieuwe module. Vul de basisgegevens in:
- Naam β bijv. "Klant spotlight"
- Beschrijving β korte uitleg van het doel
- Icoon β kies een Lucide icoon
- Categorie β voor organisatie in de blok-picker
Stap 3: Definieer velden
Voeg velden toe die de gebruiker invult in de editor:
- Tekst β kort tekstveld
- Textarea β lang tekstveld
- Rich text β tekst met opmaak
- Afbeelding β afbeelding upload
- URL β link
- Kleur β kleurkiezer
- Nummer β numerieke waarde
- Selectie β dropdown met opties
Stap 4: Schrijf de HTML template
In het Template tabblad schrijf je HTML met Handlebars variabelen die verwijzen naar je velden:
<div class="spotlight">
<img src="{{photo}}" alt="{{name}}" />
<h3>{{name}}</h3>
<p>{{quote}}</p>
</div>
π‘ Tip: Je kunt Tailwind CSS classes gebruiken in je template. De volledige Tailwind library is beschikbaar.
Stap 5: Gebruik op een pagina
Je custom module verschijnt nu in de blok-picker onder de categorie die je hebt gekozen. Voeg het toe als elk ander blok en vul de velden in.
Stap 6: Bijwerken
Als je de module later wijzigt (velden of template), worden alle pagina's die het gebruiken automatisch bijgewerkt.