Introducing the visual editor

Components of the visual editor

The Optimize visual editor consists of ;three main components:

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

The app bar

The app bar consists of the following components:

1.  Experiment name – Displays the name of the current experiment.
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.  – Undo
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.