Library Web design industry Stay at the forefront of your field with tutorials covering the art and business of web design. Topics All topics Close menu All topics Basics Workspace Breakpoints Structure Layout & Design Sizing & Units Positioning Grid Layouter Repeater Stack Elements Text & buttons Menus & navigation Images & Media Interactions & Effects Interactions Sticky position Content Manager Editor X course Tutorial library Webinars Help Help Center Community Hire a Designer Contact Support Velo & code Sizing & Units Positioning Grid Layouter Repeater Stack Collaboration Sizing & Units Positioning Grid Layouter Repeater Stack Web design industry Sizing & Units Positioning Grid Layouter Repeater Stack 35 Results Basics Topics Format type All formats Sort by Featured Filters 35 Results WEBINAR The mid-year trends report: How we built it Scroll effects Interactions Inspiration WEBINAR Tabula Rasa #2: Web creation on the fly Inspiration WEBINAR The new GROW website: How we built it Inspiration Interactions Layouter Images & media Scroll effects Positioning WEBINAR How to get a full book of web design clients Freelance & business WEBINAR The ultimate workflow for creating client sites with Michael Janda Working together Freelance & business WEBINAR Tabula Rasa #1: Web creation on the fly Inspiration WEBINAR Digital design in 2022: How to grow as a creator Freelance & business WEBINAR The new OFFF Barcelona website: How we built it Interactions Repeater Grid Scroll effects Inspiration WEBINAR Our new Editor X homepage: How we built it Inspiration Interactions WEBINAR 2021 Trends: How we built it Interactions Scroll effects Grid Inspiration No results found Show all format types → Can’t find what you’re looking for? Submit Thank you for submitting!

Home Library Elements & components Multi-state box Tutorial Interactive components 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. LOADING... Article Exercise Transcript 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 WEBINAR Going deeper into Velo TUTORIAL Intro to Velo TUTORIAL Building a custom badge using a Multi-state box Go to library → Go create on Editor X → Was this lesson helpful? Really helpful Thank you for your feedback! Could be better How can we improve? Be more detailed about a topic Fix a bug Make the steps clearer Other Comments Submit Thanks for submitting! Explore more topics Additional resources Visit our help center → Ask the community → Hire an expert → Contact customer care →