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

What is up guys? It's your dude, ComputerMDofGilbert here. And in today's video, I've got another Wix code tutorial.

Guys, I'm going to be probably hammering you with Wix 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 of the Wix code content that you can. So I'm going to 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, Wix websites did. And nobody really likes it. It doesn't have any sex appeal. It has no curb appeal. There's no, there's no interest in it, 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, 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 wixmywebsite.com. 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. And if you have any questions, feel free to come over to wixmywebsite as well. And either ask an expert or come down and hire an expert guys, our team's 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. Other than that, let's show you how to create a custom preloader here in Wix.

How To Create A Custom Preloader Screen in Wix

So to start with this is the code we're going to be using. I put it down in the description below. I put the link to this Google drive document. This will be the code right here that we use to actually make the custom Preloader possible. So this is our JavaScript. So what I'm going to do is I'm going to go ahead and copy this right now. And then we're going to go over to the Wix editor. And we're just using a sample website right now. And what we're going to do is we're in Wix code, and if you don't know, you have to go to tools and developer tools to either turn on or turn off to Wix code tools we're going to 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, and we're, we're going to be working, especially today is down here.

Code For Preloader (Google Doc): http://bit.ly/2zzoQMY

Preloader GIF's: http://bit.ly/2lgDqng

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 going to 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 going to want to put this on the site because obviously we're going to be loading all of the content on the website and what if they land on a different page, you want to make sure that preloaders prepared to show up overall, your whole website on low.

So what we do then is we're going to 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, shoot, I don't know what to do.” And you know what? At first I was too, this is JavaScript. I'm still learning it guys. Don't get me. Don't confuse this here. I'm not a JavaScript King or anything like that. Most of this stuff is done with no coding necessary Wix has provided us as code. That's why I have it. I didn't just go ahead and code this up myself, Wix has provided this.

However, there are different elements in the code that you're going to have to mess with on your own that I'll show you in this video. So now once we have this in here, we'll see this error or we'll see hashtag lightbox. One is not a valid sector name. That's because I don't have a lightbox 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 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. I mean, you're different coders. I don't know. Just bear with me is to go over here to add, go to strip. I'm just going to add a white strip. I'm going to go to the very top. I'm going to add it up there at the top. Scroll down to where it covers that first section of the page here as this is the part you would see when it first loads. And then I'm going to come in here, go to add, I'm going to add some texts. I'm just going to keep it very basic guys. And again, this is what you'll see. When you first get on the website, I'm just going to 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 guy. So this is like a little loading element. Again, I'll put the link to the description or the link to these little loading elements in the description below that way you guys can execute them as well. And then 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 could 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 like that. And you have the words loading. Typically it's a loading screen. So make sure, 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've technically created our custom preloader, we have to make sure it's going to work when people log onto the website, which means we now have to adjust the code accordingly. So you'll see here, a dollar sign with dot 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's a show here 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 it's JavaScript value. You have to import that or put that in the code here. So we're going to come here and change the light box 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 could see bam, that little red error disappeared because it now recognized that element. It actually pulled the element.

It knows now that's what I have to show. Now obviously when the site content load, you want it to hide, correct? Absolutely. So that's why it says right here, function wait for loading set time out. 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 high. 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 website to show should we need to also change this one to call them drip one.

And then just like that, we have our code for a custom preloader now the important thing you need to take care of guys. I provided you the code for the preloader. So this will work on all your Wix websites. The most important thing you could 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 got to make sure you stretch it on your whole page. And you put these elements inside your strip.

If you're going to use a strip, another little thing I like to do is change 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 high correct because this is 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 happening. Look it out. We got a preloader way, content loaded. Bingo, fades away. Look at that. Just like that. It's that simple, a preloader pops up content loads on the whole website. Preloader disappears. And now we're on the website for good little tip. I'm going to 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 easiest, especially for beginners, is if you're going to add this preloader in this strip, make sure that you finalize your content, appear above the fold and finalize the design before you go and add the preloader. I would add your preloader last so that way you don't have to delete your preload or to change your upper content on the header in upper section here of your website. It's just going to make your life a lot easier if that makes sense.

Conclusion

But other than that, guys, that's how you make a preload. Or once again, this custom code is down in the description below the link to that. And I will add the link to the, a little preloader guy here where you could actually find thousands and thousands of different preloaders 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 helps you. Yeah. Drop me a like thumbs up. And then don't forget to subscribe to me here on ComputerMDofGilbert, where I'm bringing you tons of new Wix content, especially Wix code, because guys, this is the future of web design, especially the future of Wix web design.

I'm happy to help you guys out. Don't forget to head over to wixmywebsite.com, sign up for those weekly Wix tips and guys, if you need some help or you're 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 fun stuff to kick off the new year with you. Thank you very much. Have a great day.