Skip to content
  • There are no suggestions because the search field is empty.

The Visual Editor in Convert Experiences

🖌️ Edit, Customize & Test Variations with Convert’s Visual Editor

🚀 THIS ARTICLE WILL HELP YOU:

📌 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:

🗒️ Note: You cannot delete a variation from an experience that is active or has been previously started and then paused. In such cases, the delete option will not be visible in the UI. To prevent accidental data loss or inconsistencies in reporting, the variation remains in the experiment but can no longer receive new traffic. If you need to remove the variation entirely, you must clone the experience and restart it as a new test.

Additionally, the delete option in the UI will be shown as disabled (greyed out) with a tooltip explaining why deletion is not possible. This ensures transparency for the user.

🤔 Why Can't I Delete a Variation Mid-Experiment?

In an A/B test, deleting a variation after the experiment has already started can compromise the statistical integrity of the test. This is because:

  1. Randomization Assumptions Break: Every user is assigned to a variation at random, and removing a variation partway through disrupts the expected traffic distribution.
  2. Statistical Bias: If a variation was underperforming and gets removed, the remaining variations' results may become artificially inflated or skewed.
  3. Intent-to-Treat Principle: Proper experimental design dictates that once a user is assigned to a variation, their data should remain in the analysis—even if the variation stops receiving traffic.

✅ Best Practice: Instead of deleting a variation, you can stop sending new traffic to it while keeping its collected data intact. Convert allows you to do this, ensuring that your results remain valid. If you must remove a variation completely, the recommended approach is to clone the experiment and restart it with only the variations you want to test.

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. 

⚠️ Important: Moving elements over large distances using "Move and Resize" may cause cross-browser compatibility issues. Instead, use the Rearrange tool to restructure elements before making fine-tuned adjustments.

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.

TIP: Image uploads are possible through the Visual Editor. Each account-project can upload up to 50 images per hour. The editor also supports SVG image uploads for enhanced flexibility.

👆 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 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. If you need to test how your changes interact with dynamic elements, use the live preview option under the Variation menu instead.

💻 Code Editors

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

The Visual Editor includes an enhanced feature for CSS fields that makes it easier to work with font size, line height, word spacing, and similar CSS properties.

  • You can now specify the metric for these CSS properties directly from a dropdown in the editor. For example, when editing font size, you can select from px (pixels), em, rem, %, mm (millimeters), pt (points), or vw/vh (viewport width/height).
  • In addition, you can also type in text values like "auto" or "inherit" to make the font size dynamic as per your requirements.
  • Note: This feature is not applicable to CSS properties that do not require units (e.g., font weight or z-index). For such properties, the editor will display a simple text box.

css-fields

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

 

This enhancement ensures more accurate styling and faster experimentation with your CSS changes.

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