Visual Editor

Last updated: 2026-03-27
The Visual Editor is a browser-based WYSIWYG interface that renders your landing page in a live iframe — exactly as visitors see it. Click any element to edit text, adjust styles, or update links. Drag sections to reorder them. Swap or AI-generate images. Regenerate individual sections with AI, apply full-page or element-level AI edits, manage popup forms, preview on desktop/tablet/mobile, or switch to Code Mode to edit the raw HTML directly.

How to use it

  1. Open the editor

    From the landing page detail view, click 'Open Visual Editor'. The page loads in an iframe canvas with a properties panel on the right.

  2. Click to select

    Click any text, image, or section to select it. A blue outline ring indicates the selected element.

  3. Double-click to edit text

    Double-click any text element to enter edit mode. Use the floating toolbar for Bold, Italic, and Underline. Click outside to confirm.

  4. Replace or generate images

    Click an image, then in the Properties panel click 'Replace' to upload your own photo (JPG/PNG/WebP, max 5 MB), or click 'Generate with AI' to describe a new image. AI image generation is role-aware (hero/service/benefit/review) and runs as a background task.

  5. Edit links

    Click any link or button element to select it. The Properties panel shows a 'Link URL' field — type a new URL to update where it points. The href is stored safely during editing and restored on save, so links never navigate away while you work.

  6. Adjust element styles

    Select any element and open the collapsible 'Styles' panel in the Properties sidebar. Adjust display mode, text alignment, margin, padding, width, height, font size, font weight, font color, line height, background color, border radius, and border — applied as inline styles without touching the page CSS.

  7. Drag sections to reorder

    Click any section to reveal the drag handle (top-left corner). Drag it up or down to reorder. A blue line marks the drop position.

  8. Preview on different devices

    Click the device icons in the topbar to switch between Desktop, Tablet, and Mobile preview modes. The canvas scales to the selected viewport width so you can verify the responsive layout before publishing.

  9. Regenerate a section with AI

    Select a section in the editor, then click 'Regenerate Section' in the Properties panel. Describe what you want changed in natural language — the AI rewrites only that section, leaving the rest of the page untouched.

  10. Switch to Code Mode

    Click the </> button in the topbar. Edit the raw HTML with a live preview beside it. Changes sync back to the visual canvas on save.

  11. Use AI Edit

    Click the purple AI button (sparkle icon) in the topbar. A panel slides down with two modes: Entire Page rewrites the full layout based on your instruction; Element edits only the selected element. Type your instruction and click Apply.

  12. Manage popups

    Click the amber 'Popups' button in the topbar. A modal lists all popups linked to this page and any available popups. Link, unlink, create, or open the visual popup editor — a split panel with structured form fields (heading, description, fields, button, colors) and a live preview.

  13. Save

    Changes autosave every 5 seconds. Click 'Save' for an immediate manual save. Up to 20 version snapshots are kept — restore any of them from the History panel.

Frequently asked questions

Can I undo changes?
Yes. Ctrl+Z / ⌘+Z for undo, Ctrl+Shift+Z / ⌘+Shift+Z for redo. The editor keeps a 50-step in-memory history.
Is there a maximum page size?
No hard limit on HTML size. Uploaded images are capped at 1200 px wide and converted to WebP (max 5 MB per upload).
How do I restore a previous version?
Click 'History' in the topbar to see up to 20 saved versions. Click 'Restore' — a new snapshot is created before the restore so you can always undo.
What is the difference between AI Edit Page mode and Element mode?
Entire Page mode sends your whole landing page HTML to the AI along with your instruction and rewrites the full layout — the result is saved automatically and a new version snapshot is created. Element mode sends only the selected element's HTML so you can refine a single headline, paragraph, or button without touching the rest of the page. Element-mode changes are previewed in the editor and saved only when you click Save.
What is Section Regeneration and how is it different from AI Edit?
Section Regeneration targets a specific section of the page (e.g. the hero or testimonials block) and rewrites only that section. AI Edit in Element mode works on a single HTML element (e.g. one headline). Section Regeneration is better for replacing entire content areas; Element mode is for fine-tuning individual pieces.
Does AI Edit consume AI credits?
Yes. AI Edit and Section Regeneration use the same credit pool as page generation. A page-mode edit costs approximately 5–15 credits (text only). Element mode and section regeneration cost less since only a fragment is processed.
How long does AI Edit take?
AI Edit runs as a background task. Results appear in the editor automatically — typically within 15–60 seconds for element mode and 30–90 seconds for full page mode.
Related
AI Landing Page Generation Popup Forms A/B Testing Dynamic Text Replacement