Clear search
Close search
Google apps
Main menu

Introducing the visual editor

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. step 1 – The app bar
  2. step 2 – The editor palette
  3. – The current selection

The app bar

The app bar consists of the following components:

  1. step 1 Experiment name – Displays the name of the current experiment.
  2. step 2 Experiment status – Displays the status of the current experiment.
  3. Variant picker – Drop-down list of current variants, and where more variants can be added.
  4. Change list – Displays a list of all the changes made in the editor for this variant.
  5. Property panel toggle – Turns the property panel on and off.
  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. 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. 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. step 1 – Undo
  2. step 2 – Redo
  3. – Stop editing
  4. – More menu (Also invoked by right clicking on an element.)
  5. – Dimension editing tools
  6. – Location editing tools
  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 article helpful?
How can we improve it?