After creating a variant, click Edit (in Variants) to launch the Optimize visual editor.
Navigating the visual editor
The visual editor interface consists of these components:
- Editor page – a copy of the web page you want to modify or personalize
- App bar – a toolbar that appears across the top of your page
- Editor palette – a floating palette on the lower-right of your page
App bar
The app bar appears across the top of your page when creating a variant in the visual editor and contains a number of features and information about your Optimize experience.
The top row (dark gray) of the app bar contains:
- Back button – Return to the previous page.
- Experiment name (and status) – Displays the name and status of the current experience.
- Variant menu – Quickly jump to another variant by selecting it here.
- Device preset menu – A list of device sizes to check your variant against.
- Changes – The current number of changes. Click to see the changes list.
- Diagnostics [
] – Opens the diagnostics panel to help identify issues. Learn more.
- More [
] – Access additional options, including the Optimize tour and help.
- Done/Save – Click Done when finished editing your variant. Click Save to save your changes and return to the experiment details page.
] – Opens the 
] – Access additional options, including the Optimize tour and help.Let's take a closer look at some of the key features in the top row of the app bar, including the device preset menu and the changes button.
Device preset menu
The Optimize visual editor allows you to ensure that your variant is compatible with multiple screen sizes and device types. It also lets you make responsive style changes that apply to specific screen widths.
There are two ways ways to check your variant's compatibility:
- Choose one of the predefined devices in the device presets menu, at the top of the visual editor: Use this option when you want to test your variant on a specific device model. This option will simulate the corresponding browser user agent and is best suited if you have a dedicated mobile version of your site.
- Choose Responsive from the bottom of the menu, then use one of the responsive preview methods (below) to simulate different screen sizes. Use this option if you have a responsive site that dynamically adjusts to the width and height of the browser screen – even on a desktop web browser. With this option you may also make responsive style changes using the visual editor.
Responsive preview
When you select Responsive from the device presets menu there are three ways to preview your variant in different screen sizes:
- Click in the gray auto-width bar located immediately below the element selector, to simulate predefined page widths (e.g. 320, 400, or 600px). Note: this only changes the width, not the height. If your site is already using responsive CSS, the bar will use your most common width breakpoints, allowing you to easily identify all the different ways that your pages look.
- Enter values directly in the page sizer, located below the auto-width bar, for your desired width and height (in pixels), then press RETURN.
- Drag the dark gray resize handles on the right and bottom edge of your variant to simulate a specific screen size to see how your variant responds. This is similar to how your variant will render when a user dynamically changes the size of their browser window.
Responsive editing
In addition to previewing your variants, selecting Responsive from the bottom of the device menu allows you to make responsive style changes via the breakpoint menu.
The breakpoint menu contains options for the most common simple responsive (i.e. media query) restrictions that apply to your site (for width only). If your site is already using responsive CSS, the bar will use your most common width breakpoints and will let you make changes that are consistent with your current breakpoints.
When you select an option from the breakpoint menu, the editor will enter a special state where all style changes using the editor palette will use this restriction. For example, if you select "Up to 600 pixels wide" from the breakpoint menu, then change the font size used by a button, the button will use the original font on devices or browser windows greater than 600 pixels wide. This will be highlighted in the editor palette. This effect applies only to style changes and will not affect text or content changes.
When using the breakpoint menu, responsive resizing with the resize handles will still work while dragging (to help you preview), but the page size will return to the selected breakpoint width automatically.
You can see and change the media query of each individual style change using the change list or the CSS code editor and you can also use them to specify more complex media query restrictions. You can exit responsive editing mode by selecting All sizes at the top of the breakpoint menu.
Changes button
Optimize automatically creates a list of changes that are applied to the elements on your page as you use the visual editor . This change list is a set of primitive instructions that transform your original page into the variant that you wish to test. Optimize applies the changes to your web page – in the order that you created them – when an eligible visitor loads the variant in their web browser.
Changes button
The changes button appears on the right side of the app bar and displays "No changes" when first creating a variant. As you use the visual editor, the changes button is automatically updated to display the number of changes made to the current variant, e.g.: "15 changes," below:
Changes slider
Click on the changes button ("15 changes") to reveal the changes slider and the changes list, displayed in chronological order.
Change types
The Optimize visual editor supports the following change types:
- Style change – Change style attributes, like size and position.
- Attribute change – Change element attributes, like link target or image source.
- Text change – Make inline text edits.
- HTML change – Add or edit HTML code.
- Reorder change – Change the placement of an element in the DOM.
- Script change – Run arbitrary JavaScript on every element that matches a CSS selector.
Learn more in Visual editor – Change types.
When changes are applied
The Optimize snippet should always be loaded in the page <HEAD>. This means that when the change instructions run, the target elements may have not been parsed and are not available in the page.
Many pages include synchronous scripts in the body that delay the DOM being ready. To avoid flicker, Optimize constantly monitors the document until matching elements can be identified. If a CSS selector matches multiple elements on a complex page with multiple synchronous scripts, the change can be applied progressively on multiple iterations, as matching elements get parsed.
Different change types are also applied at different phases of the parsing. Text, HTML and Reorder changes are applied only when all contents and the closing tag of the matched element have been parsed. Attribute and Style changes only require the opening tag, and Script changes are configurable by the user.
As a further step to minimize flicker, Optimize temporarily hides matched elements (using <STYLE> tags which are added very early) until the elements are matched and changes are applied.
- These details may be significant if your changes involve a global container or the document body.
- Style changes implemented as CSS rules are added synchronously in the
<HEAD>when the Optimize snippet runs and don’t have to wait for matched elements to be parsed.
The order of the changes list is respected when there are side-effects (such as a later change modifying an element that was added by an earlier change). But Optimize may apply changes in a different order when there are no side-effects and matching elements of a later change become available. Optimize may even run changes matching multiple elements progressively and in parallel.
Editor palette
The editor palette appears on the lower-right corner of your web page when you use the visual editor.
The editor palette is dynamic, displaying the appropriate editing controls for an element. Clicking on an element, like a text block or image, enables the Edit element button. Clicking Edit element reveals a drop-down list of editing options, including the option to edit the selected element's text, HTML, or to add HTML or JavaScript to run when the selected element loads.
