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 all right so we're going to start right here on the sign up page to get to this page simply click on the first link Down Below in the description or go to madx media.com Wix once you're on the 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 personalize your website dashboard based on your needs how however in this video we're going to do everything manually and set everything up without this chat to keep full control over our dashboard so let's click on setup without chat and here we want to tell Wix what kind of website we want to create now in this video I'm going to create a restaurant website for an Italian restaurant so I'm just going to type that in here and as we can see they even have this as a choice so I'm going to click on Italian restaurant and then click on 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 cuchina 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 Chad GPT so once that's done let's click on continue next we can choose different goals for our web website and by default there is already a few options checked based on our information we have entered so I do want to show the menu items on the website so I'm going to leave this checked but I do not need to take orders online so I'm going to uncheck this option but I do want to manage table reservations on the website so I'm going to leave this checked and everything else right here I don't need right now so I'm going to leave this unchecked and click on continue and here the only thing I'm going to check is run your site on mobile because I also want the website to look good on mobile phones then let's click finish all right now we are in the Wix dashboard which is basically the back end 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 Dash board 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 side 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 customize 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 customizing 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 customized but as of right now I do think the better option is to choose a template and then just customize 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 going to 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 going to give your website the basic structure and design and it's going to make it a lot easier for us to create a professional website now you do want to 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 will 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 uh 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 just browse this website template and see if it kind of looks like a website that I would want to use for my own website you can change all the colors 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 customizing 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 want to 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 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 want to 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 customize the design of our website and throughout the video we're going to 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 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 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 customize 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 going to 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 want to 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 line 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 add a text to make your changes now because this is a template some text paragraphs will just be dummy text so you're going to 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 cuchina so we can just click on the uh 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 want to 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 r 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 going to type that into the search bar and then I get all kinds of images I can basically use for free and I'm going to choose this one right here so I'm going to click choose image and now the image has been replaced now if you want to 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 customize the existing elements on your page and next we're going to take a look at how to add new content to your website so the first thing we want to do is add a completely new section and to do that we're going to come over here through the tools and click on ADD section then first we want to scroll to the part we want to add this new section and I'm going to scroll all the way down because I want to 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 want to use a template you can click on blank section and then you can start from scratch however I want to use one of these templates to save me some time I want to add a team section to the homepage so I'm going to go to Team and then look at these templates I like this one here at the top so I'm going to click on it and now it will 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 want to use these themed buttons here because I already have the design of this theme so I'm going to 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 going to 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 going to change the text and then also make sure to add a link and I'm going to 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 want to change is the style of this button so to do that I'm going to 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 going to 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 and menu this is where we can manage our Pages now here I notied 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 going to do the same thing to this ordering page one 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 r story page for example and then you can make any change right here but just clicking on the elements and then changing the text or replacing the images however you like now to to add a completely new page to your website we want to come back to the pages and menu tool right here and then we want to 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 going to 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 going to use this template so I'm going to 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 going to 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 customize the content next let's take a look at how to customize the contact form on our website so first I'm going to 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 customize this form let's just click on 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 going to name this form just contact form one 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 going to start with the first name then the last name then the email address the phone number and then down here I'm going to also add a long answer for the message they want to send I'm going to 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 want to choose the form you have just created which is the contact form one and close this window and now the form is activated on your page if you can 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 and 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 customize 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 and 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 center and then maybe also add some social media links now to do that we're going to first select the header and then click on the header again to select a strip with the two columns then we're going to click on manage columns and here we can see that current L we have two columns one on the left and one on the right and I want to 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 want to put this wide one in the center so I'm going to select it here and then click on the Arrow to move it here to the center 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 want to change the width of these columns I'm going to leave them as they are so I'm going to close these settings but here I notice that my navigation menu is cut off on the right side so to change that I'm going to 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 going to 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 going to 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 want to make it a bit smaller maybe like this and then make sure it's aligned nicely in the center 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 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 want to 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 center and then I'm also going to set the links by clicking set Social Links and I don't have LinkedIn so I'm going to delete this here I don't have Tik Tok 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 want to add your link to your Instagram your link to your Facebook Twitter or or whatever you have added to your page make sure this is aligned nicely right here now whenever you want to change the colors or fonts on your website you can simply come over here and click on site design here under color theme we can change each individual color of our website simply click on the color you want to 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 side 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 going to 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 want to 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 going to do is actually fix this by removing the social icons because there's just not enough space for both elements so what I'm going to do is click on the social icons and then click on this I 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 on 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 want to start to make changes on the desktop view and those will automatically applied on the mobile phone view but then you want to make sure to optimize 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 optimize now most of these elements are already optimized for mobile because we're basically using a template that has been optimized 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 setup 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 all right 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 Res 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 is Wix forms and payments there's the members area app wix's tips wix's 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 V rental place so let's just type in bookings hit enter and then let's see what kind of apps show up so there is 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 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 going to 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 the 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 want to 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 going to 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 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 going to 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 going to go with the cheapest plan which is $11 per month here I'm going to choose the yearly option and here just enter 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 going to 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 going to 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 want to see more wig tutorials in the future thanks for watching