Wix Multi State Box – Nino Web Tutorials – Wix Tutorial 2019

hey what’s up guys welcome back to a nino tutorial and today i’m going to be talking to you guys about multi-state box this is a new feature that wakes has to offer and i’m excited to give you a tutorial a basic tutorial about it so let’s get started for those who do not know this is all happening in corvid which is wicks code and this is a very powerful useful tool especially when you’re trying to use it for showing different different
states like different types of views that a person would like to see and today I’m going to actually go into a little bit of a detail tutorial about this so ever wonder about you know trying to use this multi-state box well what you can use is which is different from an actual interactive slide show is that it can expand to however you know big lengths that you have it to be set on and that’s what I actually like about this is that it can expand
and that it’s it’s a lot faster to load also that you know there’s some elements that are in a slideshow that you know would have different heights to it that would probably get cut off or you know it wouldn’t expand to its actual height width and so that’s what you can use this multi-state box for as well as if you have any other like products from the Wix store that you want to show up on here and you want to just have it react based upon if
you have a new new arrival of products or if you’re sold out of products or stuff like that this multi-state box can actually ease your the process of like creating cool creative Wix store presence on your on your Wix website so let’s get started I’m going to gonna show you guys how to get to here first so what we want to do here is we want to click Add then we want to go over interactive and then we want to go to multi-state box okay I pulled
over this preloader right here and put it right here onto my page just to give you a heads up you can use any of these and then creatively create something that you would need this box made for so it’s very useful and definitely get creative with it so next you want to go to your development mode and then you want to turn on Corbett okay right now I have Corbett on but you want to turn Corbett on and then you’ll get this this uh exit Corbett
button so now since we got that started we want to open up our slides so excuse me not our slides our States so here we have manage States this is where you can actually add different states add duplicate States if you would like or add more States and just get creative with that guys like I mean this is for anything on your website I really think this is a game changer that Wix has to offer so you can manage your state’s here which you know if
you don’t want the preloader you can like get rid of it if you want an intro or expand it you know you can always change those things so how you change it is actually go to your three dots and then you can edit the ID or you can duplicate it or delete it okay so once we have that done we can go over here to change background now this change background is different than your design okay so your change background this will change backgrounds on
each state and so if I wanted this to be a little bit more let our you know a little bit less or even transparent this will not affect my other multi-state but other states in this body okay so boom you see that your background is still the same now if you go back to your free loader it’s gonna still be transparent so let’s go ahead and boost that back up so it can be so I can look like the video is you know part of this whole multi-state box
which is this state so let’s see we will go over to settings this is basically your way of how it interacts so if you’re you know it’s just like a slideshow guys it’s just as like a slideshow you can do a vertical horizontal crossfade or in and out when you go over to your design this is the design of the box itself okay so not changing any background here you don’t have that option because you have the option to change each state background for
inside this box so if you go over here to border you can you know do stuff with the border make the corner radiuses and create a shadow for this then you can have the animations here this is just basically onload that these animations would show or whether you’re hiding or showing this multi-state box that animation will kick in so here we have our properties here this is where your overall ID of the box is okay so multi-state box this is your
overall ID now each state ID will have we’ll have the option of like the manage States here so that you can change this here or you can change it inside of here and make it a different ID so if you wanted to go in here and make this preloader one because you have a another preloader once you change that it changes it for this one right here okay but it does not change it in your state ID so you need to go back over to your state ID and actually
put in that one and then click outside the box or press Enter okay so once we got that we have everything looking synced up alright so what I’m gonna do here is I’m going to create a some code I’m gonna create some code okay and so what I have down here is a quick little code snippet to go through all of the excuse me go through all of the boxes here so what I want to do is I want to add something else to it because since this says preloader I
want it to be a preload so what we’ll do here is we’ll do a set timeout and by doing this set timeout this will like mimic like it’s loading and so then once it’s loaded then I can display the content so what I want to do is after it times out I want it to go straight to my my state which is called intro up here I see it’s called intro so what I wanted to do after the timeout has been completed I wanted to change it to the intro box and it won’t
go back to anything else after that so let’s go ahead and set that time I’m gonna put it up to ten seconds okay so that’s that’s generically ten seconds one second is one thousand okay and then a half a second is five hundred and so on so if you want to get creative with that but I think 10 seconds or less would be best here so let me go ahead and put that at 8,000 you know at seven I’m gonna do 7,000 okay so once my page loads up and a person
sees this box it’s gonna go through seven counts okay so seven seconds and then it’s going to display my intro box excuse me so what I have here is I’ll go over to my intro box and as you can see I have a button right here which is but Nate and so I connected the on click to actually go straight to my expanded view and you can see here that my state ID is intro so that is why I have this change state to intro for my state box so then you want to
go here to expanded view okay guys you guys can get creative with this but right now I’m just showing you this as an example and so that’s why I just pulled it from from the template itself now if you guys don’t want to show it like this you guys can do different things I’m actually I might just do something different here but yeah so you can use this for a lot of different things let your creative minds go and explore different things that you
can do with multi-state box so here I have another button here that takes me back to my intro so this is just like a nice little intro if you if you will about about what is this about don’t see about berry delight okay so what we’re gonna do here is we’re gonna put it back to preloader and what I want to do here is make sure that it always starts with preloader so I’m going to go ahead and do this real quick and make it start with preloader
preloader one okay just like it says up there right here at my state ID that’s what I’m gonna put right here okay so once I finish that out so that means if I put this down there like intro it’s still going to go back to it so let’s go ahead and preview this site and let’s see what happens so before we preview I just want to come back here to my set timeout code and I just want to get let you guys know that if you’re following me step-by-step I
had an eye here a lower case I go ahead and boost it up to a capitalized eye because I I’m pretty sure that for that state it was capitalized yes so it’s capitalized right here so do that before you preview so that then the code can work if you’re trying to follow step by step all right so let’s go up here to preview all right so it’s previewing and let’s see after seven seconds boom it has changed now I can go ahead and read more about very
delight and boom it shows me berry delight so all of these buttons are working so far now if I want to go back to that I’ll just press back and boom it does it does go right back to my intro state so that was really cool actually I like that let me know what you guys think about this and seriously have fun with it I hope you guys enjoyed this video definitely give it a shot I think it’s very helpful to have this multi-state box especially if
you’re wanting to do it with different things and I’m actually gonna do a future tutorial about multi-state box and create something that’s pretty pretty awesome that you guys can use in your future but yeah if you have any questions drop it below thank you so much for watching and if you like this video hit that like button subscribe if you aren’t already and I’ll see you in the next video okay guys ciao