Custom Modules: Extend Your Website Without a Developer

<p>Standard website blocks cover 90% of your needs. But sometimes you need something special: a price calculator for your services, an interactive map of your projects, or a widget that shows live data. In the past you needed a developer for that. With custom modules you build this functionality yourself — or have it built and reuse it across all your pages.</p>

<h2>What are custom modules?</h2>

<p>A custom module is a reusable block that you define yourself with HTML, CSS, and optionally JavaScript. Unlike a regular code block, a module is configurable: you define which fields the user can fill in via the editor, and your template dynamically adjusts the output based on those values.</p>

<p>Think of a testimonial slider where the user can enter each customer's name, photo, and quote through the editor. Or a pricing table where the user adjusts the packages and prices. The module handles the layout and behavior; the user only fills in the content.</p>

<h2>The basics: HTML and Handlebars templates</h2>

<p>Custom modules use Handlebars as their template language. Handlebars is simple: you place variables between double curly braces and they are replaced by the values the user enters. A simple example: you define a field "title" in your module configuration. In your HTML you write <code>{{title}}</code> and Webey automatically replaces it with what the user entered.</p>

<p>Handlebars also supports conditions and loops. With <code>{{#if premium}}</code> you show content only when a checkbox is checked. With <code>{{#each items}}</code> you loop through a list of repeating elements — perfect for a gallery, a team overview, or a FAQ.</p>

<h2>Defining configurable fields</h2>

<p>The power of custom modules lies in the configurable fields. You can define different field types: text fields for titles and descriptions, color pickers for background colors, image fields for photos, toggles for on/off options, and repeaters for lists of items.</p>

<p>Organize your fields logically into groups. A module for a team section, for example, has a group "General" with a title and subtitle, and a repeater "Team members" where each item contains a name, role, photo, and bio. The editor displays these fields in a user-friendly form.</p>

<h2>Styling with CSS</h2>

<p>Each custom module has its own CSS that is isolated from the rest of the page. This prevents your module styles from conflicting with existing website styles. Use CSS variables to keep your module consistent with the website theme: <code>var(--color-primary)</code> automatically uses the brand's primary color.</p>

<p>Make your modules responsive. Test on different screen sizes and use media queries to adjust the layout for mobile. A module that looks great on desktop but breaks on mobile is not a good module.</p>

<h2>Real-world examples</h2>

<p>The possibilities are endless. Here are a few examples of custom modules that SMBs have built: a quote calculator that shows an indicative price based on selected options; a before-and-after slider for a beauty salon that shows two photos side by side with a draggable divider; a location map with multiple branches including opening hours and directions; an accordion FAQ with search functionality for a help desk.</p>

<p>Start with something small. Build your first module in an hour and expand it as you gain more experience. The Webey editor shows a live preview while you build, so you can immediately see how your module looks with real data.</p>