Transcription
Hi there. My name is Simon, and in this video, I'm going to show you step by step how to create a website using Wix.
Now, if you have never done this before, then the idea of creating your own website might seem a bit overwhelming, but don't worry. It's easier than you might think, especially using this tutorial, because I will guide you through every single step to create your own website, and I'll make sure not to skip anything along the way. So by the end, you'll walk away with a beautiful and professional website, and I've listed all the steps we're going to cover down below in the video description, so if you're looking for a specific part, feel free to jump ahead. So let's not waste any time and dive straight into the tutorial.
Alright, so we're gonna start right here on the signup page. To get to this page, simply click on the first link down below in the description, or go to meticsmedia.com/wix. Once you're on this page, simply type in your email address and click on Start Now. Then, choose a password and click on Sign Up.
Now, we're getting to the onboarding process. So here, let's say I'm building a website for myself, my business, or a friend, and click on Continue, and this takes us to this Wix AI chat interface, which should help Wix to personalise your website dashboard based on your needs. However, in this video, we're gonna do everything manually, and set everything up without this chat to keep full control over our dashboard. So let's click on Set Up Without Chat. And here, we wanna tell Wix what kind of website we wanna create. Now, in this video, I'm gonna create a restaurant website for an Italian restaurant. So I'm just gonna type that in here. And as you can see, they even have this as a choice. So I'm gonna click on Italian Restaurant, and then click on Continue.
Here, on the second step, we want to enter our brand or business name, and I've chosen a nice Italian name for this restaurant, which is Bella Cucina, which means beautiful kitchen in Italian. And then we also want to enter a description of what our business is about. So I've quickly written down something here with the help of ChatGPT. So once that's done, let's click on Continue.
Next, we can choose different goals for our website. And by default, there is already a few options checked based on our information we have entered. So I do wanna show the menu items on the website, so I'm gonna leave this checked, but I do not need to take orders online, so I'm gonna uncheck this option, but I do wanna manage table reservations on the website, so I'm gonna leave this checked, and everything else right here, I don't need right now, so I'm gonna leave this unchecked and click on Continue. And here, the only thing I'm gonna check is run your site on mobile because I also want the website to look good on mobile phones. Then, let's click Finish.
Alright, now we are in the Wix dashboard, which is basically the backend of your website. In the top left corner, we can see the name of the website we have just created, and we can also create any new website by clicking on Create New Website at any time. And here on the left side, we have the navigation menu of your website dashboard, which gives us all kinds of information and also settings for our website. Now, by default, you'll be on this homepage right here, where you can see some specific metrics for your website traffic and your sales if you're selling stuff on your website. You have also different options, like managing your invoices. You can manage your orders right here. You can manage your restaurant menu if you have a restaurant website, your table reservations. Down here, we can also manage our inbox, our contacts. We have different marketing features. We have different analytic reports we can check out, and then we also have automations. But for now, we don't need to worry about any of these settings right here because, first, we need to set up our website, and then we can always come back to the dashboard, and look at all these different options. So let's get started setting up our website by clicking on Design Site right here at the top.
Now, here we have two options. We can either use Wix AI to generate a website design based on the info we have given about our business or brand, or we can use a professionally designed template and then customise that template based on our needs. So I've tested out both of these options, and to be honest with you, I prefer just choosing a template, and then customising it based on my needs. Whenever I try to use the AI to create a website, the result just didn't look and feel as professional compared to just using a professionally designed template. I do think that they will improve this feature, and then at some point, it might be better to just go with this option to get something completely customised, but as of right now, I do think the better option is to choose a template, and then just customise it to have a professional result. And the great thing about Wix is that they have a lot of different templates to choose from, so the chances are pretty good that you're gonna find one that you actually like. So let's move on and click on Pick A Template.
So now, it's time to choose your website template. This is gonna give your website the basic structure and design, and it's gonna make it a lot easier for us to create a professional website. Now, you do wanna spend some time browsing these templates and find the one that you like. Because once you've chosen your template, you can't change it afterwards. The easiest way to find the right template for you is to just browse these categories right here, or you can just come to the search bar up here, and type in the type of website you're trying to build. So in my case, this would be Italian restaurant, so I'll type that in right here and hit Enter, and now it'll show me all of the website templates that would work for a Italian restaurant. So here, we have Italian restaurant, pizza restaurant, Mexican restaurant, and then all kinds of different restaurant website templates that I can choose from. So I pretty much like the first one right here. So to check it out, I can just click on View, and then I can just browse this website template, and see if it kind of looks like a website that I would wanna use for my own website. You can change all the colours, you can replace the images, the text, and you can also change the fonts, but I do recommend to choose one where you already like the structure because this will save us a lot of time when actually customising the website. We can also click on the mobile phone icon here at the top to see what this website looks like on a mobile phone. And once we decide that this is the website template we wanna use, we can just click on Edit This Site at the top right.
Now, this takes us into the Wix website editor, where we can start designing our website. The first thing I like to do is click on this zoom out button here at the top right to get a better overview of what our website currently looks like. As you can see, we are on the homepage right now. To go to any of the other pages of the website, we wanna come up here, and under Page, we can switch from the homepage to any of the other pages of our website, like, for example, the Our Story page. We can then also check out what this page looks like on a mobile phone by clicking on the mobile phone icon here at the top, and this will show us the mobile phone layout. But for now, let's go back to the desktop view, and then let's also go back to the homepage. And here, on the left side of this editor, we have all the tools we need to customise the design of our website, and throughout the video, we're gonna cover most of these.
Now, every page on your website consists of one or multiple sections. So here, we have this first section at the top. Then, we have this About section. Here, we have like a gallery section. Then, we have a section to reserve a table, and then we have this Contact Us section. You can also move around these sections very easily. So for example, if you want to move this Reserve A Table section to the bottom, we can just hover over it, and then click on the arrow to move it down below this section here. Whenever we want to undo a change, we simply click on the undo icon here at the top, and this will undo the recent change. And inside of all of these sections, we have multiple elements that make up the content of our page. And to customise these elements, we have to zoom in again and go back to the initial view by clicking on this button here. And here, we can see all the different elements in this section with a blue outline. And to edit any of the text inside of this section, we can simply click on this element, and then we can see the menu here at the top. So let's click on Edit Text, and then we can just type in the text that we want to use. So I'm just gonna add the name of the restaurant, and then on the right side, we can see a menu to change the design of this text. So here, we can change the heading style, the font style. We can also change the font size by dragging this slider to the right or to the left. We can make this italic or make this underlined, whatever we need. And when we're done, we can simply click anywhere on the page to leave the text settings. And if you wanna change the position of this text element, we can simply click, hold, and then drag it to any other position on the page. However, make sure that your text is always aligned nicely to the other elements, and you can use the grid lines to do that. So if I were to place that back in its original position on top of this graphic right here, I would use these grid lines to make sure it's aligned perfectly. So changing any text element on your page works pretty much the same. You can just click on the text element, and then click Edit Text to make your changes. Now, because this is a template, some text paragraphs will just be dummy text, so you're gonna have to come in here and add your own text. Now, if you find it hard to come up with your own content, what I can recommend is to use this AI feature. You can just click on this AI Tools icon, and then here we can click on Generate New Text. Now, here we can create like an about section for this Italian restaurant. So I would add something like please create a short paragraph talking about how we prepare our dishes at our Italian restaurant, Bella Cucina. So we can just click on the icon here, and then it will start creating a text for us. And if you like the text, you can just click on Use Text, and then it will automatically replace the dummy text with the new one that we have just created.
Now, another very important type of element that we wanna use across our website are buttons that people can click on, like this one right here. Buttons basically help us to guide somebody to another place of the website where we want them to go. And to edit these buttons, we can just click on them, and then we can change the text here, and we can also change where this button links to. So currently, it links to another page of our website, which is the Our Story page. So we could either change the page that we want people to go, or we can also send them to a different website, we can send them to a different section on the homepage, and we have some more options down here. And to replace the images on your website, it works exactly the same way. You just click on the image element, then click on Change Image. And then here you can either drag in your own image file, or you can also use the media from Wix by clicking right here, and then type in what kind of image you're looking for. So in my case, I'm looking for an Italian chef, so I'm gonna type that into the search bar, and then I get all kinds of images I can basically use for free, and I'm gonna choose this one right here. So I'm gonna click Choose Image, and now the image has been replaced. Now, if you wanna get rid of any element on your website, you simply hover over the element, right-click, and then you just click on Delete, and it works the same way with an entire section. You just right-click on the section, and then click on Delete.
So now, you know how to customise the existing elements on your page. And next, we're gonna take a look at how to add new content to your website. So the first thing we wanna do is add a completely new section. And to do that, we're gonna come over here to the tools and click on Add Section. Then, first, we wanna scroll to the part we want to add this new section, and I'm gonna scroll all the way down because I wanna add it right here below the Reserve A Table section. Then, here on the left side, we can see all kinds of different templates that we can add to our page. If you don't wanna use a template, you can click on Blank Section, and then you can start from scratch. However, I wanna use one of these templates to save me some time. I wanna add a Team section to the homepage. So I'm gonna go to Team, and then look at these templates. I like this one here at the top, so I'm gonna click on it, and now it'll automatically be added to my homepage, and I can edit any of these elements in this section the same way as we've done before.
Now, let's say I want to add a new element to this section. To do that, I have to come over here and click on the plus icon where it says Add Elements. Then, here I can see all kinds of different elements I can add to my page. Let's say I want to add a button below these images here. So I would have to go to Button, and then I wanna use these themed buttons here because they already have the design of this theme. So I'm gonna use this button right here, and this will put it onto my page. Now, I want to place it below this area. So first, I have to make some space inside of this section. So I'm gonna have to increase the section height by dragging the border here to the bottom like this, and now I have some space for this new button, so I can just click, hold, and drag it to the correct position. And now, to edit it, let's click on Settings, then we're gonna change text, and then also make sure to add a link, and I'm gonna link this button to the Our Story page and click Done. And whenever adding something new to the page, I always like to zoom out by clicking on this button here at the top to see what this new section looks like on our page. Now, I think it looks quite good, and it fits nicely into the rest of the design. The only thing I would wanna change is the style of this button. So to do that, I'm gonna go back to the initial view here, then click on the button, then go to Design, and then here I can change the design of this button, and I'm gonna choose this one right here. I think that one looks better. So let's zoom out again, and see what it looks like now, and I like this a lot better.
So now, let's take a look at how to manage the different pages on your website. Let's scroll all the way up to the navigation menu, which we can see up here. This is where the website visitors will be able to navigate to different pages on your website. Now, when we come over here and click on Pages & Menu, this is where we can manage our pages. Now, here I notice that there are some pages that I don't need on my website, like, for example, this Order Online page. So to get rid of this page, we can just click on these three dots, and then click on Delete, and confirm. And then I'm gonna do the same thing to this Ordering Page 1. Delete, and confirm, and then go back to the pages. So now, these are the links that will be shown in the navigation menu all the way here at the top of the page. Now, Our Story is a separate page. Menu is also a separate page. And then here, next to Reservations and Contact, we can see this anchor icon. This means that this is just a specific section on the homepage, and when people click on this link in the navigation menu right here, then they will automatically scroll down to this specific section on the page.
Now, to edit any of the other pages on your website, you can simply navigate to them by clicking right here, and then you can navigate to the Our Story page, for example, and then you can make any change right here by just clicking on the elements and then changing the text or replacing the images however you like. Now, to add a completely new page to your website, we wanna come back to the Pages & Menu tool right here, and then we wanna click on Add Page here at the top. Then, we can either start with a blank page by clicking on this button, or we can use one of the templates for different types of pages. Now, in my example, I'm gonna simply add a page talking about the events that have been held in this Italian restaurant I'm building a website for, so I think a good template would be here under Projects. And then here I'm gonna use this template, so I'm gonna click on Add Page, and now this page will be added to our website, and we can rename the page right here. So I'm gonna name this Events, and click Done, and now this link was automatically added to the navigation menu, and we can see that right here in the menu. Now, we can also rearrange the order. So if you want to have that at the end of the navigation menu, we can just move that all the way here at the end, and then we can just click into this page and customise the content.
Next, let's take a look at how to customise the contact form on our website. So first, I'm gonna go back to the homepage, which is where my contact form is located. Here, let's scroll down and look for the contact form. So it is right here below our opening times. Now, to customise this form, let's just click on this form element, and then click on Edit Form, and this will open up the Wix dashboard and open up the form settings. So we first have to create our form. So let's start with the name up here. I'm gonna name this form just Contact Form 1, and then click Save, and go back to forms. And then, here, we can see the form we have just created. So let's click on Edit, and then we can add different fields to this form. So I'm gonna start with the first name, then the last name, then the email address, the phone number, and then down here, I'm gonna also add a long answer for the message they wanna send. I'm gonna change the title for this field to Message, and then click on Save. So now, my form is ready, so let's close the dashboard window, and then let's go back to this form. Let's click on it, then go to Settings, and now we wanna choose the form you have just created, which is the Contact Form 1, and close this window. And now the form is activated on your page. If you can't see it right away, just click on Preview here at the top right, and this should make your form visible on your page, and you can then go back to the editor.
Now, when we scroll a bit further down, we can see this map right here, which shows the location of our business. And to change the location, we can just click on this element, click on Manage Locations, and then we can change the address here, and the location will be automatically changed. Now, if you don't have this element on your page and you want to add it as well, you can just click on the plus icon here, then go to Contact & Forms, scroll down to Google Maps, and then add a full width map. You can just basically choose any of these designs here. Then, you can click on it, and then it will be automatically added to your page, and you can change the location to your business location.
Next, let's take a look at how to customise the header of our website, which will always be shown all the way at the top of every page. So here, we have the navigation menu that people use to navigate through your website, and we've already seen how to manage this navigation menu, which is by going to Pages & Menu, and then we can rearrange the menu right here. We can add and remove pages here. Now, we can also play around with the header layout. So we can maybe add a logo, put these links here to the centre, and then maybe also add some social media links. Now, to do that, we're gonna first select the header, and then click on the header again to select a strip with the two columns. Then, we're gonna click on Manage Columns, and here we can see that currently we have two columns, one on the left and one on the right, and I wanna add one more. So let's click on Add Column here, and that gives me three different columns. So a wide one right here, and then two narrow ones here on the right side. I actually wanna put this wide one in the centre, so I'm gonna select it here, and then click on the arrow to move it here to the centre. Now, let's close these settings, and then click on the Layout icon right here. This is where we can change the column proportions if you wanna change the width of these columns. I'm gonna leave them as they are, so I'm gonna close these settings, but here I noticed that my navigation menu is cut off on the right side. So to change that, I'm gonna click on the Menu element, and then just drag it here to the right to make sure my entire menu is visible here at the top.
Next, I want to add my logo here to the left side of the header. So first, I'm gonna click on this login bar element, and get rid of it by right-clicking, and then clicking Delete, and confirm. I don't need any login option on the website. Then, to upload the logo, let's click on this plus icon, Add Elements, then go to Image, and click on Upload Images. Then, I'm gonna simply drag and drop my logo in here, and click Add To Page. Now, let's make this a bit smaller, and then drag this to this left column. Cool, I think I wanna make it a bit smaller, maybe like this, and then make sure it's aligned nicely in the centre. And then, optionally, we can also add some social media icons to the right side of the header. So again, we can click on the plus icon, and then go to Social, and add some social media links. I'm going to use this design here. Then, drag this to the right column, and I wanna make these a bit smaller, so let's go to layout, and then decrease the icon size like this, and close the window. Make sure to align them nicely to the centre. And then I'm also gonna set the links by clicking Set Social Links. And I don't have LinkedIn, so I'm gonna leave this here. I don't have TikTok and I don't have, let's say, YouTube. And then for the rest that is still here, we can just click on these icons, and then here you wanna add your link to your Instagram, your link to your Facebook, Twitter, or whatever you have added to your page. Make sure this is aligned nicely right here.
Now, whenever you wanna change the colours or fonts on your website, you can simply come over here and click on Site Design. Here, under Colour Theme, we can change each individual colour of our website. Simply click on the colour you wanna change. Then, you can change it right here, and you can see the changes happening live on your website. Or you can also go back one step, then click on Site Theme, and then just try out different themes that will be applied across your entire website. Now, personally, I like the first one the best, so I'm gonna go back to the original one. Then, to change your website fonts, just go back one step here, then go to Text Theme, and here you can change each of the fonts individually. So currently, we have this font for the headings. We can maybe change it to this one right here, and it will be applied across your entire website, and the same for the paragraph fonts.
Now, whenever you make changes to your website design, you always wanna make sure to also check the mobile phone version and make sure it looks good on the smaller screen size as well. So let's do that by going to the mobile phone icon up here. And right away, we can see that we have a bit of a problem here in the header. The logo and the social icons we have added are overlapping and it doesn't look good. So what I'm gonna do is actually fix this by removing the social icons because there's just not enough space for both elements. So what I'm gonna do is click on the social icons, and then click on this eye icon, which will hide this element on the mobile phone version. And now, I can simply increase the size of my logo just a bit, and make sure it's aligned nicely with the hamburger icon, and then just decrease the height of the header, and now it looks great. Now, whenever we make changes here on the mobile phone version, it will not affect the desktop view. So when we go back to the desktop view by clicking here, then we can see that the social icons are still here. So you always wanna start to make changes on the desktop view, and those will automatically apply it on the mobile phone view. But then you wanna make sure to optimise these changes on the smaller screen size to make sure it's aligned nicely. So we've already fixed the header right here. So now, let's scroll down, and see if there's something else that we need to optimise. Now, most of these elements are already optimised for mobile because we're basically using a template that has been optimised. Now, we've manually added this section right here, but it looks pretty good, actually. Maybe we can change the position of this button and put this a bit to the bottom, and then maybe make this section a bit larger, maybe like this, and I think that looks better. Then, let's scroll down all the way to the bottom, and everything else looks pretty good. A special feature here on the mobile phone version is this icon here at the bottom. This is basically a quick action button where people can click on, and then they can either send you a message, call you, send you an email, whatever you have set up. So here, we can click on Set Up Quick Actions, and currently we just have a chat. So you would be able to chat with people using Wix, using the Wix app, but we can also add more actions. Like, for example, we can add our phone number, and then we need to click on Set Up here, enter our phone number, and once we've done that, people will be able to click here, click on this phone icon, and then they will be able to easily call you, and you can do the same thing with email. So More Actions, Email, and then just add your email address.
Alright, now let's go back to the desktop view. So now, let's take a look at how to use apps on your website. So whenever you want to use a special feature for your website, like the ability to reserve a table or to book phone calls or to sell something or to chat on your website, you would need a special app added to your Wix website. There are apps made by Wix, and then there are some apps made by third-party providers. So in my example here, I want people to be able to reserve a table on the website. So let's click on this element here, and then let's click on Manage Reservations. This will take us into the dashboard where we are on this tab, Table Reservations, and just for a moment, let's click on Apps, and then click on Manage Apps. And here, we can see all of the apps that are already installed for our website. So there's Wix Forms & Payments. There's the Members Area app, Wix Tips, Wix Forms for our contact form, Wix Pro Gallery, Table Reservations, the menu application where we can show the restaurant menu, and these have automatically been installed because we have chosen a restaurant website template. Now, when we go over here to App Market, this will show us the entire Wix App Market, where we can find apps for all kinds of different things. So for example, let's say you're looking for an app that will enable you to have your customers book your, let's say, vacation rental place. So let's just type in bookings, hit Enter, and then let's see what kind of apps show up. So there's the Wix Bookings app made by Wix. Then, we have the Vacation Rental Booking Engine that you can add to your website. We have the Booking.com Reviews. So we have all different kinds of apps you can use on your website. Now, some of them will be free, some of them will be paid, but let's go back to Manage Apps here at the bottom left. Now, what's also worth noting is that for most apps, you actually have to upgrade to a paid Wix plan because here, we can see all of these business apps that we have installed. We're not gonna be able to use them unless we click Update Site and choose a paid plan for our Wix website.
So now, let's close this dashboard window, and go back to the Wix editor. Now, once we are done designing our website and everything is set up, we are ready to publish this site. Now, first, I would actually go and preview the website by clicking on Preview here at the top, and this will basically show us the version of the website, how visitors will be able to see it, so we can also click on different links and go to different pages, and just check if everything works. Now, once you've checked everything, all we have to do to publish our website is come up here to the top right and click on Publish. Congratulations. Now, your website is published, and people can go visit it. If you wanna visit your own website, simply click on View Site right here, which will open up your site in a new tab. Now, because we are still on the free Wix plan, our site will be published on a .wixsite.com domain, and we won't be able to change this to our custom domain unless we upgrade to a paid plan. And the other thing that we notice is that we can always see this advertisement of Wix at the top of our website, and this will be visible to anybody visiting your website no matter which page they're on. So if you want to get rid of this ad, and you want to use your own custom domain, we need to upgrade to a paid plan.
So to do that, we go back to the website editor, which we have still open in the other tab here, we're gonna close this window, then go back to the editor, and here, let's go to the top, and click on Connect Your Domain. And this will take us to the dashboard where we can choose our domain name. So right here, it has already recommended a specific domain to me. You can also change that and look for a different one, but this looks pretty good to me, so I'm just gonna click on Get It right here. Then, we have to choose this option because only this will allow us to connect our domain to our website. So let's click on Continue. Here, I'm just gonna go with the cheapest plan, which is $11 per month. Here, I'm gonna choose the yearly option. And here, just enter your payment details, and click on Continue. Once the payment is complete, we get to this page, where it says that we can now connect our domain. So let's click on Get It, and here I'm just gonna go for one year because this is just for this tutorial, and click on Continue. And again, we have to enter our information, and click on Continue. Here, I actually recommend to go with the private registration because otherwise, when people are looking for your domain, they will be able to find your name and address. So I'm gonna choose this option here and click on Continue. And again, Submit Purchase. And now our custom domain should be connected to our website. So let's check by opening up a new tab, and then typing in your domain. And there we go. Now, our new website is connected to our custom domain.
Now, if you found this video helpful, please give it a thumbs up, and subscribe to the channel if you wanna see more Wix tutorials in the future. Thanks for watching.