Search
Clear search
Close search
Google apps
Main menu

Introducing the visual editor

Create variants of web pages quickly and easily.

When you create a variant of a web page you’ll be taken to the Optimize visual editor which 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.

Related resources

Was this article helpful?
How can we improve it?