A multi-state box 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 to define when each state will appear in your site.
To add a multi-state box to your page:
Wix Editor:
- Make sure Velo Dev Mode is enabled.
- Click Add
on the left side of the Editor.
- Click Interactive.
- Drag a multi-state box element onto your page.
Wix Studio:
- If necessary, click
and then Start Coding.
- Click Add
and select Layout Tools > Multi-state Boxes.
- Drag a multi-state box element onto your page.
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:

Wix Studio:
Now you can add content to and customize each state in your multi-state box.
You can customize the design and setup of your multi-state box and each state in 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.
Settings: Add animations for transitioning between states. Learn more.
Design: Customize the border and shadow of your multi-state box. Learn more.
Animation: Add an animation to your multi-state box. Learn more.
Tip Duplicate states and then edit them to keep a consistent design throughout your multi-state box.
Navigate 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.
-
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.
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.
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.
- You can view and edit the ID of your multi-state box in the Properties & Events panel.
- You can view and edit the IDs of your states in the Manage States panel. You can also do this in the Properties & Events panel.
-
Click your multi-state box.
-
In the Properties & Events panel, click the ID field and enter the new ID.
-
Double click your multi-state box.
-
Navigate to the state you want to change.
-
In the Properties & Events panel, click the State ID field and enter the new ID.
-
Click your multi-state box.
-
Click Manage States.
-
In the Manage States panel, click the state box that you want, then click Show More
> Edit ID.
-
Enter the new ID.
Now that you've set up your multi-state box, get it up and running with code. Click here to see a tutorial on working with multi-state boxes and Velo.