The Visual Editor in Convert Experiences

Introduction to the Editor

The Convert Experiences 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.

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:

mceclip6.png

  1. The experiment title is the name of your experiment. Choose a memorable, descriptive name for your experiment.
  2. The Save options contains basic tools to save, undo, and redo changes.
  3. The Editing or Browsing Mode allows you to toggle between Editing Mode and Browsing Mode.
  4. The Options menu contains common settings for your experiment, such as Change Editor Page, Element Selection Settings, Global Experience JS code.
  5. The Window Size allows you to view web page for different tablet/mobile resolutions.
  6. The variations menu contains common settings for your variations, such as Live Preview 
  7. The <code> box lets you create variations using JS, CSS or variation code. 

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

Use Edit to change element properties

With Convert Experiences, you can click an element and select Edit... to change several properties contained in the element:

mceclip5.png

Select Container can help you choose the right element

mceclip4.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. 

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 will use this to select an item that you want to Rearrange, or to Edit CSS attributes for.

Use Move and Resize or Rearrange

mceclip3.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.

Use Browsing Mode

Convert Experiences' Browsing Mode is designed to allow you to interact with your website while it is loaded in the Editor. For instance, you would use Browsing 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 Browsing 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 Browsing Mode.

You have to keep in mind though, that when you turn on Browsing 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.

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.

mceclip2.png

Window Size

You can use the Convert Experiences Editor to test the content of your page as it would display to a tablet/mobile user. To do this, go to Window 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. 

mceclip0.png

 

User agent

You may use the Convert Experiences 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.   


mceclip0.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