# Visual Editor Guide

Edit your site on the live front end — click text, swap images, add sections. No page builder plugin required.

---

## Open the editor

**Any of these:**

- Admin bar (when logged in) → **Edit Page Visually**
- Dashboard → **Edit your site visually**
- Append `?easysite_edit=1` to any page URL (e.g. `yoursite.com/sample-page/?easysite_edit=1`)

The toolbar appears at the top of the page.

---

## Toolbar overview

| Control | What it does |
|---------|--------------|
| **Save** | Publishes your changes |
| **Undo / Redo** | Step back through recent edits |
| **Add section** | Insert a new content block |
| **Form labels** | Edit contact/booking/quote form field labels |
| **Page SEO** | Title and meta description for this page |
| **Brand colors** | Quick access to main/accent colors |
| **Close** | Exit visual editor |

---

## Editing content

### Text

1. Click the text you want to change
2. Type directly — the field highlights when active
3. Use **Write for me** for AI/demo copy suggestions (optional OpenAI key in Site Colors & Logo)
4. Save when done

### Images

1. Click the image
2. Choose **Replace** or upload from the media library
3. Images use lazy loading on the live site

### Buttons & links

Click button text to edit. Link URLs are edited in the section settings panel when you select the section.

---

## Sections

### Add a section

1. Click **Add section**
2. Choose a type:

| Section | Best for |
|---------|----------|
| Hero | Top banner with headline and CTA |
| Text | Simple paragraph block |
| Image + text | About, features with photo |
| Services | Grid of service cards |
| Testimonials | Customer quotes |
| Pricing | Plan cards |
| FAQ | Questions and answers |
| Team | Staff photos and bios |
| Stats | Numbers / achievements |
| Gallery | Photo grid |
| Video | Embed or upload |
| CTA | Call-to-action banner |
| Contact | Form section |
| Spacer | Vertical whitespace |
| Shop hero / Products | WooCommerce (Ultimate + WC) |

3. Fill in fields and save

### Section presets (Ultimate)

**Add section → Presets** inserts pre-designed blocks (pricing tables, team grids, FAQ layouts) you can customize.

### Reorder & remove

Use section controls to move up/down or delete. Undo (**Ctrl+Z**) if you remove the wrong block.

---

## Page SEO panel

1. Open **Page SEO** in the toolbar
2. Set **SEO title** — appears in search results and browser tab
3. Set **Meta description** — short summary (~150–160 characters)
4. Save

---

## Form labels panel

Edit labels and placeholders for:

- Contact form
- Booking form
- Quote form

Does not change where submissions are sent — that’s configured in WordPress/WooCommerce settings.

---

## Brand colors

Open **Brand colors** in the toolbar for quick tweaks. Full logo and white-label options live under **EasySite Setup → Site Colors & Logo**.

---

## History & undo

- **Undo** / **Redo** buttons in the toolbar
- **Ctrl+Z** / **Ctrl+Shift+Z** (Cmd on Mac)
- Page revisions are stored — restore older versions from the history panel when available

Always save after you’re happy with changes.

---

## Keyboard shortcuts

| Shortcut | Action |
|----------|--------|
| **Ctrl+S** / **Cmd+S** | Save |
| **Ctrl+Z** / **Cmd+Z** | Undo |
| **Ctrl+Shift+Z** / **Cmd+Shift+Z** | Redo |
| **Esc** | Close open panel |

---

## Backend page builder (alternative)

For users who prefer wp-admin:

1. **Pages → Add New** (or edit existing)
2. Check **Use EasySite Visual Builder for this page**
3. Drag sections from the left sidebar
4. Click **Update** to publish

The front-end visual editor is recommended for clients — same content, simpler experience.

---

## Tips for agencies

- Lock down structure before handoff; let clients edit copy and images only
- Enable **client mode** so clients see a minimal dashboard
- Set an OpenAI API key for real AI copy, or rely on demo text for training
- Use **Section Library** (Ultimate) to save reusable heroes and CTAs across pages

---

## Troubleshooting

| Issue | Fix |
|-------|-----|
| Toolbar not visible | Confirm you’re logged in and `?easysite_edit=1` is in the URL |
| Save fails | Check you have `edit_pages` capability; try refreshing |
| Section won’t add | Ultimate sections require Ultimate Bundle license active |
| AI returns generic text | Demo mode — add OpenAI key in Site Colors & Logo |
