Multi State Boxes on Editor X

Be in the know
, ,
1

Hey Builders!

I’m super excited to announce that Multi State Box is now officially available on Editor X.

Multi State Boxes allow different pieces of content to be displayed one state at a time—ideal for wizards, FAQ templates, product galleries, and more.

The MSB can be found in the Add Panel under Layout Tools .
*Dev Mode must be turned on.

707×897 56 KB

Visit Velo API to learn more on changing states, or follow the Velo Tutorial .
More MSB resources and tutorials coming soon.

Happy building :dizzy: :smiling_face:

11 Likes
2

YES! AMAZING!!!

3

Muito bom, manda mais :heart::grin:

4

@jonathant
Hi, Is it working without Velo ?

5

Does someone have a use case of this feature to see how we can use it ?
thx in advance for your share.

6

Multi-state boxes are meant to house code so Velo would be required to access them.

7

This article has some info. https://support.wix.com/en/article/velo-tutorial-working-with-multi-state-boxes-and-code

8

Okay I see,
Can’t wait to see all these functions as plug and play features :wink:
EditorX ADN is no code plateform first :beach_umbrella:

9

Hey @rajadaher , the MSB is fully customizable in the Editor but switching between states is done using Velo.
Like so:

$w("#myStatebox").changeState("state2");

The MSB is a very useful feature and will improve with time.
Our goal is to offer it as a completely code-free tool.

10

is it requiring coding ?

11

yes, Velo would be required to use this

12

but you can just copy paste the code its not that hard

13

Thank you.

14

ABSOLUTE MADNESS

15

I created a tutorial video on how to build a Slideshow with Multi State Box, check it out in the link
https://youtu.be/lCN-iSnOSpk

16

Perfect, thank you :sunglasses:

17

Hi. How can I set a height for MSB = 100% ?

18

The MSB’s height is Auto, because the height is determined by the States.
So you can set the State’s height to 100vh or %

19

@jonathant You mention using the MSB for FAQ’s, but running the code to switch between states when they are inside of a repeater to generate faq’s causes all of the multi state boxes to open and close at once…any recommendation there?

20

@jaiden When working with Repeaters you need to use ForEachItem
For example:

$w("#repeater1").forEachItem( ($item, itemData, index) => {
        $item('#multiStateBox2').onClick(() => {
            $item("#multiStateBox2").changeState('box14');
        })
    } );