Visual Editor

The Visual Editor lets you edit your website by clicking directly on elements. Perfect for content updates, text changes, and quick adjustments.

Opening Visual Editor

1. Open your project in the editor
2. Click the Visual tab in the left panel
3. Click any element on the preview to select it

You'll see a blue outline around the selected element with editing controls.

Editing Text

Inline Text Editing

1. Click on any text element
2. The text becomes editable
3. Type your changes
4. Click outside to save

Text Properties

With text selected, adjust:

• Font size — Slider or input
• Font weight — Light to bold
• Color — Color picker
• Alignment — Left, center, right, justify
• Line height — Spacing between lines
• Letter spacing — Character spacing

Editing Images

Replace Images

1. Click an image
2. Click Replace in the toolbar
3. Upload a new image or choose from library
4. Image swaps in place

Image Properties

• Alt text — Description for accessibility/SEO
• Object fit — Cover, contain, fill
• Border radius — Rounded corners
• Opacity — Transparency

Layout Controls

Spacing

Select any element to adjust:

• Margin — Space outside the element
• Padding — Space inside the element
• Drag handles or enter values

Visibility

• Hide on mobile — Element hidden on small screens
• Hide on desktop — Element hidden on large screens
• Hide completely — Remove from view (keeps in code)

Positioning

• Order — Move element up/down in parent
• Alignment — Align within flex/grid container

Working with Sections

Select Parent

Click the breadcrumb trail above the preview to select parent containers:

body > main > section > div > h1

Click any level to select that container.

Section Controls

With a section selected:

• Background — Color, gradient, or image
• Padding — Internal spacing
• Full width — Extend to edges

Component Library

Access pre-built components:

1. Click + Add in the visual toolbar
2. Browse component categories
3. Drag a component into your page
4. Customize with visual controls

Available Components

• Layout: Sections, grids, columns
• Content: Headings, text, images
• Interactive: Buttons, links, forms
• Media: Videos, galleries, icons

Responsive Editing

Device Preview

Toggle between views:

• Desktop (1280px+)
• Tablet (768px-1279px)
• Mobile (< 768px)

Responsive Properties

Some properties can be set per breakpoint:

1. Select the device size
2. Adjust the property
3. Changes apply only to that size

Example: Font size 48px on desktop, 32px on mobile.

Undo and Redo

• Undo: Cmd/Ctrl + Z
• Redo: Cmd/Ctrl + Shift + Z

Visual edits are saved automatically.

Limitations

The Visual Editor is best for:

• ✅ Text content changes
• ✅ Image replacements
• ✅ Color and spacing adjustments
• ✅ Simple layout tweaks

For structural changes, use the AI Editor:

• ❌ Adding new sections
• ❌ Complex layout restructuring
• ❌ Adding new functionality

Keyboard Shortcuts

Tips

Quick Text Edits

Double-click text to immediately start editing.

Precise Values

Click the value input next to sliders for exact numbers.

Copy Styles

Right-click an element → Copy styles, then paste onto another element.

Related Docs

• AI Editor — Make structural changes with AI
• Article Editor — Edit blog posts and docs
• Publishing — Deploy your changes