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.

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.

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.

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.

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

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.

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.

EXPLORE MORE TUTORIALS
Was this lesson helpful?
Thank you for your feedback!