The Visual Editor in 10Web AI Editor lets you select and edit website sections, containers, text, images, buttons, forms, menus, and other page elements directly on the page. You can update styles manually, ask AI to make quick changes, replace images and manage WordPress-connected content.
The available editing options change depending on the element you select. For example, selecting a text element opens typography controls, while selecting a section or container opens layout, spacing, background, and other style settings.
Before you begin
Open your website in the 10Web AI Editor and switch to Edit mode. You can open the Visual Editor from the top toolbar or by clicking the Edit button in the AI chat panel.
Note:
The Edit button in the top toolbar and the Edit button in the AI chat panel open the same Visual Editor.
Select an element
To edit an element, click it directly on the page. The selected element will be highlighted with a blue outline, and a label will appear showing the selected element or section name.
For example, when you select a section, the label may show the section name. When you select a text or image element, the label may show the element type, such as p, h2, span, or img.
If you need to select the parent container of the current element, click the small blue parent icon next to the selected element label.
Note:
Some editing options may not be available for every element. The left settings panel changes based on the selected section, container, or element.
Use the floating toolbar
When you select an element, a floating toolbar appears near the selected item. Depending on the selected element, the toolbar can include options for quick AI changes, image replacement, code access, management, or deletion.
Ask for quick changes
Use Ask for quick changes to send the selected element or section as context to AI. This helps AI understand exactly which part of the page you want to update.
For example, after selecting a section, you can ask AI to change the section background, rewrite the text, generate a new image, or adjust the layout.
Replace an image
If the selected element includes an image, such as an image element or a section background image, the image option appears in the floating toolbar.
Click the image option to choose an image from the WordPress Media Library or upload a new image.
Note:
To generate a new image with AI, use Ask for quick changes and ask AI to generate or replace the image. The image option is used for selecting an existing image from the Media Library or uploading a new one.
Open the element in code
Click the </> icon to open Code mode at the file and line where the selected element is located. This is useful if you want to continue editing the selected element directly in code without searching for it manually.
Delete an element
Click the delete icon to remove the selected element or section.
Important:
The delete action is applied immediately. If you delete something by mistake, you can use Ctrl + Z on Windows or Command + Z on Mac to undo the action, or click Discard.
Edit section and container styles
When you select a section or container, the Visual Editor shows style controls for that selected area. You can update the section background, colors, spacing, layout, size, border radius, stroke, and other available settings.
Some sections also show quick style controls directly on the canvas. For example, you may be able to switch the selected section between light and dark modes or choose quick background options such as Background or Muted.
Note:
Section light and dark controls apply only to the selected section or container. They affect the full selected section, including the elements inside it, but they do not change the global website theme.
Use the left settings panel
After selecting an element, use the left settings panel to edit its available settings. The settings are grouped into collapsible sections.
Colors
The Colors section lets you edit color-related settings for the selected element. Depending on the element, you may see options such as:
- Text color
- Background color
- Opacity
- Fill opacity
Color pickers may include theme colors, Tailwind palette colors, custom colors, and search.
Spacing
The Spacing section lets you adjust margin and padding for the selected element.
You can edit spacing values individually for each side or use the toggle option to control all sides together.
Layout
The Layout section includes alignment and positioning options when they are available for the selected element.
Note:
Some layout options may show as unavailable depending on the selected element and its parent container.
Size
The Size section lets you adjust width and height settings for the selected element when supported.
Border radius
The Border radius section lets you control how rounded the selected element corners are. Available options may include:
- Default
- None
- Extra Small
- Small
- Normal
- Medium
- Large
- Extra Large
Stroke
The Stroke section lets you add or edit the selected element border style. Available stroke styles may include:
- None
- Solid
- Dashed
- Dotted
Effects
The Effects section lets you add shadow styling to the selected element when supported.
Open the Shadow dropdown to choose from available shadow options, such as:
- Default
- None
- Extra Small
- Small
- Normal
- Medium
- Large
- Extra Large
Edit text
To edit text, select the text element on the page. You can edit the text directly on the canvas by clicking into the selected text and typing your changes.
Most text elements, including headings such as h2, also show a Content field in the left settings panel. You can use this field to update the text instead of typing it on the canvas.
Note:
A few element types may not show a Content field, depending on how the element is built. If a selected text element has no Content field, edit it directly on the page instead.
Typography settings
When a text element is selected, the left panel may show typography controls such as:
- Font family
- Font weight
- Font size
- Text alignment
- Text decoration
Open More settings under Typography for additional controls:
- Text case — Uppercase, Lowercase, or Capitalize
- Bullet lists and checklists, for a text block
- Paragraph spacing and list spacing, set in pixels
- Text stroke, which outlines the letters rather than boxing the whole text block
You can also adjust color, opacity, spacing, size, border radius, stroke, and other available style settings for the selected text element.
Edit images
To edit an image, select the image directly on the page. The image will be highlighted with a blue outline, and the selected element label may show img.
Depending on the image element, you can update image-related styles from the left panel, such as colors, spacing, layout, size, border radius, stroke, and effects.
To replace the image, use the image option in the floating toolbar and choose an image from the WordPress Media Library or upload a new image.
Manage WordPress-connected elements
Some elements are connected to WordPress-managed content or site settings. These elements can be selected and styled in the Visual Editor, but their content or source settings should be managed from WordPress or the related dashboard section.
Posts, products, and other repeated content
When you select a Posts section, you can style the section in the Visual Editor. However, the actual post content cannot be edited directly from the selected section.
Click Manage in the floating toolbar to open the Posts section in WordPress admin and manage the posts there.
Note:
When you select one repeated item inside a list of posts or products, the left panel shows limits instead of full style controls: a message that dynamic content isn't currently supported, that list style is unavailable because it would change the underlying data, and that layout changes apply to all items in the list, not only the one selected. Use the editor's Edit in WordPress link, or the Manage option, to change that content itself. Images inside repeated items offer an image resolution choice instead of the usual replace-image option.
Menus
When you select a website menu, click Manage to open the WordPress menus page. From there, you can manage the menu items.
Forms
When you select a form, click Manage to open the Forms screen in WordPress admin, where you can manage the selected form's submissions and settings.
Custom post types and Dynamic Data
If a section displays custom post type content, click Manage to open the Dynamic Data tab. From there, you can manage the custom post type items shown in that section.
Site logo
When you select the site logo, you can style the logo element in the Visual Editor. To change the actual logo across your website, update the site logo from the WordPress dashboard.
Note:
The site logo is connected to the logo set in WordPress. Updating it from the WordPress dashboard applies the new logo anywhere the site logo is used, such as the header and footer.
Save or discard edits
After making a manual edit in the Visual Editor, the top right of the editor shows Discard and Save.
Click Save to save your manual edit. Click Discard to cancel the unsaved edit.
Important:
If you try to change view, switch pages, change modes, or leave the editor without saving, the editor will prompt you to save your changes so you do not lose your recent edits.
Saving is different from publishing. Saving stores the edit inside the editor, while publishing pushes saved pending changes to the live website.
After saving your Visual Editor changes, publish the website from the AI Editor when you are ready to make the saved updates live.