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
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.
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.
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.
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.