Visual Editor

The visual editor is where you build and style a template with live preview.

Open the editor

From Builder → Templates:

- Click Edit visually on a row, or
- Open a template and click Open visual editor

Editor layout

Typical panels:

- Component palette — available sections and elements
- Canvas / preview — live preview of the layout
- Settings — fields for the selected component
- Theme — colors and typography for this template

Build a layout

1. Drag a Section (or a preset like Hero, CTA, FAQ) onto the canvas.
2. Drop elements inside the section: Headline, Text, Image, Grid, Button, Menu, HTML, etc.
3. Click a component to edit its settings.
4. Reorder by dragging.
5. Save when ready.

Hierarchy basics

- Sections and layout components (Header, Footer, Hero, etc.) hold structure.
- Elements (Headline, Text, Image, …) live inside Section or Grid.
- Grid creates columns; place elements (or grid items) inside columns.

Example structure:

Section
  → Headline
  → Grid (2 columns)
      → Text
      → Image
  → Button

Live preview

The editor uses AJAX preview so changes appear without a full page reload. Always save before leaving if you want to keep edits.

Theme panel

Theme colors and typography are set per template in the Theme panel (not in global plugin settings).

Adjust theme values for the current template, then preview and save.

Partials in the editor

Saved Partial templates appear as presets you can insert into a Page template. Use descriptions on partials so they are easy to identify when browsing presets.

Tips

- Prefer Section + elements over raw HTML unless you need custom markup.
- Use Grid for multi-column layouts.
- Keep Header/Menu and Footer as consistent patterns (or partials) across pages.
- Use presets (Hero, CTA, FAQ, Pricing, Team) as starting points, then customize.