Edit elements with the new Visual Editor
- Optimizely Web Experimentation
- Optimizely Edge Delivery
- Optimizely Personalization
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 edits work
- Edits apply only to the selected variation.
- Edits do not update your live site.
- Every edit is logged and displayed in the Visual Editor change list.
- Undo, modify, or delete any change before publishing.
- 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 Edit.
This opens the following options to edit your variation:
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 display the following options:
- Edit element
- Ask Opal
- Drag to rearrange element
- Duplicate element
Edit element
Click Edit element to open the Element Change window. You can drag the window to your desired location.
When you select 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 backslash ( \\ ) 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.
Inline text edit
Inline edit lets you click and edit text elements directly on the page, just like editing text in a document. You do not need to use a HTML textbox within the Element Change window.
- Click the text element you want to edit.
- Edit the text as required.
- Click Save.
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
- Click Drag to rearrange element to open the drag-and-drop editor.
- Move your cursor above or below another element.
- A placement indicator shows where the selected element will be inserted.
- Hover above an element to place it before.
- Hover below an element to place it after.
- Click to insert the element at the indicated position or drag and drop it into place.
- Click Save.
Duplicate element
- Click Duplicate Selected Element.
- Make changes to the duplicated element.
- Click Save.
Edit interactive or dynamic elements
Interactive Mode in Optimizely Experimentation 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.
By default, selecting an element in the editor displays the contextual menu, which prevents interaction with dynamic elements.
Press and hold Option (Mac) or Alt (Windows) to enter Interactive Mode. You can also click Interactive Mode.
Release the key to return to editing mode.
The key benefit is that releasing the key lets you immediately edit elements that were previously unreachable, such as items in drop-down lists, content behind modals, or expanded navigation bars.
If you navigate away from the originally loaded URL while in Interactive Mode, the Visual Editor does not apply changes you made to the original URL.
To visit and edit a different page on your website, see the Change the page that loads in the visual editor section.
Advanced editing
See the following articles for more advanced editing options: