Make an Awesome Business Website – Step by Step (2018)


Welcome to another tutorial from YourWebsiteTutor.com. We will teach you how to make a website step by step, perfect for beginners. We’re doing this by popular demand, so you’ve come to the right place. Within the next hour, you’re going to learn how to make an awesome business website by yourself. We also won’t skip any steps, so you can learn while you follow along. We’re going to use a fantastic platform called Wix. With Wix, you can use the website builder for free to create your entire business website, and then if you’re happy with it, publish it live under your own domain name, which is your .com address on the Internet. This is perfect if you run your own business. So just follow along with this tutorial, and ask any questions in the comments below. Here’s the website we will show you how to make for your business right here. So we’re kind of covering the beauty, health, and wellness sort of angle with this tutorial, and you’re going to have a website that looks just like this in no time. So as you see, we have a really nice Contact section at the bottom here. We’ve got testimonials. We have lots of strips, imagery, moving effects. We have our logo up in the top corner, beautiful header navigation, social media, and online booking functions. Basically, this website covers everything that you would need when it comes to this industry. So if you’re ready, let’s begin, and I hope you start to follow along. The first thing we need to do before we can jump into any other aspect of our Wix website is to create a free Wix account. Now, this is very simple, very straightforward. It will only take about a minute of your time to do. All you have to do is copy that link in the description below this video and paste that right into your browser. When you do that, it’s going to redirect you to the proper page where we can start creating your account. Now alternatively, you can also go to YourWebsiteTutor.comWix, and that’s also going to take you to exactly where we need to go to start our account. So I have that link copied right now. I’m going to paste that up in our browser here. Do it. I’ll give you all a minute to catch up, grab that link in the description, and hopefully, we’ll all end up on this page right here. So if you’re here right now, it should show a couple of hikers, and it should say “Create Your Own Beautiful Website,” “Start Now,” and that’s exactly what we want to do. So we’re going to just click this Start Now button, and it’s going to take us to a page that looks like this. It’s going to say “Log In” or below it, it says “New to Wix? Sign Up.” So we’re assuming that you don’t have a Wix account at this point, so what we’re going to want to do is just click this Sign Up button. Now, when you do that, it’s going to redirect you to this page that has an email and password queue, so all Wix needs from you to create an account is an email of your preferred choice and a password. There’s really no catch, nothing else. You don’t have to verify anything through email, you know, like some other websites do. It’s very, very simple. It’s really that easy, just give them your email and put in a password. So I’m going to do that right now, and we’ll paste it here, and then the password of your choice below it. You just have to type it twice to confirm it. And once you have all your information inputted that you’d like, all you do is just click Sign Up. Now, we already have the Wix account created, but once you do that, it’s going to redirect you to where we’ll need to go next. Perfect. So now that you have your Wix account created, you should end up at a screen that looks something like this. It says “What kind of website do you want to create?” So for our purposes, since we’re going to be going over a beauty, sort of hair salon-y, massage therapist-style website, anything in the health and beauty section. We’re going to go along with this category here, Beauty and Wellness. So when you select that, it’s going to bring up a two-sided screen, one that says “Create Your Wix Website With ADI,” and the other “With Wix Editor.” Now, these are pretty different, and we’re going to end up going with the Wix Editor, and I’ll tell you why. The ADI is essentially a new automated system that helps design the website for you, but it sort of leaves you a little limited when it comes to tailoring and customizing specific pieces and parts to whatever your desires may be. So with the Wix Editor, the old-fashioned way of going about it, we have complete control and customization over every single little, you know, piece of text, content, imagery, anything with the editors. So we’re going to hit Start With Wix Editor, and it’s brought us to this Template selection page, where every single thing you see here is a starting palette or an idea of what your website can look like, basically. All you have to do is sort of use your imagination and fill in the blanks with what your content and what your logos and what your images might be versus what’s being shown here. So you can either go with any of these templates or what we recommend going with is, if you search Beauty up in the top left corner here, it’s going to bring up a whole bunch of really, really sharp looking website templates. So it’s very easy to preview any different template that you want. You can simply hover over it and hit View, and when you do so– we’re going to pick this one here, and some really, really nice templates that hopefully you’ll follow along with us in it. And when you have this open here, it’s basically showing you exactly what the website would look like, as if it were live on Google, the Internet, wherever you’re searching. So this is a really, really neat way to get an idea, get a feel of what you’re going to be working with. Now, you can also even check out the way it would look on a mobile device, so if you go up in the top left corner here, there’s a Mobile View. This little phone button. If you click that, it’s even going to show you a preview of what you’re looking at when it comes to a mobile device, and how your website might look on a phone. So basically, it just sort of lays the whole thing out in a vertical fashion, and you can decide for yourself whether or not this is the right choice for you, but let’s pretend that this is the right choice for us, and I happen to think this is actually a very nice template anyways. So let’s run with this. If you’re ready to pick this template and move on into editing this one, then all you simply have to do is click Edit This Site, it’s going to open up the Wix Editor, which we’ll go into more depth in later. And you’re going to get this sort of animation here. It’s just loading. That’s normal. And so you have this all set up, and basically, when you’re ready to go and we want this template, you would just hit the Save button up here. We already have this in our file, so I don’t need to do this, but in your case, just hit Save. You’re going to name the site, and you’re ready to start editing. So next, let’s go over the Wix Dashboard. Okay. Let’s jump into the Wix dashboard because that is probably the next best thing to understand before we actually start going into the Wix Editor, which is what we are in currently, and start building the site. So to get back to our Wix Dashboard, you can either just close out and sign back into Wix entirely or if you have another tab open, which you should from when you created this template site, you can just exit out of this tab. You’re back here, and then you would select the top left corner. Whatever you named your site, just click that, and it’ll take you to the dashboard for that site. So in your Wix Dashboard, you have a lot of different options available to you, and it’s all sort of behind the scenes material that you can use to help better your site in a lot of different ways. So for instance, we have all these different apps that come stock or standard with your Wix website, no matter what you decide to choose, and you can also add a whole bunch of different apps down here if you’d like. So up on the top here, we will just kind of run through what we have available for us. We have Wix Bookings, which comes with the template that we selected. So if you’re doing an e-commerce site, you’re selling something, it might come with something called Wix Stores instead, but because of the nature of the template that we’re working with, which is sort of a hair salon, massage therapy sort of style website, it gave us a Booking option. This is actually really helpful and useful to understand as an owner of a website like this because these bookings allow your client base to login to your website and essentially just plan out or schedule an appointment with your business. So if you’re a hair salon, people can go to your website and schedule a hair appointment right online for your Wix website, which is pretty cool, and you can manage all those bookings just by clicking into this. Now, moving down the line, we have Email Marketing. This is a really nice shout-out plug-in that Wix has, so if you collect email lists or, you know, you have subscribers to your website, you get a lot of interested people that come to your store front – if you have one – and you collect emails, you can send a whole bunch of different email blasts to them with promotions or whatever you may have right through this tab here, which is nice. We then have a Domains & Mailboxes. This is for connecting your website domain name and any different outsource emails that you might have. There’s also an Invoice tab, which I don’t know how much you’ll use that with this style of a website, but it’s nice to have that in place. Anyways, we also have a Contact section. This is just basically where your lists for the Email Marketing can be stored. You also have automated emails. So these are different emails that will go out, so like if you had a reminder for an appointment or something for someone, you could set that right in here to go off automatically for that person when it gets close to the appointment. On this tab, Rules and Permissions is also extremely important to understand because if you have a webmaster that you’re working with or you have a staff or anybody that’s helping you out with your business in this website, you can add their email address here, so that they can log in to the Wix website back-end, and basically manage everything that you allow them to manage. So that’s very helpful tool if you’re working with other people. And then lastly, we have the SEO wizard, which basically is just a really quick and [dirty?] tool to help you get your website analyzed and see what you could do better to get found on Google. Next, we have the Upgrade to Premium on our right. This is just a big tab that we’ll go over later because this is one of the last things you’ll need to do to get your website completely fully running, if you choose to do so. And then on the far left side, we have this Manage Site button, which we’ll go into in just a second. We have another Connect Your Domain, which is the exact same thing as up here. So you can use either of those interchangeably. We have another Upgrade to Premium plan button, which is also the same thing as over here. And then another Mailbox, which also is interchangeable up there. So if we hit Manage Site and go into this, this takes us into a more technical end of the website. So we have– you can rename the entire site. You can duplicate it. You can transfer it. You can even delete it, and then you also have a Site History button which allows you to look at older versions of your websites, so if you accidentally publish your website to the Internet and you realize you don’t like it as much as your old version, you can go back and restore your old website very safely here. So that’s a look at the Wix Dashboard. Next, let’s move into the Wix Editor. If you want to get into the Wix Content Editor, all we have to simply do from where we are now, where we left off, is click this blue Edit Site button, and this is going to look familiar because this is going to take us right back into where we were in the beginning when we selected our template. So we’ll give this a second to load, and now, we’re in what Wix calls its Content Editor. So this is where the sort of meat and potatoes happens. This is where you will do everything that you need to do to the stylistic look and some technical things to your website. This is where the magic happens. So let’s just start from the left side here because these had the most important icons on that you’ll need when you’re working with your Wix website in the back-end. So starting from the top, we have a Background button, and this is pretty straightforward. This, quite literally, has one function, and that’s to change the entire background of your website. So if you want a white color or maybe this image of this girl, you can decide how– whatever you want back splashed on your website, you can set it right in this background tab also. Below it, we have the Add button, and this is arguably the most important button in the entire Editor because this is where you will find every single functionality– functional piece – excuse me – in this editor. So everything you’ll need to do to add your own content will pretty much be within this Add button. So you have everything that you need. You have text, images, slideshows, video, music, social media, like everything you could possibly want to add to this website will be somewhere in this Add button. Below that, we have the Wix App Market. This is kind of what I was going off of from our Wix Dashboard. These are sort of Wix’s version of plugins. They are little things that can help you with your website. So if you need something very specific, you can basically find it in here. So for instance, if you needed like a live chat feature where you see those live chats in the bottom of a website, you could add one through the Wix App Market. Below that, we have a My Uploads button, and this is just basically a little shortcut to get to where all your media is stored. So any photos, videos, whatever you may have can get stored right here. You can get to it very quickly. Beneath that, we have a Blog button, so if you wanted to add a blog to your website, you can do so right here by clicking Add Now, but we’re not going to do that for the sake of this tutorial. And then we have the Wix Bookings, and this is exclusive to the template that we’re working with, and, you know, some other templates that Wix offers. I shouldn’t say its exclusive just to this template, but for what we’re doing right now, this Booking tab is exclusive to this website at the moment. So this is, like I was saying, where you can manage all of your appointments or, you know, if you wanted to set up meetings or whatever, you can add that stuff through this Wix Bookings button. So as you see here, this is using sort of a massage- style service page, so people can book, you know, an hour pedicure right here by clicking this Book Now button on your website, so that’s pretty cool. Let’s jump back to the home page. So that’s something worth mentioning, how I just got back to this home page up in the top left corner. You have this little tab that says “Home.” Underneath that, you have all your pages that are on your website. So every single one of these little tabs right here – these white tabs – are a page on our website, so if you click it, it will take you to a certain section of our website, so that’s pretty cool, and a very helpful tool to jump around your website quickly when you need to do so. Over beside that, we have the Site button. This is where a lot of technical things can happen, so if you’re working on SEO, you know, Search Engine Optimization or you’re doing some sort of– you need to add custom scripts or anything like that to your website, that can all be done in this site site section here. Next to that, we have tools. So these are just little helpful things that are similar. If you ever use Photoshop, these are very similar to what you’d find in that. So you have rulers, so if we click that, we now see we have a ruler that goes across the top. You’ll notice that when we start to design, there’s gridlines, these little dashed lines that go across. And then we have Snap to Objects. All these little things, and you can check on and off to help you design your website. Next to that’s a Help button, so if you need to contact Wix, so you can do so right here. And then we have another Upgrade button up at the top because like I said, this is important later on down the road. Over on the far right, we have a Zoom In and Out button to help you get, you know, everything precisely how you want it looking. You have an Undo, a Redo button, the Mobile Editor View, which we kind of briefly touched on in the beginning here. The Save button, which is super important. We’ve gone over that already to just make sure that I can’t remind you enough to keep saving because if you accidentally ex out of your browser, that can be a big mistake if you’ve been working on something for hours. Next to that, we have a Preview button, which if you click this, it’s going to show you like when we were looking at templates, what your website looks like as if it were live. So that’s good to do while you’re designing to just check and see if everything you’re doing is working okay. And then the Publish button, which is also a very important button next to that, which is one last buttons you’ll use when you’re ready to completely push your site live onto Google. Now that we’ve gone over the Dashboard, We’ve looked at the editor, we’ve kind of done a really quick overview of both of those, now it’s time to kind of dive right in and actually start putting together the website the way we want to. So, you know, follow along, pause the video whenever you need to, rewind, fast forward. Whatever you need to do to basically tailor the website exactly how you need. So we’re just going to start off with the structure of your website, and show you how you can format a Wix website to sort of lay out exactly how you want it to. So looking at this, if we’re working with this template here, it’s actually structured pretty well. It’s got a really nice, flowing format, and with a lot of websites, you’re going to see three common things. So first off we have what’s called a header, which is at the top here. The Header section, you’ll know that you’re working in there because everything will be outlined in orange. So for instance, if I hover over all these different objects here, you see this orange line that kind of comes over everything, and that indicates that those objects are placed in the header, and the header is sort of identified by this long orange line that comes up when you click on it. So anything below that, then, is not in the header. That’s in the body of the website, and all of these different stylistic elements fall within the body, all the way until you get to the very bottom with this black strip. If you click on that– it’s a little bit hard to see with the black, but there is an orange line that comes up on top of there to indicate that everything below that orange line is now part of what’s called the footer, and the only real difference between the footer, header, and body is that the footer will always show at the bottom of every page unless you explicitly indicate not to do so. And at the top, the header, similar to the footer, will always show at the top of every page, unless you say otherwise. And with headers, you can also even have them follow the page, which if I can’t recall at this moment if this follows it. No, it doesn’t. You can actually set your header to scroll down with your website. You may have seen this on other different sites. It’s fairly common, and it looks really nice if you do it. It makes it a lot easier for users, too, to get to different pages faster without having to scroll back up. So if you want– let’s say we wanted to freeze this header to kind of follow our website because that looks pretty nice. All we have to do is right-click on the top of the header, and we would just simply go down to this Freeze Position, check that on, and now if you hit the Preview button in the top right corner and you start scrolling, you’re going to see that our header follows. Now, we don’t have any color behind our header, though, so that’s going to cause the problem, as you see. As we start overlapping black and different colors, some of our navigation, our logo gets lost, and we don’t want that, so basically, let’s hit the Back to Editor button, and we can either left click or right click. And then you’re going to hit Change Header Design, so when you click that button, it’s going to bring up a whole bunch of presets in this window here, and this is a this is a very common window that will pop up. You’ll notice it as we start going through and building our Wix website here. You’re going to see that this comes up time and time again. So you’re going to get very familiar with this box very quickly. So we can either pick a color that we like back here or we can go to Customize Design at the bottom, and you can select another style from up here and work with one of those. So in our case, I’m okay with this sort of light gray-white right here. If I hit Customized Design, I can just tailor it just a little bit. I like to add a shadow down here. So you’ve got these four options: Fill Color & Opacity, Border, Corners, and Shadow. These are very typical. You’re going to see this with a lot of different elements as well as we start going through our website here. So with shadow, we can just enable the shadow by checking this box here. Simply click that, and then I think the best setting for a shadow is just setting the blur to 10. When you do that, it creates kind of like this really nice soft black undertone underneath your bars. So if we ex out of all this now, and let’s hit Save because remember, you got to save a lot. Hit Done. If we preview this now and we start scrolling, you’re going to see that our header now follows, and with a white background, the shade behind it, which is really nice. You can see it, especially on the white. It just helps to kind of distinguish and define the the line between the header and the body of the website, so I think that looks really nice. Hopefully, you think it looks okay, too, and if you want to recreate that, just simply follow those steps. So that’s our header. Now, let’s sort of move down into the body of the website. So with our body, basically everything in the body of a Wix website is made up of strips or boxes. So I can tell you right now, this– for instance, this whole image right here of this of this face is what Wix called a Strip. So you can move this. If you simply click and hold, you can move this entire thing in one big piece wherever you’d like. Now, it’s not exactly going to look good because it’s being moved, you know, behind different things and stuff like that, but just so you know, you can move virtually anything on a Wix website simply by clicking and holding. So I’m going to place this back to where we had it, and you’ll notice that those pink gridlines come up. Those are extremely helpful. Those will tell you if you’re centered, and you know, will help you stop your object at the right spot. So I’m going to let go of that. So I like the strip where it is, and I think it looks really, really cool. So if we want to change what’s in this strip, you can do so in many different ways, and that what we’re going to kind of go into when we start fleshing out content on the website, but for now, let’s just cover the structure. So this is looking good. We’ll keep that strip down here. We have a whole bunch of different elements that are together, and you can basically group different things so that they move as one objects. So a way to think of this is this is actually eight boxes four on top, four on bottom that have all been kind of glued together that you can now move. So if we wanted to move each of these boxes separately to somewhere else on the website, we can do that simply by clicking it and hitting Ungroup Elements. So when we do that, you’ll see now, if I grab this, this one box is just going to move completely on its own, and you can easily recenter it by using those pink gridlines that kind of help you gauge where you should place it again. So now, if you made a mistake and you don’t want those to move individually like you just saw, if you want to move this as one big unit, again, you can simply hit control click – or if you’re a Mac user, you can hit command click – and do that on every single object that you want. So these are, remember, four on top, four on bottom, so click each of the four boxes, and then you’ll see it gives us this option up at the top that says “Group Elements.” Click that once, and now, you group these guys into one big movable object yet again. So if we grab this, you see that it all moves, once again, as one big object. So that’s important to note. If you want to move any of these boxes on your own website that you’re working on right now, you can do that simply by, you know, moving those wherever you want. Down here, we also have another box that we’re working with that they have in place on this template, and basically, I’ll show you how we can recreate this. So if you wanted to put another box, say, on the right side of it so we can maybe center this box like so, and say we want to add another box right here to the right of it. All we have to do is go up to the Add button, click on Add, and we’ll go down to this Shape tab, and you’ll probably use this quite often. In the shapes, we have lots of different things we can work with. Wheels, like these sort of rounded corner rectangles. You have, you know, obscure objects like stars, but quite simply, we’re just going to work with a regular old box. So you can take any of these, and if you click, hold, drag, and drop, it’s going to place your box over on the site. And now, if you click your box or—actually, I should say any object, then you’re going to notice these little blue dots come up around your box or object. So if you grab any of those dots, click, hold, and drag, it’s going to scale your object wherever you pull it. So for instance, if we’re going to try from the bottom here, if we want to make the same length, we can do that, and if we want to get this, this is our grid lines. So if we want to get this kind of locked inside that, we can grab it from the side and pull it there, and now, we’ve got a second box that we can work with, and maybe we’ll add some content to that later on. Below that, we have another strip. So this is another big white strip that we’re working with that we can move around at our free will. So again, if you want to add a strip, this is worth noting. So if we wanted to replace this one or maybe insert another one, there’s a couple ways we can do that. We can either just lay over another strip on top of this. We could delete this entire strip and replace it, or if we wanted to keep this and add it, we can grab this little guy right here, the drag handle, and pull it, and it’s going to push everything below it down in one uniform sort of movement, and this applies to any object on your site. So for instance, if we if we went up to the Shape, you’ll see there’s a drag handle in this shape. If we pull that, it’s going to move everything below our box. You see how it pushes the strip like that and then pulls it back up? That’s because we’re using the drag handle. If we don’t use a drag handle and just move it freely, it’s not going to push everything, if that makes sense. So let’s say we want to push this all down and add our own strip, then. We can do that simply by using that drag handle again and pulling it down to where we think it looks right. And then if we go up to the Add button up here, we can click that, and you’ll see that there is a Strip button here, and with these strips, we have a few options to work with that are pretty basic. We have colored strips, video strips, and image strips. Now, you can add any of these in any form that you’d like. So basically, you can always just take a black strip, drag, drop, and place it, and move it, again, with those grid lines. And, you know, I’m going to bring this down just a little bit, and then bring our testimonials back up until it touches. There we go. So if we wanted to make this an image or anything of the sort, we can also do that quite easily when we start going over the content here. But for now, let’s just leave it with our structure. So if we scroll down, we have our Contact section that added. We’ll go over that as well. And then we have the footer, which we’ll go over how we’re adding some of that content as well. So that’s a look at getting your structure set up on how you can drag objects, move them around, resize them, and sort of work with the pattern footers. So next, let’s sort of actually start changing the content. All right. We have our structure sort of in place. We know how to move everything around. Now, let’s start customizing the actual content that we see on this website. So let’s start top down just as we did last time. Looking at the header, we have a logo in the top, and that’s very common. You’ll see that on lot of websites, and it’s also important to do that for branding for a lot of different reasons. So if you want to add your own logo up at the top, it’s really easy to do so. So you can do this one of two ways. You’re going to do it through text like, this this template has in place right now, and I think that looks actually pretty nice, so I’ll probably leave it for our website, but for your website, you can either change this text up in the header by double clicking and literally just typing out whatever you’d like. So if we didn’t want beauty and we wanted, you know, massage, all you have to do is just type that in like so. Put this back to what we had here. So I’m just going to undo that. There we go. Now, if we wanted an image, though– so say you had a JPEG, PNG, or some sort of file of your logo itself. We can add that up in the top header pretty easily. So what we want to do is go to the Add button here, and if we hover over to Image, we can go to My Image Uploads because you’re going to need your own logo, we’re assuming, and basically, you would upload your logo here by clicking the Upload Images in the right tab. So if you click that, it’s going to take bringing out this window that you see on a lot of different, you know, uploads for any other website, and you can simply, you know, add whatever photo you want from there, and it’ll place it into this box right here. So it’ll look something a little bit like this. I’m going to go into these images that Wix provides. I’m going to just search “Logo,” and hopefully something will come up for our uses here. Here we go. So this makes no sense to this website, but I’m just going to pretend it does. If we click this guy and we’d hit Add to Page– so this is what you would do. You would check the image that you want, only it would be in My Images, not Free From Wix. You check that, hit Add to Page, and it’s going to place the image there. So now, you can, of course– like we talked about with the structure, you can scale this to whatever size you feel is appropriate, and then all you have to do is click, hold, and drag to the header. So when you see the header turn orange like this where it kind of highlights everything in this orange tint, that means you have attached the image to the header which, is really good . So when you let go, it’s even going to say “You’ve added this to the header,” and the element is going to show on every page, and that’s exactly what you want because you want that logo to stay on this header, not move or disappear when you start scrolling, you know. So I’m going to get rid of that because I like our Beauty & Co. text logo that’s up there. It looks really nice. So that’s the first thing, getting your logo up there. Below that, we have a strip that we talked about going into earlier, and also, to the top right here, we have the Social bar that we can go over when we get down to the footer, but for now, let’s jump into the strip. Let’s say we want to make this our own image because we don’t know who this woman is, so we can change that to whatever image that we want behind this. So to do so, all we just do is click on the strip itself, and then hit this Change Strip Background. When you do that, it’s going to bring up our trusty window here that seems to come up with nearly everything, and we have a Settings, Color, Image, and Video Time. Now, color is just going to change it to one solid color, so if we go to that and we, you know, kind of hover over and click the soft pink, you’ll see that it’s going to change it to a entire pink solid color. We also have Image. So if we do this, this is, again, where you could upload your own photos. So, say, if you’re a hair salon or, you know, a massage parlor or anything of the sort, you could go right into this box here and upload a photo of your studio or whatever you might have, but in our case, we’re going to go into this Free From Wix. And something worth mentioning here is that Wix actually offers a whole bunch of royalty-free images that you can use at your discretion. It’s really, really nice. There’s actually a ton of different photos that you can use that are provided to you, and they’re in extremely high quality, so it’s very nice for the web. So if we want to start our search– let’s just search “Beauty,” and see what comes up. So we searched “Beauty,” and we have a whole bunch of different options that come up. So you see these are all really, really nice-looking photos, like I was saying. And this is, of course, assuming that you didn’t have your own photo to work with. You could jump into here and go with these. So if we wanted to maybe put this– let’s go with the salt massage. So we can click this, and again, you’ve got your image checked, and we can hit this Change Background down in the bottom right here. And you’re going to see that it changes our image background. So this is looking really, really cool. That photo is really high quality, but now this is sort of interfering with our white text, and that might happen a lot with your own photos if they’re too, you know, the exposures too high or something’s clashing with here, with your text. So there’s one of two things you can do you. You could either change the color of the text itself, but that still might not do the job, and actually most of time, it usually doesn’t. Or you can go into the Settings tab up on the top four window here, and you can change sort of the opacity of the image so that it’s a little bit darker or lighter. However, you need to adjust according to your text color. So for us, we need to make this image a little bit darker for this white text to show up, and to do that, we can go to this Color Behind Image. We can click it, and let’s change it to a black, and nothing’s going to happen until we start lowering the image opacity. So if you drag this little bar up here on Image Opacity, you’ll start to see that the image itself is getting darker and darker. So I’m going to set this to 50. I’ll just type that in that I think that 50 looks pretty okay. and then you can also add scrolling effects to the image. So you have Parallax, Reveal, Zoom In, and Fade in, and all these do different things. So just play around with these, and see what looks cool to you, simply for aesthetics, for design. But it really makes a difference when people are on your website. It just adds like a really nice dynamic feel to your website. So for ours, I’m going to choose Zoom In, and you’ll see what’s going to happen to that when we start scrolling in a minute here. And then you also– if you’re down at the bottom here, if your image was too large or it wasn’t positioned right like, you know, the tops cut off or something, you could just click these arrows here, and it’s going to move the image. So as you see, it kind of cut off our hand now, so for us, we didn’t want to move it down. It’s kind of slide the image wherever you need it to go, so those are all the little tools that you have when it comes to adding images to strips or changing your strips content. There’s a lot you can do and a lot you can work with, so. And just to show you that effect that we applied the Zoom effect. If we hit Preview, you’re going to see that when we scroll that image actually starts to zoom in and zoom out, depending on if we’re scrolling up or down. So it’s pretty cool. It looks really nice to look back to the end right now. Let’s start editing some text on our website. So we changed the color of this or the opacity of this strip to help bring out this white text, but now, our black text is getting a little bit lost, so now, we want to change this to white or some other color. So if you want to change any text on your website, similar to what we were doing with this text logo up here, you would double click, and now, you’re able to completely type out whatever you want in this text bar here. You could also, instead of double clicking– just as a heads up, you can just click it once and hit Edit Text. That’s an alternative, and once you do that, it’s going to bring up our window yet again. Next up, this time it’s Text Settings. So we have a lot of different things to work with. We have different fonts that you can choose from from right here, and it’s similar to Microsoft Word, if you’re familiar with that. You can click on any font, and it will change it to the one that you think looks cool. You also have font size, so you can make it way big or way small. So I’m going to put that back to where we had it, and get a little bit bigger. And then below this, we also have our Color button, which allows us to change the actual color of the text to whatever we like. So you can add a color that you want simply by hitting this plus button. When you click that plus icon, it’s basically going to add whatever sort of hexadecimal code you want. So if we click that, you can put in a custom code to get your own colors if you had a certain scheme with your logo or you can just simply kind of scroll around up here and pick your own color, just like so. So but for our case, we’re going to go with the white because that looks really nice up against the black background. Below that, similar to Microsoft Word again, we have a Bold option, Italic, Underline. Then we also have justifications. So you can left center or right align your text. And then we also have some effects below that, so if you want to add some shading beneath it which looks kind of cool or, you know, really, really wild effects, you can do that right here. And then below that, you also have character and line spacing. So a lot of different options when it comes to editing text on your Wix website, and it just gives you a lot of flexibility with, you know, adding some stylistic looks to your text, which a lot of website builders sometimes are limited in because the tech. When your text looks nice, your whole websites will look nice. So below that, we have our groups. grid again. So if we want to change these images, it’s very similar to how we would change the strip. So we could just double click, and then hit Change Image. And if we go to the Free From Wix again because that’s what we’re going to need, we’re just going to use those images because they’re really, really nice and high quality. Search “Beauty” again. Now, I’ve got a whole bunch of images that come up that we can use, so if we want to go with maybe this bath salts one, we can check that, and simple as that, it’s going to change our image in our grid. So it works exactly like our our strip does, very, very similar. Now below that, we have our other strip that kind of has our pricing chart and everything located on it. So if we want to add our own text to this box or change anything in this box, we can start doing that. So if we go to this box, we want to first change this to make it black. So if we want to do that, all we have to do is click on the box itself. You can see this little design icon, this little paintbrush, and that’s a very common icon you’re going to find with a lot of different elements on Wix websites. If you click that Design button, it’s going to bring up a couple really simple options as we’re just working with the box here. We have our Fill Color and our border, if we choose to have one. So in our case, I don’t really want a border on this box. We just want it solid black, so we’re going to turn that all the way down. And the color, we just go into here, choose black, ex out, and you now have a black box just like this one. So if we wanted to put some text over in this box, how would we go about doing that? We’ve talked about editing text now, but what about adding your own text? Well, that’s really easy. So if we go over to this Add button again– like I said, we’ll be going to this quite often. We can go up to the text, and we can go to any of these different options that Wix has. So these are just some presets. Honestly, you can choose any other one and add it exactly the same as you would with these. So in our case, let’s add a paragraph. So we’ll grab this little guy here, click and hold and drag and drop, and now, this text is black. So it’s showing nothing, so we have to quickly edit that like we did with our text up there. Change that to a nice, easy white, and now, you’ve added text. So you can center this. As you see, even in the little box you still get those grid lines, which are so helpful when you’re trying to center and align everything perfectly. So if you want to center your text just like so, and maybe we wanted to actually center the text itself, we can do that. And now, you can just start adding, you know, your own paragraph. So you can be like, “Hello. I am a sentence.” So very, very simple if you wanted to add a quick little paragraph, and, you know, if you want to add a header or anything like that. So for instance, they have the preset for this template. You can just drag and drop that header above it, and we just have to change our color again, and we’ll center this text. And now, we’ve got a header and the sentence all in one place, so it’s very, very simple to add your own text. It’s basically click, drag, and drop, and just start typing in, adjusting the color scheme. It really is easy as that when it comes to Wix. So if we wanted to add our own images, now, though– so we worked with strips, but if we want to add our own image, similar to what we did with the logo, we could just go to the Image Uploads and, you know, drag whatever image you want over onto our box. So I can, again, just kind of find something here to work with. Maybe we go with this manicure, add this to our page. That’s way too big, so we’ll resize this, and we can place that underneath here. And now, we’ve got our image placed. And say we wanted to add a button. Maybe this went to a service or something. So maybe we can actually title this, you know, Service 1. So this is a service, and we wanted it to go to an actual page, you would want a button for that. So to get that button on your on your box there, you can go up to the Add button again—sorry. That’s a lot of buttons, I know, in one sentence. And then we have our Button button. So underneath Button, we have a whole bunch of different options that we can work with. So for instance, if we just took this one and click, drag, and drop. You’re starting to get a feel of this, hopefully, by now. And now, we have a really nice-looking button that you can put, and we’ll show you how to link with this later on when we start going into navigation in pages. And basically, if we wanted to Center everything, like I was saying earlier, you can command click – or control click if you’re on Windows – and you’ll be able to move everything in one kind of fell swoop here, center it, and now, you’ve got your– whoops. Let’s get this out of here. Now, you’ve got your little Service box set up. So that looks pretty nice, that would be how you could add your own little sort of block element here to your page, and we could have done the same thing. We could have added that to our strip down here if we had wanted to do so, but since we kind of did it up there, I’m just going to get rid of our strip again, and we bring this Testimonial bar back up. So pretty straightforward. That’s pretty much how you go about adding all the different content on your body. You’re going to be mostly using boxes, strips, images, and text. And when you use a combination of all those, you use your imagination, you line them up appropriately, you’re going to be able to do some really, really nice things. And of course, you can do it too however you like or whatever you want to see. Now, I was talking about the social media in the beginning of this part as well. This is a very special thing that gets placed on your website from the Add button over her. I trust the Add button. If you click the Add, there’s actually a section that says Social, and you’ll see it actually has all these preset different looks for social icons, and you can just kind of click, drag, and drop those social icons into your footer or header wherever you want on the website, but usually, you most commonly see them in a footer or header, and when you lay those social icons down, you can start to go into editing them however you like. So if you click it, there’s set social links, and you can choose from Facebook, Twitter, Instagram. You can add icons. So if you click the Add Icons, Wix has a whole bunch of different social media outlets out there. So like if we wanted Twitter, there’s virtually every different option of the Twitter logo you could possibly mean or want on your website. And just like what we were doing with images, you can select Add to Gallery, and when you do that, it’s going to just place it in line with these other social icons. And also something worth noting is, if you wanted to align them differently, if you wanted Instagram first, you can just click, hold, and drag. And now, Instagram is the first icon to show. So—oops. Let me just save these changes here, hit Done. So as you see now, Instagram is showing first, and that’s basically how you tied your social icons to your header or footer. So other than those, there’s a lot of different elements that you can add to your Wix website, but those are the basics. Those are the things that you’re– those are a must. What you’ll be using constantly when you’re building the website, and hopefully, that kind of gave a look into what we can do with the actual design in here. Okay. So now that we have the structure of our website, we’ve gone over that, and we’ve sort of edited the content exactly like we want, we can now sort of move into the really important part of our website, which is the navigation. Every site has a navigation. It’s usually at the top and the header, as in what we have with – excuse me – this template. We have all of our different tabs up here under navigation, and their sole purpose is to get us to our other pages, which are all linked to different things in the back-end. So we have Home, Services, Specials, Book Online, and Contact. But let’s say we wanted to add another page. Maybe we wanted a different Services page or something to that effect. How would we do that? And how would we even get this menu here in the first place? So first things first, if we wanted to get this menu here up in our header, it’s quite simple. All we have to go do is go to the Add button, and we’ll scroll down to Menu here, and just like anything else with Wix, there’s a whole bunch of different templates and presets you can choose from design-wise to go with. However, I usually recommend just the plain text. I think it looks pretty clean and simple. So we can, you know, click drag, hold, and drop on to our header and make sure, again, like I was saying in the beginning of when we started designing here, make sure it says Attached to Header. That’s going to make a difference. Otherwise, your navigation is not going to show up everywhere. So anyways, now that we have that placed here, you can click on your navigation, and we also have our Design tool again. So you can change the color or the font or whatever you want with the actual look of the navigation. Now, getting into the more technical end of it, if we wanted these to actually start working or start adding more of these tabs to the header, how do we do that? Well basically, we go up to the top left here where we have our Pages again, and I was showing you this earlier. This is where all of the magic happens with linking your pages. So if we wanted to add a new page, all we’ll simply have to do is go down to this blue button down here that says “Add Page.” We click on that, and we have our three options here. We have Page, Link, and Menu Header, and all three do different things. So Page is just a plain and simple blank new page. Link is an off- site link, so if you wanted to have, let’s say, your Services tab go to a totally separate website or maybe your Facebook page or something like that, you could choose this Link. And below that, we have Menu Header, and this is a really fancy version of a drop-down, and we’ll be going over then how to set up a drop- down here in just a second. So let’s pretend we want to add a new page. So we’ll click the Add Page. We’ll select Page, and now, we have a blank new page. And as you see, it just starts off its default name is New Page. It gets automatically added to our menu up here, like so, and you can rename this page tab to whatever you want simply by clicking up in here and naming it whatever you like. So we can call this, you know, Service 1. And once you have that page setup and named exactly how you like, you can then move it to wherever you want in the navigation simply by clicking, dragging, and dropping it wherever you like. So if we wanted it in between Specials and Booked Online, we just drop it, and just see it automatically gets moved up here in between those tabs. So very straightforward, very easy, and not too hard to work with. And now, keep in mind, too, when we’re on all these pages– so we have this blank new page. Everything that I was showing you with our content design and structure design on the home page can also be applied to these blank pages. So when you go to Start Building, you know, make sure you use your strips, your boxes, images, text. All that, you can jsut drag and drop right on this page. Now, if we want to rename the URL of this page– because as it stands right now, this would be yourwebsite.comservice1. You may not want that. Maybe you don’t want the one, or maybe you just want to remain it so it’s a little bit more friendly for your visitors or for Google. All we have to do is click these three dots, go to Page SEO, and then right here you’ll see what’s the page URL, and you can change this to whatever you want. So if we wanted it to be just called Service, maybe you can just do that. Hit Done, and there you go. Easy as that. You now have your page URL set to yourwebsite.com, whatever that might be, service or whatever you’d like to call it. So now we need to sort of talk about– what if we didn’t want this tab to actually show in our menu here, but we still wanted page to exist? Well, that’s a very easy fix, and there’s a lot of reasons why you’d want to do this. So for instance, if we go back to our home page when this loads here. If we’re back on our homepage here and we have, you know, Service 1 here, we created this button, and if you recall, we didn’t actually link it yet to anything. So that might be a case where you might want to have a hidden page. So say this button goes to an exclusive page on your website or something that you don’t actually want to be shown in the menu, like this Service 1. You can do that by linking it to a button, so to hide your page from the navigational scroll up here. So we can see that how this works. It’s very simple. We just go to the three dots over the page you want to hide, and you literally just hit Hide. And when you do that, you’ll see our page still exists in our page list here, but you see it’s no longer added in our navigation menu, which is exactly what we want. So now, if we go back to the home page to link a button or an image or text – or anything for that matter – to a certain page on your website all, you’re going to do is click on that object and find this hyperlink button, this little like chain-link looking thing. When you click that, it’s going to bring up this window that allows you to link to a page, an anchor, web address. You know, virtually anything, and for in our case, we’re going to pretend this links to a page. So we’re just going to go to this arrow here, and select Service 1. And when we hit Done, we’ll preview this. When you go to hit this button, it takes us right to our blank Service 1 page, which is exactly what we want to have happen. And it’s still not showing up in our navigation, so everything’s working as its supposed to be working. Now, one other thing that we should go over is, especially with this website, what I was telling you with our Contact button, for instance, up in our navigation, that just takes you down to the bottom of our home page. And so that’s not necessarily. In the actual page itself, it’s something called an anchor link, and to create these, basically you have to first put one of these anchors on your page. So to get these anchors all we have to do is go to Add, and we go down to More, and just see there’s a whole bunch of these anchor menus. And we have an anchor right here, so if we wanted to add a new anchor, all you have to do is drag and drop, and you’ll see, it creates this Anchor 1 here, which is basically our, you know, our Contact that we have right here, and wherever you place this anchor on your website– so say you wanted it to go to the Testimonials here right here. Wherever you place this anchor and you link a new button or you link a tab up in your navigation– when you click that, that’s going to drop that page to that anchor, so it’ll stop right where that blue line is. So for instance, just to make sense of this again, we’ll go through this example one more time. Let me hit that Contact Us button. It will pull us all the way down to the Contact section, and if you recall, and you go back into the Editor here, that Contact Us anchor– you’ll see that blue line is right here, and that’s why that’s stopped. So it’s very simple to create an anchor link when you go into your pages and you have your pages set up here. If you wanted to create an anchor link, all you have to do is basically go to Add page, and you can either do Add Link or Add Page. You can do an Add Link, and you can just select Anchor, and you would choose what page the anchor is on. So we’re on our home page here, and then you select which anchor you created. So if you wanted to link Contact to our Contact anchor that we have here, you simply just select the Contact anchor you’ve had done, and you’re set to go. So I know that’s a lot, but you have a lot of options, a lot of flexibility when it comes to creating menus and navigations in Wix. So those are a bunch of different options to help you get you started, and what pages you might want to add to your website. All right. So we’ve gone over a lot of the major key functions and key design structural things that we need to go through when building your Wix website. So let’s take a step back and we’ll jump back into our Dashboard to start going over a very important topic, almost as important, if not more important, than the actual design itself, and that is the plans that Wix has to offer. So if we go back into our website dashboard here. Remember that Upgrade section over to are right? We also have it over here. So we can hit either of those and go Upgrade to Premium. It’s not going to actually upgrade you right as soon as you click that. This is going to take you to a page that looks something like this where you have five different plans to choose from. So right now as a stand, you have a free website, and if you publish it with Wix, it will remain a free website. You can do anything you want to it still, the only thing to keep in mind is that if you publish Wix without a plan, you have to use their domain. So you can’t have your own custom URL, meaning, like, you can’t have www.yourwebsite.com. It would be www.Wix, you know, some sort of gibberish .yourwebsite.com, so. And that’s not very desirable in most cases, unless you’re using the website for very personal purposes, but since this tutorial is for, you know, business owners out there of hair salons and massage parlors, you have a beauty, health, and wellness sector, we’re assuming that you don’t want to do that. So what you want to do instead is choose one of these five plans, but how do you know which plan is right for you? Well, I’m going to take you through each of them real quickly here and kind of guide you along. The first plan is just the Connect Your Domain plan, and that a super simple $5 a month plan that Wix offers. You get a gigabyte of bandwidth, so that’s not a lot when it comes to visitors, so if you had a lot of traffic to your site, that’s not going to hold that very well. You also have five megabytes of storage, which is okay, but not ideal if you had a lot of pictures or projects, you know, that you wanted to highlight. But you can connect your own domain, which is nice. So you could make your website, you know, yourwebsite.com, instead of the wix.yoursebsite.com. The only problem with the plan is that you still have Wix ads, though, being shown on top and bottom of your site, so also usually not what you want if you’re trying to represent your own personal brand, your business. Now, moving over, we have the Combo plan, and they recommend this for personal use. It’s a little bit of a step up in bandwidth. You also have a lot more storage than the first plan. You can connect a domain, and the Wix ads are gone. So for some people, this actually is a pretty suitable plan, but if you still have a full service business that you’re running, like a massage parlor or, you know, a hair salon or anything of that sort, in the health and beauty area, this still might not be the plan you want to go with, due to the limited bandwidth. If you have a lot of traffic that’s going to come or you know you’re running a lot of videos or something like that, this this may become limited to you in the near future. The next step up is the Unlimited plan, and this is which is the most popular plan, and it’s the plan that I definitely recommend everybody uses because you get unlimited bandwidth, so you don’t necessarily have to worry about videos or or traffic. You have a lot of storage with 10 gigabytes of storage. That’s plenty of enough for just tons of photos on your website. You can connect your domain, and the Wix ads are gone, and you get a lot of free vouchers for online advertising, which can help kind of kickstart your website in search engines. So this is a really, really nice plan that we see. For $9.99 a month, it’s not unreasonably expensive. It’s right in a perfect middle ground, and I definitely recommend it for anybody who’s building a professional website on Wix. Above that, we have E-commerce. So this is a plan that you would have to get if you’re selling online. So if you are a hair salon and, say, you’re selling products or you’re a massage parlor and you’re selling, you know, bath salts or anything, you know. If you are selling online, unfortunately, these three plans are out of the question, and you’d have to step up to the E-commerce plan. That’s the only difference between the E-commerce, really, and the Unlimited is that you can now sell your products online. And above the E-commerce plan is the VIP, which is usually overkill for most people, but if you’re a really, really large business, you’ve been around for a while and you just are finally getting online maybe and building your first website. For that large-scale enterprise business, then VIP might be the way to go for you. If you are looking for a very personalized support from Wix themselves, that’s the biggest difference between the VIP and anything else Wix has to offer. So those are the five plans. Like I said, most of you are definitely going to want to go with the Unlimited plan. I highly recommend that one, and we will move on from these plans and start going into our domain connection. All right. So hopefully, you paused this video, maybe taking some time to think over what plan is right for you. And if you’re ready to move on from that, then all we need to do is connect our domain to our website, and this is actually a really, really easy process to do on Wix. But the first thing, of course, is you need to select what plan you want to go with. So if you’re still on this Plan page here, let’s just assume you go with the Unlimited plan. Just hit Select, choose how you want to pay for it– if you want to do it monthly, yearly, you know, every two years or three years, you just hit Select, and then, of course, you would just fill it out like any other online provider. Your preferred credit card payment method or PayPal or whatever you want to use, that is how you go about getting your plans, which is the first step to connecting your domain because you have to have a upgraded plan in order to connect your own domain. Now, once you have this plan and you purchased it – we’re not going to do that for the sake of this tutorial – you go back to your dashboard, and you can either go into Domains & Mailboxes or you can even more simply go to just Connect Your Domain under here. And when you click on that, it’s going to take you to a page that looks a little something like this. So there’s one of two options Wix has. There’s option one, which is if you didn’t have a domain already, which hopefully, if you’re watching this video, you maybe already bought a domain at this point, but if you haven’t, you can go to Buy a New Domain, and Wix can actually get your domain right through their providers. Or a lot of times, if you buy the Premium plan, they’ll even give you a free domain included with the plan. Below it is Connect a Domain You Already Own. So assuming that most of you already do have the domain, bought maybe from GoDaddy or Google Domains, One-to-One– any of those other sites out there that you can buy domains from. This is where you’d want to go to connect a domain you already have. So we don’t have the upgraded plan right now, so when we click it, it’s going to show us this, that we need to select the plan. However, if you’re at this point already and you’ve bought your plan, this won’t show. What’s going to happen when you click that Connect the Domain You Already Own, it’s going to go to a page where it’s going to ask you to enter your domain name. So you simply just type in www.yourwebsite.com, and below, it’s going to ask you where you bought your domain from. So let’s say it was GoDaddy, for example. You would select DoDaddy, and then it’s going to give you an exact, explicit step-by-step instruction. It’s usually about 10 to 12 steps of exactly how to connect your domain from GoDaddy to your Wix website, and it’s super straightforward. If you just follow those instructions, it’ll take you less than five minutes to do it, and you will have your domain connected in no time, so. And as soon as you finish connecting your domain– it should connect almost instantly, but sometimes it can take about 24 hours for it to actually recognize that it’s pointing to your new Wix website, so just keep that in mind. If you’re not seeing your website immediately, don’t panic. That’s usually pretty normal. So that is connecting your domain. And next, we’re just going to look at some additional features Wix has to offer. I’ve turned back into the Wix Editor here. Now that you’ve connected your domain– hopefully you’ve all gotten to that point, and if you have, that’s really good. We’re almost to the end stretch here. So I think it would be worth all moments of your time to show you some of the really cool additional features that Wix has to offer on their Editor end. So we went over, you know, strips, boxes, text, images. All the very essential makeup of a Wix web design. Now, if we want to get a little more fancy, though, there’s a lot of different things that Wix has to offer that we can also add to our site that we might not have already. So for instance, if we’re down in the Contact section, here we can actually add content forms and a Google map if we wanted to do so, which is something you see on a lot of website. Especially if you have a storefront or an office, it’s a really, really useful thing to have. So the first thing is how do we add a contact form? So we have one down here in the Contact box, but if we wanted to add one somewhere else, how do we go about doing that? Well, simply we go over to the Add button, and we would go down to Contact, and you’ll see there’s a whole bunch of different, you know, contact forms that Wix has to offer here, like always, with their certain presets. So if we wanted to add one, we’d simply just drag-and-drop. I’m just going to put this off to the side just for the sake of this tutorial, so bear with me here. If we had this contact form, though, we can move this to wherever we want, and it lays it out really nicely already. So we’ve got this one in place, but we can just place another contact form wherever we want, and the first thing you’re going to want to do, though, is set your email. That’s very important with the contact form. So for instance, we have our email up here, but you just simply replace this text up here with whatever email you want. Very important to do because otherwise, your contact form might not work or it might be going to the wrong email, which would not be good. So another thing you can do with the contact forms, you can add different elements. So if you wanted somebody to put their phone number in, all you can do is check these boxes. Maybe you wanted an address for some reason. You can put that in as well. You can also take away different things. So if you didn’t want a subject, you could take that away. Very, very straightforward, very simple. And similar to everything else on the Wix Editor, you have your Design option, and you can customize it. So again, you can change every element of this contact form. Very nice, very intuitive. Definitely worth having on your website. Now, let’s say we wanted to add a Google map, though. So if we’re going to put that maybe in our Contact box below the contact form here, we can do so. First, we’ll make some space using our little nifty drag handle again, and let’s start adding them up. So if we go to the Add button again and we go over to Contact, once again we have our contact forms as we saw before. But if you keep going, below those you’ll see that there’s this whole section for Google Maps, and this is really cool because there’s a whole bunch of different colored maps that you can work with. You also have the very classic- looking Google Maps or the satellite version of Google Maps. You also have full-width maps, which are really nice. So they go across the entire width of the website. For our case, we’re just going to go with the classic Google Map look, and you would just drag and drop, and you now have your map on your site. So I’m just going to scale this so it looks a little bit nicer in our box here. Okay. So then we have a map there. How do we actually set it to the right location? So it’s saying that this is the Wix office and we’re in San Francisco. So let’s assume that that’s not where your business is and you’re not the Wix Office. What we’re going to want to do is just hit Change Address, and it’s really that easy. Up here, you would just enter whatever your address is, and then if you wanted to change this little bubble to your company name or your business name, you can do that with just the touch of your keyboard. I spelled “Business” wrong. There we go. Hit Set, and there you go. Now, you have your business and your own address up there. So you also have, below this, different options. So you can turn on or off, if you want, Satellite View, Zoom controls, Street control, and Dragging. So if you turn that on, we preview that. That means, like, if you wanted people to move across your map, they could do so. Pretty cool. Definitely a very neat thing to have on your website, very helpful for people to understand where you’re physically located. It’s a little bit nicer than just seeing a plain address. So Google map and contact form. Definitely worth having up on your website. All right. One other feature definitely worth mentioning is the Gallery option that Wix has to offer its users. So I went ahead and just created a blank page that we’re just going to use for the sake of this tutorial, a blank gallery page. And this is something that you might want to add. If your business had a lot of pictures or maybe your hair salon, you want to show off the different haircuts you can do. Or if you were a massage parlor or something, you’d have different product images or like, you know, we wanted to showcase your massage rooms, having a gallery in place would be a really nice feature to have on your website. So galleries are a little bit different than adding just straight images, but they’re not that hard to work with. So if we go to the Add button, again, as usual, below image there is a Gallery section, and we have a whole bunch of different-looking galleries to work with. So Wix has tons of different options for us to choose from, and a lot of them are mosaic grids. We also have, if keep going down here, full-width galleries. We have kind of strip showcases, and then we also have slider galleries, which are some of my personal favorites. So I’m going to actually grab this slider gallery here, drag and drop, and let’s get that centered to where we want it. There we go. And when you have your gallery here, it’s super easy to work with. It works similar to how we would change the strips on the home page, except this time, think of it as if we have a whole bunch of strips to change. So once you’ve picked your gallery and you have it on your page, just click on it and hit Change Images. When you do that, it’s going to bring up all the images that are in your gallery right now. So these are a bunch of stock photos that Wix has in place for us. So we can get rid of those simply by hovering over them and hanging the trash can icon. After you’ve gotten rid of the stock images, you can go up to Add Images, and you can, of course, select all of your own. In our case, we’re just going to use Free From Wix, and we’re just going to search “Beauty” again. Let’s pick maybe this guy, this guy, this guy, and we’ll do this one, and this one. So Wix 55 images to work with. So we have our images selected and in our gallery queue. What we want to do now, though, is maybe arrange it in a different way. So if we wanted this picture to be first, it works similarly to how we were doing that with the pages of the navigation menu. You can just organize it however you like, and you’re good to go. Once you have that set, you can hit Done, and now, your gallery is showing your images. And since we had the thumbnails, it’s going to show all the images that are to come, too, which is pretty cool. So I’m just going to make this a little bit bigger, center it again, and one thing you want to do with galleries, too. It just is kind of a nice, extra finishing touch. It’s if you go to settings, you can add navigation arrows. So people can quickly scroll through your pictures. And then you can also turn on Autoplay, and the different timing you want in between Autoplay, and this will look like a little something like this. Let me preview it. So you’ll see the gallery is kind of moving on its own without us having to touch it, and its really, really nice, very smooth transitions. It just adds a very nice touch to the gallery itself, especially if you’re doing a, you know, more of a help and wellness sort of page. It is a very, very soothing kind of ambiance with this gallery. So that’s just another additional feature we thought was worth mentioning, especially in this tutorial. Very nice to have on a website like this. So that is your gallery. We’ve just about made it to the end of this tutorial. One of the last things that we’re going to have to do now is edit our Mobile View because we’ve been building all along for our desktop, and this looks great on your laptop, on, you know, any sort of desktop computer but what about when it comes to phone? Now, we’ve talked about this Mobile Editor already a little bit in the beginning and throughout this tutorial, but we haven’t actually really worked with it yet. So let’s go up to this phone icon, click it, and we’ll go to Edit Mobile View. So when you do that, this rearranges everything on your website into a really nice vertical layout as we were talking about earlier in this tutorial, but sometimes, not everything will fall completely into place. So for instance, like I can see down here our map is a little out of whack at the bottom of our website here. So there is a little bit of playing around that needs to be done sometimes in the Mobile View, but for the most part, Wix is a pretty good, a pretty good job of getting everything sort of in place and in line. So what you want to do is just, like we were doing with the Desktop Editor, is you can move everything around however you like, so if you think something’s too big, too small, you can scale it exactly how you want. So for instance, with text, a lot of times it can either be too big or too small for your liking. If you want to adjust that, all you have to do is literally hit the Scale Down or Scale Up option, and that’s going to work for any piece of text on your website. The only thing you have to keep in mind is that you cannot change the text on Mobile View. That can only be done in your Desktop Editor. You can only change the size of the text. That’s about it. So furthermore, if we want to adjust down here, all we’d have to do, basically, is move our map up just a little bit, and we’ll want to sort of let’s see, pull this guy up a bit as well. There we go. So our entire strip was kind of wreaking havoc on the the Mobile Editor here. So it’s mostly just a lot of playing around with the options that you have to work with – so the different scaling tools – and just being able to kind of move everything around is all you’re going to be really doing in the Mobile Editor for a good, you know, 75% of it. Three quarters of it is going to be just moving things around. So for instance, let’s slide this back down, get that lined up, and maybe we’re going to make some more space here. And if you’re following along, you might have to do this with yours, you might not have to, but this is all going to be just completely moving things around until it looks right or as right as you think you want it to look. So fly that back down. All right. And that’s looking a whole lot better than what we started with with, the map completely overlapping, our footer here. So like I said, it’s a lot of just little tweaks, usually moving things around for it. When it comes to design on the Mobile View, now, a couple things to note is that there are some more advanced features with the Mobile Editor. We have this Hidden Elements feature, which for some reason—well, let’s just click it and see. We don’t have anything hidden right now, but let’s say we had a video on our website that we maybe didn’t want to have on our mobile website or a picture or text or whatever you want, you can actually hide that from your Mobile View simply just by hitting a Hide button. So if we wanted to, say, get rid of this text for some reason, we just click it and click this little Hide button, the little eyeball with the slash on it. And it automatically moves everything up and completely gets rid of that element, and you’ll see it pops up in our hidden elements queue over here. And if that was a mistake, we want to actually go back onto our Mobile View, then we can just re-click Show Element over here, and it automatically reformats everything to exactly how it was before it. So that’s pretty useful, especially if you have a lot of large objects on your desktop site, that might not work with your Mobile View. Above that, we also have this Mobile button. So this gives us a lot of, like, mobile-enhanced tools to use. So for instance, the Back to Top button– you can just click this and turn it on if you’d like to have a little button as you see right here in this little image playing that. If you scroll all the way the bottom of your website, you can click that, and you’ll take the User back to the top of your website. Very handy. And underneath that, we have the Mobile Action bar, and this is something you can turn on if you like, and this just gives your users a lot of really quick information that might be very important to them, especially if you’re like a hair salon or something along those lines. Maybe you want a phone number that they can access right away. Well, if you just click that and put your phone number here– I can’t, unfortunately, show this in the Mobile View. It’s only available once your site is live, but basically, if you look at this image here, this is what you’ll get is this sort of little tab at the bottom of your mobile website that sort of follows it all the way down, no matter how much you scroll up or down, and people will be able to hit that little phone icon, and they’ll make a call to you right away. You can also do that with email addresses or social media, so very very useful stuff. One last thing you can change, too is the background of your mobile site. So if you, for some reason, wanted a different color or things weren’t looking right, on the back splash of it, you can do that right through here as well. Now, one very last important thing to talk about is the navigation in a mobile menu because as you see, the menu that we had on our desktop site in our header is no longer there. So how do we go about working with our menu then? How can we edit that? Well, with the Mobile View, we have this little mobile menu here. So these three lines are what you’ll find on any Wix website, no matter what sort of template you’re using or what you– even if you don’t have a template, if you start from scratch, your Mobile View is always going to have these three little lines for the menu. So you can click on that, and if you go to Settings, you can freeze the menu, and so that’ll be just like what we did with the header where it will scroll with the page on your Mobile View. And then if we go to Design, this is one of the few Design tabs. It’s actually quite different from some of the rest because there’s a lot of different options that we have to go with here. First, we can choose how we want our mobile menu to look, so you can hover over it in the– see? We have different colors, so if we like this black instead, you can go with that and select it, and then when you hit Customize Design, this is going to show you exactly what we have to work with here. So if someone were to hit those three stripes, this is what would happen. It would either come down, open into a full screen, come from the left, come from the top or come from the right. Whatever you decide to choose, pick one of these five options, and I personally like this Full option. I like how that looks. You can do that, and then below this, you have all the ability to then customize how you want this menu to look once you’ve selected your design for the menu. So if you want to change this color, the text, font, the color of the text, the color of the selected text, all that can be done so right in here. And just so you can see an idea of how that kind of works more fluidly, when you click on these three stripes, as you see now, it brings up the whole menu. And when you close out, it gets rid of it. So that’s how that’s really going to look, and once you kind of run through all those different factors with your Mobile View, you have your mobile site setup, you’ll have your desktop site setup, and you’ll be ready to go. Back in our Desktop Editor here, one bonus feature we wanted to show you guys is that Wix has a whole realm of SEO, and if you’re not familiar with the term SEO, Search Engine Optimization is basically, in a nutshell, what helps get your site found on Google. So one thing worth pointing out, without getting too technical– because there’s so many different factors that are considered when it comes to, you know, really good SEO work on your website. One of the biggest things worth pointing out that Wix has to offer is the very simple title and description on-page SEO work you can do. So if you go up to the pages here and we hit this little three dots and we go to Page SEO, you’ll see that we have this section that lays out, you know– you can put in a keyword or page name, location, and your site name, and then the description below it. So very simple. This I highly recommend doing this for every page that you create on your website because this is going to really get a– really, it’s really going to put your site above the rest and give you sort of a leg up or an edge compared to others who might skip this very important step. So an example would be if you’re a hair salon and maybe you’re a hair salon in New York. You could say something along the lines of, you know, “Beauty and Hair Salon,” and say you’re in New York City, so “in NYC.” And then you would put “My Company.” And so whatever your hair salon is called, you could put that right after that breaker there. So that’s a very typical example of what– this is what is called a meta title for SEO would look like. And trust me, if you’re watching this step, this will help you out. This will give your site a little bit of an edge. And below that, as Wix says, “What makes this page neat? Describe your business and the content on your site.” So in about a sentence or two, just very short sentence or two, just put what this page is about. Or what your business is about, in general, would work for any of these pages, and that would be your description. And by doing these two things, without getting too technical, these are going to give you a significant leg up in terms of SEO work on your website. Well, we’ve made it to the end of this tutorial. By now, if you followed along – you may have paused the video, rewound, fast-forward – you should have a very, you know, functional website with some of your own content, some of your own structure, however you went about tailoring your website. We hope this tutorial may have helped you in doing that and getting you more comfortable with the Wix Website Editor. Now, Wix is one of those things where practice makes perfect. It really is just a matter of using it over and over again, and the more you do that, the better you’re just going to get with it, and the the better your designs are going to start looking in the near future, and you also be able to get a little more custom with it, too, and maybe not use so many presets, which is really nice. So one last things we need to do, if you haven’t done so already, is, of course, save our website if you haven’t, again, and then lastly, we just need to hit that Publish button because when we do that, our site is now live on the Internet, so you have a fully-functioning Wix website ready to go that you can now view at your own link. So we hope you guys enjoyed this tutorial. Again, remember that if you haven’t done so already, if you maybe went over the step, make sure you upgrade to that Premium plan. That’s going to give you your own domain and a lot of extra space and everything that you’ll need for a professional business, to really run a really, really nice-looking and well-functioning website. So make sure you do that if you haven’t done so already. And if you guys enjoyed this video, make sure you leave a Thumbs Up, Like, subscribe, and comment below if you have any questions. We’ll try to get back to you as soon as we can. So thank you. This is YourWebsiteTutor.com signing out. We’ll see you in the next tutorial.

, , , , , , , , , ,

Post navigation

23 thoughts on “Make an Awesome Business Website – Step by Step (2018)

  1. I was considering using wix to make a website for an idea I have. After watching this I think I'll stick with it as it doesn't seem to difficult and this video provides some useful help that I'll need along the way, thanks!

  2. Good tutorial for anyone wanting to create a website for their business. Very detailed so that even someone unfamiliar with this process can do it.

  3. I will definitely use this tutorial as a guide and referal tool, as it is well done, detailed and tailored even for a someone who is learning the beginner's steps into building a website ! Thanks for the upload !

  4. This is a very informative step by step tutorial. I think it's very important that a business has a good website that will help the business succeed.

  5. this is very important that making a website for a business because you can explore about your business in the website. so that all of them who visited your site can know everything what you share on the site. this video is too good to explain that

  6. Thanks this is a great video! It made it a lot easier for me to understand how to create a website with the step by step process. Thanks!

  7. Very superb video, I am glad I came across it, I have passed on your link to my son currently studying website design, as it would help him greatly. Thumbs up!!!!

  8. Very insightful information! I'm looking to start up and website for my business, this information has helped so much! Thanks

  9. Creating a website for a business is essential nowadays. This video provides a very in-depth look at how to do it, great for beginners like myself. Thank you for the video!

Leave a Reply

Your email address will not be published. Required fields are marked *