Custom Modules

Create reusable custom modules with custom fields and HTML/CSS, and use them on any page.

Custom modules give you the freedom to create your own block types with exactly the fields and styling you need. They combine the flexibility of code with the convenience of the visual editor.

🎬 Video coming soon: Building a custom module — from idea to reusable block

Step 1: Navigate to Modules

Click Modules in the sidebar. You'll see an overview of existing modules and the available standard block types.

Step 2: Create a New Module

Click + New module. Fill in the basics:

Name — e.g., "Customer spotlight"
Description — short explanation of the purpose
Icon — choose a Lucide icon
Category — for organization in the block picker

Step 3: Define Fields

Add fields that the user fills in within the editor:

Text — short text field
Textarea — long text field
Rich text — formatted text
Image — image upload
URL — link
Color — color picker
Number — numeric value
Select — dropdown with options

Step 4: Write the HTML Template

In the Template tab, write HTML with Handlebars variables that reference your fields:

<div class="spotlight">
  <img src="{{photo}}" alt="{{name}}" />
  <h3>{{name}}</h3>
  <p>{{quote}}</p>
</div>

💡 Tip: You can use Tailwind CSS classes in your template. The full Tailwind library is available.

Step 5: Use on a Page

Your custom module now appears in the block picker under the category you chose. Add it like any other block and fill in the fields.

Step 6: Updating

If you modify the module later (fields or template), all pages using it are automatically updated.