Webey β€” Bouw professionele websites zonder code
Design

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.