Use the Visual Editor

Overview

The Visual Editor lets you modify the content of a page without writing code or needing a developer. You'll use it every time you add a variation to an A/B test or personalization experiment.

You can access the Visual Editor after adding a Variation to your experiment. Once you press Visual Editor, a new tab opens showing the page you're editing. Hover over any element - image, link, text, or otherwise - to select and edit it.

The editor interface

Design Mode and Navigation Mode

At the bottom left, two buttons switch between modes:

• Design - the default mode, where you select and edit elements.

• Navigation - lets you interact with the website as a normal visitor would. Use this to reach elements below the fold or on other pages, since Design Mode only lets you edit what's currently loaded.

Switching Variations

Hovering over the Variation Name lets you switch between Control and any Variations, and add, delete, or clone variations as needed.

Switching Devices

Next to the Variation picker, three device options let you preview and edit for Desktop, Mobile, or Tablet. Each includes multiple device models with different screen sizes.

Undo and Code Buttons

• Undo (bottom right) reverses your last change.

• Code shows every change you've made translated into code, and lets you write custom code directly instead of using the visual tools.

Editing operations

Once you select an element in Design Mode, a menu of operations appears. Which ones are available depends on the element type - for example, Link and Anchor only appear for link elements, and Change Image only appears for images.

• Change with AI - change only the selected element using a plain-language description. Powered by Prompt to Code - connect your own AI provider via API key to use this.

• Edit Content - change the text or content inside the element.

• Edit style - opens the full styling panel for the element, covered in its own section below.

• Edit HTML - edit the raw HTML of the element directly.

• Edit Attributes - edit the element's HTML attributes (such as id, class, href, alt) without touching the rest of its HTML.

• Link - available only for links; change the destination URL.

• Anchor - available only for links; change the anchor without losing any JavaScript events attached to it.

• Change Image - available only for images; upload or swap the image.

• Insert from Template - insert a pre-built template block into your variation. Once inserted, a template is fully customizable using the same Edit style panel described below.

• Insert content - add a new element before or after the selected one.

• Trigger experiment - set the element to trigger an Overlay or Survey from your active experiments when clicked.

• Track Clicks - creates a click-tracking goal on this specific element. This is a Local goal - it only applies to the experiment it's created in, and won't appear in the main Goals section. See Goals Overview for the difference between Local and Global goals.

• Move Element - reposition the element.

• Resize - drag the element's edges to resize it.

• Copy - duplicates the element. You can choose to copy the entire element, or copy only its styles to apply them elsewhere.

• Hide - hides the element using visibility: hidden. The element still exists on the page but isn't visible.

• Remove - deletes the element entirely, including all its attributes.

• Select nearby element - select a neighboring element (parent, sibling, or child) relative to the one currently selected.

• Open HTML Explorer - opens a full view of the page's HTML structure, letting you navigate and select elements from the underlying markup rather than by clicking directly on the page.

  

Edit style

The Edit style panel is where you control the visual appearance of any element - text, color, spacing, borders, and layout. It's available whenever you select an element and choose Edit style from the menu above, and it's the same panel used to customize templates added through Insert from Template.

Typography

• Font - your site's default font, or another available font.

• Size - font size in px.

• Weight - font weight (e.g. Extrabold 800).

• Style - Normal or Italic.

• Align - text alignment (left, center, right, justify).

• Line height - line height as a multiplier (e.g. 1.2).

• Letter spacing - spacing between characters, in px.

• Decoration - text decoration (e.g. underline, none).

• Transform - text case transform (e.g. uppercase, none).

Colours

• Text colour - set using a hex code, or pick from a palette pulled from your site's existing colors ("From your site").

• Background - the element's background color. Can be set to transparent, a hex code, or picked from the same site-color palette. Supports transparency/opacity via the color picker.

• Background image - set a background image by pasting an image URL and pressing Apply, or by uploading an image directly.

• Clear - resets all color and background settings for this element.

Spacing

• Padding - internal spacing between the element's content and its edges. Set individually for Top, Right, Bottom, and Left, either by dragging the slider or entering a value directly.

• Margin - external spacing between the element and surrounding elements. Set individually for Top, Right, Bottom, and Left, either by dragging the slider or entering a value directly.

Border

• Style - the border style (e.g. None, Solid, Dashed).

• Width - border thickness in px, set by slider or entering a value directly.

• Colour - the border color, set using a hex code or picked from your site's color palette.

• Corner radius - rounds the corners of the element, in px, set by slider or entering a value directly.

Effects

• Opacity - element transparency, from 0 to 1, set by slider or entering a value directly.

• Shadow - drop shadow applied to the element. Choose from Not set, None, S (small), M (medium), or L (large).

Size

• Width - element width, set by slider or entering a value directly (e.g. 695px).

• Height - element height, set by slider or entering a value directly (e.g. 86.4062px).

• Max Width - maximum width the element can grow to. Accepts any valid CSS length (e.g. 320px, 60%, auto). Leave blank to let the page decide.

Layout

• Display - the CSS display type (e.g. Block, Inline, Flex).

• Position - the CSS position type (e.g. Static, Absolute, Sticky).

• Float - the CSS float value (e.g. None, Left, Right).

• Z-Index - stacking order of the element. Defaults to auto.

Animation

• Effect - choose an animation effect to apply to the element (e.g. None, Slide up, Zoom in).

• Speed - how fast the animation plays (e.g. Normal, Fast, Slow).

• Delay - how long to wait before the animation starts (defaults to None).

• Replay - preview the animation again without leaving the panel.

Custom CSS

For anything not covered by the categories above, add a custom CSS property directly to the element using Add property.

Saving your changes

At the bottom of the Edit style panel:

• Undo (back arrow) - reverts your most recent change within the panel.

• Cancel - exits the Edit style panel without applying any changes made in this session.

• Save - applies your changes to the element.

Explore AI

Explore AI works across the entire page, rather than a single element. Describe an experiment change in plain language, and it inspects the page and builds it as a variation matched to your site's design.

This is different from Change with AI in the element menu above, which only edits the specific element you've selected.

Prompt to Code is the AI behind this: describe the change in plain language and it writes the code for you. See the dedicated article for the full walkthrough.

You can type your own request, or use one of the suggested prompts (e.g. "Suggest 5 test ideas for this page," "Make the main CTA stand out," "Change the headline text").