Create or edit variations

Build variations with Optimize to test if alternate versions of the page drive engagement.

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 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 and base page edits interact

Edits to a variation won’t affect the original page in Webflow, which is known as the base page. When you edit a variation, Webflow creates a copy of the relevant elements, settings, or styles from the base page — only for the parts you modify.

On the other hand, edits made to the base page can be inherited by a variation, depending on whether there’s a conflict:

• Not inherited — if the variation edits are the same type of edits you make on the base page (e.g., both edits are changes to the text — or — both edits are style changes), the base page edits won’t carry over.
• Inherited — if the variation edits are NOT the same type of edits you make on the base page (e.g., variation edits change the text but your base page edits are style changes), the variation will inherit those edits from the base page.

How to create or edit a variation

While editing the optimization:

1. Click the Optimizations dropdown in the top bar
2. To create a variation: click Add Variation, enter a name, then click the Check icon
3. To edit a variation: click a variation's name
4. Make your desired changes

After you're happy with your variation, my may want to:

• Localize the variation (if your site uses localization)
• Launch the variation to make it go live

Making changes in variations

To begin making changes in your variation, do one of the following.

• Insert a new element — add new content to the page with the Add Elements panel
• Edit an element’s style — click an element, then use the Style panel to apply different styling
• Edit content or settings — click an element, then click Edit content in variation or Edit properties in variation 

Review the following sections for special handling, complex change-specific instructions, and unsupported variation changes.

Common types of changes

To get started, selected an element and click Edit content in variation or Edit properties in variation.

• Edit text — double-click the existing text to enter new text
• Hide an element — go to the Settings panel > Visibility > Hidden
• Replace an image — go to the Settings panel > Image settings > Replace image
  • You can adjust the new image's alt text and dimensions from the Image Settings

Inserting new elements in variations

You can use the Add Elements panel to insert new content in a variation — even if that content doesn’t exist on the base page.

Editing rich text blocks in variations

A rich text block counts as a single element in variations, even if it includes multiple content types (e.g., a heading, paragraph, or list). To edit part of a rich text block in a variation, you must add the entire block to the variation.

1. Select a rich text block
2. Click Edit content in variation
3. Double-click the part you want to change, then make your 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.

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.

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)

Unsupported variation changes

Optimize does not yet support these types of changes 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)