Original Visual Editor

22 min

Optimizely Web Experimentation

Optimizely Performance Edge

Optimizely Personalization

Note

There is a new version of the Visual Editor in beta. See New Visual Editor and Visual Editor version comparison.

Using the Visual Editor, you can easily start experimenting with Optimizely Web Experimentation, Optimizely Performance Edge, and Optimizely Personalization.

The Visual Editor is a WSYWIG editor that loads your website and lets you adjust the visitor experience for your experiment however you like. After creating an experiment in Web Experimentation, Performance Edge, Optimizely Edge Delivery, or creating a Web Personalization campaign, you can open any variations you have made and immediately edit page elements.

If you want to experiment with more elaborate changes to your site, Web Experimentation and Performance Edge also support adding your custom HTML and JavaScript with custom code options.

Note

Some Visual Editor features are not available for Optimizely Performance Edge users.

Open the variation visual editor

After creating an experiment in Web Experimentation or Performance Edge or creating a campaign in Web Personalization:

Select your experiment or Web Personalization campaign.

Click Design > Variations and click a variation for Web Experimentation and Performance Edge, or click Experiences and click an experience name for Optimizely Personalization. You can also create a variation and open the code editor by clicking Add Variation.

When you open the visual editor, you see the targeted URL or page you specified when you created the experiment. It displays the way it currently does on your site.

Edit a variation in the visual editor

Note

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 options to make changes to your variation.

Edit an existing element on your page

Many experiments involve changes to existing elements on the page, like text, buttons, backgrounds, or images. These changes are straightforward in the visual editor.

Note

While most of the features discussed in this section are available for Optimizely Performance Edge experiments, Timing and Track Clicks are not.

To edit an existing page element, click Element Change.

Select the element you want to edit.

One-click – Click an element (a block of text or image) on the page to select it. The element's name fills the Selector field. To change your selection, click Search (magnifying glass icon). Hover over the page to see your selection highlighted.

Find a specific element – Click an element on your page. Click More next to next to the selector field. Go up and down the tree structure of page elements or DOM.

Note

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

When you select an element to edit, you can change the HTML directly in the HTML textbox.

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 that overrides prior changes or CSS styles for the selected element, including Optimizely Experimentation's custom CSS (except for inherited styles).

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

Timing (not available for Performance Edge) –

Choose between synchronous and asynchronous timing for a change.

Synchronous – Your change loads simultaneously 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 – Your change will load after the snippet, applying the change while the page loads. Use this option for heavier changes where a delay will not be noticeable, like a window 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) –

Attach a click event to a new element you added to the page with the visual editor.

Use it to track clicks in that campaign.

When you finish editing the element, click Save.

Note

See Default change order in Optimizely Web Experimentation for more.

Add elements to your page

Go to Create Change > Insert HTML.

Select an element on the page for your new element.

Select the location of your new element relative to the element you selected.

Add the HTML for your element. This requires some HTML knowledge. If you are uncomfortable using HTML, get help from someone who can create HTML that you can copy and paste to add the element.

Click Save to save your changes.

Add images to your page

Go to Create Change > Insert Image.

Select an element on the page for your new image.

Select the location of your new image relative to the element you selected.

Expand Select Image and select one of the following:

Upload New – Select and upload an image from your local file system.

Choose from DAM – Select and upload an image from the Optimizely Digital Asset Management (DAM) library.

Note

You must have an Optimizely product that has DAM to use it with Optimizely Experimentation.

Click Save to save your changes.

Rearrange elements on the page

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

Go to Layout > Rearrange.

Choose the positioning for the element:

Before

After

At the end of

At the beginning of

Use Search beside the Selector field to choose another element on the page 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 lets you interact with your website from within the Visual Editor. For example, use interactive mode to edit an item on a drop-down list within a tray, 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 Interactive Mode. This turns off 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.

Warning

If you use interactive mode to go away from the originally loaded URL, the Visual Editor will not work. The new page in the editor will not respond to the Visual Editor and will not apply any changes you specify.

To visit and edit a different page on your website, see the Change the page that loads in the visual editor section.

Edit pages that require authentication

You may need to edit a page only shown to authenticated and authorized users or a page that needs cookies for other reasons. When loaded in the visual editor's iframe, such cookies act as third-party cookies, no longer supported by default in Google Chrome. You can edit such pages using the Optimizely 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 drop-down list to add an existing page or create 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 from the drop-down list to ensure your changes are applied correctly.

Note

You should create new pages in the Implementation section whenever possible. Pages are reusable across experiments and campaigns. Setting them up in the Implementation tab lets you create experiments and gather consistent data on the events you add to each page.

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 you set up when implementing Web Experimentation, Web Personalization, or Performance Edge.

You can change the page that loads in the visual editor so that you can edit a different element on your site:

Click the URL bar with the name and URL of your page, and click Edit Targeting.

On the Activation page, you will see something different, depending on whether your Target By drop-down is set to URL or Saved Pages.

URL – Update the Editor URL field.

Saved Pages – Click Browse for Pages or select from Recently Created Pages.

Warning

Updating the Editor URL changes the page shown in the visual editor but does not change the URL that the experiment or campaign targets.

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 test 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.

Preview your changes

As you make changes in the visual editor, Optimizely Web Experimentation and Optimizely Performance Edge will save and upload your changes to the Optimizely CDN (Content Delivery Network). You can preview the changes you have made directly from the visual editor.

Check the upload status: If Uploading to CDN displays, your experiment is still uploading. Wait until this message disappears to preview your changes.

Go to Changes and select Preview Tool to view your changes.

You can also click Preview to send a shareable link to your other collaborators so they can preview changes.

Note

If you do not see the Preview option, you may be in the Create Optionssection. Exit that menu to find the Preview options.

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 is what the different colors mean:

Gray – No changes since the last publication.

Orange – A change, modification of an existing change, or deletion of an existing change.

Green – Changes published.

Add templates

You can add a template (a reusable element your team can build once and reuse across multiple campaigns) from Implementation > Templates > Create Template.

Learn how to create extensions.

Pop Page Out editor

The Pop Page Out editor helps you work around header issues if you have trouble loading a page in the visual editor. Click Pop Page Out to load your page in a new browser window.