Create or edit optimization variations

Updated

Build variations to show visitors alternate versions of the page.

A variation is an alternate version of a webpage shown to some visitors so you can identify what resonates and drive engagement. Variations are contained in test or personalization optimizations. For example, to test three new homepage headlines, you'd create an optimization for the homepage with three variations — one for each headline.

How variation edits impact the base page

The original page in Webflow is considered the base page. Nothing on the base page is changed when you make edits in a variation. A copy of the base page's element/content, settings, and/or styles are saved to the variation, based on what you edit.

How base page edits impact variations

Changes you make to the base page can be inherited by a variation, depending on what edits are saved to the variation.

  • Not inherited — a variation won't inherit base page edits if the edits conflict. For example, a header variation with text edits won't inherit edits to that text on the base page.
  • Inherited — a variation will inherit base page edits if the edits do not conflict. For example, a header variation with text-only edits (no styling changes) will inherit header styling edits from the base page.

How to create a variation

Open the optimization in edit mode, then:

  1. Click the Optimizations dropdown in the top bar
  2. Click Add Variation
  3. Enter a descriptive name
  4. Click Create
  5. Make your desired changes
  6. Launch the variation to make it go live

How to edit a variation

Open the optimization in edit mode, then:

  1. Click the Optimizations dropdown in the top bar
  2. Click the variation to edit
  3. Make your desired changes
  4. Launch the variation to make it go live

How make changes in a variation

Good to know

Changes you make are automatically saved to the variation.

Create a variation or edit a variation, then you can:

  • Insert new elements — use the Add Elements panel to insert a supported element
  • Edit an element’s style — click an element, then make changes in the Style panel
  • Edit an element's content or settings — click an element > Edit content/properties in variation, then make changes

Directions for common edits:

  • Edit text — double-click the text element and enter new text
  • Hide an element — go to Settings panel > Visibility, then click Hidden
  • Replace an image — go to Settings panel > Image settings, then click Replace image
    • Use the Image settings to adjust the image's alt text, height, and width as-needed

Review the unsupported variation actions and special handling info for editing rich text blocks and components below.

Unsupported variation actions

These actions are not currently supported for variations:

  • Modifying interactions
  • Changing div block or section settings
  • Adding or editing CMS related content
  • Reordering content on the page (i.e., move content up or down)
  • Changing the structure of the page (e.g., insert new div block)
  • Creating a variation to run in only a secondary market (i.e., the variation must exist in the primary locale too). Learn how to localize an optimization variation.

Supported elements you can insert in variations

Use the Add Elements panel to insert new content in your variation that didn’t exist on the base page.

Supported elements you can insert:

You can insert components and most elements from these element groups:

  • Basic (e.g., list and button)
  • Typography (e.g., heading and rich text)
  • Media (e.g., image and video)
  • Forms (e.g., form block and text area)
  • Advanced (e.g., dropdown and lightbox)

Unsupported elements include:

  • CMS items
  • Div blocks, sections, or containers

Editing rich text blocks in variations

In order to edit individual elements (e.g., headline, list item, paragraph) within a rich text block, the entire rich text block needs to be selected and included in the variation. For example, to edit a header that is part of a rich text block that contains 3 paragraphs and 2 list items, first create a variation or edit a variation, then:

  1. Select the rich text block
  2. Click Edit content in variation
  3. Double-click the header and then change the text

If you later change the base page version of the rich text block (e.g., add a list item), the new list item is not added to the variation as the entire block is essentially a copy within the variation and does not inherit the changes.

Editing components in variations

You can include a single instance of a component in the variation or the main component (i.e., all instances). Editing a component's props adds that component instance to the variation. If you enter isolation mode to make edits to the main component, every instance of that component will be added to the variation.

How to edit component props for a variation:

If the component doesn't have props that you'd like to edit, exit the optimization and create the component props first.

Create a variation or edit a variation, then:

  1. Select a component instance on the page
  2. Click Edit properties in variation
  3. Edit the component props (e.g., edit the button text) in the Props panel

How to edit a main component in isolation mode for a variation:

Changes you make in isolation mode for this variation apply to all instances of the component across your website.

Create a variation or edit a variation, then:

  1. Select a component on the page
  2. Click the Edit component icon
  3. Choose what you want to edit
  4. Click either Edit content in variation or Edit styles from the Style panel
  5. Make your desired changes (e.g., change the font, size, or color)