Skip to main content

Using the Visual Editor

The Visual Editor allows you to build and modify experiment variations directly on your website—without needing to work in your codebase.

You can visually edit elements, change styles, insert new content, and apply custom logic, all within an intuitive interface.

What you can do in the Visual Editor​

The editor gives you full control over how your variations look and behave.

Edit element styles​

You can modify the most common styling properties with simple controls, for example:

  • Appearance and layout
  • Text content
  • Colors and backgrounds
  • Font size, weight, and spacing
  • Margin and padding
  • Positioning

Learn the basics on how to edit an element

Select and edit multiple elements​

You can apply the same change to several elements at once:

  1. Click the first element to select it.
  2. Hold Shift and click another element to add it to the selection.
  3. Continue holding Shift while clicking additional elements. Shift-click an already selected element to remove it from the selection.
  4. Make your changes in the editor. The changes are applied to all selected elements.

The sidebar shows how many elements are selected. A normal click without Shift replaces the multi-selection with the newly selected element.

Apply changes to a repeating group​

When the selected elements have a similar structure—for example, matching buttons in repeated product cards—the editor may identify a shared selector. In that case, the Apply to the repeating group? prompt appears and shows how many elements the suggested selector currently matches.

Choose one of the following options:

  • Keep selected N keeps the change limited to the elements you selected individually.
  • Use all matches changes to the shared selector. The change applies to every element that currently matches that selector and to matching elements added later.

Hover over the suggestion to preview which elements the shared selector matches. Check the match count and highlighted elements before choosing Use all matches, especially when the page contains repeated elements that should not receive the change.

Create targeting and goals from an element​

The three-dot menu beside the selected element's CSS selector provides shortcuts for using that selector elsewhere in the experiment:

Move elements​

Rearrange elements on the page to test different layouts and structures with a simple click, select and apply.

Learn how to move an element

Add new content​

You can insert entirely new elements into your page by just pasting the HTML.

Learn how to add content by writing or pasting HTML.

You can also use the AI prompt to have this generate new content for you.

Learn how to Add content using AI

Apply device-specific changes​

Customize experiences for different devices.

  • Show or hide elements per device
  • Adjust styles for mobile, tablet, or desktop

Learn how to do device-specific changes

Go beyond point-and-click editing​

If the setting you need isn’t available through the visual controls, you have more advanced options.

Use AI-assisted styling and functionality​

You can use the AI prompt to generate:

  • Custom styling
  • Behavior changes
  • Interactive functionality

The generated output is applied as custom CSS and JavaScript, which you can review and edit at any time.

Add custom code to elements​

Each element supports custom code for deeper control.

  • Write CSS to control styling
  • Write JavaScript to control behavior
  • Code is scoped to the selected element

See examples

Write global CSS and JavaScript​

For broader changes, you can define global code that applies across the entire page or experiment.

  • Global CSS for styling across elements
  • Global JavaScript for shared functionality

This can be done by clicking the code icon in the editor toolbar

Full transparency and control​

All changes made in the editor—whether visual or AI-generated—are:

  • Visible in the code tab
  • Fully editable
  • Not locked behind abstractions

This ensures both marketers and developers can collaborate effectively.

Summary​

With the Visual Editor, you can:

  • Quickly build and test variations without coding
  • Select multiple elements and apply one change to all of them
  • Target a complete repeating group with a shared selector
  • Fine-tune styles and layouts visually
  • Add advanced functionality with custom code
  • Maintain full control and transparency over all changes

It’s designed to support both rapid experimentation and advanced customization.