Skip to main content

 

x
Optimizely Knowledge Base

The Visual Editor in Optimizely X

RELEVANT PRODUCTS:
  • Optimizely X Web Experimentation
  • Optimizely Performance Edge
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

One of the reasons it's so easy to get started experimenting quickly in Optimizely is that you don't need to write any code to do it. The Visual Editor makes this possible.

The Visual Editor is a dynamic, WSYWIG editor that quickly loads your website and lets you adjust the visitor experience for your experiment however you like. Once you've created an experiment, you can open any of the site variations you've created and edit page elements with just a couple clicks.

Of course, if you want to experiment with more elaborate changes to your site, Optimizely also supports adding your own HTML and Javascript with its powerful custom code options.

Keep reading to learn how to use the Visual Editor to edit your experiment's variations. You can learn even more about creating variations and redirect experiments in our Optimizely Academy course, Create a Variation in Optimizely X.

If you're using Optimizely Performance Edge, certain features in the Visual Editor will not be available to you. Optimizely Performance Edge is a lightweight experimentation product that delivers significantly faster performance than previous versions of Optimizely. It does this by relying on a streamlined "microsnippet" which limits the range of available features.

You'll see this notation edge-info.jpg whenever the text describes a Visual Editor feature that is available in Performance Edge.

Editing a variation in the Visual Editor

When you first open the Visual Editor, you'll see the page you specified when you first created the experiment. It will appear exactly the way it currently does on your site.

visual_editor_2.png

When you edit your site's pages in the Visual Editor, the changes you make do not overwrite your existing site. Your variations will be visible only for the duration of your experiment. When the experiment's over, you can always push a winning variation to live on your site permanently. However, your developer will have to handle that process.

The Visual Editor enables you to make five different types of changes:

You can also use the Visual Editor to add pages for a multi-page experiment, edit dynamic or interactive elements of your site, or change the page that loads when you open the Visual Editor.

You can also create a new extension to use in your variation. Check out this Knowledge Base article to learn more about extensions in Optimizely X.

But before you can make any of these changes, you must first open the variation you want to modify, find the Changes section and click the Create button.

visual_editor_3a.png

This will take you to the Create Change window. You may now begin editing your variation.

Edit an existing element on your page edge-info.jpg

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

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

To edit an existing page element:

  1. First, make sure you're viewing the Create Change tab.

visual_editor_4.png

  1. Click Element Change.

  2. Select the element you want to edit. There are two ways to do this:

  • 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 magnifying glass icon (Screen Shot 2018-03-09 at 4.53.33 PM.png). Hover over the page to see your selection highlighted.

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

  1. Once you've selected an element to edit, you can make changes to the HTML directly in the HTML box in the left sidebar.

visual_editor_6.png

  1. 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 allow you to 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's own custom CSS (except for inherited styles).

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

  • Timing: 

    • Not available for Performance Edge experiments

    • Choose between synchronous and asynchronous timing for a change

    • Synchronous means your change loads at the same time as the Optimizely 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

  1. When you're finished editing the element, click Save.

change_element.gif

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

Add new elements to your page edge-info.jpg

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

changes-element3.gif

  1. First, make sure you're viewing 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 edge-info.jpg

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

  1. First, make sure you're viewing 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 the Upload New button to select and upload your new image.

  5. Click Save to save your changes.

Rearrange elements on the page edge-info.jpg

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

rearrange.gif

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

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

  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 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's interactive mode is designed to allow you to 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.

interactive-mode.gif

Clicking an element in the editor normally brings up the contextual menu, which means you are not able to actually 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 will always show you the original page so that you can interact with it. When you switch back to editing mode, you'll see the page with the variation code applied.

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.

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.

edit-targeting.png

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.

Change the page that loads in the Visual Editor 

When you launch the Visual Editor, you'll see the name and URL of the page you're editing. 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:

change-page-editor.gif

  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.

Redirect the page to a different URL 

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.
    uploading-cdn.png

  2. In the Changes menu, select Preview Tool to view your changes.
    preview-tool.png

You can also use the Preview button to:

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

New, Modified, Deleted, and Live Changes edge-info.jpg

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
    gray.png

  • Orange: There has been a new change, a modification of an existing change, or a deletion of an existing change.
    orange.png

  • Green: There have been changes successfully published.
    green.png

Add extensions in the Visual Editor

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

extensions.png

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

Pop-out Editor

The Pop-out Editor helps you work around header issues if you're having trouble loading a page in the Editor. Click the icon to load your page in a new browser window.

pop-page-out.png