> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Setting Up Your Multi-State Box

## Article: Setting Up Your Multi-State Box

## Article Link: https://dev.wix.com/docs/develop-websites/articles/wix-editor-elements/other-elements/multi-state-boxes/setting-up-your-multi-state-box.md

## Article Content:

# Velo: Setting Up Your Multi-State Box

<div style="background: #D9F4F4; border: 1px solid #B3E9E8; border-radius: 6px; padding: 7px 17px 7px 17px; width: max-content; margin-top: 5px; margin-bottom: 5px;">Visit the <a style="text-decoration: color: #3197EF;" href="fallback::https://www.wix.com/velo" target="_blank">Velo by Wix website</a> to onboard and continue learning.</div>

A [multi-state box](https://dev.wix.com/docs/develop-websites/articles/wix-editor-elements/other-elements/multi-state-boxes/about-multi-state-boxes.md) contains multiple states with different content, and displays one state at a time. Add a multi-state box to your site and set up each state. Then [add code](https://dev.wix.com/docs/develop-websites/articles/wix-editor-elements/other-elements/multi-state-boxes/working-with-multi-state-boxes-and-code.md) to define when each state will appear in your site.

### Add a Multi-State Box

**To add a multi-state box to your page:**

Wix Editor: 
1.  Make sure Velo Dev Mode is [enabled](https://dev.wix.com/docs/develop-websites/articles/getting-started/resources/about-velo-by-wix.md#to-enable-velo-on-your-site).
2.  Click **Add**  ![](https://d2eyqiy4n03ve6.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/08/05/f5f1bce8-77f0-405c-8520-f147e1035fb1.png)  on the left side of the Editor.
3.  Click **Interactive**.
4.  Drag a multi-state box element onto your page.

Wix Studio: 
1. If necessary, click ![Code icon](https://github.com/wix-incubator/wix-code-docs/assets/50321691/2c41d3df-930f-4e0f-966f-038742adceed) and then **Start Coding**.
2. Click **Add** ![Add icon](https://wixmp-833713b177cebf373f611808.wixmp.com/images/setting-up-your-multi-state-box-md__tmp_git-push-event18c2b4b9f1e04cbd18daa0d3fff592ee_velo-articles_wix-editor-elements-with-velo_images_add-icon.png)  and select **Layout Tools > Multi-state Boxes**. 
3. Drag a multi-state box element onto your page.

### Navigate Your States

To navigate between the different states of your multi-state box in the editor, click the element, click the dropdown next to the **Multi-State Box** label, and select a state.

Wix Editor:

<div style="text-align:left">

<img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/0ca9e8ba-16ed-4cd8-a1e1-58d01c4420f7/2019/07/04/69feae52-ed3b-43c1-988a-4a3b3d07ce91/e2f168a6-b276-40a4-9105-223b56155203.gif" style="max-width:35vw" />

</div>


Wix Studio:

![multi-state box studio](https://wixmp-833713b177cebf373f611808.wixmp.com/images/setting-up-your-multi-state-box-md__tmp_git-push-event18c2b4b9f1e04cbd18daa0d3fff592ee_velo-articles_wix-editor-elements-with-velo_images_multi-state-box.png)


Now you can add content to and customize each state in your multi-state box.

### Set Up Your Multi-State Box

You can customize the design and setup of your multi-state box and each state in your box. 

#### Set Up Your Box

*   **Manage States:** Add, duplicate, delete, and change the order of your states. You can also edit the IDs of your states. [Learn more](https://dev.wix.com/docs/develop-websites/articles/wix-editor-elements/other-elements/multi-state-boxes/working-with-multi-state-boxes-and-code.md).
*    ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/0ca9e8ba-16ed-4cd8-a1e1-58d01c4420f7/2019/07/07/f02a0a76-9718-4b2a-a874-e5fbd4a5a39d/e2e9e303-c924-4d20-b3e1-c140d32cb2b9.png) **Settings:** Add animations for transitioning between states. [Learn more](https://support.wix.com/en/article/multi-state-box-settings).
*    ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/0ca9e8ba-16ed-4cd8-a1e1-58d01c4420f7/2019/07/07/a583318c-dc34-4eb7-bdfb-fea1d97151da/f48acc51-2fc9-4e7f-88c1-b134999a6755.png) **Design:** Customize the border and shadow of your multi-state box. [Learn more](https://dev.wix.com/docs/develop-websites/articles/wix-editor-elements/other-elements/multi-state-boxes/setting-up-your-multi-state-box.md).
*    ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/0ca9e8ba-16ed-4cd8-a1e1-58d01c4420f7/2019/08/20/f3b92254-d4ae-42a5-a415-9484d2784aab/f2ce3281-1bc3-4d77-b184-e510816053ab.png) **Animation:** Add an animation to your multi-state box. [Learn more](https://support.wix.com/en/article/choose-animation).

<blockquote class="tip">

**Tip** 
Duplicate states and then edit them to keep a consistent design throughout your multi-state box.

</blockquote>

#### Set Up Your States

[Navigate](https://dev.wix.com/docs/develop-websites/articles/wix-editor-elements/other-elements/multi-state-boxes/working-with-multi-state-boxes-and-code.md) to the state you want to edit and then do any of the following:

*   **Add content:** Add whatever content you want to each state including text, images, buttons, and videos.
*   **Change Background:** Choose a color, image, or video for the background of the state, and then customize background settings. You can also apply a background to other states. [Learn more](https://support.wix.com/en/article/change-background-7730640).
*   **Resize:** Click the multi-state box and drag one of the resize handles on the edge of the box. 
    
    Note that the width of the multi-state box applies to all states, but you can adjust the height for each individual state.

### Multi-State Box and State IDs

Each multi-state box and state has an ID instead of a name. The IDs of multi-state boxes and their states are significant because you use them in code.

<blockquote class="important">

**Important** 
Changing the ID of a multi-state box or state will break any existing code that uses the old ID. If you change an ID, make sure to update any related code.

</blockquote>

*   You can view and edit the ID of your multi-state box in the [Properties & Events panel](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/properties-events-panel/about-the-properties-events-panel.md).
*   You can view and edit the IDs of your states in the [Manage States](https://dev.wix.com/docs/develop-websites/articles/wix-editor-elements/other-elements/multi-state-boxes/setting-up-your-multi-state-box.md) panel. You can also do this in the [Properties & Events panel](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/properties-events-panel/about-the-properties-events-panel.md). 


#### To change a multi-state box ID in the Properties & Events panel:

1.  Click your multi-state box.
2.  In the Properties & Events panel, click the **ID** field and enter the new ID.
    
     ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/0ca9e8ba-16ed-4cd8-a1e1-58d01c4420f7/2019/07/09/1a499ed4-6bd8-4145-8820-9f669c37c4e6/2feb84ff-9dd4-48b2-b1a1-c41a031b546b.png) 

#### To change a state ID in the Properties & Events panel:

1.  Double click your multi-state box.
2.  [Navigate](https://dev.wix.com/docs/develop-websites/articles/wix-editor-elements/other-elements/multi-state-boxes/working-with-multi-state-boxes-and-code.md) to the state you want to change.
3.  In the Properties & Events panel, click the **State ID** field and enter the new ID.
    
     ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/0ca9e8ba-16ed-4cd8-a1e1-58d01c4420f7/2019/08/20/3be0812e-c645-44d0-a1e2-ee7e52e86307/d25eb90e-315c-4efc-9761-003a7f371783.png) 

#### To change a state ID in the Manage States panel:

1.  Click your multi-state box.
2.  Click **Manage States**.
3.  In the Manage States panel, click the state box that you want, then click **Show More** ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/76096845-8b12-44f1-91f6-3dc2e838fdd9/2022/09/04/45269098-373f-4d2c-8168-2fc5242c6024/c890c6a3-6762-4501-bdb4-e44c678108df.png) **> Edit ID**. 
4.  Enter the new ID.
    
     ![Manage States panel](https://wixmp-833713b177cebf373f611808.wixmp.com/images/setting-up-your-multi-state-box-md__tmp_git-push-event18c2b4b9f1e04cbd18daa0d3fff592ee_velo-articles_wix-editor-elements-with-velo_images_manage-states.png)      

>
> Now that you've set up your multi-state box, get it up and running with code. Click [here](https://dev.wix.com/docs/develop-websites/articles/wix-editor-elements/other-elements/multi-state-boxes/working-with-multi-state-boxes-and-code.md) to see a tutorial on working with multi-state boxes and Velo.