Skip to content
Optimizely CertificationOptimizely Certification Optimizely Certification

Create a Visual Experiment

⏱ 15 minutes beginner

Why use the visual editor

Section titled “Why use the visual editor”

Most A/B tests involve changes a marketer can make without developer help — a different headline, a new hero image, a repositioned CTA button. The visual editor lets you make those changes directly on a live preview of your page, see the result immediately, and launch the test in minutes. No pull requests, no deployment cycles, no waiting.

What you will do

Section titled “What you will do”
  1. Create an A/B test experiment
  2. Open the visual editor on your target page
  3. Build one or more variations using point-and-click editing
  4. Preview variations across devices
  5. Save and prepare the experiment for launch

Create the experiment

Section titled “Create the experiment”
  1. In the Optimizely application, navigate to Experiments and click Create New > A/B Test
  2. Name the experiment clearly — include what you are testing and when (e.g., “PDP hero image test — April 2026”)
  3. Enter the URL of the page where the test will run
  4. Click Create Experiment — the visual editor opens automatically

Edit elements in the visual editor

Section titled “Edit elements in the visual editor”

The editor loads your live page with a toolbar overlay. Any change you make applies only to visitors bucketed into the variation you are editing.

Change text

Section titled “Change text”
  1. Click the text element you want to modify
  2. Select Edit Text from the toolbar
  3. Type your new copy
  4. Click outside the element to confirm

Change an image

Section titled “Change an image”
  1. Click the image element
  2. Select Change Image from the toolbar
  3. Paste a URL to the replacement image or upload a file
  4. Adjust sizing if needed

Modify styles

Section titled “Modify styles”
  1. Click any element
  2. Select Edit Styles
  3. Adjust colors, fonts, padding, margins, borders, or visibility
  4. Changes reflect instantly in the preview

Rearrange or hide elements

Section titled “Rearrange or hide elements”
  1. Click an element and select Move to drag it to a new position
  2. Select Hide Element to remove it from the variation without deleting it from your site
  3. Select Insert Before or Insert After to add new HTML elements adjacent to the selection

Create multiple variations

Section titled “Create multiple variations”

You can test more than two options. Each variation is an independent version of the page.

  1. In the variation bar at the top of the editor, click Create Variation
  2. Name the variation descriptively (e.g., “Short headline with green CTA”)
  3. Make your edits for this variation
  4. Repeat to add more — keep total variations to four or fewer to preserve statistical power

The Original is your control. It always reflects your live page without changes.

Preview across devices

Section titled “Preview across devices”

Before saving, confirm that your variations render correctly on different screen sizes.

  1. Click the Preview button in the editor toolbar
  2. Toggle between Desktop, Tablet, and Mobile viewports
  3. Check for layout breaks, text overflow, or misaligned elements
  4. If a variation looks broken on a viewport, adjust styles for that breakpoint

Save your work

Section titled “Save your work”
  1. Click Save in the top-right corner of the editor
  2. The experiment is now in Draft status
  3. Before starting, add metrics and audience targeting (see related guides below)

Troubleshooting

Section titled “Troubleshooting”
IssueCauseFix
Visual editor does not loadBrowser extensions blocking the editor iframeDisable ad blockers and try an incognito window
Changes not visible in previewCSS specificity conflict with site stylesUse Edit Styles to add !important or switch to custom code mode
Editor shows wrong page versionCached version of the page loadedHard-refresh the editor or clear browser cache
Element not selectableElement generated dynamically after page loadUse Element Picker > Advanced and enter a CSS selector manually

Best practices

Section titled “Best practices”
  • Test one hypothesis per experiment. Changing both the headline and the CTA in a single variation makes it impossible to attribute which change drove the result.
  • Name variations by what changed, not by letter. “Urgency headline with red CTA” is more useful than “Variation B” when reviewing results weeks later.
  • Avoid testing on low-traffic pages. The experiment needs enough visitors to reach statistical significance within a reasonable timeframe.
  • Do not edit a running experiment. If you need changes, pause the experiment first. Modifying variations mid-flight invalidates your data.