Hello,

Sign up to join our community!

Welcome Back,

Please sign in to your account!

Forgot Password,

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

Sorry, you do not have permission to ask a question, You must login to ask a question.

Please briefly explain why you feel this question should be reported.

Please briefly explain why you feel this answer should be reported.

Please briefly explain why you feel this user should be reported.

Home Latest Topics

  • 1k
  • 1k
Kevin Stratvert

WIX Website Tutorial for Beginners

video
play-rounded-fill

Today we are going to set up a website from scratch using WIX. Setting up a basic website on WIX is free and the structure of the platform makes it easy for beginners. We are going to look at how to pick designs, add text, upload images, logos, and more. By the end of this video, you will be ready to publish your very own website. To get started head to the following website. You can also click on the card in the top right-hand corner and I’ve also included a link down below in the description. Once you create your account, WIX will ask you some questions in order to help get you started. First it will ask if you want help setting up your website utilizing AI. Today we’ll be doing everything manually so I’ll be setting up without AI. Next, they’re going to ask what type of website we want to create. For today’s tutorial I’ll be creating a website for a local yoga studio. There’s tons of choices on here and if you pick a particular website design that you later decide you don’t want and you want to explore other ones it’s easy to go back and select something new. Once you’ve selected the type of website you want to create, WIX is going to begin by asking you a series of questions about your business. Some of these questions may be more relevant than others. Go ahead and answer all of the questions and once you’re done press continue. Next WIX will show you a variety of templates in order for you to select from. Once you have found one that you’re interested in using select edit. This is your website builder dashboard and on the left-hand side is your primary navigational menu where you’ll be able to easily toggle between adding elements, pages, and design your website. You can also integrate apps and additional business information. Let’s take a look at what WIX has already designed for us. I’m going to click into the site and zoom in in order to see the website better. At the top of the website WIX has added a header. This acts as a navigational tool for users who come to your website allowing them to navigate easily between pages and sections of your website. If you are curious what this section is called you can hover over it and WIX will tell you what the name is. This also allows you to easily identify different sections that could be edited on your website. Continuing to scroll down we see that WIX has added a large image, a section for about the company, some additional images in a gallery, client testimonials, and a get in touch form. And on the bottom of the page this section is referred to as the footer and we’ll edit this later on but it shows that you can integrate with app stores and additional social media connections. Let’s begin editing top down starting with the header. I’ll click into this and select quick edit. Here you’ll manage your menu and decide what pages you’re going to have appear on your website. If you want to edit one of the pages or sections hover over the three arrows and you can either rename or delete a page. You can also temporarily hide a page from your menu if you’re making edits to it or if you’re currently building something that isn’t ready to publish. If I want to eliminate a specific page that WIX has created I can hover over the three dots. However, in this case for book online I’m not seeing that as an option. That’s because WIX has set up this website to accept bookings. On the left-hand side, I can click on booking pages and if you are building a website that accepts bookings you can follow through this and edit the information in order it to make the most sense for your business. In my case, I want to delete this in its entirety, so I’ll press the action settings item and select delete bookings. When I then toggle back to the site menu, I’ll see that the booking section has disappeared. I’m going to rename plans and pricing to classes and last but not least I’m going to add an additional page to my website. I’ll click on add menu item and then select a new page. Here WIX will provide me with a number of templates that I can choose for my new page. However, there will be more options for template designs later on when we actually begin building that particular page on our website. So, for now I’m going to select blank page. It will then populate my new page and I can name it. In this case I want to build a gallery later on so I’ll select gallery as my new name. If you want to change the order of your site menu you can simply drag and drop and when you’re all done select the home button so that you can go back to your main site and continue editing and then press x. Let’s continue editing our header bar on the right-hand side. When you hover over a particular icon WIX will tell you what it is. In this case we have the login bar. WIX will oftentimes include a login section for your website. If this is irrelevant simply right click and delete. If you do want to have a user log into your website to access a specific section you can go to the add elements section on the left-hand side of the navigation bar and follow these directions. You’ll now see that there’s a social bar and you can add your Facebook, Twitter or Instagram account. To edit this, right click and select set social links. Here you’ll be prompted to either add or remove icons from this bar and then when you select a particular icon you can edit the link that this will go to and whether or not it will open up in a new window or the current window. If you don’t want any social links on your page you can right click and press delete. The header will remain stagnant on each page of your website. You do have some options on how the header will show up. If you click on the three bars here on the right-hand side you can select header scroll settings. This will determine whether or not the header scrolls with the site, freezes so that as you scroll down on the page it does not travel with you, disappears in its entirety or fades out. I want to add a logo to my header so that the logo remains consistent on each page of my website. Because I’m going to add something that does not currently exist for me to edit, I’ll scroll to the left-hand side navigational bar and select add elements. Here I’m going to select an image. WIX has multiple options for uploading images to your website. The first being uploading images directly from your computer. You can also import images from social media accounts or Google. You can ask WIX to create an image for you using AI and WIX also has a plethora of free images and illustrations that you can pick from. In this case I’m going to be adding a logo that I already have created and have saved on my computer. However, if you want to add a logo to your website and you don’t currently have one you can add a logo here and WIX will help you create one. To add my logo, I’ll scroll back to the top of this page and select upload images for my computer. I can then select my logo and open it. You’ll then select add to page when it has finished uploading. You can drag and drop it to where you want it to appear. Anything you put on your header will appear on all of the pages of your website. You can also quickly adjust the size of the image. If you want to make additional edits to your image you can select edit image. You can also change the image at any time. To make one last edit to my header, I’m going to relocate the image to the far left hand side and then move my menu over to the right hand side. Let’s continue on and navigate to our next section which WIX has been calling the welcome section. If we want to change this image we can select change background. Here you can select a pre-populated background that WIX has selected or you can upload your own. This will be the same process that we used earlier when uploading our logo to the website. I’ll just select upload media and I can upload it from my computer. Once you’ve uploaded images to your WIX dashboard you’ll be able to reuse these without uploading them each time. To make additional edits to your desired image you can select change background and then select settings. Another option is to follow the prompts on the right hand side. One I want to point out is the stretched feature. Here WIX has stretched her image to go beyond the regular margins of the screen. If you change this to page it will align within the page margins. Next, I want to work on the text. I’ll select the text that WIX has created and then select edit. I’m going to first edit what I want the text to say. After I’ve done that, I can highlight the text and adjust the font, the color, and the size. Once you’re happy with a particular style of text you can either make additional edits by using some of the customization below including special effects and character and line spacing. You can also save it to a theme. If you’re going to maintain consistency through different pages of your website not having to edit the text every time and simply save it to a theme to reuse can save a lot of time in website creation. Once you’re done with your text settings you can adjust the text box and relocate the text to where you want it to appear on your page. If anything on the image is blocking the text you can either select it and move it or delete it all together. Let’s continue down and see what else WIX has created for us that we might want to adjust. Here they’ve created an about section. You can simply click into this and edit the text as we did above or if you decide that this is not what you want the section to look like we do have some additional options. Toggling over to the left-hand side of the page you can select add section. WIX has a lot of sections that you can insert into your website. In my case I still want an about section. I just don’t like the one that WIX had pre-populated for us. So, I could take one of these new templates drag and drop it onto the page. Once I’ve inserted my new section I can go ahead right click into the old section and press delete. If I want to adjust the section height I could drag and drop on the arrows here. This will either eliminate or add white space and can help with the design of your website. If I want to make edits to this about me section I can click in and select any of the text. Let’s say I want this text to mirror the text design from above. I can right click into it and select style heading one which is what we used up above. I can change the alignment if I want and exit out. I’m going to make more stylistic edits before publishing my website but I want to show you some other things that we can do to make your website more robust before publishing. Let’s go back to the top to our header. I want to build some additional pages here beginning with the gallery. To toggle to my gallery page, I’m going to the left-hand side and selecting page and menu. I’ll then select gallery. WIX will take me to the gallery page that I made before. If you remember, I designed a blank page so that I could show you how we start from scratch. On the left hand side, I’ll toggle back to add section. Here I’ll select gallery and I’ll see the different options that WIX presents to me. When you find one that you like simply click it and drag it onto the page. Once your gallery has been created you can select manage media. Here you can select each image at a time and select replace image utilizing the images that you’ve already uploaded to your computer or you can use images that WIX has pre-selected for you. As you go through and replace your images you can drag and drop them to wherever your desired placement is. Once your images have been added to your gallery you can change the layout by selecting settings and then layout. WIX has created a variety of presets and if you select any one of them it will adjust how your images are viewed. One thing we didn’t look at on the main page was the footer. Similar to the header this will follow the user on each page of your website. WIX has added a mobile app widget in my footer. If I had a mobile app that I wanted users to be able to download I could select edit design and customize and personalize the links. Since this is not relevant for my yoga studio instead, I’ll right click and select delete. Since my footer is now rather bare, I’m going to want to add an element to it that would make sense for my customers. I’ll navigate to the navigational bar and select add elements. Here I have a lot of options. It could be as simple as adding a text box including a contact form or if I wanted to re-add a social media bar I could drag and drop this directly into my footer. I’ve decided that I want to include contact information and a map that would be shown on every page of my website. I’ll select undo and go back to elements. I’ll select contact and forms and locate the map that I want to use and drag and drop it into my footer. I can then adjust the size and placement of my map and manage the location and edit all the location details. If I wanted to add additional things to my footer, I would go back to add elements. Here you could add text buttons or additional images. You can also edit this information at the bottom of the page. This is a rather manual way of editing your footer so I do want to show you an additional option. First, I’m going to delete this and then move this text up from the bottom. WIX will not allow you to eliminate the footer completely so I’m just going to minimize it and then I’ll add a section. I’ll select contact and find the one that makes the most sense for my business and then drag and drop near my footer. Once this is in you can make edits as we’ve been doing throughout the tutorial. However, in this case I want to use this contact bar as my footer so I’ll right click and you’ll see that there’s an area that shows show on all pages. If I toggle yes this will then allow users to see the same information on every page essentially creating my own footer. I’m going to decrease the size of this and make edits later on but now let’s move on and look at some additional things that we can do when building a website. In addition to having my contact information on the website I want users to be able to reach out to me directly without having to open up their email. WIX had already pre-populated a contact us form on the main page. To edit this, you simply click on it and select form settings. Here you’ll have a plethora of options to customize including what types of email notifications are sent to you in your inbox, where the messages are sent to, what the message that the user submitting the form will see, and you can also set automations such as sending a thank you email directly to the user’s email address. If you decide that you do not want the email submission form to be a section on your primary web page you can select pages and menu and add a page. Here you can use one of the templates with contact us information or create a blank page. When I create a blank page, I’ll again enter the information, select done, and then click into the page, add an element, and I can select a contact us form, insert it directly onto the page, and then I can continue to make customizations. Something else that I want to call out is back on the pages and menu section. If you want a drop down to appear in your top navigational bar you can drag one of these, move it to the right, and this then becomes a subpage. Let’s see what that looks like when I preview the site. This is what a user would see when coming to your website. When they hover over contact us, they could then click about. This is considered a drop-down menu and it was very easy for us to create. When you have finished editing your website, you’re ready to publish. Select the publish button. You’ll notice here that using a free WIX plan you are given a free domain. However, this includes the WIX site branding as part of your domain name. If you don’t want to use the WIX site branding and connect your own custom domain, exit back and select connect your domain. Here you can connect a domain that you already own or search for a new one that’s available for purchase. Once you’ve selected one that you like and select get it WIX will walk you through the various purchase options and you can see how much it would cost. You’ll also notice that we’re now in our business dashboard. This is where you would come to once your site is published in order to gain more insights on how your website is doing. This could include customers and leads and you would have access to all of the submission forms and contact information that you collect on your website. If you upgrade to one of the premium plans, you’ll have more options for SEM and SEO marketing. You can also create Google ads, Facebook and Instagram ads and more directly from the WIX website for an additional fee. You’ll also be able to collect analytics including site visits and behavioral overviews. Some of these are included with a free WIX website and others do require a paid subscription plan. Once you’ve decided on your domain go back to your website. I’ve made some additional stylistic edits and I’m ready to once again preview my website. This is what my website would look like for anyone accessing it on a desktop device. Now as we were building this website you may have noticed the desktop icon in the upper left-hand corner. Now let’s take a look at how your website would be optimized for a mobile device by selecting switch to mobile. WIX will do its best to optimize your site for a mobile device based off of the design elements that you chose. However, there’s always going to be some tweaks needed. So now let’s select back to editor. Any changes that you make when on the mobile editing site will not affect how your site is displayed on desktop. Always start in desktop and then optimize for mobile. You can make changes similar to how you did earlier. For example, if I want to increase the font size to show up better on a mobile device. I want to make this box a bit smaller so it doesn’t take up as much room on a mobile device. You can change how your text is centered or change the text entirely. Likewise, you can change the images for faster load times. If you want to see additional pages on a mobile device scroll back over to the left-hand side. Select the area of the site that you want to view and you can once again make edits and changes for how it is optimized on a mobile site. For example, here in the gallery that you could see that they’ve done a rotating gallery. If I want to preview just this page to edit it further, I could select preview. You can see how they’ve now optimized for mobile so that you scroll through the images as opposed to seeing them all in one gallery. If you want to make additional edits go back to editor. Select the images and then click settings. You can then make changes to the design, templates, or text just as we did when we first created the website. Once you have optimized and are happy with your site for both desktop and mobile you’re ready to publish. Everything we created today was completely free. However, if you do want to upgrade to a premium plan you get a free domain to connect to your site. You can accept online payments which is useful in a storefront or if wanting to book online classes. You can manage bookings and you also remove all WIX ads. Congrats! We just created a custom website from scratch and you are ready to roll. Most of the features we looked at today are free to use but if you want to create a custom domain or use some of the premium features I pointed out please consider using our affiliate link in the description below. This helps support our channel and allows us to make more content like this and it doesn’t cost you anything extra. To watch more videos like this please consider subscribing to our channel. See you next time!

Related Topics

You must login to add an answer.

Hide picture