Use the Visual Editor for an A/B Test

The Visual Editor in Zoho PageSense lets you create variations of your webpage without changing the original webpage code. You can edit content, change styles, rearrange elements, add or remove elements, and make advanced changes using custom HTML, CSS, and JavaScript.

Open the Visual Editor

The webpage will open in the Visual Editor, where you can create and modify your variations.
Select the required variation from the Variation dropdown to edit it.

Understand the visual editor

The Visual Editor provides the following options for creating and managing your variations:

Option	What you can do
Create New Variation	Create additional variations and rename, duplicate, or delete existing variations.
URL Targeting	Include multiple webpages in the same A/B test when using URL targeting.
Device View	Switch between Desktop, Mobile, and Tablet views while editing and previewing your variation.
Undo/Redo	Undo or restore your recent changes.
Global Code	Add JavaScript or CSS that applies across the entire experiment, including the Original and all variations.
JS/CSS	Add JavaScript or CSS specific to the selected variation.
Edit/Interact	Switch between editing webpage elements and interacting with the webpage.
Editor Panel	Access the available editing options for the selected element.

Create and manage variations

You can create multiple variations of the Original webpage and compare their performance.

To create a variation:

Open the Variation dropdown in the Visual Editor.
Click Add New Variation.
Make the required changes to the new variation.

You can also use the More icon next to a variation to rename, duplicate, or delete it.

Edit webpage elements

Select an element on the webpage to open the editor panel and make the required changes.

Action	Description
Edit Text	Change headings, paragraphs, button labels, and other text.
Edit HTML	Modify the HTML of an element.
Add HTML	Add new HTML content to the webpage.
Edit Image	Replace or modify images.
Add Image	Add images to your variation.
Add Media	Add supported audio or video content using the HTML editor.
Move Element	Reposition an element on the webpage using drag-and-drop.
Hide Element	Hide an existing element from the variation.
Delete Element	Remove an element from the variation.
Change Style	Modify the appearance and styling of an element.
Change Link	Change the URL associated with a link or element.
Set Goal	Use an element as a conversion goal for the experiment.

PageSense automatically generates the required HTML and CSS for many visual changes, so you don't need to write code for basic modifications.

Switch between Edit and Interact modes

The Visual Editor provides Edit and Interact modes for working with your webpage.When your A/B test includes multiple webpages, you can use the Visual Editor's Interact mode to navigate through the website and access the required page. This is useful when you have configured URL targeting for multiple pages and need to make or verify changes across the targeted webpages.

Mode	Purpose
Edit	Select and modify webpage elements in your variation.
Interact	Interact with the webpage as a visitor would, including clicking buttons, opening dropdowns, using toggles, and navigating through the webpage.

Use Interact mode when you need to navigate through your webpage or access elements that require an interaction before they can be edited. Switch back to Edit mode when you want to make changes to an element.

Example

Suppose your homepage has a dropdown menu that contains the element you want to modify.

Switch to Interact mode.
Open the dropdown.
Navigate to the required section.
Switch to Edit mode.
Select and modify the required element.

This is particularly useful when working with interactive navigation, menus, toggles, and other dynamic elements.

Change the device view

Use Device View to see how your variation appears on different screen sizes.

You can switch between:

Desktop
Mobile
Tablet

You can also make style changes while viewing a particular device. This helps you verify that your variation is displayed correctly across different devices.

Tip: Always review significant layout or styling changes across desktop, mobile, and tablet views before launching your experiment.

Add custom JavaScript and CSS

For advanced changes that cannot be created using the standard editing options, you can use the JS/CSS editor.

Variation-level code

Use the JS/CSS option when you want the code to apply only to the selected variation.

For example, you can use JavaScript to change an element's text or URL, or CSS to modify its appearance.

Global Code

Use Global Code when you want JavaScript or CSS to apply across the entire experiment.

Global Code applies to:

The Original
All variations

For example, if you want to apply the same CSS styling across every version of the experiment, you can add it through Global Code.

Important: Use Global Code carefully because changes made here affect the Original as well as all variations.

Undo or redo changes

Use Undo or Redo from the Visual Editor toolbar to reverse or restore recent changes made while editing your variation.

Preview your variation

Before moving to the next step, review your variation to make sure:

The intended changes are visible.
Elements are positioned correctly.
Buttons and links work as expected.
Interactive elements function correctly.
The page works across desktop, mobile, and tablet views.
Custom CSS or JavaScript does not interfere with existing functionality.

PageSense also provides QA Mode later in the experiment setup, which can be used to verify variations, audience conditions, events, and user flows before launching the experiment.

Save your changes

After completing your variation:

Review the changes you made in the Visual Editor.
Verify the variation across the required device views.
Click Save.
Click Next to continue configuring your experiment.

Note: You can make changes to an A/B test variation while the experiment is in the Draft or Paused state.

We’ve designed this documentation to guide you every step of the way. If you need further assistance or have any questions, don’t hesitate to contact us at support@zohopagesense.com - we’re always here to help!