Visual Editor in Optimizely Web Experimentation and Optimizely Performance Edge

Edit an existing element on your page 

Many experiments involve changes to existing elements on the page—like text, buttons, background, or images. These changes are straightforward in the Visual Editor.

To edit an existing page element:

1. Make sure you are viewing the Create Change tab.

   

2. Click Element Change.

3. Select the element you want to edit. 

   • One-click – Click an element (a block of text or image) on the page to select it. You will see the name of the element in the Selector field in the left navigation. To change your selection, click the magnifying glass icon (). Hover over the page to see your selection highlighted.

   • Find a specific element – Click an element on your page. Then, find the stack icon () in the left navigation to drop down a list of containers. Use this to navigate up and down the tree structure of page elements or DOM.

4. Once you select an element to edit, you can change the HTML directly in the HTML box in the left sidebar.

   

5. From here, you can edit any of these element properties:

   • Layout –

     • Show, hide, or remove elements

     • Rearrange the initially selected element relative to another element

     • Position CSS property options let you choose alternative rules for positioning elements

   • Typography – Font size, weight, and color

   • Background – Color and image

   • Border – Width, style, and color

   • Styles –

     • Inline CSS. You can add any CSS here that will override prior changes or CSS styles for the selected element, including Optimizely Experimentation's own custom CSS (except for inherited styles).

     • Modify, add, or remove classes of the selected element

   • Timing –

     • Not available for Optimizely Performance Edge experiments

     • Choose between synchronous and asynchronous timing for a change

     • Synchronous means your change loads at the same time as the Optimizely Experimentation snippet loads before the page is visible. Use this option for lighter changes that must run right away without flashing, like a headline swap.

     • Asynchronous means that your change will load after the snippet, applying the change while the page loads. Use this option for heavier changes where a delay won't be noticeable, like a popup or a section below the fold.

     • Select whether a change should wait for a previous change to apply

   • Track clicks –

     • Not available for Performance Edge experiments

     • Attach a click event to a new element that you added to the page with the Visual Editor

     • Use it to track clicks in that campaign

6. When you finish editing the element, click Save.

   

Add new elements to your page 

You can also add new elements to your page using the Visual Editor. To do so, follow these steps:

1. View the Create Change tab. Then click Insert HTML.

2. Select an element on the page that will either contain (in the event of a wrapper) or be adjacent to the new element you want to insert.

3. From the HTML Placement drop-down menu, select the location of your new element—before, after, at the beginning of, or at the end of—relative to the element you selected in step 2.

4. In the HTML box, add the HTML for your new element. This will require some HTML knowledge. If you aren't comfortable using HTML, you may need help from someone who can create HTML that you can copy and paste to add the element.

5. Click Save to save your changes.

Add new images to your page 

To add new images to your page using the Visual Editor, follow these steps:

1. View the Create Change tab. Then click Insert Image.

2. Select an element on the page that will either contain (in the event of a wrapper) or be adjacent to the new image you want to insert.

3. From the Image Placement drop-down menu, select the location of your new image—before, after, at the beginning of, or at the end of—relative to the element you selected in step 2.

4. Click Upload New to select and upload your new image.

5. Click Save to save your changes.

Rearrange elements on the page 

The Visual Editor lets you rearrange an element relative to other elements on your page. 

1. Select the element on your page that you want to reposition.

2. From the Layout menu in the left-hand sidebar, click Rearrange.

3. Choose the positioning (Before, At the beginning of, At the end of, After) for where you want the element to go.

4. Use the magnifying glass icon beside the Choose target selector field to choose another element on the page that you'd like to use as a reference point for your original element's new position.

Think of this like a statement. For example: "Rearrange [original element from step 1] to go before [target element in step 4]."

Edit interactive or dynamic elements

Optimizely Experimentation's interactive mode is designed to let you interact with your website from within the Visual Editor. For instance, you would use interactive mode to edit an item on a drop-down menu or within a tray, or close a dialog modal, or open a navigation bar.

Clicking an element in the editor normally brings up the contextual menu, which means you cannot  interact with dynamic elements.

To interact with your page, click the interactive mode icon or use the keyboard shortcut Ctrl+i. This disables the Visual Editor's element selector functionality, so you can interact with your page.

Interactive mode shows you 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.

Edit pages that require authentication

You may need to edit a page that is only shown to authenticated and authorized users or a page that needs to use cookies for other reasons. When loaded in the Visual Editor's iframe, such cookies act as third-party cookies, which are no longer supported by default in Google Chrome. You can edit such pages using our Desktop Application or Pop-out Editor, neither of which will load your page in a subframe.

Add pages for a multi-page experiment 

To create a multi-page or funnel experiment, click Edit Targeting in the dropdown menu to add an existing page or create a new one. You can create variations for different pages on your site in a single experiment.

When making visual or custom code changes to a multi-page experiment, select the page you're editing from the dropdown to ensure that your changes are applied correctly.

Change the page that loads in the Visual Editor 

When you launch the Visual Editor, you see the name and URL of the page you are editing. These are the same pages that you set up when you implement Optimizely Web Experimentation and Optimizely Performance Edge.

You may want to change the page that loads in the Visual Editor so that you can edit a different element on your site. 

1. Click the bar with the name and URL of your page, and click View.

2. In the Configure Page screen, you will see something different, depending on whether your page type is a single URL, or a set of URLs.
   
   For single URLs, you can change the URL field. This changes the page definition in every experiment where it's used. If you're using this page in multiple experiments, we recommend creating a new page instead of changing it.
   
   For A set of URLs or Global page types, you can change the Editor URL field. This only affects which page displays in the Visual Editor; not the actual URL targeting of your page as it displays to visitors.

Redirect the page to a different URL 

Sometimes, you want to redirect to another existing URL instead of designing a variation in the Visual Editor. For example, you may be testing two pre-built landing pages against each other. In Optimizely Web Experimentation and Optimizely Performance Edge, this is called a redirect experiment: one (or more) of your variations will redirect the visitor to the URL of the landing page instead of the original experience.

See create and test redirect variations.

Optimizely will not erase the existing variation code you have generated if you select this option. Any variation JavaScript or CSS changes that you have made will execute before the redirect.

New, Modified, Deleted, and Live Changes 

You may have noticed the numbered gray, orange, and green bubbles, and that they fluctuate as you make changes to and publish the experiment. Here are what the different colors means:

• Gray. No new changes since the last publication

  

• Orange. A new change, a modification of an existing change, or a deletion of an existing change.

  

• Green. Changes published.