Visual Editor
Fine-tune every element on your pages with our visual editor and AI-powered assistant.
Overview
The Visual Editor allows you to select any element on your page and modify its properties directly. It opens as a right sidebar when you click "Edit" in the toolbar and includes both manual controls and an AI assistant for making changes with natural language.
How to Enter Edit Mode
In the Page Builder, click the "Edit" button in the toolbar. A green-bordered sidebar will appear on the right. Click any element in the preview to select it.
Selecting Elements
When in edit mode, hover over elements to see a highlight. Click to select:
Click to Select
Click any text, image, button, or container to select it. The element info appears in the sidebar.
AI Edit Button
A floating "AI" button appears near selected elements. Click it to focus the chat input and describe changes in natural language.
Properties Panel
When an element is selected, the sidebar shows expandable property sections:
Content
Edit text content directly. For images, upload a replacement. For videos, change the source.
Link
For links and buttons, change the URL destination and whether it opens in a new tab.
Spacing
Adjust padding and margin. Use "All sides" for uniform spacing or "Individual" for each side.
Dimensions
Set width and height with various units (px, %, em, rem, vw, vh).
Typography
Font size, weight, alignment. Expand "Advanced" for line height, letter spacing, capitalization, and text decoration.
Colors
Text color and background color. Use the color picker or enter hex values. Background supports transparent.
Border
Border width, color, and border radius for rounded corners.
AI Assistant
At the bottom of the sidebar is the AI chat interface. Use natural language to make changes:
Edit vs Create Mode
Toggle between modes using the buttons in the AI panel header:
Edit Mode Examples
When you have an element selected, try prompts like:
- "Make the text larger"
- "Change the background to blue"
- "Add more padding"
- "Make this bold and centered"
- "Change the text to say Welcome to our marketplace"
Create Mode Examples
With no element selected, or in Create mode, generate new components:
- "Add a testimonials section with 3 customer reviews"
- "Create a hero section with headline and CTA button"
- "Add a pricing table with 3 tiers"
- "Create a features grid with icons"
AI Capabilities
The AI assistant can perform these actions:
💡 Pro Tips
- • Be specific about what you want: "Make the padding 24px" works better than "add some padding"
- • The AI sees the element's current styles, so it can make relative changes like "make it larger"
- • Chat history clears when you switch to editing a different element
- • Use the floating AI button for quick access to the chat input