The Visual Editor in Convert Experiences

THIS ARTICLE WILL HELP YOU:

• Introduction to the Editor
• Make changes on variations
• Make changes on element selector
• Container Hierarchy can help you choose the right element
• Use Move and Resize or Rearrange
• Click Tracking
• Use Browse Mode
• Code Editors
• Window Size
• User agent
• Change Page in Editor
• Element Selection Settings
• HTTP Basic Authentication Settings
• Page Load Timeout Settings
• Open Edited Website in new tab

Introduction to the Editor

The Convert Experiences Visual Editor, allows you to create variations of your pages for your experiments.

Let's take a quick tour of the Visual Editor. You can find the Visual Editor in your Experience Summary, under Variations section:

 

Once you click on it, you will see the Visual Editor:

 

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

Make changes on variations

Add variation:

 

Delete variation:

 

Preview variation:

Make changes on element selector

With Convert Visual Editor, you can click an element and make changes on several properties in the element selector:

Container Hierarchy can help you choose the right element

 

Convert Experiences 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 CSS change isn't working how you expected it to.

Use Move and Resize or Rearrange

 

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.

Click Tracking

Select the element you want to track clicks on, and on the left menu give it a name for better recognition. Once you do that from the settings, you will be able to highlight all click goals you have made via the editor:

Use Browse Mode

Convert Experiences' Browse Mode is designed to allow you to interact with your website while it is loaded in the Editor. For instance, you would use Browse Mode to edit an item on a drop-down menu or within a tray. 

 

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 Browse 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 Browse Mode.

You have to keep in mind though, that when you turn on Browse Mode in a Variation, this will turn off your changes, because it is browsing the original page. However, your changes will remain saved. In this case, would be better to test with the live preview option under the Variation menu.

Code Editors

All code editors that are available via Convert Visual Editor are described here.

Window Size

You can use the Convert Visual Editor to test the content of your page as it would display to a tablet/mobile user. To do this, go to Size on the top panel of Visual Editor.

Then, in the Window Size drop-down you may select the resolution for which you'd like to view the screen. As of now, Window Size provides resolution options like 1280px, 1024px, 768px, 640px. 

Once you click on the resolution of your choice, the editor will reload with your site as displayed on the resolution you selected. 

User agent

You may use the Convert Visual Editor to test the content of your page as it would display on different browsers and devices with the help of the User agent dropdown. You may select the browser type to verify how the web page behaves on browsers like Chrome, Safari, FireFox and Edge and then further filter the browser on basis of devices like Desktop, Mac, iPad, Android and iPhone.   

Change Page in Editor

Change Editor Page lets you control which page is loaded into the Editor. It has nothing to do with where your experiment runs.

Element Selection Settings

This feature is described here or here.

HTTP Basic Authentication Settings

This feature is described here.

Page Load Timeout Settings

This setting allows you to fine-tune how long the Visual Editor needs to wait before the items are loaded (before switching to proxy). By default is set to 8 sec.

 

Open Edited Website in new tab

This is useful when your website does not allow cookies in an iframe and you need to close the consent popup for the edited website.