Create and edit variations

Learn how to add and update variations with the visual editor or code editor.

Use variations to show alternate versions of site pages. You have the flexibility to launch small edits (e.g., text, image, or styling changes), large edits (e.g., full-page redesigns), or edits that span multiple pages (e.g., navbar, header, or footer). First, create an optimization to define where and what you want to edit (e.g., homepage headline), then create a variation for each alternate version you want to run (e.g., each alternate headline). 

Choose an editor

You can create variations using the visual editor or the code editor. In most cases, we recommend the visual editor.

• Visual editor — make code-free changes to headlines, paragraph text, images, buttons, and more
• Code editor — use JavaScript and CSS to build advanced changes

How to create a visual editor variation

Open your Optimize site in Webflow, then:

1. Click Optimizations in the Navigation panel
2. Click an optimization
3. Click Add variation
4. Enter a name for the variation in the Variations panel
5. Make your edits:
   • Select an element to edit it
   • Use the Changes panel to apply changes (e.g., text, style, layout)
   • Hover over an existing element to insert a new element
   • Explore common variation edits you can make with the visual editor
6. Click Save at the bottom
7. Preview your variation before launching it

How to create a code-based variation

Open your Optimize site in Webflow, then:

1. Click Optimizations in the Navigation panel
2. Click an optimization
3. Click Add variation
4. Enter a name for the variation in the Variations panel
5. Click the Changes tab at the top of the Changes panel
6. Click X by any changes listed and/or click Enter custom JS or CSS
7. Set a Selector and/or Precondition — at least one is required per optimization for coded variations
8. Enter JavaScript or CSS in the associated code fields at the bottom
9. Click Run code to preview your code
10. Click Save at the bottom
11. Preview your variation before launching it

How to edit a variation

Open your Optimize site in Webflow, then:

1. Click Optimizations in the Navigation panel
2. Click an optimization
3. Hover over a variation, then click the Options icon > Edit
4. Make your edits:
   • Select an element to edit it
   • Use the Changes panel to apply changes (e.g., text, style, layout)
   • Hover over an existing element to insert a new element
   • Explore common variation edits you can make with the visual editor
5. Click Save at the bottom
6. Preview your variation before launching it