Visual Editor
Edit your website inline — click any text, image, or element to modify it directly on the page.
Overview
The Visual Editor (/admin/visual-editor.php) provides a WYSIWYG editing experience. Your site loads in an iframe and you can click any element to edit it directly — no forms, no code. Changes are saved to the HTML files in real-time.
The Visual Editor auto-detects your site type: Section-based (AI-generated sites with JSON structure) or Iframe-based (template sites with static HTML). Both work seamlessly.
Accessing the Editor
Open the Visual Editor from:
- Sites table — click the (brush) icon on any site row
- After AI generation — "Continue to Editor" redirects here automatically
- Direct URL —
/admin/visual-editor?site_id=X&page=home
Editor Toolbar
| Button | Icon | Action |
|---|---|---|
| Pages | description | Switch between site pages (Home, About, Contact, etc.) |
| Device Preview | devices | Toggle between desktop, tablet, and mobile views |
| Theme Colors | palette | Open color picker panel to change brand colors and font |
| AI Assistant | auto_awesome | Open AI chat to make changes via natural language |
| Undo / Redo | undo / redo | Undo or redo recent changes |
| Save | save | Save all changes to disk (also: Ctrl+S / Cmd+S) |
| Preview | visibility | Open the live site in a new tab |
Editing Text
Click any text element
Headings, paragraphs, buttons, list items — all become editable on click.
Type your changes
The element becomes contenteditable. Type, delete, or paste new text.
Click away or press Escape
The change is captured. Press Ctrl+S to save all changes.
Editing Images
Click any image to open the image replacement dialog:
- Upload new image — drag-and-drop or click to browse (JPG, PNG, WebP, max 5MB)
- Choose from gallery — select from previously uploaded images
- Enter URL — paste an external image URL
Editing Links & Buttons
Click a link or button to edit its text. Right-click (or long-press on mobile) to change the URL destination. The link editor supports:
- Internal page links (e.g.
about.html) - External URLs (e.g.
https://example.com) - Anchor links (e.g.
#contact) - Phone/email links (
tel:,mailto:)
Theme Colors Panel
Click the palette icon to open the theme panel on the right side:
- Primary Color — used for headers, buttons, links, accents
- Secondary Color — used for highlights, badges, secondary buttons
- Font Family — choose from 12 web-safe fonts (Inter, Poppins, Roboto, etc.)
- Preset Palettes — 12 curated color combinations (Ocean Blue, Forest, Crimson, etc.)
Changes apply instantly to the preview. Click "Apply & Regenerate" to save and regenerate all site pages.
AI Chat Editor
The AI Chat Editor (/admin/chat-editor.php) lets you edit your site using natural language. Describe what you want changed and the AI modifies the HTML/CSS directly.
Example commands:
- "Change the hero heading to Welcome to Our School"
- "Make the navigation background dark blue"
- "Add a phone number to the footer"
- "Replace the hero image with a classroom photo"
The AI Chat Editor works best for text and style changes. For structural changes (adding new sections, reordering), use the Page Builder instead.
Saving & Publishing
Changes in the Visual Editor are saved directly to the static HTML files on disk. There's no separate "publish" step — once you save, the changes are live immediately.
- Auto-save — drafts are saved to localStorage every 30 seconds
- Manual save — press Ctrl+S (Cmd+S on Mac) or click the Save button
- Undo — use Ctrl+Z or the Undo button to revert changes before saving