How to Make a Small Business Website – Step by Step


Hey there, tradies. Today, I’m going to teach you how to make a website for your trade business for free in one hour. It’s perfect, for example, if you’re an electrician, a plumber, HVAC guy, or absolutely anything else in the trade business. This video is absolutely perfect if you do not have any tech- savvy experience because it involves clicking a few buttons and visually arranging things into place to create your awesome new website that will attract new clients. It will also be live by tonight. Just follow along with me on the screen. Let’s begin. So this is what we’re looking at building today. For contractors, builders, tradesmen out there, this is a perfect website for you to have because this lists everything that you need. You’ve got your phone number in multiple places with a stylish, modern, clean design, a beautiful stretched out home page slider. You have services listed directly below. You have an About Us section with parallax scrolling. Customer testimonial section, if you want it, and then beneath that, you even have a free-quote contact form, which is crucially important for a lot of you out there. You also have a Google map to show exactly where you’re located which is extremely convenient for visitors on your site, and on top of that, we even have an Image Gallery page dedicated to showing off different projects you might have going on or will have going on in the future. So if this looks like a site that you want to have or that you’re looking to build, then let’s jump right into it and not waste any time. The first thing that we need to do is create a free Wix account, and this is very easy to do, and it can be done in just a few simple steps. So to go about doing this, the very first thing we’re going to need to do is to copy and paste the link that’s in the description below this video. So if you grab that, paste them into your browser of choice. It’s going to redirect you to where we need to go. Now, alternatively, you can also go to yourwebsitetutor.comlinks, and that’s also going to redirect you to the proper place. So let me just do that right now. Okay. I’ll give everybody a second to kind of catch up to where we are. Copy that link, paste it, and it should redirect you to a page that looks a little something like this. Should say “Create your own beautiful website,” with the big purple Start Now button and a couple of hikers. So, hopefully, everyone’s here at this point, and we’re just going to hit Start Now. So when you do that, it retracts into the screen that says “Login,” or if you look below it, it says “New to Wix? Signup.” So we’re going to want to actually click that Signup button because we don’t have our Wix account yet, so if you click that, it takes us to a new page where we have email information and password information that we need to provide Wix, and that’s it. They don’t need anything else, and believe it or not, there’s actually no email verification, either. So it’s simply typing these two things in and clicking Sign Up, and you’re ready to build your website. So let’s do that right now. Let’s get our email typed in here. Okay. And if everybody sort of is at this part, typing their email, typing their password, all we would need to do next is just click Sign Up, and that’s it. We now have a Wix account set up. So we already have one in place, so we’re not going to click that, but we’ll jump in with you in the next section, as soon as you click that Sign Up button. If you maintain a Wix account set up correctly, you should end up on a page that looks something like this, saying what kind of website do you want to create. Now, since in this tutorial we’re going to be going over how to build a trades website for, you know, anyone that’s in a handy business or a tradesman or anything of the sort, we’re going to want to kind of design our site around that theme. So since Wix doesn’t actually have an explicit item listed right here for our theme today, it doesn’t really matter because we’ll be able to search exactly what we want to find. So we can just start, in general, by clicking Business, and when you do that, it’s going to take you to this page which asks you if you want to start with Wix’s ADI or with Wix’s Editor, and there’s actually pretty big differences between the two. Wix ADI is explicitly for if you want to get a website up and running in literally a minute, so basically, there’s almost no work involved because Wix builds the website for you, almost. It’s an automated system, where Wix Editor gives us a lot more flexibility in customization, and we can still build it relatively fast. So I always recommend going with the Editor. However, you really need something quick, you can always start with Wix ADI. So we’re going to go with the Wix Editor, so let’s select that, and now it’s going to take us to this page full of templates that you can choose from for your Wix website. So basically, what we’re going to do now is just kind of look for what we think maybe will fit our style of what we’re looking to build. So basically, what you’re seeing here is previews of what different websites look like, as if they were live on Google. So these little screenshots are actually screenshots from these template websites, so for us, we’re going to just type in “Handyman”. You can also type in “Trade,” you know, whatever your business relates to, you can search it up in the top left corner here. And we’ve already sort of gone through and looked at all these templates, and we definitely feel that this is a really good one for the trade business here. So Handyman Service. That’s the name of this template. You could search that directly up there, and if we want to take a look more in more detail of what this will actually look like when it’s live on Google, we can hover over it, and you’ll see there’s a View button. So if we click that. Wix is going to load up an entire preview of the site, as if it were our website and live. So scrolling through it, you know, this looks really, really nice. It’s full with design, and with a little bit of imagination, you can replace some of the text and imagery with your own because obviously, you know, maybe you don’t offer all these services or you know this is obviously isn’t your phone number, so just use your imagination of what you can replace. But this is a really great-looking website, and it’s a great place for us to get started. So once you’re happy with how this website looks, and you’re feeling this is the right template for you, we can go ahead and click Edit This Site, and now, this is going to take us into something called the Wix Content Editor, and we’re going to go into this in more detail in a little bit here because this is where we’ll actually be designing our website. So for the time being, all we need to know about is right up here, this Save button because this is how we’re going to go ahead and actually start editing our website. Eventually, what we want to do is click Save, and when we do that, we’re going to just use the free Wix.com domain right now because we don’t want to connect our domain yet. We haven’t even built our website, so let’s just rename the site to whatever we want. So I’m just going to rename this to Trade, and whenever you have that named, you can just hit Save and Continue, and once that saves here– there we go. Your site was saved, so now, when you log back into the Wix home screen or anything of the sort, it’s going to bring up your website that you just saved, so we’ll be able to jump in and go ahead and start adding this. Next, let’s take a look at the Wix Dashboard. Okay. So we have our Wix account set up. We’ve chosen our template that we want to go with. Now, if you close out of that template, you should end up back on a page that looks like this, and this is called your Wix Dashboard. Now, if you didn’t get here by doing that, all you can do is just literally go to Wix.com and sign back in with the account you set up. So this is the front page that you’ll get taken to every time. So what we’re going to do now is just kind of go and do an overview of this Wix Dashboard because there’s a lot going on back here that’s really important for you to know about your website and how it can help you grown over time. so in the Wix Dashboard, we have a whole section of what is called Wix Apps. So depending on the site that you choose, the template that you work with, different apps are included. And, you know, not every single one you’ll ever use, but a lot of them are very useful. So for instance, I’m just going to kind of go down the line here of these eight apps that are included with the template we chose, and so we can get an idea of what they can do for us. So the first one, here, is Get Found on Google. So this is basically an SEO wizard that you can run when you have a website built, and it’ll just kind of scan through your site and check to see where you could improve, you know, different aspects of your website so that it gets found on Google easier. So a really nice tool to use when you have a website up and running. So that will be later on. Next to that, we have Email Marketing, and this is actually a really great tool that Wix includes because unlike a lot of other website builders or anything of the sort, you can actually send mass emails to your customer base or customer list directly from your Wix site. So it’s really easy. You don’t have to have another account with, say, like, MailChimp or anything, any other third party email blaster site. So it’s really convenient to have this in your backend here. So when you set up a custom list on your website, you’ll be able to just directly email them right from here, so very very useful for any business, regardless of what you’re doing. Next to that, we have Domains and Mailboxes, and this is where you would simply just connect your domain or external emails that you might have. So that’s also something we can do later on. The next to that, we have Invoices, and for a trade business, invoicing might be important. If you, say, you’re a contractor, and, you know, you do it– you get paid by the job, when you finish a job, you could actually directly send your client an invoice, so right from your Wix site. Very, very convenient. Really useful, like I said, especially for this business that we’re kind of covering today. Below that, we have a Contact section, and this is where any email subscribers, even clients, if you want to include them, or custom contacts that you want to add– no matter who they are, you can manage all that right here, so then this can get tethered into your Email Marketing. And these two work hand-and-hand because the Email Marketing pulls from these contacts, so this is just more of an organizational thing, auditing automated emails. Next to that are basically pre-determined emails that are sent out based on triggers. So what I mean by that in layman’s terms is, basically, that if you had, say, a checkout page on your website, and somebody could purchase something from your site, an email might automatically get sent to that customer without you having to say something or do it yourself, saying, you know, thank you for your business or for your purchase. So you can set automated emails up for variety of things. However, for a trade business, this might not be so important. To the right of that, we have roles and permissions, and this is a really important section because if you’re working with a webmaster or you have employees that you’d like to contribute to your website, you can add their credentials right here and roles and permissions, and they’ll be able to come in to the back end of your site and do whatever needs to be done on different levels. So this is really, really helpful if you have more than one person working on the site than just yourself. And finally, next level we have an Änalytics section, which is just a very basic analytics tool that Wix has with this website, so you can see how very, you know, basic things are functioning on your Wix website. So maybe, you know, some user data, [inaudible] data. Things of the sort. So that is a look at the eight apps that come with this template. Now, to the right, we also have an Upgrade to Premium section. Now, this is something we’re going to go into depth a little bit later when our site is, you know, pretty much ready to go because this is what we’ll want to use to get our site really running at its fullest capacity. And then over to the far left, we have a Manage Site button, which will basically take us to that Content Editor again, which we kind of briefly saw in the very beginning here. Below that, we have Connect Your Domain. This is as simple as it sounds, it’s just to connect your domains, it’s just like over here at this app over here. But beneath that, we have your plan, which is free right now, and another Upgrade to Premium option below that. And then we have Get a Mailbox button, so if you wanted to have a custom email through Wix, you can do so through here. So if we click that Manage Site button, this just takes us further into the dashboard, which has a little more technical options, such as previewing our site, another Connect Your Domain. So they don’t make it very hard to find where to connect your domain. You can also rename your site. You can duplicate it. You can transfer it. You can also delete your site. And then if you had any revisions that you’ve done to your site in the past, every time you click that Save button, Wix will personally save every edit of your website, so if you make a mistake, you don’t need to worry about it. You can always go back to Site History and undo what you did before. So that’s kind of a brief overview of the Wix dashboard, and it’s good to know everything that’s going on back here because these are all great little functional things that will help your website in the long run. Moving on, we’re going to go into this Edit Site button here, and when we click that, that’s going to take us into our Wix Content Editor. Again, this is something we did touch on briefly when we were selecting our template, and as you see, it takes us back to our template site, and we have all these dashed lines indicating that we are in Editor Mode. So with the Wix Content Editor, we’re going to kind of do exactly what we did with the dashboard and just give you a brief overview of what’s going on here before we actually jump into designing because there are a lot of tools and a lot of, you know, buttons and all sorts of different things going on in this back end here because this is, essentially, the back end of your Wix site now. So let’s start over on the left hand side here because these are the most important buttons of the entire Wix Editor here, and the ones that you’ll be going to the most. So if we start from the top, we have this Background button, and this is basically to change the entire background of your Wix site. So if you want to change it to a color, a certain image, whatever that might be, you can do that with this button here. Beneath that, we have this Add button, and when you click on the Add button, it expands into this whole box of all these different options that we can work with to add to our site. So basically, these are all the different elements and textures that we can add to our website to really customize it and make it our own, so you’re going to be using this button a lot. Beneath, that we have the Wix App Market, and this is where you can get more customized features for your website, so if you need something very specific– you know, say, you needed– let’s even see what they have on their homepage here, if you wanted you know, like a chat tool, like a live chat tool. You know, you see those websites with the little Can We talk to You Right Now? buttons in the bottom right corner of a website. This is where you go to add things like that, so very specific functional applications. So that’s the Wix App Market. Beneath that, we also have a My Uploads section, and this is just an organizational subsection, so any media you have—music, photos, videos, documents. All that can be found and uploaded here. Beneath that, we have a Wix Blog section, and so maybe this isn’t so pertinent for a trade business, but you you never know. You might want to have a blog one day on whatever you’re doing, and if you did, you just add that here. And then beneath that, we also have a Wix Booking section, so this is optional, and this is actually a paid application from Wix that allows you to set up meetings with clients and, you know, anyone else can sort of schedule services with you through Wix Bookings here. So that’s a look at these tabs over here, but like I said, you’re going to be using that Add button the most. Now, if we go up top to the left corner here, we have this Pages Home section. If you click on that, these are actually on all the pages that exist on your website right now. So we can see that this is a five-page website, and this correlates exactly to what we have going on in our navigation here, so if we look in our navigation, we see Home Services. Now, this is a hidden menu item, but we’ll go into that a little bit more later. That’s why we’re not seeing that on the navigation here. But basically, all these pages correlate with your navigation, and they kind of show you exactly what’s on your website, and it’s also a way you can toggle between the different pages, so if you were to click on one like Services, it’ll take you to the Services section of your website. Now, next to that, we have this Site button, and beneath this is just more of the similar functions we saw in the dashboard. So connecting your domain, you know, saving, publishing your site, but we also have, down here, the Site Manager, which is probably the most important button of this entire section. This is where you could implement very technical things, so if you have a back-end developer who wanted to add some custom code or, you know, anything to the header of a website, you would do any of that in here. Next to that, we have the Tools section, and these are just more cosmetic tools to help you design your site. So we can turn– I’ll show you this. Our rulers are off right now, so if we click this check box, you see that on the top line here, we now have this ruler that’s showing up. So it’s just a lot little tools to help you really, you know, make your site line up right and look nice. Next to that, we have a Help button, which is pretty self-explanatory. If you need help, this is where you go, and you’ll find your answers to your questions here. Next to that, we have an Upgrade section, and this is exactly what we saw in the Dashboard View, so this is, again, where we would– another way to go through if you wanted to upgrade your site, eventually. And then all the way to the far right, we have a Zoom In, Zoom Out tool, Undo, Redo. We have this Mobile Editor function, which, basically, we’ll touch at the end of this tutorial, but basically, this is where you can go to look at how your website would appear on a phone. And then we also have the Save button, which is very important. You always want to keep hitting the Save button as frequently as you can so you don’t, you know, lose any changes. We have the Preview button, where if you click that, it gets rid of lines and takes us back into just a generic preview of our site. And then, of course, next to that, we have the Publish button. So that’s basically a the Wix Dashboard overview in a nutshell. So without further ado, we’re able to take it to the next step. ¨We’ve gone over the Dashboard, the Wix Content Editor, and now, we’re back into our Editor Mode, and we’re ready to roll with building our website. So the first thing that we’re going to want to start with is the actual structure of the website itself, so let’s dive in to building our structure and customizing it how we want, so that way, you guys can take it and go however you want about it. So let’s start from the top and work our way down to the bottom. Now, there’s three key components to every website, and Wix is no exception. The top of the website is called the header, and so Wix indicates the header with this dashed line right at the top here. So if I click Office, you see it turns orange when you click on the header. It’s a little tough to see with the yellow coloring, but there’s– basically where this yellow ends, that is where the header ends. And the header, it’s basically a section of your website that shows up at the top of every single page, unless you explicitly specify it not to do so. So all this information – your navigation, your logo, phone number – all that’s going to show up automatically because this is placed in the header, and you’ll know that it’s in the header when you see orange lining. So, like, if you hover over all these sections like the logo here, the menu, you’ll see that all of it is boxed in an orange color, and that also indicates that you are working with header material. Now, in regards to the header, in terms of structure and sizing, you can customize however you want. So no matter what, always stay at the top here because it’s a header, so structurally, it’s always going to be above everything else, but you can use something called the Stretch Handle here that, when you click on the header, this little gray box comes up, and if you click and hold it, and you start dragging, it’s going to change the entire size of the header. So if you wanted a much bigger header than what’s already there, you can pull it down, and as you see, all the content moves in line below it. So you don’t have to worry about rearranging anything or anything like that. So I actually liked how they have the size, this template, so I’m going to leave it back to where it is. But a good thing to note as well is that, if you want to center, and if you do resize– let’s say we resize it to there, but now, this looks a little awkward because our content is kind of floating at the top. We want to center it in this yellow bar. All you have to do is simply click and drag your content, and you’ll see these pink lines come up to indicate where you are on your site, and when you see that pink line go through the center, then you know you are officially centered. So, like, for instance, that phone number is now centered on our header, but I’m going to go back to where we had it because I actually really liked how it was kind of a thin header like such. So there we go. So now, moving below the Header, we have the body of the website, and this is where all of the good stuff happens. It’s where the meat of your content and everything that anybody needs to know, that’s pertinent or, you know, unique to a certain page, that’s where all this material goes. So from the bottom of the header line scrolling all the way down until you get to this line, wherever they have it. Here, there we go. This line on this template here. See, again, it’s an orange line. This is called the footer, which we’ll go into in just a minute, but anything above the footer and below the header is considered the body section of your website. So in terms of structure, what can we do with the body of a website. Well, Wix is a drag-and-drop system, so it’s really, really nice that you don’t need to know any coding. Everything can be moved around, literally, by clicking it with your mouse and dragging it wherever you wanted to go, so this makes it very easy very intuitive, extremely hands-on for anybody that just wants to go and take a crack at building a website. So if you accidentally misplaced something on your website, you don’t need to fear. You can always put it anywhere else you want with the click of your mouse. So for instance, let’s take a look at this button. This is considered an object, so everything on your Wix site is an object. So this arrow, this text up here, this button. Every time you click on it, you’ll see that there’s a box that comes up, so that indicates that that is an object of its own. So even its background—here, with this this picture of this man, if you click that, that’s an object of itself as well. See the blue line that showed up bordering the image? That indicates that this is an object of its own, and that’s called a strip, and we’ll go over that in just a second. So if you click on a text, and, say, we wanted to move this text, you know, elsewhere on our website, all you have to do is literally left click, hold it, and drag wherever you want. So if we wanted this to be more in the center, you can do so. And of course, if that’s still not looking right and you decide, well, maybe I want it back to where it was, you can even hit Control Z – or Command Z if you’re on a Mac – to undo what you just did or you can also go up to the top here and hit the Undo button. So you really don’t have to ever worry about messing up structural things with your Wix website because it can always be moved around or fixed. Now, another thing to note is these strips, so that’s what I was just mentioning briefly before. Now, with the strips, you have the ability to lay down different areas of content in the body. So strips are basically almost sub- sections of your website, so on a certain page. So if we’re looking at this homepage here, we have this strip which has this text, this button, and this arrow key all on this one strip, if that makes sense, if you’re following me here. So if we click this entire strip, you’ll see that if I click, hold, and drag just like we were doing with the other objects, it’s going to move everything at once because all those objects fall onto this one strip, so you can move this strip wherever, and that makes it really convenient, so that way you don’t have to move every object individually on your website. So if you wanted to move this entire section to the bottom of your website, you can do that so easily by just clicking the entire strip and moving everything in one fell swoop. So really good to know, very handy. And to add more strips to your site– say we needed a section in between this image and Our Services. Say we wanted to add, like, maybe a Contact section or or who knows. Whatever you’d like to add. And between this, all we have to do is go to the Add button, and then go to Strip, and you can pick any of these. These are all preset strips that Wix has. Sort of images, video strips, and just basic colored strips, but you can always change any strip to whatever you want. An image, video, or color. So we’re going to pick the Classic Black, and if you click, hold, and drag, it’s going to place it in between wherever you’re letting go of it. So when we let go, you’ll see that now we have this black strip that came up, and it’s now squeezed in between Our Services and our kind of featured strip up at the top of our homepage here. So now, we can go ahead and start adding any content we want to this strip because now, we’ve added a completely new section to our homepage. And again, with these, when you click on a strip – or actually any object, for that matter – you’ll see these gray boxes come out time and time again. These are those Stretch Handles that we saw on the header, and they do the exact same thing, but on the strip. So if you click it, and you drag this down, you’ll see that it’s pushing all the content below it down in uniform. So that’s really nice. You don’t have to rearrange anything, and that’s really good, like, if you needed– if this is going to be a big section and you want to add a lot of content to this strip, you can drag this down as far as you like to make room for as much content as you need and vice versa. You can also go the other way and make the strip as skinny as you need, so if you wanted just a little section or like maybe like a title or just a little blip of content, you can do that like so. And of course, if you just click and hold instead of using that Stretch Handle and clicking that button– if you just drag the strip itself, then you can start overlaying it over things. So you see, if I drop this now, it’s now covering part of Our Services section, so that’s why those drag handles are so convenient because you can actually push everything down on the site instead of having to overlap everything, if that’s what you’re trying to do. Now, if we made a mistake when we didn’t want the strip here, it’s as simple as clicking it and hitting the Delete or Backspace buttons on your keyboard. Now it’s gone and you can just simply move the other strip– once I get that out. There we go. With the drag handle, right back up to the top, just like that. So it takes a little bit of finagling, a little bit of finesse and maneuvering, getting used to, really, the feel of how you kind of move everything around on a Wix site, basically. Structurally, that’s how you’re going to go about laying out every page on your Wix website. They’re all broken down into strips, and you can see that. So this Our Service section, this blue box, it’s all one strip. You have this woodgrain section. That’s all one strip. So all the content on there, and you get the idea. So on and so forth. So every area of a full-width section is its own strip, and you can add or move any of those anywhere you want on any page of your site. So it’s the easiest way I found to go about building your Wix website is using strips, and it’s also just really clean-looking because it creates this full width effect, so no matter what computer you’re on, your website is going to completely resize to the approximate, you know, resolution of whatever screen you’re looking at. And last but not least, if we move all the way to the bottom, we have our footer, which operates exactly the same way the header does. We have, you know, our custom text. Usually you don’t have too much going on in your footer. You have a little bit of custom text, maybe a copyright notice, and, you know, maybe some social media links or something like that, which in this case, in this temple, they’ve added all that up in this kind of bottom section here. But in our footer, again, you have your stretch handles, so you can push everything down, if you need to, from the footer. And likewise to the header but subtly different, with the footer, everything that’s in this box here is going to show at the bottom of every single page, rather than the top of every single page. So that’s the only difference from the footer to the header is that it’s going to show on the bottom of every page, unless you explicitly tell your site not to do that. So that’s a look at structuring your website, and that’s just the homepage, but again, this applies to any page. So if we’re on the Services, About Us, Contact Us page, you’re going to do the exact same thing. You’ll be working with strips and moving content the exact same way you would on the home page here, so that’s how we go about actually building the structure of our Wix website. All right. We’ve gone over the structure of our website, and we now know how to go about doing that and building our pages exactly how we want them to be. So you can go ahead and customize it however you want, and once you have a structure set up that you’re happy with, it’s time to start adding some content to your website, and that can be anything from images, text, videos, slideshows. If you think of it, you can you can make it happen on a website. So again, let’s just kind of start from the top of the home page and work our way down, and we’re just going to kind of flesh out this home page to make it a little more custom to our specific site. So we’re going to start with the header, again, and this time, instead of going over the structural elements, we’re going to go over more of the actual design component. So let’s look at the color first. So we have a yellow header right now, and that’s kind of the theme. This website is blue and yellow, but, say, blue and yellow weren’t your colors of, you know, of choice or maybe they didn’t match your logo or your specific color scheme that you like. How can we go about changing that? Well, it’s quite easy, actually. We’re going to click the strip, and when you click up in this header, it brings up these three buttons. You have this Change Header Design, Settings, and then just simple Design button, in general. So any one of these will do, but we’re going to click Change Header Design, and when we do that, it brings up some different presets that Wix offers. So you have no color, you can change it to black, and then you have all of these different colors down here. But if none of these colors suited your website, then we can click Customize Design, and when you do that, now we have even further customization capabilities, such as Fill, Color, and Opacity. So when you click back and you click the Color icon here – so that’s that yellow that we have – now, we have all these different colors, plus we have an addition button here. When you click that, now you can add literally any color that you want. So if you had a specific hexadecimal code or, you know, an RGB code– anything like that you can explicitly, you know, find any color under the sun right in this grid here. So I actually like this color scheme they have set up on the site, the yellow and blue, so I’m going to let that be. But if you need to change the color to whatever you need, then that’s how you go about doing that, and that works, actually, on any part of your website. So it goes for anything. So even on these strips, if we click this blue strip down here, like Our Services, and you hit Change Strip Background, you’ll see that there’s a color tab, and when you click the color tab, now we’ve got all of our different colors here. So again, we could change it to that yellow, if we wanted, which is way too bright right now, but just to show, you know, everything can be changed color-wise. You never have to worry about that at all. So that’s how we would go about changing that, but I’m going to leave it that yellow for now. Now up here, this is all text, and you know because when you hover over it, it’s indicated by the Text button. You see it says Text right above it, so. And same thing over here with the phone number. It says Text. Now, if we wanted to add a logo here instead of text, how can we go about doing that? Well, first of all, we probably want a little more space, so we’d have to stretch out our header just a little bit, and if we wanted to add our own log, all we would have to do is grab an image and drag and drop it into the header, explicitly. So if we go over to our Add button and we click that. you’ll see at the top there’s an Image section. So if we hover over Image, we can go to My Image Uploads, and it takes us to this section here, and this All Media is where all of your uploads will be, and you can upload a photo to Wix simply by clicking this Upload Images, and then you just pick where that file is in your computer, click Open, and then it will get uploaded, similar to what we have with this kind of dummy logo we have right here, which is not relevant to this website, but it’ll do for this tutorial. So we’re going to click on this, and let’s just say this was our logo. which it’s not, but we’re just going to pretend use for the time being. When you’ve had your logo selected, you can just hit Add to Page, and when you do that, it’s just going to drop it in the center of your screen, which is not ideal because we want it on our header as our logo. So what we can do now is resize this image to whatever size we need it to be, and you do that by clicking on an image and then dragging it with these little dot tools here. You’ll see if you grab a corner and you drag it in, it’s going to resize it perfectly until you have it to where you want it to go. So once you have your image size however you like, you can then click it and slide it up to the header itself. I’m just going to shrink it down just a little bit more. I know you’re not going to be able to see it, but just for the sake of this tutorial. And then when you drag it onto the header, you’re going to see the header kind of turns an orange color, and it says “Attach to Header,” and that’s good. That’s exactly what you want because when you drop it, now you’ll see that it brings up a window that says “Added to Header,” and that lets us know that this logo is, in fact, in our header, and that’s where it’s going to stay. So we can close out of that, and you’ll see when we click on it now it’s kind of orange border along it, so that’s really, really good, and we want to see that, if you’re trying to get a logo in your header. So obviously, that looks really bad, so we’re going to delete that for now by, again, hitting the Delete or Backspace button. But that’s how you would go about adding a logo into your header, like so. So let’s resize this back to what we had. There we go. Now, let’s kind of jump into text editing because that’s probably the next most important thing to know is how can we actually adjust this text or add text to our site. So we can start at the header again, and this applies to any text left on your site. So anytime you see writing, it’s going to– it should say “Text” over it. So, you know, anything, any of these paragraphs, this title, you know, this phone number here, phone number up here. All that is text and text elements, so to edit text, all we have to simply do is double click on it, and then it’ll highlight it as if you just copied it. And if you hit Backspace, you’ll see now that it has deleted that text, and we can type anything that we want there. So, say, our phone number was, you know, 1-800– I don’t know, just throw a random of 967-9085. Now, we can do that, and our text is now exactly what we wanted to be. So it’s literally as simple as double clicking and typing exactly what you want. So it’s basically– a good way to think of it, a good analogy, rather, would be looking at Wix’s texts almost like Microsoft Word. And then just see, when you double click it, you get this Text Settings box over to the right, and in the Text Settings box, this is where you can adjust what font you want the text to be, how large you want it to be, if you want it bold, italicized, underlined, what the color of the text is going to be, how its justified– right, left, or center. You can bullet point. You can indent. And then you also have effects that are kind of unique-looking to different texts, and you might want to maybe to consider that for titles or something like that. So really, really good-looking, and it’s super easy to change, so if we wanted to change the font size or the font itself, I like to just click this arrow, and now we can just scroll through. And Wix has a whole bunch of preset text that you can work with that look really, really nice for your website itself. So I’m going to leave it with the font that we have right now, but that is basically how you go about changing the text. So I’ll just put it back to the 1-800 and I’ll just change it to 0. There we go. So that’s in the header. Of course, it works exactly the same in the body, footer, or any other page that you’re working on. If we were to double click this text, now you can see we can add anything we want. So it’s really that easy for editing text on your Wix website. Now, if we needed to add more text – say we wanted some text over here on this side – we would do that by going over to the Add button, and then you’ll see there’s text, and then we have titles, paragraphs, and you have custom titles, which are these big titles that, you know, might work, might not for your site. Depends on what your aesthetic is. So we just want to grab a paragraph in this case for an example, so if we click on this, drag, and drop, we now have a new paragraph of text right over here on this side, and again, we can drag this wherever we want, if we remember from our structural section. And if we double click it, we can edit it just like we were doing with any other text, so this is where you’d adjust all the customizable options of these text again. So very easy to work with text on your Wix website. And so that kind of covers all of that. Now, let’s jump into another thing that we usually see on home pages, especially, but you can add this to any page, really. What if we wanted an image slider? So if this strip maybe wasn’t our first strip, maybe we wanted something else before this. We can pull this strip down just to give us some space because Image Sliders can be pretty big if you want them to be. And let’s add a slideshow because you tend to see a lot of slideshows at the top of pages for websites, so if we go over to Slideshow here, you’ll see that we have a whole bunch of sections and templates that we can choose from to add. So let’s just go with any of these, really. Let’s just take this guy right here as an example, and we’ll drop him. We want him to go above this. There we go. So if we click Preview, you’ll see that this is a slideshow and not just a static image because it’s going to move on its own here. So as you see, the images are scrolling through like so. So this is a really nice thing if you want– you know, if you have multiple things to feature on your website or, you know, different pictures you want to show off, a slideshow might be the way to go. And that’s really how you go about doing it. It’s as easy as grabbing it from the sidebar there, dragging and dropping it. And as I said in the beginning, that’s what a lot of Wix is, is dragging and dropping different elements. So let’s say that we did have that slideshow. Let’s pretend that this was a slideshow. Even though this is strip, they work exactly the same way. If we click on this strip and hit Change Strip Background– maybe we want a different image for this strip. Maybe this isn’t what we want. We want to add our own custom image. Well, we can do that by hitting Image, and of course, we can upload our own image. And another thing that’s really nice to know from Wix is that Wix actually offers a whole realm of free stock photos that are really high quality that you can use for your website however you like. So this is this is invaluable, and it’s great that you have this at your dispense to just kind of use all these photos to your advantage. So for instance, if we just type in, you know, “Contractor”– see if something comes up for that. So we have all these cool photos that come up for contractors, so even if we were to go with, say, this photo here. Now that you’ve selected that, this is kind of what you can expect. And again, you can change this as many times as you want by going back, searching what you like, and putting in anything that you want. So I’m going to go with this picture here. I think this one’s going to look okay, and now the problem is sometimes when you have custom photos, they might clash with whatever text you have overlaid on top of it. So we have this text here and this image here, and now you can’t really see this text too well. Well, there’s a really easy way to fix that, and if you click on your strip and hit Change Strip Background and you go to Settings, you can actually overlay a color to your strip. So what I mean by that is if we were to set this Color Behind Image– if we click this and change this to black, and then we start to bring the image opacity down, you’re going to notice that it starts darkening the image, and the text will kind of naturally pop out as we begin to darken the image here. So that’s one really good way to bring your text out on the front. You can also, you know, add different effects to the images, so like parallax reveals, zooming in, fading in. I personally like parallax. I think it looks really cool, so you’ll see, as I preview this here, the image behind it kind of just scrolls. So you see that, how it doesn’t just stay still. It kind of moves with the website. So really cool, and I think that text is really popping out well now, so I’m going to actually leave that. And again, don’t forget to click Save often because you definitely don’t want your changes to get erased. And we’re going to go further down the line here, and just go over a few more things that are really important that you might want to add to your own website. So another thing is this button. So buttons are extremely easy to add to your website, and they’re very useful for many different reasons: if you want to link them to different pages or link them to different websites, even, or to documents to download. Whatever you want, buttons can do that for you. So if we click Add, and we go to Button, that’s where you’re going to find all of your buttons, and they have tons of different shapes, different looks you can go with. And of course, as always, everything is customizable, so you would just click, drag, and drop, and then that’s how this button got here. So that’s how I going to do that. If you need to add a button anywhere else on your website, that’s how you’re going to go about doing that, and we’ll talk about linking your buttons later when we go into navigation and linking pages, so don’t worry about that yet. Now, if we scroll down, a couple other things really important to note are these icons here. So we have all these services, but if you notice, we can’t exactly edit this text because if you recall, when you hover over text, it usually says “Text.” Well, why is it saying “Group” when we hover over this section? Well, that’s because these are actually different objects all grouped together into one, so you can move it as one thing. So you see, as I highlighted over this hammer, the circle, this title, and this text, these are all separate things, so it’s just like more of a convenience thing. So if you want to drag all of these objects in one swoop like that, you can do so, you know, with one click rather than having to move everything individually. So if you wanted to edit this text, you can simply double click it still, and it won’t really mess up your group. However, you can also click and just hit Ungroup Elements, and now, you see, each thing can be moved individually like so. Now, if you wanted to regroup this– say we had just laid these down, and you wanted to move these all as one, but these were all unique, you know, separate things. All we have to do is regroup them, and to do that, you’re going to just click, and then hit, hold control or command if you’re on Mac, and command or control click every single object that you want to be grouped. And now, you see, it puts one big box around all those objects. We can hit Group Elements, and now, we’re back into one big movable object like such. So that’s a really, really useful thing to know. And other than that, again, we have our strips with our different content. It’s mostly laying out text at this point and images, and that’s really what it comes down to when it comes to adding content to your site. So again, you can replicate this on any page, no matter where you are. So if we preview and go to, you know, even our About Us page you’ll, see that this is actually a one-page site, so that’s kind of nice. We don’t actually have a lot of pages to deal with, but no matter where you are on your website, you can add content exactly how we did it on our home page here. So that is how we go about adding lots of interesting and customizable content to our Wix website. So we’ve done so much work on the home page, but how do we go about adding new pages to our website? So as you saw, all this content editing can be done on any page, but that’s great, but what if we need to add our own page? What if we need more pages or what if we need less pages? How are we going to do that. Well, that’s really easy to do and only takes a few seconds, actually, to create a page. So to go about doing that, we’re going to go up to the top left corner, back to this Pages Home that we touched on briefly in the very beginning of this tutorial. If you click on that again, this is all the pages that exist on our website as it stands right now, but if you notice maybe from before, at the very bottom, there’s an Add Page button. When you click this Add Page, there is a whole window that comes up that says “Page Link” or “Menu Headers.” So to add a new page, as in a blank, you know, area on your website, a whole new complete start-from-scratch page, you would just select this top option here. Beneath that, you have a link, so if you wanted to just create a page that just goes to another website or you know something off site, you can do that. And below that is Menu Header, which is basically just a drop-down. So we’re going to just create a new page right now, so you do that by hitting New Page, and as you see, it slides everything out of the way, and now we have a completely blank slate to work from, and the page is called New Page, but we probably want to title this something different. So, say, this one is maybe a– you know, we can even have this be Service. We already have a Service page, but let’s call it Service 2. When you hit Done, it’s going to rename the page, and you’ll see it shows up in the navigation as such. And if we jump into the page here with these three dots, we have the ability to customize some of the info about our page. So if we go to page SEO, we can actually re-lable the URL of our page down here, so to do that, we would just click on this. And say that if this page was something really long like industrial services in New York or something, you know, really long like that, you maybe don’t want that as your URL. So you can kind of condense that to whatever you want to just be, you know, page one. You know, you probably don’t want to do that with Search Engine Optimization, but you can rename that to whatever you want, if you wanted it to be something shorter. That’s the point. So that’s how you go about creating a new page. Now, if you wanted to get rid of this page or, you know, any other page– if you don’t need a page, all we can do is click on these three dots, and if we go down, you see Delete. You click that, and now, your page is gone, and it’ll automatically take it out of your menu for you. So it’s as easy as that when it comes to adding or deleting new pages to your site. We’ve dived into a lot of different tools and customization elements of our site, and we’ve really started to bring this this thing together. So what we can do at this point, now, since we’ve done a fair amount of design work and hopefully you paused this video and worked along and testing some things out for yourself and started customizing it exactly how you want, hopefully your at a point, now, where you’re feeling pretty comfortable with your website, you know, as it stands as is. So what we can do now is actually jump out of our Editor. So again, be sure you save before you do that because otherwise, you’re going to lose your changes. And when we close out of this, you should come back to that dashboard again, so. And if we want to go to the main dashboard, we can hit whatever your site is called, click on that up in the top left corner, and it’ll take us back to our Dashboard. So what we’re going to do now is actually go into the Upgrade part of our site. So we’re going to hit this Upgrade Now button, and this is going to take us to all of Wix’s plans that they offer based on the template that we chose. So this is a pretty standard layout, and this is what Wix has offered for a very long time, and these prices are actually pretty reasonable. So keep in mind, you can launch your Wix website completely for free without doing any of this, but there are a lot of drawbacks, and I highly recommend that you don’t do that. So one of the biggest drawbacks is that you don’t have your own domain connected to your website when you publish a Wix website, so it would be like wix.com, so it’s never actually your website until you get rid of that Wix sub-domain part. Another thing is that there’s a lot of Wix ads that will show up on your website, so, you know, your website truly isn’t yours until you get into an upgraded plan that can get rid of all this stuff and make it feel like yours. So let’s look at these different plans, and let’s figure out which one is right for you. So the first plan that Wix offers is Connect Your Domain, which is $5 a month. It offers one gigabyte of bandwidth, five megabytes of storage, and you can connect your domain. Now, first things first, to clarify, if you don’t know what bandwidth is, that’s basically how many visitors, how much media your site can handle, so if you’re a website that has a lot of video playing, a lot of steady traffic to it, one gigabyte of bandwidth is not going to serve you well. Below that, you have 500 megabytes of storage. So again, if you have a lot of videos or photos that you’ve uploaded to your site, that’s not going to do so well for you either. So this plan I recommend staying away from because it’s really not worth the money in the long run. There’s a lot more you can do by just even moving $5 up to the next plan to the Combo plan. In this plan, you’re doubling your bandwidth. You’re getting a significantly larger amount of storage. You’re connecting your domain, and on top of that, you’re removing the Wix ads, which I forgot to mention that the Connected Your Domain plan still leaves the Wix ads on your site. So again, ex this plan out, and at least move to the Combo plan. But even further from the Combo plan is the Unlimited plan that Wix offers, and this plan is my most recommended plan, and according to Wix, it’s their most popular plan, and for good reason. You have unlimited bandwidth, so you never have to worry about traffic or media issues. You can put whatever you want on your site with whoever’s coming to your site, and you’ll never have to worry about it. You have 10 gigabytes of storage, which is way more than enough to handle lots of photos, lots of video on your site. You can connect your domain. You can remove your Wix ads, and then on top of that, you also get $300 in vouchers to different local listings and websites that will help to get your website found online and through all these different directories. So this is a really good plan, and for $14 a month for the hosting– you’re basically paying for the hosting through Wix. That’s really relatively cheap compared to a lot of other plans out there, so I highly recommend going with the Unlimited plan more than any other plan, but in general, you just want to upgrade in general . So if that’s still too much for you, drop down to the Combo, but don’t go any lower than that, in my recommendation. Now, above this, we have the E-commerce plan. So this is everything that you’d find in the Unlimited except you are allowed to have an online store, so if you’re planning on selling on your website, no matter what, you have to have this E-commerce plan. Otherwise, you won’t be able to sell on your website. So that’s the big, stark difference of this plan is that you can sell on your website. Above that is the VIP plan, and the only thing different from that, that sets it apart with this high price point is that you get everything included in all these plans that you see here, and on top of that, you also get premium Wix support, so if you ever needed help with your website or you had very specific questions, you have very dedicated support to your business. So this is more for enterprise-level companies or, you know, if you really feel like you’re going to need that support, you would go with this plan. But again, I highly recommend you stick with this Unlimited plan. You really can’t go wrong with it for $14 a month, and also, Wix offers a lot of promotions at different times of the year, so check back. You’ll see that price maybe drop, significantly sometimes, at different times of the year. So these are the different plans. What I recommend, now, is pausing this video, thinking over what plan is right for you. And then next, we’re going to go about, and you can select the plan that you think is right for your situation. Hopefully, you’ve taken a minute to pause this video and think about what plan is right for you. Now, I’m assuming that you’ve chosen the correct plan that you think is going to fit your needs. We can go ahead and actually select that plan, so in our case, we’re just going to go with the Unlimited because again, that’s what I feel is best for pretty much everyone out there. And select that, and next you’re going to just decide how you would like to pay for that plan. So would you like do it monthly, yearly, every two or maybe three years. So we’re just going to do the yearly subscription, and hit Select. And when you do that, it’s just going to take you to a standard checkout page that you’d see on any other website where you’re buying something online. So you’re just going to insert your credit card information, you know, your address, name, you know, the very basic information that you need to submit your purchase. So assuming that that’s all done correctly– we’re not going to actually buy the plan, but once you fill this out and hit Submit Purchase, you can go back to your Dashboard page, and now, it’s time for us to connect our domain. So again, there’s a couple places you can go to do this. You can go to Domains & Mailboxes or even easier that, just go to Connect Your Domain underneath your website here. When you click this, it’s going to redirect you to a page that looks something like this saying Buy a New Domain or Connect a Domain You Already Own. So if you needed to get a domain name– so if you don’t have, you know, www.mysite.com, whatever that might be, you can actually purchase a domain directly through Wix right here, and it will connect automatically to your website. So that’s a convenient way to do it. However, we’re assuming most of you already have a domain that you own, so what you want to select if that’s your case is Connect Domain You Already Own. Now, for our situation, we don’t have an upgraded plan, so we’re not going to be able to go any farther than this because we didn’t purchase a plan. However, if you have purchased a plan, what it’s going to take you to is a screen where you can select where you bought your domain from, so whether that’s GoDaddy, Google Domains, Bluehost, One-to-one– any of those web sites where you can purchase a domain, just select where you got it. So for example, if it was GoDaddy, select that you purchased your domain name – I’m sorry – from GoDaddy, and then you would hit Next, and even though we can’t physically do it, we can still guide you through. This is fairly easy. There’s going to be a 12-step instruction guide that comes up, and all you have to do is follow those instructions step by step, and 12 steps sounds like a lot, but this really only takes about two to three minutes to connect your domain because a couple of the steps are just, you know– like step one, I believe, it’s just logging into GoDaddy itself or, you know, wherever you purchase your domain. So follow those steps. It’s not hard. You’ll be able to just– if you do it exactly as it says and change the couple of required things that you have to change in GoDaddy, you’ll be on your way to connecting your domain in no time. So just make sure you follow those steps to the T, and you’ll be good to go. There’s nothing technical about it. It’s literally just copying, pasting couple of lines of text into a couple boxes on your domain provider. If you successfully connected your domain, then that’s awesome. Let’s jump back into our Content Editor because there are a few more things that we should go over before we actually put this website live. So again, we go into Manage Site, Edit Site, and wait for this to load here. All right. So one of the few things that we didn’t talk about yet that’s extremely important is your Navigation. So how do we actually create this navigation, this menu that’s in our header, and how do we go about linking our pages? So from our button, from the menu, how do we do that? Okay. So to do this, we need to go up to the top left corner here and click on these pages. So these, again, are all of our pages, and they correspond to the different links on our website. So in our case, we have a one-page website, so what that means is we hit Preview and hit Services. It just scrolls us down the page, so we’re technically always on the same page, it’s just these different tabs take us to different sections on our page. So how can we go about actually creating these links and doing this ourselves? So these are done through something called Anchor Links. So these blue lines, light blue lines I should say, that you see across the page are anchors, and these different anchors correspond to the tab in our menu. So see how this anchor says Services and this button says Services? So when you click this Services button, it will scroll the page to the top of that line. So, like, right about there. So to do this, I’m going to add our own anchor. All you have to do is click Add, and then we can hit – where is it here – More, and then Anchor, and you can drag and drop this anywhere you want in your site, so. And move it wherever you want, so if we wanted to maybe have people drop all the way to the bottom – or to maybe happy customers here – we can put it there, it’ll line up, and if we rename it, we can call it whatever we want here. So let’s call this Happy Customers. And now, if we wanted to go to this link from a page up here, what we can do is click Add a Page, again, and then we can hit a link, and then we can go to Anchor – that’s selected already – and then on the home page, since this is our page. And then we can select Happy Customers. So if we do that and hit Done, and we name this Happy Customers. Now, we have a Happy Customers tab up in our navigation, and when we click it, it scrolls us down to that Happy Customers section. So that’s how we go about adding those links, and that’s how this specific website works. Now, if you had separate pages, again, to do that, we already went over that in the beginning. When you add a page, it already creates that link for you. However, if we wanted to go about – and let’s see here – and link different objects like this button or maybe an image like, for instance, one of these icons right here. That’s all done the same way, so if we click on this button, you’ll always see this chain link looking icon, and if you hit this, this will actually adjust where this button goes to, so we can have this sent to anywhere on our site. So since this just has Get a Free Quote, we would want that to go to the Context section of our website, so people can give us a free– so we can give people a free quote. So all we have to do is, when you click that link, we select an anchor again because we’re on an Anchor page, and we would just select where we want it to go, which anchor we want it to go to. So we have the Content anchor, and when you hit Done and you preview this, that’s going to scroll us all the way down to our Context section like so. But if we did have a different page– say this button was going to go to a completely different page. All we’d have to do is hit that link and switch it to Page, and then you just select what page you want it to go to. So we have this Our Services page on our site. If you click that and hit Done, and now you were to click this button now, this takes us to an entirely different page. So that’s kind of how that works, and that goes for any object. Again, on your site, you can link anything. So text icons, images. They all work the exact same way. So that’s very important, very crucial to understanding how your website is all connected together, and hopefully, it gives you a better understanding of how you can go about doing that on your own website. Another thing that you might want to look at adding to your website is an Image Gallery. Now, a lot of good websites have an actual gallery page, especially if you have a lot of projects going on. So for instance, since we’re doing a tradesman style website, there’s probably a lot of projects that you’ve worked on or you’re going to be working on that you might want to add to your website in a featuring gallery. So how can we do this? Well, first of all, let’s go ahead and create a gallery page. So we’ll hit Add Page. We’ll rename this to Gallery, and now, we have that. By the way, if you wanted to make this a drop-down of a page – so maybe you wanted this to be under your services – all we have to do is simply just push it over to the right, and now you’ll see that this is underneath Our Services. So if we hit Preview, you go beneath services, we have a gallery here, too. So that’s how we go about doing that. Now, we want to add some images. So how can we do that? Well, let’s go to Add, and then there’s actually a Gallery tab. So there is a ton of different galleries to choose from that Wix has to offer, and one of my personal favorite ones that we can use for a site like this is the Grid gallery. So if we just click, drag, and drop, it’s going to attach it to our page here, and one this loads here in a minute. There we go. Now, we have a grid gallery showing up on our web page. So all this is completely customizable. You can add whatever you want onto the grid. So if you click manage media, we can add whatever we want, whatever images we want to this grid, so we can get rid of all these stock ones by hitting the trashcan icon because none of these make any sense to our website. And when you hit Add Media, you can go to image, and when you do that– let’s just pull some free ones from Wix. So let’s, again, search “Contractor,” and let’s just add all these contractor images to our grid here. You do that by clicking on each one, and so it has checkmark, and when you’ve checked all the ones you want, hit Apply. When you do that, it’s going to load them all into the grid here, and when you hit Don,e you’ll see that it formats them all nicely into a grid like so. So this is really, really nice-looking. It’s a really cool way to showcase a lot of different projects you might have, and if you need to reorganize how the pictures are showing – like if you need some newer ones up on top – all we do is click and drag the photo you want. You’ll see that it gets labeled with the number 1, 2, 3, 4, etc. And then you hit Done, and you’ll see that, now, that picture that we just moved is going to be the first one to show up like so. So that’s how we add an image gallery, and it’s really easy, and it’s something very nice that can spice up your website. It might also be worth your time to add an image or a contact form and a Google map to your website somewhere so that people can find them easily. And they’re just also really great to have so that people can reach out to you and know where you are very quickly without having to really struggle to look for that information. So you frequently find them on contact pages or at the bottom of pages themselves, so let’s go about adding a Google map, since we already have a contact form here. But I’ll still show you how you can add one if you want to add more. So let’s have the Google Map first. If we go to Add and we go down to this Contact button– if we scroll all the way down, you would get to this Google Map section, and beneath this Google Map section are a whole bunch of different looks for different maps. So I personally like to go with the Classic Highway look because that’s the kind of standard Google map look, and it’s what’s usually featured when you’re using Google Maps. So you can lay that out, and I’m just going to kind of rearrange things here really quick, get this all centered like so. And now, we have a Google map on our site, but if you notice, this isn’t where we’re located, or I’m assuming that’s not where you’re located, unless you work for Wix. It’s labeled The Wix Office, and we’re in San Francisco. So how can we change that? Well, if we click on the Google map, we can hit Change Address, and when you do that, you can actually just type in wherever your address may be. So if you’re in New York, you can just type that and hit Find, and the map will automatically relocate to the exact address you put in there. And then to rename where you’re located, you would just simply type in, you know, Your Office and hit Set, and there you go. Now, the map has been readjusted to where you’re located. Now, to add a contact form, it’s very similar. We go right back to that same section, Contact, except this time, you probably notice as you’re scrolling down, there were all these different contact forms that we have available. And keep in mind, this is customizable, so you can make these colors or the looks exactly how you want it. So pick one of these as close to what you’re looking for, drag and drop it in to where you want, and it would lay out something like this. So we have this contact form here. Now, if we wanted to tailor this even more, we can go to Settings, and you can add different fields. So you could add a phone number, if you wanted people to have that or an address if you needed that information, and you can also label anything that you want. So this is the button down here. We can just have this called “Send” if you want. And then another thing that’s really important to note is that you need to set your email as well, so when people type in their message, you want to make sure that it’s actually reaching you. To do that, we just hit Set Your Email, and after you’ve done that, it’ll bring up this, and you can add two different email addresses that the messages can go to. So you can have a primary email address – which, obviously, replace this with your email – and then you have a second email address with whatever that might be, if you want that to be there. So those are two useful things, two couple bonus features you might want to consider adding on your website that will just really kind of round out your website and give people this critical information that they won’t have to struggle to look for anymore. We are so close, now, to putting our website live, but there are just a couple things left that we definitely want to touch on before we actually do that. So real quickly, one of those things is Search Engine Optimization. Now, if you’re not familiar with SEO, basically, it is the practice of using different techniques on your website that basically cost you no money. It just takes a little bit of knowing and, you know, a little bit of knowledge on what you can do to your website to help improve or optimize your site to rank on Google and other major search engines. So this is a really big thing, especially if you’re a tradesman or anything of the sort. You’re a contractor. You want people to find your website, so you can get those jobs and get more jobs. So how can we go about optimizing your site? Well, there’s a couple few tricks you can do that are really easy that you might not even realize exist on your website. So one of those things is adding something calledtags. So making sure that all of your titles aretagged. So for instance, this Our Services. I would consider this a title, so you could call this something, you know, Our Carpenter Services or put a word that describes your business in between this Our Services. Or whatever you’re going to do, you guys are going to list because having any more detail about what you specifically do is always going to help you when it comes search engines. Search engines don’t necessarily know what you’re doing, unless you explicitly tell them what you’re doing. So they won’t know that you’re a carpenter if you just say Our Services, but if you say “Our Carpenter Services,” then now Google can read that as you are a carpenter, and they can help rank you for when people are searching carpenters in your area. So keep that in mind. And you can also– like I was saying, an h tag, that’s a fancy term for a title that you can set just simply by double clicking on the text and making sure that it’s set to an

or an

, and you can see that right here. You’ll see that

,

. So I highly recommend having a couple of those tags on each page, and that will certainly help you rank. And also, again, anywhere you can fit in what you’re actually doing with your website. So if carpenter is your thing, then make sure you have that word kind of dispersed in different variations around your website. Another really quick thing you can do is actually optimizing your pages, so if you click on these three dots– let’s say we’re on the homepage here, and go to Page SEO. You can actually start typing in something what’s called a meta title and meta description, and basically, that, again, is just a very short and sweet, just point blank focus on what this page is about or, in general, what your business is about. So if you’re a carpenter in New York City, then maybe you can do a title like Carpenter, and our maybe Carpenter Services in New York City, and then maybe put a breaker with, you know, your business name, so whatever that might be. And then you can just repeat that in the description with maybe just a little bit more detail, but keep it short and sweet, maybe a couple sentences. And believe me, this is going to go a long way making sure you have this back-end data. This just helps Google to really read your website and understand what you’re trying to present to the world, basically. So those are a couple really short and sweet things that you can do with SEO. There’s a lot more to it, but if I can tell you anything to do with it, those are two major things you can do right off the bat just to give your website just that little leg up that other sites might not have. Okay. This is the last thing that we need to do before we can put our website live. So remember that Mobile View button that was in the top right corner here? That shows you what your website might look like on a phone. Well, that’s going to come into play here because let’s jump into that view. If we click that phone and go to Edit Mobile View, this is going to completely rearrange how our site looks in a vertical view on a phone, so let’s close out of this window. As you see, everything’s been condensed into this vertical layout, and it looks really, really nice. However, sometimes, your content, especially if you add your own custom strips or different areas that didn’t come with the template, it can kind of get a little messed up on your Mobile Editor here. So as you see, we added this map for instance, and it kind of scrunched it down, but sometimes you’ll even see that it’ll start going off the page, like something like that. So it’s really worth the time to just jump into the back-end of the Mobile View here and check that all of your objects are lining up, so just kind of an overview here of what you can do with the Mobile Editor. You can move things around, so if it’s not in the right place, you can get it to the right place. You can also resize things, so for instance, with text, you can shrink it down or shrink it up or – I’m sorry – expand it outwards or up, and keep in mind you can’t actually edit the content, so you can’t change this text. No matter what you do, you can only change the size of it, really, and just a little bit with the color. You can darken it or lighten it. And another thing to note is that if you want to change any content, it’ll have to be done in the Desktop View, and then those changes will be reflected in the Mobile View. So that’s just important to keep in mind. Really the big thing with the Mobile View is to make sure that everything is just looking right because you don’t want a mobile website to be completely wonky for someone, so when they sign on to your desktop it looks beautiful, but when they go to it on a phone, it looks kind of shoddy, so. Especially when Google is cracking down lately on having mobile optimised sites, it’s more important now than ever before to have a site looking really good for a phone. So if we just kind of go over here, we are– it’s a similar thing to what we see on the Desktop Editor, but with just some differences. So we have a Layout Optimizer, so you can actually use this. This is brand-new from Wix, actually. Just within the past month, and this is a tool that you can use to kind of automatically adjust anything on your site that might be looking weird, so which will analyze and adjust accordingly. So that’s a really, really quick way to help. Do that. You also have hidden elements, which we’ll go into in just a little bit later. Here we have Mobile Views, so we have different things that we can do. We can change how we want the site to appear, so we can have it just be our Desktop Version on a phone, which I don’t recommend doing, but if you needed to, you could do that. You have a Back to Top button, so if you scroll all the way down the page, you can turn this on so people can get back to the top of your page real quick. You also have a Mobile Action bar, which is really handy for something like this. If you’re a trades person or something, you can have your phone number, email address, social media, even, all listed at the bottom of your mobile site in one convenient place that always shows up on every page. So it’s very convenient, easy for people to find that information to contact you. And then above that, we have the Mobile Background. So again, similar to the desktop, so you can change the color or pictures behind everything. Really nice to know that that’s there. Now, one thing that’s critically important, though, that is different and you probably have to take some time working with is the Mobile Menu. So if you click on this, you’ll notice we don’t have our actual menu from our desktop site because it’s been condensed into this square here. Now, if we hit Settings, you can freeze this menu, so it will scroll down with your website, no matter where you are. That’s an option to do. You can also change the design of it, which is the most important part of the Mobile Menu. So if we click Design, you can change how you want the icon to look from right here, but if we go to Customize Design, this is where everything is going to get a little more technical. So we have a Closed view, which is what we’re seeing right now, so you can change those colors, the size, everything you want about it, but you also have the Open view, which this is what it looks like when people push that box. So we’re going to have this drop- down menu show up. That actually looks pretty good right now. You have different options of how this looks. So you have these five different presets up here. You have a full-page look, you have a to-the-left look, you have one that comes from the top, and one that comes from the right. So personally, I don’t think any of these will look that great, except for that first one. I actually think that looks really good, so we can keep that as is. But if you wanted to change that, that’s how you would go about doing it, selecting any one of those templates there, and then selecting different colors and playing around with it until you get it to look exactly right. So sometimes, it takes a little bit of finesse and a little bit of work, but in our case, we got lucky. This template looks really good, actually, with the menu that we have, so we’re going to leave it be, as is. Now, one thing left to note is those hidden elements, again. I said I’d come back to that. Hidden elements are basically if you had anything on your website from the desktop version that’s too big or doesn’t look right on a Mobile View, you can actually just hide it. So say this text, which even though this looks great, say this wasn’t looking good on our mobile site. We wanted to get rid of it. Well, we can do that by just hitting this little eyeball symbol right her. We click that, and it gets rid of our element, just like that. And if we wanted it back, then we’d go over to the hidden element section, hit the eyeball there, and now our text is back up on our home page. So it’s that easy to have it show up and go away just like so. So when you’re done, hit save. And now, we have a mobile site ready to go, just like our desktop site. All right. Well, we’ve made it. That’s our entire web site tutorial for building a tradesman site. So hopefully, you’ve been able to follow along. You can pause this video, play it back, whatever you need to do to customize your site exactly how you need. So the last thing we need to do is, of course, save our site, but then we can go ahead and hit that Publish button. But remember, before you hit Publish, I highly recommend upgrading your plan. So again, I would go to this upgrade tab over here and get a look at those plans again, if you haven’t done so already. Make sure that you upgrade to the right plan that fits your needs, and again, personally, I feel like this Unlimited plan could apply to anyone out there, unless, of course, you’re selling goods online, then you’ll need the E-commerce plan. So I highly recommend upgrading, but once you’ve done that and you have that all set to go, go ahead and hit that Publish button. And when that’s all set, congratulations. You can give yourself a pat on the back because your website is live. So if you hit View Site, you’ll see that this is what your website is looking like. So it is live on Google as is, and of course, if you ever need to make any changes or do anything of the sort, you can always come back, save, and hit Publish again. It’ll overwrite what you have live right now. So very good. If you have any questions at all, please don’t hesitate to leave any remarks in the comments below this video. We’ll try to answer as many as we can and get back to you. So hopefully, this tutorial is something that you can use and has gotten you a little bit more comfortable with Wix. It’s one of those things that takes a lot of time and practice, and the more you use it, the better you’re going to become. Just it’s very hands-on, very intuitive. So we hope you enjoyed this tutorial. Se sure to leave us a like and subscribe, and again, leave us any comments, if you have any, and we will see you in the next tutorial from Your Website Tutor.

, , , , , , , ,

Post navigation

25 thoughts on “How to Make a Small Business Website – Step by Step

  1. Wow. Wonderful site for making business wedsite. Thank you so much. All of the designs looks so professional. This could improve business and trades.

  2. thank you so much for the free information on how to make business websites. This was greatly detailed.

  3. Great! thank you very much for giving free information about business website making. The design of the video are really professional.

  4. Awesome its very useful and simple for making business website. As its look like professional and expert, this could make great impact on the way of success of business and trade.

  5. Thank you so much for this great information. I am interested in learning how to make a website for my son's photography business he is interested in. This is a great place to start.

  6. Certainly, this is the most comprehensive and effective tutorial, to get your website off the ground and ready for success.

  7. Really good explanation on how to be successful in business trading. I recommend it to other people to watch it till the end

  8. I love the explanation of how to make a site. I followed your lessons and produced a much better site for my business

  9. This video provides a simple, yet detailed explanation on how to make a website for a variety of trades. Keep up the good work!

  10. Ya know I have considered doing some business in trading, but never really got it.. this is a great video and it helped me to understand it so much better. Thanks for sharing! 🙂

  11. Thank you for all the information given in this video! I really appreciate all of the help you have given! 🙂

  12. This video has helped so much since I am in the process of trying to start my own business. Watching this video has helped me understand how to start up my own website for my business.

  13. It is important to have a website for your business because it will let users engage you more effectively.

Leave a Reply

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