Learn the basics of navigating and using the visual editor in Optimize.
The visual editor makes it easy to update your web pages — no coding needed. Just click something on the page, make your changes, and save. You can tweak text, change fonts, swap images, update links, restyle elements, or hide stuff you don’t need. As you make edits, the live preview shows your changes in real time. You can also switch between device views, click around in interactive mode, and track all your changes in a list. When you're ready, your changes can go live as a new variation.
Explore the interface
-
Top navbar — access key settings and tools:
- Variations — view or create variations
- Goals — set or review on-page goals
- Configuration — set pages, audiences, and preconditions or selectors for coded variations
- Optimization name — rename or view the optimization type
- Preview — load the variation on the site page in a new browser tab
- Done — exit the visual editor
-
Center panel — see a live preview of the page
- Live updates — which updates as you make changes
- Display size — preview the page on desktop, tablet, or mobile
- Interactive mode — click links and buttons instead of selecting elements
- HTML breadcrumb — displays the hierarchy of nested HTML tags for the selected element
-
Right panel — updates to display one of three options, which are context-sensitive:
- Changes — while using the visual editor, see the visual editor tools that let you edit pages
- Changes list — click the Changes tab to see a list of all changes in this variation
- Custom code — while using the code editor, you can add custom JavaScript or CSS
- Left panel — see all variations in the Optimization, their status (e.g., draft, live, or paused), or if it's has custom code
About the changes list
Optimize applies changes in the order they’re listed. If one change relies on another, make sure they’re in the right order. Learn more about the changes list.
If your variation includes both visual edits and custom code, the code runs first.
About HTML breadcrumbs
The HTML breadcrumb at the top of the visual editor displays the hierarchy of nested HTML tags for the selected element. This helps you understand how the page is structured and lets you easily refine your selection.
If you select a link inside a heading but want to edit the heading text instead, use the breadcrumb to select the parent tag (e.g., the <h1> element). This gives you more control over what you’re editing and ensures you’re applying changes to the right element.
About element selectors
Each element has a CSS selector used to identify and track it. For most users, this can be ignored. However, developers can manually edit the selector to match custom code or integrations.
- Click the selector field to edit the value or enter a custom one
- Click the Confirm icon to apply the change