Skip to main content
menu_icon.png

Everything you need to switch from Optimizely Classic to X in one place: See the Optimizely X Web Transition Guide.

x
Optimizely Knowledge Base

The Visual Editor in Optimizely X

There are two versions of Optimizely
What version do you have?
X
Optimizely Classic
This is what the Optimizely Classic user interface looks like.
Optimizely X
This is what the Optimizely X user interface looks like.
. If you're using Optimizely Classic, check this article out instead.
relevant products:
  • Optimizely X Web Experimentation
  • Optimizely X Web Personalization

THIS ARTICLE WILL HELP YOU:
  • Create variations or experiences in the Visual Editor
  • Target a group of visitors according to behavior, custom attributes, or standard attributes like language or device type 

The Optimizely X Visual Editor quickly loads your website and enables you to change the visitors' experience using our Visual Editor or powerful custom code options.

Watch this 3-minute video to learn how to use the Visual Editor:

 

 

Learn more about creating variations and redirect experiments in our Optimizely Academy course, Create a Variation in Optimizely X.

Page not loading in the Visual Editor? Try loading it in the Pop-out Editor. If you're still having problems, read about troubleshooting Visual Editor loading issues.

Change the page that loads in the Visual Editor

When you enter the Visual Editor, you'll see the page you're editing. At the top of the Visual Editor, you'll see the name and URL of that page. These are the same pages that you set up when you implement Optimizely X.

You may want to change the page that loads in the Visual Editor so that you can edit a different element on your site. Here's how to do that:

  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.

For Single URL pages, changing the URL on the Configure Page screen will change the targeting of the page in every experiment and campaign where it's used. If you're using this page in multiple experiments, we recommend creating a new page instead of altering the existing one.

Add pages for a multi-page experiment

To create a multi-page or funnel experiment, click Add Page 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, first select the page you're editing from the dropdown to ensure that your changes are applied correctly.

We recommend that you create new pages in the Implementation section of Optimizely X whenever possible. Pages are reusable across experiments and campaigns. Setting them up in  the Implementation tab lets you create experiments quickly and gather consistent data on the events you add to each page.

Select an element

In the Visual Editor, you'll make changes to the page by selecting an element on the page. There are a few ways to select an element:

  • One-click: Click an element (a block of text or image) on the page to select it. You'll see the name of the element in the Selector field in the left navigation. To change your selection, click the (Screen Shot 2018-03-09 at 4.53.33 PM.png) magnifying glass. Hover over the page to see your selection highlighted. 

  • Find a very specific element: Click an element on your page. Then, find the stack (Screen Shot 2018-03-09 at 4.53.25 PM.png) 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. 

Once you've selected the element, use the HTML and Image fields to modify the element. 

select_container_overview.gif

Sometimes, the element you want to select is difficult to access via a click, or you want to select multiple elements.

Modify the selector, as shown below:

image07.gif

To interact with your page, use the interactive mode () icon to switch the Visual Editor mode to interactive mode. Use this to: 

  • Close a dialog modal

  • Open a navigation bar

This disables the Visual Editor's element selector functionality, so you can interact with your page.

To see the how Optimizely executes your visual changes, check out this article on change execution in Optimizely.

Make visual and text changes

To begin editing, click Create in the menu.

The Visual Editor allows you to modify many of the HTML and CSS properties of your site. Here are your options for visual changes:

  • Edit Text and HTML: directly modify the text or HTML for an element

  • Layout:

    • Show, hide, or remove elements

    • Rearrange the initially selected element relative to another element

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

  • Typography: font size, weight, and color

  • Background: color and image

  • Border: width, style, and color

  • Dimensions: width and height of the selected element

  • Styles:

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

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

  • Timing:

    • Choose between synchronous and asynchronous timing for a change

    • Synchronous means your change loads at the same time as the Optimizely snippet loads (technically inside the snippet), before the page is visible. Use this option for lighter changes that need to 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:

    • 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

Add an element, image, redirect, or extension

Aside from changing existing elements, you can also add a new element (like new text on the page) by clicking Insert HTML.

screencast 2018-03-09 14-55-39.gif

Adding a new element using HTML requires 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.

Click Insert Image to add a new image on the page or Redirect to redirect the page to another URL.

You can add an extension (a reusable element your team can build once and reuse across multiple campaigns) from Implementation Extensions > Create New...

Learn how to create extensions, or check out Optimizely's library of pre-built, reusable extensions.

Use Interactive Mode to edit interactive or dynamic elements

Optimizely's Interactive Mode is designed to allow you to interact with your website while it is loaded in the Editor. For instance, you would use Interactive Mode to edit an item on a drop-down menu or within a tray. Want to see interactive mode in action? Watch this short video.

Interactive_mode.gif

Interactive Mode will always show you the original page so that you can interact with it, changing back to Editing Mode will show you the page in that state with the variation code applied.

Clicking an element in the editor normally brings up the contextual menu, which means you are not able to actually interact with dynamic elements. Enter Interactive Mode to interact with your page as you normally would in the browser. Get it to the state that you want to modify it in and then click Editing Mode or hit Ctrl+I on your keyboard.

If you use interactive mode to navigate away from the originally loaded URL in our web application, it will break the functionality of Visual editor. The reason for this is that you will essentially break out of the iframe that Optimizely is using to control the application of Visual editor changes. You can still do this using our Desktop application that doesn't rely on using iframes.

Rearrange elements

The Visual Editor allows you to rearrange an element relative to other elements on your page. Here's how:

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

  2. Click Rearrange in the left-hand rail. 

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

  4. Use the magnifying glass icon beside the Choose target selector field to choose the element on the page where you'd like to place your original element.

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

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: There have been no new changes since the last publication
    graynochanges.png
  • Orange: There has been a new change, a modification of an existing change, or a deletion of an existing change.
    orangenewmodsdel.png
  • Green: There have been changes successfully published. 
    greenlive.png

Redirect variations

Sometimes, you'll 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, 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.

Here's how to create and test redirect variations.

Optimizely won't erase the existing variation code you've generated if you select this option. Any variation JS or CSS changes that you've made will execute before the redirect.

Preview your changes

As you make changes in the Visual Editor, Optimizely will save your changes and upload them to our CDN (Content Delivery Network). You can preview the changes you've made directly from the Visual Editor.

  1. Check the status of the upload: if Uploading to CDN appears, your experiment is still uploading. Wait until this message disappears to preview your changes.

  2. In the Changes menu, select Preview Tool to view your changes

You can also use the Preview button to:

If you don't see the Preview option in the left-rail, you may may be in the Change Options sub-menu. Exit that menu to find the Preview options.

Pop-out Editor

The Pop-out Editor helps you work around header issues if you're having trouble loading a page in the Editor.

In the Pop-out Editor, click the () icon to load your page in a new browser window.