- 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.
- Use Move and Resize to fine-tune changes to an element on your page.
- Use Rearrange to drag elements across great distances.
- Select the smallest container possible when using Edit HTML.
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.
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:
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.
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.
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.
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()
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.
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.
Edit HTML/Insert HTML is powerful, but use it with care
If you want to test granular HTML changes on your experiments, you can do so by selecting Edit HTML and Insert HTML. This gives you a lot of power to drill down into how your pages are displayed.
For instance, you can use Edit HTML to "copy and paste" elements. Just click the element you want to copy, select Edit HTML, then copy the code within the box. You can then click the area of the page where you want to duplicate the element, select Insert HTML, and paste the code. This will duplicate the element, and you can make changes to the second element from there.
You can also use Edit HTML (or Insert HTML) to add a video to your variation page, by pasting in the embed code for the video you want to add from YouTube, Vimeo, Wistia, or other video services.
When you click Insert > Insert HTML you will see something like this:
You then replace the ellipsis (...) with the video's embed code, which should look like this:
Note that iframed videos cannot be tracked for goals unless you implement a callback API. If you are an enterprise customer, please file a support ticket for more information.
Edit HTML is a powerful feature, but it comes with a few warnings.
Your HTML changes can get very large very quickly, so select the smallest container possible. Make sure to narrow the selection that you want to edit as much as possible from within the Editor. For example try to grab the image within the div, instead of editing the HTML of the whole parent div itself. When the Edit HTML tool appears, you will see all the existing HTML that was selected, and this is potentially all the text that could be added to your variation code. So even if you were to make a small punctuation change on only one line, the entire dialogue of text could be translated into a jQuery .replaceWith() statement. You can verify what the variation code looks like by checking the Edit Code box we mentioned before. The file size of your snippet will increase with each character you include. For edits with over 10,000 characters, this can cause the visitor's page to load more slowly, and can make it very difficult to debug if there’s a problem.
Try to avoid making multiple HTML changes in the Visual Editor to the same element. If you feel the need to have to re-do or re-write the HTML you’ve just edited, it is highly recommend you try to adjust the variation code for your previous change directly (in the <Edit Code> box), or make your new change and then go into the code and delete your previous Edit HTML change. You can delete your old code first and make a new one from scratch as well. With a new Edit HTML change, you will replace all the content you have selected anyway, so there’s no reason to keep the older variation code that’s editing the same element.
Be cautious about using Edit HTML on dynamically loaded content. This includes product prices, product details, or even ads that are specific to the version of the page you have loaded in the Editor. Because Edit HTML hard-codes all the content you’ve selected to edit, you could easily overwrite dynamic content and make it static. The new variation code will assume the page will always look the way it does when the change was made in the Editor. If you can see the raw HTML for an element in the Edit HTML dialog box, all that content will be hard-coded once you select Done for your change, even if your change isn't touching any of it. Try to avoid editing the dynamic content and focus on selecting the areas of the page that do not encompass them. There may be alternative ways using jQuery to edit your experiment in those areas if you must, and Edit HTML does not need to be your only tool.
Using Editor Settings to change the page in the Editor
Editor Settings lets you control which page is loaded into the Editor. It has nothing to do with where your experiment runs. To control where your experiment is executed please use the URL Targeting Conditions.
In most cases, you will just want to load the page that you want to run the experiment on. However, sometimes you want to run an experiment on a group of pages, such as multiple product pages. To do this, load one page in the Editor that has the template that you want to modify and use that page to create your experiment. Then use Options > URL Targeting to extend the experiment to all other pages that share the template.
Clicking Options > Editor Settings should bring up a dialog that looks like this:
The dialog should also tell you if the URL that you originally loaded redirects to another page. This could be very helpful in identifying where the experiment should be set to run. If the page redirects, make sure that the experiment is set to run on the page it redirects to. If you are trying to load a URL that automatically redirects elsewhere Optimizely will be redirected as well, so it's usually best to load the URL that you eventually get redirected to.
Editing Mobile Web Sites in the Editor
You can use the Optimizely Editor to test the content of your page as it would display to a mobile user. To do this, go to Options > Editor Settings.
Then, in the Editor Settings interface, enter the URL of your site, and check the box that reads Load mobile version of pages. The site will now display as it would on the device that you select. Your options are Android Phone, Android Tablet, iPad, and iPhone.
If you have a mobile-specific site (for example, m.yoursite.com), enter that URL to load that site in the editor. If your site uses responsive design, you can test that site using this feature as well. This is how you make visual changes to a responsively designed website.
The Editor Settings feature doesn't affect where the experiment runs, just what page you're looking at in the editor. If you make changes to a site that is not mobile-only, you will want to set up audiences to apply them only to visitors who use mobile devices.
Click Apply, and the editor will reload with your site as displayed on the mobile device that you selected. You will now be able to create variations with the same editor features as you would for a non-mobile site.
The Editor simulates a mobile device by loading the page through a proxy and changing the user agent to the selected mobile device. If your mobile site uses certain cookies, session states, or gated content, this may cause the page to load incorrectly in the Editor. If this happens to you, please contact Optimizely Support.
Keyboard Shortcuts in the Editor
Keyboard shortcuts, or hotkeys, help you save time by allowing you to access commonly used features quickly. We designed these to be easy to learn and helpful to use:
Toggle variation code: C
Toggle variation menu: V
Toggle interactive mode: Ctrl + I
Toggle options menu: O
Redo : Y
Add variation: N
Switch to original variation: ` (grave accent, left of 1 key)
Switch to variations 1 through 10: number keys 1 through 0
Previous variation: - (minus key)
Next variation: = (equals key)