How To Create Tabs In Wix
Create Animated Index on Wix (Tabs, Sub Categories, Slideshows)
- WIX
Σ Sigma Hosting is mainly a video tutorial website
Σ Sigma Hosting is mainly a video tutorial website that make it easier for you to search within the transcript of videos for solutions of problems you might face during your journey in dealing with different webhosting companies. So, we are very sorry if the text is not well organized and we may work on it in the future but for now we hope you get the benefit mainly from the video then you may need to have a look on the transcript. Thanks for your understanding 🙂
hello everyone Coquina le in this tutorial I'm going to show you how to use Wix code to perform a few really nice animation design effects by using some buttons and a slideshow kind of like this very nice right this example is displaying staff and team members you can use your creativity and use the slideshow to display anything else products maybe you're renting some houses and things like that these are individual buttons for the individual names of these people but I also have some other buttons at the bottom to show you a different way maybe you want just a previous the next and these buttons do that as well if this is your first time coding it is completely fine this video is for you too don't worry if you can't see the screen if you're watching the video on your desktop on your computer if you look at the description of any of my videos you will see a button that says show more click on that so it can expand and give you more information these are the links that you need to use depending which video you're watching to access either the articles or the tutorial side or the codes whatever it is that's relevant to that specific video it will be in the description so click on that that way you can follow along while you have those different articles and tabs open all right let's go back so this is the live site on the site I have the example here which you can actually play around with it so you can test it out yourself then I explain step by step everything that you need to do to accomplish exactly this it doesn't have to look this way this is just the way that I designed it so first you're going to prepare your for example the slide show by clicking on the menu so inside of your Wix editor you're gonna click on the little plus sign look for interactive under this section you will find the box slideshows there's the more slide shows at the top they're fooled with if you want to use those you can go ahead and select those but for this tutorial I'm using the Box slideshows there are a lot smaller then after you select your slideshow design it any way you like click on it delete the slides that are already there start from scratch with a white clean slate you can add new slides you could duplicate ones that you've already made you can manage them here change the slide background and go through all the settings after you're done designing your slideshow then you can add the buttons now remember I showed you two different sets of buttons this set which are individual for every single slide that I have in this slideshow and the previous and next button so figure out what your setup is gonna look like and then add the relevant buttons how do you have the buttons go to the plus sign find button and add any button that you want and do the same thing design and style it the way that you like change the text manage the font size align it any way you want I did a previous in next I actually aligned this button to the right and this button to the left that way they could be closer to each other and then I just added a little line here so I just showed you how to add the slideshow and the buttons of course you can add other elements as well like a picture or maybe another box with some text a title an image anything that you want so continue the design by adding the other elements to perform this design animation you at least need the slideshow and the buttons now that you've already prepared those two we can go ahead and turn on the developer tools so at the top look for the word code and turn them on now you're gonna start coding if this is your first time don't worry I promise it's easy after you turn on the developer tools you're gonna go to the Tools menu and then find the properties panel make sure that this is turned on go ahead and click that checkmark now that we've turned on the properties panel we have to go back and each element that we added the buttons the slideshow although those are really important and we want to rename them right now if you click on any of those buttons it'll have a name like dollar sign dollar sign it'll have a name like hashtag button one button to button three and so on so we want to click on the button and then you're gonna see this properties panel pop up here under ID you're gonna type in whatever other name you want you want to change it at least I recommend you do because it'll be easier to identify at the bottom of the page where the code is being added if we didn't change the names of the buttons and we wouldn't know what button belongs to which slide this button I named it Jason button with a capital B it's important to remember capitalization of every single letter because it has to be written exactly the same in the code as well so go through every single button and label it the way that you want then on every button again after you've labeled it and renamed it you're gonna hover over the events towards the bottom you're gonna see one that says on click click on that little plus sign some words will automatically appear here you can change those words if you want to but you don't have to the default is good it will look something like this after you click out of the box or press ENTER on your keyboard so now that I have my next button the on click event says next button click so when they click on this button something's going to happen now we're ready to code let's go to the code page in the code it's very simple to do it's basically one line of code per button that's all you need you will write it under the ready code the ready code is found at the bottom of your page and then under each little button depending on the way that you designed it for example these four represent my first four buttons the individual buttons for the individual people which was Julie Susan Mike and Jason for Julie since she was in the first position or is a very first slide the code that I'm going to be writing it for her is dollar sign W open parentheses Cote shoe marks it could be 1 or 2 it doesn't matter slideshow 1 because that is the name of my slideshow if you noticed the slideshow when you click on it it also has a hash tag name just like your buttons so you can either leave it the way it is which will probably be slideshow 1 or you can change it to something else either way again it has to match your code then dot changed slide with a capital S open close parenthesis with the number 0 because Julie slide is in the first position so this is gonna be 0 and then the next one is gonna be 1 the exact same code depending on how many slides you have that's how many numbers you're going to keep adding never start with the number 1 always start with the number 0 if you have these and that's all you designed the individual buttons for each individual slide then you're done there's nothing else to add if you only have the previous index button then this is all you need bottom-2 if you have individual and do you have the previous the next button well then you need to follow the entire format it's just an example you can have more or less buttons depends on you but it'll be the same thing for the previous button it'll be slideshow one dot previous open closed parenthesis with nothing inside and for the next button it'll be slideshow dot next that's it pretty simple right well now let me go into the editor to show you where this magical code goes if you haven't coded before keep watching if you have go into the editor and start playing with your code to see if it works for you now at the bottom of the page there's a little tiny arrow click on it it says open and this is where you're going to start typing in your code these little lines of code that says export function Julie button click this automatically gets added to the bottom of your page every single time you click the event inside of the properties panel for that button so you don't have to type that out all you have to do is fill in the blank here in between the top line and the last line little curly bracket that ends the statement basically and that is where you're gonna add your change slide code that's all you need to know told you it'd be easy if you haven't subscribed already please do there's a button at the very top corner join my facebook click on community it'll take you to the Facebook Wix code group it's a wonderful community filled up with Wix users Wix coders and even some Wix developers you need to stop by and say hi click on this button the article it'll take you directly to the article where they have a completely different example because they use the slide show interaction by creating a multi-stage form you should play around that example to click on the API button this API list will give you the exact pieces of code that you need to type it into your code page for any specific thing for example this is the exact code for slide shows so that is where I got that code from well that's it for today I hope you enjoyed the video see you soon bye .
How To Create Tabs In Wix
Source: https://sigma-hosting.com/create-animated-index-on-wix-tabs-sub-categories-slideshows/
Posted by: tanneronsch1951.blogspot.com
0 Response to "How To Create Tabs In Wix"
Post a Comment