Wix Website Tutorial (2026) - Step by Step for Beginners

Hey, I'm Dan, and in this video, I'm going to show you how to create a website using Wix step-by-step. If you're a beginner and you've never built a website before, it can feel overwhelming, but don't worry. Wix makes it really easy, and I'll walk you through each step without skipping anything. By the end of this tutorial, you'll have a website that looks clean, professional, and one that's ready to share. The first step is to visit the Wix sign-up page using this link, and you can find the link down in the video description. You'll also see all of the steps listed in the video description as well, so you can jump around if you would like to. Once you've clicked on that link, you'll join me on this screen here. Go ahead and type in your email address, and then click start now. Next, confirm your email, choose a password, and then click sign up. Now, Wix will take you through a few quick setup questions. I'll say that I'm creating the website for myself, and then I'll continue. But then on the next screen, I'll set up without using the AI chat. And then I'll click skip to dashboard, so that we go straight to your Wix dashboard and can get started right away. Here, you'll see the Wix dashboard, and this is basically the back end of your website. In the top left corner, you can see the name of your site, and if you click here, you can create a new site. And then here on the left, you have your navigation menu. This gives you access to all kinds of settings and features for your website. There are things like your sales, your apps, analytics, and more. For now, we don't need to worry about any of these, but it's good to know that they always live here on the dashboard. What we want to do first is start designing our website. So, let's go ahead and click design site in the top right-hand corner. And now you have two options for how to design your website. At the top, you'll see that you can design your site with Aria, which is Wix's AI. You describe what you want, and it will generate a site for you. And below Arya, you can start with a template. I did try Arya, and while it's an interesting feature, it can take several minutes to generate, and I found the results a bit slow and clunky to work with. You might have some luck with it, so feel free to give it a go. But for this tutorial, we're going to go with a template because I think you'll get to a much more professional result, and maybe even faster. So in the template section, let's click see all. And from here, you can search in the search box, or you can navigate by type, or industry to try to find a template that you like. You'll notice that many of these templates are labeled as Wix Harmony. Harmony is Wix's newest editor. It kind of gives a middle ground between their AI approach and their classic template, which gives you a guided design experience. For this tutorial, we're going to be using a classic template. The classic editor has been around longer, it's more stable, and I think it's the easier choice to follow along with as a beginner. Once you've gone through this tutorial and built your first site, you can always come back and experiment with a Harmony template. I'll quickly show you what that Harmony editor looks like, just in case you fall in love with one of those templates and want to know what to expect. So I'll search for business consulting. I'll scroll down, and let's try this one. You can always click here to view a template, and if you're not pleased with it after looking through, you can go back to templates. In this case, we'll go back to this template and click edit. [clears throat] As you can see, the toolbar at the top is fairly minimal, and the editor is still really centered around this chat panel on the right so that you can use Arya. That'll be here right alongside you as you work, offering suggestions and some guidance as to how you want to edit your site. But now that you've seen what the Harmony editor looks like, let's create a new site using the classic template and continue the tutorial from there. To do so, come up in the top left and click on the Wix logo and then go to dashboard. For now, you can close this first tab and under my site one, let's create a new site. We'll set up without chat again. Skip to the dashboard. And with a fresh site labeled here, we can click design site on this one. You want to be happy with the template that you choose. So, Wix is nice that you can create a few of these sites as you're getting ready. I'll click see all for the templates and then I'll search under industry and go to travel and tourism. I'll scroll down and I like this one. For this tutorial, I'm going to be building around a photography tour company. So, this is a great fit. But again, feel free to browse and choose whichever template works best for your type of website. To get started with this template, I'll click edit. Even with a template that uses a classic editor, you can enhance the placeholder content by using AI with just a few simple prompts. Even if you don't want to spend too much time on this prompt, it can help you generate some ideas for your website's copy. So, I'll enter something rather simple and then click generate site text. And once it generates, you'll fully see the Wix classic editor. Up toward the top right, you'll see the zoom controls. So, you can zoom all the way in, but I find it's helpful to create your content while zoomed out to 50%. Up here in the top left, you'll see what page we're on and if you click this drop down, you can use this to navigate to different areas of your site. For now, let's stick to the homepage. Down the left side, you have all your different tools and you'll also notice a toggle here that can switch between desktop and mobile view. For now, we're going to stay in the desktop view and then we'll come back to mobile optimization later in the tutorial. So, I'll click skip there and switch back to desktop. And then, I'll zoom back out. Every page on your website is made of one or multiple sections. You can think of each section as a big block of content that stacks up on top of the next. If you ever want to reorder these sections, you can just hover over one and then use the arrow that appears to move the section up or down. And obviously, we want this welcome section up at the top of our homepage. So, if you ever make a change that you want to reverse, you can always click the undo button here in the top toolbar. And that will take you back to where you just were. Inside each section, you'll find a collection of individual elements. Things like the text, the images, and the buttons. They all make up the content of this welcome section. And those are the things that we'll be editing throughout this tutorial. To edit any text on the page, when you're at 50%, you can click on the section and then click quick edit. That will let you quickly edit all the content within the section. Or, you can zoom into 100% and you can click on the element you want to edit, and a small menu will appear. From there, you can edit the text, and you have a few other options. Once you click edit text, a panel opens on the right and you can change the heading style here. You can change the font, the size, and you can add effects like bold or italics. If you don't like what was generated from earlier, you can change whatever you have in the text field. If you want to move the text element to a different spot on the page, you can just click it, and while you hold it, you can drag it anywhere you want. As you're moving things around, you'll notice these pink alignment guides. Use those to make sure your elements are lined nicely with everything else. Since we're working from a template, a lot of the text on the page will be placeholder content. So, you can always edit this copy to be exactly what you want, or you can get some help by generating text with AI. Here, describe what you want to generate, then click send. You can keep editing your description until you get something you want, or you can use some of these quick actions to modify it. Once you're happy, you can copy this text, or click use text to drop it right in. And just like before, you can always continue to make changes manually. Buttons work the same way as the text elements. Just click on the button to select it, and you'll see the options that you have to edit it. I'll click here to change the text, and edit it here. In this settings window, you can also change where the button links to. Currently, it's the book online page, but if you wanted to change it, click this button, you could select any one of these options, or if you wanted to change the page, that's right here. Then click done. And then here, you can also change the button design. Here, you'll see some button styles that are already created, and you can see how they look when you hover over them. Or, you can go ahead and customize the design further to your liking. To make this stand out, we could change the fill color. I'll select white, and then in order to see the text, we'll need to change that. And I'll choose black. You'll see some other styling options here on the left, and you can resize the button by simply dragging. After dragging it over, I'll use the guides to move it back to the center. Now, let's replace an image on your page. When you have an image that you want to replace, just click on it. Here, this image is the background, so I'll click change background. And then here, click image. From this window, you can either upload your own image, or you can explore images from Wix's library. So here in media from Wix, you can go up to the search bar and type in something to find what you're looking for. Then you can browse the collection of free images that you could use to replace your background. Go ahead and select one that you want to choose and then change background. After a moment it'll load. Once you've selected an image, you can also edit it. Click here to go to settings. You can adjust the opacity and the color. And also how the image is scaled or positioned. You also have access to an AI image generator. To see that, click change background again and then image, then choose AI image creator over on the left. Here you can describe your image, choose a style, and click create image. If you don't like what's created, you can try again. Or you could also upload your own images. Let me show you that real quick. I'll click cancel and leave, and then I'll click upload media. Here you can source your images from a few different places, but I'll upload from my computer. After you select an image, click open, and then it will upload. Once it uploads, you can select it and click change background. Further tweaking the image is easy and you can click this button right here. That opens the photo studio and you have access to all sorts of editing tools right in Wix itself. Here I can brighten this image slightly, raise the shadows, and you can add a tint this way as well. If you ever need to darken or lighten an image so that you can see text better, this is a good way to do so. When you're happy with your edits, click save. And don't feel like you need to keep all of the content from the template on your website. Let's zoom out and find some content that we want to remove. I'll scroll down and I don't love this section, so I'll zoom in. Find it. Close this and for any element that you want to remove from your page, you can just click it, then go to the three-dot menu and click delete. Or you can right click and delete right here as well. And that works the same way if you want to remove an entire section. Just right click on the section itself and click delete. Now let's look at how to add new content to your pages. I'll scroll up and let's add something to our about page. Before we do so, let's save what we have so far. Auto save is on, but it's a good practice just to be sure. We'll worry about the domain later, so for now just click save and continue. Then we'll change the page and click about. Before we add content, I'll zoom out. That way we can see how the page looks right now. And then over on the left-hand side toolbar, let's click this button to add a section. You'll see this panel open up with a bunch of pre-designed section templates to choose from. If you want to start from absolute scratch, you could choose blank section, but I'd recommend browsing the templates to save yourself some time. So I'll undo the blank. Click here to add a section and I want to add a section for my team. I'll click team on the left and scroll down through some of these templates. Then to add one, I'll click it and you can drag it anywhere on the page. Once you've added your section template, you can edit it like any other part of your website. So you might want to remove elements. You can rearrange some of the existing elements that you want to keep and you can add new elements inside of the section that you added. On the left-hand side, click this plus button to add elements and you'll see all of the different things that you can add to your page. I'm going to add a button and I'll use one of these themed button styles so that it matches the rest of the site automatically. To add it, I'll just drag and drop it into the section we've added. Once the button is on the page, I want to create a little bit more room. So, I'll click on the edge of this strip and drag this downwards. And then I can reposition the button making sure it's centered. To be consistent with the styling of this section, I'll change the design of the button, customize it, and make my changes. Once you've made the changes to your new element, you can zoom out to evaluate how the page looks. In this case, I'll probably drag this section down a little bit further. So, I'll zoom back in to make my adjustment. I'll shrink the section to fit and I'll adjust my button once more. Now, let's take a look at how to manage the pages on your website. If you scroll back up to the top of the page, you can see this navigation menu that your visitors will use to move around your site. To manage how this works, go back over to the left and click pages and menu. From there, you'll see a list of all your pages and depending on your template, if there's a page you don't need, you can click the three-dot menu on any option and you could hide them. If we scroll back up, you can see that book online is no longer in the menu. I'll keep this one unhidden because that's important to my site. So, I'll click the three-dot and click show. To add a new page to the site, just click the add page button right here. From this screen, you could add a completely blank page, but again, I'd recommend trying to pick out a templated page that works with what you want. In projects, something like this might work good if I wanted to show off one of the tours. Once you find one, click add page. Then you can rename it and click done. You'll see that the new page is automatically added to the site menu, and if you add pages that you no longer want, you can delete them as well. Here, I'll confirm delete. Next, let's set up a contact form for our website. Head back to the home page and scroll down until you find the form. Mine is this element right here. Then click edit form. That will automatically open up the form settings in your dashboard. The first thing you can do is edit your form name. This is especially important if you plan to have multiple, but I'll keep mine as contact. Here you can get back to the edit view. Then you can edit or add the fields that you want to collect from people who are filling out your form. I already have name, email on this form, but I might add phone number just to be sure I can contact them multiple ways. When you have a field selected, you'll have the field settings, which you'll see over on the right. You can hide the field or show the field. You can duplicate it or trash it right here. Over in the settings, one thing that you might want to do is make required fields with this toggle here. And you can add placeholder text to show people the format that you might want your numbers to be entered in. Once you've added all the fields that you would like and you've edited the settings for the fields that you've added, click save. In the top, you can select preview. That will show you how your form looks, and you can make edits if there's something here you don't like. You can click settings, and that will allow you to customize more things about your form, and you won't have any yet, but you can look at submissions here. I'll close this. And back on our home page, we can see that our newly added phone field is showing. You can make changes to the text elements at the top of the field here like any other text element, and you can make further changes to the form using these settings. This is the name of it. Here's the layout and design. And if you click manage, you can always see your submissions by clicking manage forms. That will bring you back to the forms and submissions dashboard, and you have all your options here. I'll close this to return to the editor. And I'll close this. Now, let's update the map on your website. If your template comes with a map, scroll down to find where that is. If your template doesn't already have a map, you can easily add one. Click the plus icon in the left-hand toolbar to add an element. Then, under contact and forms, choose full-width maps under the Google Maps section. And here, you can choose which type of map you want to add, and then you can drag and drop it over to your website. My template has one, so I'll close this. And then, to edit the map, click on the element, and then manage locations. Here, you can select one or multiple, and then you can scroll down to enter your location details. Once you've updated your address, you should see the map location update. Next, let's customize the header, which is the strip at the very top of your site that appears on every page. Click on the header to select it, and then click on it again to select this strip. With the strip selected, you'll see the menu down here, and you can choose manage columns. Right now, you'll see that we have two columns, and you can select them by choosing here. And I want to add a third column so that we have room for the logo, the navigation menu, and some social icons. To add a column, simply click this button. I'll close the column menu, and then we need to make some edits so that this all fits nicely. To change the layout of the header, click this button here. Then, you can set the column proportions using these presets. You can reverse the layout, or you can customize proportions down here. Our elements don't fit quite right just yet, but I'll choose this column proportion to get started. Then I'll close this, and we'll work on making things fit nicely. We can start by selecting this middle column, and we can remove elements that we don't want. I'll delete this number, and I'll delete the login. Then, I'll expand this section so that we can see this menu. To do so, go back to layout, and for this site, something like 20 40 40 might work best. Then I'll close this. I'll click here to revisit the middle column, and I'll highlight this element. Then I'll expand it, and center it within this column. Next, let's add our logo, and fix this column of the header. Click the plus button to add an element, and then image. And let's upload so that we can get your logo into Wix. Then click upload. Find your logo, and open it. Once it uploads, add it to the page. Let's remove the old logo, and the old text. We'll take the new one, and resize it, and position it more appropriately in the header. In the third column, I want to add social media icons. So, I'll select the information that's already here and remove it. Then I'll click the plus icon to add an element, and find social. Here you can find several styles of social bars, and I'll choose this one. To add it, just drag and drop. To customize the icons so that they lead to your social media sites, click this button here. Then for each icon, you can change the title, and you can change the social page that it links to. If there are social media sites that you don't want to include, just hover over them, and then remove them. When you're finished, click done. And then finally, once you have the content that you would like up in your header, you can do one last pass to rearrange and resize everything appropriately. For me, here we obviously want to shrink the height of this section. And I'll move my elements around to enable me to shrink it further. Once you're happy with all the elements, the sizing, and the arrangement, you can click this button for a few more actions, and here's where you can change the scroll settings. This menu will give you an idea of how the header behaves under each of these options, whether it scrolls or freezes, disappears, or fades out. For this site, I'll click disappears, and then you can close this. With your header taken care of, now let's look at how to change the colors and fonts across your entire site. Over in the left-hand toolbar, click on site design. Then click on color theme. When changing these individual colors, the changes will apply across your site. If you wanted to change the accent colors, for instance, you could click this color to edit, and you'll see this section update live. But I'll cancel this for now. Or if you want to try a completely different look, you can click on change color theme here. You can generate a color theme with a logo or from text, or you can scroll through some of these featured themes. If you choose one, it will apply to your website in one click. I'll keep the current color theme. You can also do a similar thing with the text and font across your website. I'll go back, and back once more, and here you can check the text theme. You can choose your heading font or your paragraph font, or you can change the text theme here. If you click one, it will change across your entire site. Maybe I'll go with something like this. Once you're happy with your color and text themes, let's make sure your website looks good on mobile. As a rule of thumb, you want to design your site in desktop mode like we've done here, and then you want to click the mobile phone toggle at the top to switch into mobile view, and make sure everything still looks good. The edits that you make in the mobile view will only affect the mobile view. So here, we can see the header doesn't look all that great, and maybe I don't need this social bar on mobile. I'll hide this. I'll adjust the header height, and you can continue making tweaks so that everything looks good. This can take a while to go through your site and make all the changes so that mobile looks good. But in my opinion, it's time well spent. Lots of people will visit your website using a mobile device, so it's important to get it right. Another thing you'll notice on mobile is a quick actions button here. Click it to open the quick action bar. In the floating menu, you can set up quick actions. By default, I see this chat, but we can add things like phone and email so people can reach you with one tap on the action bar. To add those actions, click more actions, and you'll see the whole list of available items. If I add the phone, I can select it, use the three-dot menu, and set it up. And I'll click done. If I close this menu, you'll now see the message and phone icon under the action bar. When you're happy with all your mobile edits, you can scroll back up and return to desktop view. If you want to add more advanced features to your website, like the ability to take bookings, sell products, or add a chat widget, you'll need to use apps. To see which apps are already installed on your site, let's head to the dashboard, then click on apps, and then manage apps. And here you'll see the list of everything that's currently installed. To find new apps, click on the app market. And there are apps for all kinds of things, from booking systems to reviews to email marketing. Under media and content, we might see something that peaks our interest for this site. There are some free ones, but keep in mind that the more powerful apps may require you to be on a paid Wix plan. Now let's get our site ready for publish. Before we publish, let's do a quick check. I'll close the dashboard tab. And back on our site, let's click preview in the top right so that we can see what our site looks like on desktop to the ordinary visitor. Once you click that, you'll see that we're in preview mode and you can click through your pages, test all your links, and make sure that everything looks the way you want it to. When I'm doing this first preview, I like to make some notes about anything that I want to change, and then I'll do one final round of small edits before I publish my site. Once you've made some notes, you can click here to return to the editor. After you've made any final edits, go ahead and click publish. That will make your website live, and you can click this button to view your site. Now, if you're on a free Wix plan, you'll notice two things. First, your site is published on a Wix subdomain. You can see that up here. And second, there's a Wix banner at the top of every page that your visitors are able to see. To get rid of both of these, you'll need to upgrade to a paid plan. To get started, let's close this tab and this menu. At the top of the editor, you'll see this banner that shows you you can connect your domain. That will take you to where you can choose and connect your custom domain. You can also get to the same spot through the dashboard. So in the top left, go to dashboard, and you should see that item in your checklist or right here at the top. On this screen, we don't have an existing domain that we want to connect. We want a new one, so click upgrade. And then when you're choosing a plan, I'd recommend the light plan for most beginners. It covers everything you need to get started, and there's a 14-day money-back guarantee on all premium plans. When you're ready, click here to select your plan. Then choose one of the yearly option plans to include that free custom domain. Then click continue to check out. Fill out all your order details, and then before you submit purchase, make sure to enter promo code take10. Apply it for 10% off. Then when you're ready, submit purchase. The next screen will show you that you have the free domain voucher, and you can search for a domain. If you're able to use your brand and get a .com, that's what I would recommend. If it's not available, you may need to try a few different combinations. When you find a domain that you'd like, click get it. If you register for more than 1 year, you can save some money, but if you select 1 year, your voucher will apply to make your total zero. Click continue. Enter your contact info that you want for the domain registration, and then click continue again. Then you'll be shown some options for privacy and security, so that your personal information can remain more private. This is relatively affordable, and can really minimize the number of junk emails that you receive. Once more, click continue. Finally, submit your purchase. And that takes care of your custom domain. Just note that it can take a while before your website is live at the domain that you just purchased. I'll close a few tabs so that we get back to our dashboard. Back on your dashboard, the last thing I want to call out is that you'll need to complete your email verification so that you continue to have access to your custom domain. If you haven't already done this, go to your email inbox, find the email from Wix with a subject line that looks like this. Scroll down and click here to verify. Then, just verify your info. You can close this tab and your email. Up here, you can manage the domain. And it's only been a few minutes since I purchased this domain, but it looks like it's live now. If you've only been following along so far, make sure to use the link in the description to get started. Thanks for watching, and let me know what questions you have in the comments down below.