This article will help you:
  • Use the features available in the Visual Editor
  • Change text, images, or style of elements on your page
  • Change background images, add videos, or "copy and paste" elements
  • Use Interactive Mode to edit dynamic elements like dropdown menus or hover states
  • Learn best practices for using Editor features
  • Use keyboard shortcuts
  • View mobile sites in the Editor

The Visual Editor in a nutshell

The Visual Editor allows you to make simple, visual changes to your site. For example, use the Editor to add or remove an element, or change the Call-to-Action on a page. Then, test how visitors navigate these variations compared to the original experience.

Key tips

What to watch out for

The Optimizely Visual Editor, also known as the WYSIWYG (What You See Is What You Get) Editor, allows you to create variations of your pages for your experiments.

Want to see the Visual Editor in action? Watch this short video on making basic changes.

 

 

Introduction to the Editor

Let's take a quick tour of the Visual Editor:


The experiment title is the name of your experiment. Choose a memorable, descriptive name for your experiment.

The top panel contains basic tools to save, undo, and redo changes. Here, you can also create or use audiences and goals, and start or pause your experiment.

The editor modes allow you to toggle between Editing Mode and Interactive Mode. For more information, see the Interactive Mode section of this article.

The Options menu contains common settings for your experiment, such as URL Targeting and Traffic Allocation.

The variations menu contains common settings for your variations, such as Preview and Redirect to a new page

The <edit code> box lets you create variations using code. For more information, see our article on the code editor.

In the following sections, we'll walk you through how to use some key features of the Visual Editor. 

Use Edit Style to change visual or CSS properties

With Optimizely, you can click an element and select Edit Element... > Edit Style to change visual properties contained in the element's CSS.

 
Tip:

Having trouble changing an element's properties using Edit Style? The element might be an image, which cannot be edited through CSS changes. You can tell if an element is an image in the Editor by clicking it and seeing if Change Image appears as an option.

You may also be selecting the wrong element, as many elements overlap on websites. See our section on the Select Container tool below for more information on precisely selecting the right element.

Edit Style allows you to easily change style (CSS) properties of an element, including Text, Color & Background, Dimensions, Borders, and Layout. Some sections also let you modify advanced properties by clicking Show Advanced.

For example, after using Edit Style to change font size, font color, background color, border style, and more on the "Log In with Google" button above, our result looks like this:

If you want to make broader changes to your variation's CSS than what Edit Style allows, then you'll need to enter the CSS into the Edit Code section using the following jQuery code

$("body").append('<style> YOUR_CSS_HERE</style>');
 

Another case where you'll need to use the Edit Code section is changing your background image. This requires code because it's located in your page's "body", which Optimizely does not allow you to select in the Visual Editor.

If you want to change your background image, copy the following code into the Edit Code box, replacing the example URL with the actual URL of your image. This can be found by right-clicking the image in your browser and selecting Copy Image URL

$("body").css({'background-image':'url("http://exampleurl.com/image.jpg")'}); 
 

If the image isn't hosted online, you'll need to use Optimizely's Insert... > Insert Image feature to upload the image, and then you can right-click it to select Copy Image URL.

You can also use Edit Image or Insert Image to add or replace images on your site easily, to perform image swap experiments. The maximum image size that can be uploaded is 4 megabytes.

Select Container can help you choose the right element to change (or track)


Optimizely gives you the ability to select elements on the page that are parents of and contain the element you currently have selected in the editor. This useful tip is for those situations when you are having trouble selecting an element in the Editor, or perhaps a style change isn’t working how you expected it to. You can see the Select Container tool in action by watching the Making Basic Changes video at the top of this page. You can use the Select Container tool to select the parent elements that contain the element you have selected with your mouse.

Just click an element within the container you want to track, then choose Select Container. You should see a long list of HTML elements that contain the element. The top of the list is the next-largest HTML element to the one you selected, and the bottom is the largest HTML element before the <body> itself. In other words, the list goes from most to least specific.

This is an easy way to help select a bigger element that you can't easily select using your mouse. Often, you'll use this to select an item that you want to Rearrange, or to Edit CSS styles for.

Use Move and Resize judiciously; Rearrange is worth using


You can see these features in action in our Making Basic Changes video at the top of this page. Move and Resize adjusts elements by doing a pixel-calculated move. This is fine for small moves, but not good for moving elements over large distances. You may be tempted to use Move and Resize to drag an element from one side of the page to the other, but movement over large pixel lengths (several hundred pixels or more) may cause cross-browser compatibility problems. Different browsers interpret pixel length differently.

Best Practice: 

The best solution when you want to move an element across a large distance is to use the Rearrange tool when you can. By using Rearrange to drag your elements as close as possible to their final placement, you’re rearranging the structure of the HTML and placing the element closer to the elements it will natively be around in the end. You can then from there use Move and Resize to move your elements to their final placement.

 
Tip:

For more advanced users, here are some useful inserting jQuery methods that you can use in the <edit code> box to refine exactly where you want to place your detached elements with the variation code:

These methods allow you to insert new content outside an existing element.

.after()
.before()
.insertAfter()
.insertBefore()

Definitions for the jQuery methods above

 

These methods allow you to insert new content inside an existing element.

.append()
.appendTo()
.prepend()
.prependTo()
.html()
.text()

Definitions for the jQuery methods above

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.

 

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.

 
Note:

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.


The following is an example of how Interactive Mode works. The following page loads with three sections that can be expanded and contracted.



If we want to test on the content contained in the third block called "Learn" we will need to expand it. We can do this by clicking on Interactive Mode in the upper-right corner of the Editor.



Now we're able to click on the plus button to expand this section. Select Editing Mode and click on the headline. The contextual menu will show up. Now make your text changes.



If you click Interactive Mode again, you will see the original page and can interact with it to get it to a different state. Once you click back on Editing Mode you will see your changes applied to the page in the new state.