Edit elements with the new Visual Editor

Once a variation is open in the Visual Editor, you can make content and style changes without writing code. This article covers how to edit a variation, select elements, and add, replace, or design page components.

How variation editing works

• Edits apply only to the selected variation.
• Changes do not update your actual website.
• Every edit is logged and displayed in the Visual Editor’s change list.
• You can undo, modify, or delete any change prior to publishing.
• You can use conditional activation to ensure your experiment activates correctly to reach statistical significance.

Edit a variation

When you edit your site's pages in the Visual Editor, your changes do not overwrite your existing site. Your variations are visible only for the duration of your experiment.

To add a change to the page, click Create.

This opens the following options to edit your variation:

• Insert HTML
• Insert image
• Redirect the page to a different URL
• Experiment code

Edit an existing element on your page

The Visual Editor lets you make changes to existing page elements in your experiment, such as text, buttons, backgrounds, or images.

Select an existing element on the page to see three options:

• Edit element
• Ask Opal
• Drag to rearrange element

Edit element

Click Edit element to open the Element Change window. You can drag the window to your desired location.

When you click a text block or image, the element's name automatically fills the Selector field. If you want to change your selection, click the Search icon (magnifying glass), hover over an element to see your selection highlighted, and then click it to change the selector.

If an element is difficult to select directly on the page, click More (≡) next to the selector field to go up or down the DOM (Document Object Model) tree and target the exact element you want to edit.

You can escape any characters reserved as CSS special characters in your selector by including a single backward slash ( \ ) before each character.

Optionally, enter a name for the element change for better tracking.

You can change the HTML directly in the HTML textbox.

Element properties

You can edit any of the following element properties from the Element Change window:

• Layout – Change the visibility to show, hide, or remove elements. Use the Position drop-down list to select alternative rules for positioning elements on your page.
• Typography – Adjust font size, weight, family, and color. Font family includes all fonts that your site uses.
• Background – Change color and image.
• Border – Modify width, style, and color.
• Styles – Add any inline CSS to override prior changes or CSS styles for the selected element, including Optimizely Experimentation's custom CSS (except for inherited styles). The autocomplete feature is included for easier and faster styling. You can also modify, add, or remove classes of the selected element.
• Timing – Choose between synchronous and asynchronous timing for a change, and check whether a change should wait for a previous change to apply.
  • Synchronous – The change loads simultaneously with the Optimizely Experimentation snippet, before the page is visible. It is ideal for lighter changes that need to run immediately without flashing, like a headline swap.
  • Asynchronous – The change loads after the snippet, applying the change as the page loads. This is suitable for heavier changes where a delay is not noticeable, such as a window or section below the fold.
• (Coming soon) Track clicks – Attach a click event to a new element you added using the Visual Editor to track clicks in that campaign.

Ask Opal

Click Ask Opal to open Opal chat. Opal opens with a prompt asking, Do you have a specific change in mind for this component, or would you like me to suggest some ideas for improvement?

See Prompt engineering for Optimizely Opal Chat to learn how to interact with Opal effectively.

Drag to rearrange element

1. Select the element you want to move.
2. Click Drag to rearrange element to open the drag-and-drop editor.

Edit interactive or dynamic elements

Optimizely Experimentation's Interactive Mode lets you interact with your website from within the Visual Editor. For example, you can use Interactive Mode to edit an item on a drop-down list, close a modal dialog, or open a navigation bar.

Normally, clicking an element in the editor displays the contextual menu, which prevents interaction with dynamic elements. To interact with your page, click Interactive Mode or Press and hold Option (on Mac) or Alt (on windows). This action disables the Visual Editor's element selector, letting you engage with your page.

Interactive Mode displays the original page so that you can interact with it. When you switch back to editing mode, you see the page with the variation code applied.

Advanced editing

See the following articles for more advanced editing options:

• Advanced targeting with attributes
• Add templates