Visual editor overview

Create variants of web pages to test your hypothesis.

The Optimize visual editor allows you to create variants quickly and without having to re-code.

In this article:

Components of the visual editor

The Optimize visual editor consists of three main components:

  1. 1 – The app bar
  2. 2 – The editor palette
  3. 3 – The current selection

The app bar

The app bar consists of the following components:

  1. 1 Experiment name – Displays the name of the current experiment.
  2. 2 Experiment status – Displays the status of the current experiment.
  3. 3 Variant picker – Drop-down list of current variants, and where more variants can be added.
  4. 4 Change list – Displays a list of all the changes made in the editor for this variant.
  5. 5 Property panel toggle – Turns the property panel on and off.
  6. 6 Interactive mode – Allows you to access parts of your website that are dynamic, such as drop-down menus, slideshows, etc. Click this button to enable Interactive mode, expose the element you wish to edit, then switch back to Editing mode to make changes.
  7. 7 Hierarchy bar – Displays where the current selection lives in the page structure. Note: click on the greater than symbol (“>”) next to any element to select any of its child elements.
  8. 8 Move settings
    • Reorder – Allows you to cleanly and simply move elements around in the page, preserving the page’s structure as you do.
      • Automatically select for re-order - When on, the editor will attempt to automatically select the right element to move for you.
      • Re-order outside target element - When on, you can only reorder items before or after other elements. Turning this off allows you to place one element inside of another - for example, in between two paragraphs.
    • Move anywhere – Allows you to move an element anywhere on the page by floating it above the rest of the content.

The editor palette

The editor palette is a floating palette that appears in the lower-right of the screen when using the visual editor. It contains all the editable elements of the current selection. For example, when a text element is selected, some of the editable options will include:

  1. 1 – Undo
  2. 2 – Redo
  3. 3 – Stop editing
  4. 4 – More menu (Also invoked by right clicking on an element.)
  5. 5 – Dimension editing tools
  6. 6 – Location editing tools
  7. 7 – Typography editing tools

After making changes to a variant in the visual editor, you must click Save in the upper-right of the app bar to save your changes. Click Done to return to the experiment detail view, or the back arrow in the upper-left to exit without saving.

Quick Tip: Editor Overview

Was this helpful?
How can we improve it?