The Visual Editor in Convert Experiences

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:

mceclip0.png

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

mceclip1.png

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:

mceclip14.png

Delete variation:

mceclip15.png

Preview variation:

mceclip16.png

Make changes on element selector

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

mceclip2.png

Container Hierarchy can help you choose the right element

mceclip3.png

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

mceclip4.png

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. 

mceclip5.png

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.

mceclip12.png

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. 

mceclip8.png

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.   

mceclip9.png

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.

mceclip7.png

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.

mceclip10.png

mceclip11.png

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.

mceclip13.png

Need assistance? Start a conversation with our Support Team.
CONVERT MORE

Reliably Convert More Site Visitors, Even If Everything Else is Changing in Your Business.

START 15-DAY FREE TRIAL
✓ No Credit Card  ✓ Easy Set-Up  ✓ Access All Features

Comments