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:
Once you click on it, you will see the Visual Editor:
- The experiment title is the name of your experiment. Choose a memorable, descriptive name for your experiment.
- The Save options contains basic tools to save, undo, and redo changes.
- The Editing or Browsing Mode allows you to toggle between Editing Mode and Browsing Mode.
- The Options menu contains common settings for your experiment, such as Change Editor Page, Element Selection Settings, Global Experience JS code.
- The Window Size allows you to view web page for different tablet/mobile resolutions.
- The variations menu contains common settings for your variations, such as Live Preview
- 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:
Select Container 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.
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
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.
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.
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.