IN THIS ARTICLE

Velo: Setting Up Your Multi-State Box

Visit the Velo by Wix website to onboard and continue learning.

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 Code icon and then Start Coding.
  2. Click Add Add icon 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:

multi-state box 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.

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

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.

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.

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.

    Manage States panel

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.

Was this helpful?
Yes
No