Multi-state box

Display different pieces of content, one state at a time using a Multi-state box. Use this to reveal content when site visitors hover or click, or based on specific conditions.

Enabling dev mode

To add a Multi-state box to a site, first you have to enable dev mode since you’ll use code to define how and when each state will be displayed.

A pop-up showing Velo Dev Mode with a Turn on Dev Mode button

Adding the Multi-state box

Simply drag the Multi-state box from the Layout tools section of the Add panel into the section where you want it to display.

The layout tools panel in Editor X. The cursor is hovering over the Multi-state box

Managing states

To access the Manage states panel, click on the Multi-state box and select Manage States. Here you can navigate between states and add, delete and duplicate them.

The manage states menu is open and the second state is selected. There are options to duplicate a state and to add a new state.

Edit ID

You can also change each state’s ID from the Manage States panel. To refer to the state that you want to trigger in the code, you need to use the ID for the state. Each state comes with a default ID, but you can change it by clicking on the 3 dots beside the state and Edit ID.

The second state of the Multi-state box is selected and the cursor is hovering over the option to edit its ID.

Delete state

To delete a state, click on the 3 dots beside it and hit Delete.

The manage states menu is open, the second state is selected and the cursor is hovering over the option to delete this state.

Duplicate states

In some cases it might be useful to duplicate a state, such as when you’ve designed a state and need another state with the same layout, but different content. To duplicate a state, simply click on the Duplicate State button once the state is selected.

The manage states menu is open, the second state is selected and the cursor is hovering over the option to duplicate this state.

Adding states

If you need more states, click on Add New State in the manage states panel.

Adding code

To define which state you want to display and when each will be displayed, add the required code to the code panel. For more information about the code related to this element, click here.