Custom modules: je website uitbreiden zonder developer
Van een prijscalculator tot een interactief portfolio — met custom modules bouw je functionaliteit die past bij jouw bedrijf. Geen developer nodig.
<p>Standaard website-blokken dekken 90% van je behoeften. Maar soms heb je iets speciaals nodig: een prijscalculator voor je diensten, een interactieve kaart van je projecten of een widget die live data toont. Vroeger had je daar een developer voor nodig. Met custom modules bouw je deze functionaliteit zelf — of laat je het bouwen en hergebruik je het op al je pagina's.</p>
<h2>Wat zijn custom modules?</h2>
<p>Een custom module is een herbruikbaar blok dat je zelf definieert met HTML, CSS en optioneel JavaScript. Anders dan een gewoon code-blok is een module configureerbaar: je definieert welke velden de gebruiker kan invullen via de editor, en je template past de output dynamisch aan op basis van die waarden.</p>
<p>Denk aan een testimonial-slider waar de gebruiker via de editor de naam, foto en quote van elke klant kan invullen. Of een prijstabel waar de gebruiker de pakketten en prijzen aanpast. De module zorgt voor de lay-out en het gedrag; de gebruiker vult alleen de content in.</p>
<h2>De basis: HTML en Handlebars templates</h2>
<p>Custom modules gebruiken Handlebars als template-taal. Handlebars is eenvoudig: je plaatst variabelen tussen dubbele accolades en ze worden vervangen door de waarden die de gebruiker invoert. Een simpel voorbeeld: je definieert een veld "titel" in je module-configuratie. In je HTML schrijf je <code>{{titel}}</code> en Webey vervangt dat automatisch door wat de gebruiker heeft ingevuld.</p>
<p>Handlebars ondersteunt ook condities en loops. Met <code>{{#if premium}}</code> toon je content alleen als een checkbox is aangevinkt. Met <code>{{#each items}}</code> loop je door een lijst van herhalende elementen — perfect voor een galerij, een teamoverzicht of een FAQ.</p>
<h2>Configureerbare velden definiëren</h2>
<p>De kracht van custom modules zit in de configureerbare velden. Je kunt verschillende veldtypen definiëren: tekstvelden voor titels en beschrijvingen, kleurkiezers voor achtergrondkleuren, afbeeldingvelden voor foto's, schakelaren voor aan/uit opties en herhalers voor lijsten van items.</p>
<p>Organiseer je velden logisch in groepen. Een module voor een team-sectie heeft bijvoorbeeld een groep "Algemeen" met een titel en subtekst, en een herhaler "Teamleden" waar elk item een naam, functie, foto en bio bevat. De editor toont deze velden in een gebruiksvriendelijk formulier.</p>
<h2>Styling met CSS</h2>
<p>Elke custom module heeft zijn eigen CSS die geïsoleerd is van de rest van de pagina. Dit voorkomt dat je module-stijlen conflicteren met de bestaande website-stijlen. Gebruik CSS-variabelen om je module consistent te houden met het thema van de website: <code>var(--color-primary)</code> gebruikt automatisch de primaire kleur van het merk.</p>
<p>Maak je modules responsive. Test op verschillende schermformaten en gebruik media queries om de lay-out aan te passen voor mobiel. Een module die er op desktop geweldig uitziet maar op mobiel breekt, is geen goede module.</p>
<h2>Voorbeelden uit de praktijk</h2>
<p>De mogelijkheden zijn eindeloos. Hier zijn een paar voorbeelden van custom modules die MKB'ers hebben gebouwd: een offerteCalculator die op basis van geselecteerde opties een indicatieprijs toont; een voor-en-na slider voor een schoonheidssalon die twee foto's naast elkaar toont met een versleepbare scheidslijn; een locatiekaart met meerdere vestigingen inclusief openingstijden en routebeschrijving; een accordeon-FAQ met zoekfunctie voor een helpdesk.</p>
<p>Begin met iets kleins. Bouw je eerste module in een uurtje en breid hem uit wanneer je meer ervaring hebt. De Webey-editor toont een live preview terwijl je bouwt, zodat je direct ziet hoe je module eruitziet met echte data.</p>