# Creating Variations (Beta)

Source: https://support.wix.com/en/article/creating-variations-beta (updated 2024-06-04)
Related: Wix developer documentation, https://dev.wix.com/docs/llms.txt; Help Center index, https://support.wix.com/en/llms.txt

> **Note** This product was a limited beta (2018) and will soon be outdated. See our [updated help articles](https://support.wix.com/en/article/wix-blocks-check-out-our-articles) to learn more about the redesigned upcoming Wix Blocks workspace.

Variations enable you to create several designs of a widget. The original widget is your **Primary Design**. Each variation starts identical to the Primary Design, and you modify it to be different.   
  
For example:

* You can create two variations, each with a different layout of a repeater, one with a grid layout, and one with a list layout.
* You can create create two variations, one designed around left-to-right languages, and one around right-to-left languages.

![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/57e9f77c-6d15-498d-ac4e-c4d09bf3a490/2020/04/28/6489574c-3df3-4e34-b2b2-128c6af34e11/22687e43-fae2-4b14-a4b6-7c048ba67785.png)

> **Tips**
>
> * Complete the design of your widget, including the [mobile configuration](https://support.wix.com/en/article/wix-editor-about-the-mobile-editor), before creating variations. This design will be the basis for your variations.
> * The code that you write for the Primary Design of the widget is part of each variation.
> * Only the _variations_ are available in the Editor Add panel. You can leave the first variation unchanged if you want a variation identical to the Primary Design to be available in the Editor.

1. In the **Design** panel, select **Variations**, and then, in the main panel, select **Enable Variations**.

![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/57e9f77c-6d15-498d-ac4e-c4d09bf3a490/2019/09/22/f1d9fc2f-3eec-42a8-b2a7-3dafe7485447/9ed92228-cfac-48d8-9f36-a4dbae5c1879.png)

**Variations** expands in the **Design** panel, and includes **Variation1**.

2\. You can rename the variation by selecting ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/57e9f77c-6d15-498d-ac4e-c4d09bf3a490/2019/08/28/fc2f7951-d197-4e40-b775-b58a31844d8a/6884c82b-ac51-4bd4-8af3-4c0975c9b1b5.png) and choosing **Rename**.

![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/57e9f77c-6d15-498d-ac4e-c4d09bf3a490/2019/09/22/d5dcb463-25a8-4670-8d77-b58d36620f00/3a3276e5-46e5-4a6c-8e3a-2543c8090d75.png)

3\. Add a variation by selecting **Add Variation**. If you want to use an existing variation as the basis for a new variation, choose **Duplicate**.

![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/57e9f77c-6d15-498d-ac4e-c4d09bf3a490/2019/09/22/b4921233-1694-4f04-8143-7d5ab5957f49/08803e8e-f490-4df5-a610-0b67137146b8.png)

![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/57e9f77c-6d15-498d-ac4e-c4d09bf3a490/2019/09/22/d003322e-67ab-45c4-9f34-06e3a6741ca1/c07e4603-383c-4f28-8e9a-3774c04c2ce0.png)

4\. With a variation selected, make your design changes. For example, resize the widget, resize or remove elements, change their locations, or change the background for the widget.

> **Tip** Each variation you create will have a desktop and mobile view. After you create a variation you can switch to mobile view and make adjustments.

![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/57e9f77c-6d15-498d-ac4e-c4d09bf3a490/2019/08/28/efaddc5d-4e1f-4c2c-8405-4670547cead6/7d852cb9-4bfa-4797-8aec-098ae78370eb.png)

> **Tips**
>
> * While you remain in your Wix Blocks session, all of the changes you make to a variation can be reverted using **undo** (ctrl +z), including resizing and location changes.
> * Elements you add to the Primary Design are automatically added to the Elements panel for each variation, but are not added to the variations unless you select them in the panel.
> * You can't add elements that were not in the **Primary Design** to the variation.

### Adding and Removing Elements

When you select a variation you can see its **Elements** panel. It displays all of the elements of the Primary Design.

![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/57e9f77c-6d15-498d-ac4e-c4d09bf3a490/2019/09/22/9b70d345-c739-49f8-a741-c126e8f63f0d/b6ff464c-f1a6-453c-bf13-f6ae80f732e4.png)

1. To remove an element from the variation you're working on, select the element in Blocks and press the Delete key on your keyboard. Alternatively, in the Elements panel, in the element's **Show more** menu, select **Remove From Variation**.

![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/57e9f77c-6d15-498d-ac4e-c4d09bf3a490/2019/09/26/59e34647-3bda-456f-aa9b-efaf487531c6/eb3e4dcb-25a7-4f09-9adc-6ba2e7e94812.png)

1. To add an element back into the variation, click the ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/57e9f77c-6d15-498d-ac4e-c4d09bf3a490/2019/09/22/5d146655-1c91-4fba-81aa-d79deda64930/5f7be4a2-6903-43b5-8b60-aecaac3c5d77.png)next to that element in the Elements panel. The element is returned to the variation in its Primary Design format, including size, location, and color (depending on changes you made to the overall size of the variation widget).

* The elements are returned to the Variation in their Primary Design format, including size, location, and color (depending on changes you made to the overall size of the variation widget).
* If you want to return a deleted element with the changes you had made to it (and not as it appears in the primary design), you can use **undo** (ctrl+z) as long as you have not closed your session.