# 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.