How To Create A Custom Preloader Screen in Wix – Wix Code Tutorial | Wix Website Tutorial

what is up guys it’s your dude computer of the Gilbert here hand into this video I’ve got another Wix code tutorial guys I’m gonna be probably hammering you with which code tutorials because it’s out it’s released so now if you didn’t hear the news I mean this has already been about three weeks now but it’s no longer in beta so I want to make sure you get all the Wix code content that you can so I’m gonna try to provide you those tutorials I’m
also trying to provide you helpful tutorials and things that you’ll probably want to use or execute when you’re using Wix code so today I’m going to show you how to create a custom preloader here in Wix so what that means is it will display on your website while your website is loading all of you have been to a website where you get on there and it’s just a white page while it’s loading the content and for the longest time that’s what which
websites did and nobody really likes it doesn’t have any sex appeal it has no curb appeal there’s no there’s no interest in it you that you know what they say you have about seven seconds to capture someone’s attention on your website so if you could create a custom preloader page well jeez you can capture somebody’s attention even while it’s loading the content on your website and that’s what I’m here to show you how to do primarily development
wise not really designed but development a little bit of design but more development before we get into that video I like to first say come over here to Wix my website calm this is my website sign up for these weekly Wix tips guys if you haven’t already they helped tons of people out and I’d love to help you out as well and then I’d like to preface this video by saying my team and I do excellent work if you have any questions feel free to come
over to which my website as well and either ask an expert or come down and hire an expert guys our team is available for hire we do great work we’d love to work with you so come over to hire an expert let’s chat let’s talk about what your project details are and let’s get something figured out for that oh now let’s show you how to create a custom preloader hearing wish so to start with this is the code going to be using I put it down in the
description below I put the link to this Google Drive document this this will be the code right here that we use to actually make the custom preload or possible so this is our JavaScript so what I’m gonna do is I’m gonna go ahead and copy this right now and then we’re gonna go over to the Wix editor and we’re just using this sample website right now and what we’re gonna do is we’re in which code and if you don’t know you have to go to tools and
developer tools to either turn on or turn off to which code tools we’re gonna turn them on and then if you don’t want this little site structure guy over here to the left popping into your majority of the screen there just come over here and you can drag it off like that and we’re we’re gonna be working especially today is down here you’ll see down at the very bottom you’ll see these little arrows and then a bunch of icons and you’ll see
portfolio page code we’re gonna go to this little arrow that says open now if you come over here to the left you’ll see page and you’ll see site we’re gonna want to put this on the site because obviously we’re gonna be loading all the content on the website and what if they land on a different page you want to make sure that preloader is prepared to show up over all your whole website onload so what we do then is we’re gonna go ahead and paste
that code that I provided you in here you’ll then see a few error red marks pop-up and that’s when most of you will be like well oh shoot I don’t know what to do and you know what at first I was – this is JavaScript I’m still learning you guys don’t don’t give me don’t don’t confuse this here I’m not I’m not a JavaScript King or anything like that most of the stuff is done with no coding necessary which that has provided us as code that’s why I
have it I didn’t just go ahead and code this up myself which has provided this however there are different elements in the code that you’re gonna have to mess with on your own I’ll show you in this video so now once we have this in here we’ll see this error we’ll see hashtag light box one is not a valid sector name that’s because I don’t have a light box up here right now it’s not reading anything the code isn’t pulling an element that it has to
load so what we have to do excuse me is actually create our preloader to do that there’s lots of different ways but the best way I found that I personally found so far and some of you may critique me on this so many different coders I don’t know just bear with me is to go over here to add go to strip I’m just gonna add a white strip I’m gonna go to the very top I’m gonna add it up there at the top scroll down to where it covers that first section
of a page here as this is the part you would see when it first loads and then I’m gonna come in here go to add I’m gonna add some text I’m just gonna keep it very basic guys and again this is what you’ll see when you first get on the website I’m just gonna type in here loading with three little dots and then I’m going to do that and then I actually got a little handy-dandy gift that is a loading screen I will put the link to this down in the
description below if we go here to my image uploads I got a little loading gift guys so this is like a little loading element again I’ll put the link to the description art the link to these little loading elements in the description below that way you guys can execute them as well and then BAM we’ve got our little loading screen attached to the strip here perfect this is exactly how we want it now that we have created our screen again guys I was
not going for design here you can create whatever you want on this loading screen it doesn’t even have to be one of these little loading guys although anything that moves is typically indicating something loading such as like spinning a little wheel like this circle anything you get that spins anything I and you have the words loading typically typically it’s a loading screen so make sure you know even if you create a custom little page you could
create however you want just make sure people know it’s a loading page and it’s not your full website so think about that when you design it now that we’ve actually added this strip and we technically created our custom preloader we have to make sure it’s gonna work when people log on to the website which means we now have to adjust the code accordingly so you’ll see here dollar sign W on ready wait for loading so this shows that we’re waiting
for the website content to load and then it says export function button six on click it says show here dot show which means we want this strip to show if you if I scroll down a little bit you’ll see each element has its own name given to it if you look at the top here this says hashtag column strip one that is its JavaScript value you have to import that or put that into the code here so we’re gonna come here to change lightbox to column and also
guys it is case sensitive so the S has to be capitalized strip and then I already have one in there and you can see BAM that little red arrow disappeared because it now recognized that element it actually pulled the element it knows now okay that’s what I have to show now obviously when the site content loads you want it to hide correct absolutely so that’s why it says right here function weight for loading set timeout so that means when it
finishes loading the site content we have to change this to also call them strip one because it says dot hide so when the content is finished loading you’ll see fade out and you’ll see hi so it will fade out this strip and then hide it because that’s what it will do you don’t want it to show once your content loads because you want your web at the show so we need to also change this one to call them strip one and then just like that we have our
code for a custom preloader now the important thing you need to take care guys I provided you the code for the preloader so this will work on all your Wix website the most important thing you can take from this is making sure you have this correct right here that you take this correct value from the element and that way you’ve got to make sure you stretch it on your whole page and you put these elements inside your strip if you’re gonna use a
strip another little thing I like to do is change the strip background go to settings so that way people can see the website load in the background a little bit lower the opacity just a little bit so people can see like when the content loads and then they’ll know okay it’s getting ready the loading bar is getting ready to end just like that and then people have a little glimpse or preview whatever you want to say but you just need to make sure
you get this little hashtag show and hide correct because this is what what your whole preloader will be so that’s that now if we want to test this in action we’ll press publish and then I’ll click view site and let’s watch our magic happen look at that we got a preloader wait content loading bingo fades away look at that just like that it’s that simple preloader pops up content loads on the whole website preloader disappears and now we’re on the
website for good little tip I’m gonna have for you back in our site here you can see now that I have this giant strip over the first section of the homepage I can’t really edit that top section so I would highly encourage you if you use this method which I think it’s the easiest especially for beginners is if you’re gonna add this preloader in this strip make sure that you finalize your content up here above the fold and finalize the design
before you go and add the premotor I would add to preload or last so that way you don’t have to delete your preloader change your upper content on the header in upper section here of your website it’s just gonna make your life a lot easier if that makes sense but other than that guys that’s how you make a preloader once again this custom code is down in the description below the link to that and I will add the link to the little preloader guy
here where you could actually find thousands and thousands of different pre loaders little spinning freeloaders like that if you guys have any questions feel free to comment down below I’m here to help you out don’t forget to like this video if it helped you out drop me a like thumbs up and then don’t forget to subscribe to me here on computer I’m Bo Gilbert where I’m bringing you tons of new Wix content especially Wix code because guys this is
the future web design especially the future of Wix web design I’m happy to help you guys out don’t forget it to head over to Wix my website com sign up for those weekly which tips you guys if you need some help are you looking to hire out my team is here to help you we’re here we understand time is a precious commodity a lot of people don’t have it that’s why web designers are here for expertise and to help you save time so feel free to hire us
on to help you with your project thank you guys very much and I hope you all had a very Merry Christmas and I look forward to seeing you throughout this week up until the new year and I’ve got some you know fun stuff to kick off the new year with you thank you very much have a great day