# Variants {% hint style="info" %} This article is about the WordPress plugin GutenBricks, which allows you to create Gutenberg blocks using the Bricks Builder page builder in a no-code approach. Visit [**GutenBricks.com**](https://gutenbricks.com) for more information. {% endhint %} ### Watch how it works {% embed url="" %} ### Overview A single block can have multiple variants, which users can choose within the Gutenberg editor, helping you to organize blocks without creating extra ones. Variants are also a great way to organize blocks by utility, business logic, and more. The most common use case is to allow clients to select different layouts by choosing variants using text radio buttons, image radio buttons, or a dropdown select.

Using radio button to select different layouts. Templates from Frames.

Image radio buttons. Templates from Frames and Brixie Templates

### When To Use It The user community recommends using variants to create different layouts that are otherwise very difficult to achieve with CSS. If you need to change colors, padding, or any CSS values, we highly recommend using [Dynamic Class](/features/dynamic-class.md), [Dynamic Data](/dynamic-data/gb-meta.md), or the [Style Editor](broken://pages/Lc31NpPzD3QG6SmYsKEM). ### Create Your First Variants Creating variants is as easy as creating a [visibility toggle](broken://pages/j9MYBauaYVa57DhyPxlp). In fact, variants work just like a visibility toggle that simply behaves like a radio button that allows one value at a time whereas visibility toggles behave like checkboxes. #### Step 1. Select an element as a variant Any element can be a variant. However, we recommend choosing a section or container as a variant rather than individual elements.

Selecting entire section or a parent container is recommended.

Please note that you can have only **one set of variants per block.** We have decided to stick to this one-set-per-block policy in order to make it manageable. #### Step 2. Create variants as sibling elements Once you select a target element, you can create its variants as sibling elements within the same parent. In the example below, we've copied and pasted the same `Inner Variant 1.` Then we named it `Inner Variant 2`and made some changes to it. In the image below, you can see that we switched between Content Wrapper and Media Column.

Inner Variant 2 here has Media Column on the right

{% hint style="success" %} It is recommended to assign [**Value Binding**](/features/advanced/value-binding-coming-soon.md) to each content field, such as text and images. This way, their content stays the same even when you change the variants. If you don't do this, each variant will have independent content. \ \ 💡 **Pro Tip:** Set the Value Binding first and then copy and paste the variants so that you don't have to manually enter them again. {% endhint %} #### Step 3: Enable Variants Click the element you want to turn into a variant. Toggle "Enable this element as a variant." (Content -> GutenBricks Tab -> Variant section)

Here you can assign three values * **Variant Name (required) -** Any unique text used to identify the variant. **This must be different from the other variants.** * **Variant Label** - A label for the radio button which is visible to clients. You can omit it if you have a preview thumbnail * **Variant Preview Thumbnail** - This adds an image to the radio button Once you apply this to all the variant elements, you have officially created your first variants! 🎉 🎉 🎉 ### Optional: Edit variant label, group and variant field type Visit Settings -> TEMPLATE SETTINGS -> GUTTENBRICKS -> VARIANTS to configure the variant field. It has default values, so you don't need to do anything unless you want to change the wording. You can also change the field type from radio to dropdown.

### Tip: Select Inner Content as Variants You can also assign a certain area of blocks as variants; in that case, the outer frame remains unchanged while the inside contents can be switched as variants. In the example below the photo columns are selected as variants where the parents remain the same.

If you have questions, please join our [Facebook Group](https://www.facebook.com/groups/wiredwp) or email us at --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.gutenbricks.com/features/variants.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.