Theme and styling

Per-template theme

Theme colors and typography are configured per template in the visual editor Theme panel — not in the global plugin settings screen.

1. Open a template in the visual editor.
2. Open the Theme panel.
3. Adjust colors, fonts, and related theme options.
4. Preview on the canvas.
5. Save the template.

Why per-template?

Different pages can use different brand treatments (landing page vs blog vs campaign) without changing a single global theme for the whole site.

Component styles

Individual components may also expose style-related settings in their settings panel (spacing, alignment, etc., depending on the component). Use Theme for overall look; use component settings for local tweaks.

Front-end CSS

Builder can output theme CSS variables for a layout. Your project templates may include theme CSS via Builder’s Twig helpers so the front end matches the editor.

Tips

- Set Theme early on a starter template, then duplicate that template for consistent branding.
- Prefer Theme tokens over one-off HTML/CSS in the HTML component.
- After theme changes, hard-refresh the front end if you have aggressive browser or CDN caching.