Velo: Setting Up Your Multi-State Box

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.

Add a Multi-State Box

To add a multi-state box to your page:

Wix Editor:

1. Make sure Velo Dev Mode is enabled.
2. Click Add 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 and then Start Coding.
2. Click Add 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:

Wix Studio:

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.
• 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.

Set Up Your States

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.

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.

• 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.

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.

   

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

1. Double click your multi-state box.

2. Navigate to the state you want to change.

3. In the Properties & Events panel, click the State ID field and enter the new ID.

   

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 > Edit ID.

4. Enter the new ID.