Build a Professional Website with Wix: From Basics to Advanced Features.

1. Introduction: A skill, apply the skill, and arn for it. Well, here's a skill that you can start learning today, one that has potential to earn you hundreds or even thousands of dollar per month as a side sel. Or maybe you're looking to add a valuable skill to your CV that could open up exciting opportunities. Either way, we're in the right place. In this beginner friendly course, I'll show you exactly how to create a stunning professional website from scratch using wigs, no coding required. We'll go step by step through everything you need to know, including booking system, calendar management, integrating essential features like contact form, social Md Links, and mobile website, and many more. By the end of this course, you will not only have a website that you can be proud of, but also confident and skills to bring your own ideas to life online. Plus, this is a skill that you can immediately add to your CV, showing potential employers that you have practical in demand abilities. So if you're ready to take first step towards mastering web designs, start making money with your new skill. Let's get started. 2. Login to Wix.com: We will go ahead and set up weeks. Simply just go to weeks.com and click Get started. Type your email and password, or you can sign in with Google or Facebook. So I'm just going to type my email. And click Sign up. Here we are giving us option. If we are working for our own website or business, then we can select the first option, or if we're working for a client, then we can select the second option. This case we'll go ahead and select the first option, continue. So this is weeks providing us with AI feature. So if we would like to create a website by writing a prompt, then we set weeks we will set up a website using AI. I myself, I personally like to set up without A because sometimes AI this stage doesn't understand properly what we mean. So we go ahead and set up without AI. Here is Weis giving us the type of store we would like to open. We can skip this one or we can go ahead and just select online store, and it's giving us more option within the online store. If we select any other option, it will give us more template, not more actually. Just give specific template. However, we can just go ahead and continue with the one selected because we will have access to all the templates anyway. Go ahead and continue with online store. Week is preparing our dashboard. Here's the dashboard. We can skip this one for now. Here's the dashboard. We'll go through all the setup and everything in the next torial. We'll go and talk about the features on the left hand side that we can use to set up the website. So see you in the next one. 3. Your Website's Dashboard: Back. Before we dive into designing the website, let's take a moment to review the site by menu. This way, you will have a clear understanding of this element, and we can seamlessly turn into the website designing process. So let's start with the setup here. So Week's providing us a few options here, which will help us to start the website. Any of these, if you click on the setup ad product or shipping, it will take you to the relevant menu on the left hand side. So basically, these are quick to add from here, but you can just go ahead on the left hand side and add them. Here a few more other features that Weeks provides us. While many are part of premium plans, we'll primarily focus on exploring the functionalities available with free plan. After all, our goal is to learn website creation and design. So just press whom here option it will show us the option that how many visitors we have had in the website, total sales, and other activity that will happen to our website will show us here. Getting paid, these are the options we have how we get payment from the client. Here, the credit David cars P and Manual payment. We'll go through them later more details. Here we have sales option where all the orders will appear here. Next catalog. Here, the products. These are Temple products, and the inventory, we can manage inventory from here as well. Then we go to the apps. Here the default apps installed. Then app market is where you will find all sort of apps that will help you to improve the features in your website. You can install any of these required for your website and enhance how your website looks or functionality of it. Then we have few other options here, Site in Mobile, where we can do a website ACO, how it appears in Google and other Search Engine. Here are few other options customer ads. You can go ahead and explore them by yourself. At the moment, we are focusing on designing the website. So we'll go ahead and start designing the website. We'll explore these later. So go to home and click Design site. See you in the next one. 4. Blank Template: Lesson, we'll be exploring weeks template options and choosing a blank template to create our website from scratch. Here are two options for designing our website. We can either let Wicks generator design using AI or we can pick a template to customize ourself. Using AI is quick and easy, but picking a template, let us have more control and flexibility. I'll go ahead and select pick a template. Let's dive into the template page. Here, you can see wide array of templates categorized by different types of websites, such as E commerce, portfolios, blogs, and more. I'll scroll through E Commerce template to give you an idea of what's available. As you can see, there are numerous beautiful design templates to choose from. This variety can be really helpful if you already have a specific type of website in mind. We dive into the e commerce template. You will see there are several subcategories. For example, within E commerce, we have options like fashion and clothing, jewelry and accessories. Click Store to see all the subcategories of E commerce. Beyond Ecommerce, there are main categories you might find interesting and useful. I recommend taking some time to explore these categories. Also, if you're looking for something that you can't find on the categories, you can search on the right hand side, search all templates. For example, I'm going to search bookstore. L et's view this one. As we scroll through this template, notice how the design elements are tailored specifically for a bookstore. There's section for featured books, such as best sellers, recommended books. If we choose this template, we'll be able to edit this and make it our own. However, instead of choosing a pre design template, we will choose a completely blank template. This approach will allow us to build our website from ground, giving us the opportunity to learn and customize every aspect of the design. Click blank templates on the right hand side, and then you'll have few more blank layouts here, but we'll go ahead and select start from scratch. Click, edit this site. It will take you to an empty page if you didn't select a pre designed template. If you're someone who selected a pre designed template, that's fine. You can also follow along. But in the next lesson, we will explore how the Weeks website structured are, which is very important. I'll see you in the next one. 5. Fundamental of Websites Layout: Hello. Welcome to this tutor on website structure. Today, we'll be diving into essential components that make up website layout, ensuring your website is well organized and accessible across all devices. A well structured website typically has three main sections, the header, the body, and the footer. Each of this section plays a crucial role in overall user experience and helps keep your content accessible regardless of the screen size. First, let's briefly discuss what each section is and why it's important. The header is the top section of your website. It's usually contains your website logo, navigation menu, and sometimes a search bar or contact information. The header remains constant across all pages, providing easy access to key navigation element. The body is the central part of your website where the main content resides. This section can be divided into multiple subsections such as articles, images, video, and other multimedia content. It's where visitor can spend most of their time, so it's crucial to keep the engaging and well organized. The footer is located at the bottom of your website. It is typically contains additional navigation links, contact details, social media icons, and legal information such as privacy policy or terms of services like the header. The footer is constant across all pages. Now, let's analyze our Weeks web page. If you are following me, by now, you will have an empty page like this, or if you choose a theme, you'll probably see these dotted line. You will see that we have a header and the main body part, and then we have a footer. In our weeks website, we have to make sure whatever the content we put, it should be within the main dotted line, the middle two dotted line in the website. This is because of the screen size. If the user who login to your website or visit your website, Use a different screen size than the one you are using at the moment. They will have a different view if we keep our content outside of this dotted line. We have to make sure whatever our content, it should be within this dotted line, these two dotted line. However, we can still use the space outside of the dotted lines. I'll show you how you can do that for the larger screen in the upcoming lesson. I hope this lesson was easy for you to understand how website structure works, and I'll see you in the next one. Thank you. 6. Menu Set Up: Welcome back. So in this lesson, we will edit our menu. Before we do that, we need to get rid of this code here. This is pairing because of the online store that we selected. So if you click here on the page left hand side menu, and then manage pages. What I'll do, I'll delete this shop page, delete store. And then you'll see the other page will disappear as well. We're going to set up this website for a imaginary photographer who needs to show their work as a portfolio and needs to be booked by the visitor. So this will be a booking system website. So let's see how we can do that. So let's build the menu first. So we need to add few pages for us to show the menu properly. So manage pages, then add page. We're just going to use plank page from here. And then let's give it a name. Gallery. I'm just going to add 12 more, blank page, then we're going to use. If you want, you can choose a different menu tie pages. I'm just going to use about us. One last page, let's say, let's give it to For example. Our team. So we can change this name later on. You can just click on this page, click on this three dot and then click name. Okay. Let's now click this and then click on the plus button here. And then you will see Menu and Anchor. Click on this. Here the menu we have that weeks providing us. So from this, we can choose one. I'm just going to choose a simple one if you want, welcome to use any other design. And then we are going to drag it to the our header section. So I touch it to header. I'm just going to make sure it's placed at the middle. You can see that the lines will appear here. Okay. Okay. This is our menu. So now let's move to the next lesson. Where we'll be designing our home page. 7. Home Page Part 1: Okay. So we'll start editing this section, one of the main section of this web page. Before we start, we are going to upload some media. If you don't have any media, then it's fine. You can use a free media viable from the weeks. But for the moment, I have some media that I will upload. So you can click on this image, but on the left hand side, then upload media. Then I'm going to choose it from computer. Once you uploaded your data, it will show here. I have downloaded these images from n Splush, which is also available here. From here, you can get images search are, and Also media from weak, Shutter stock, you have access to all these. But just for the tutorial purpose, I have uploaded all this file so that it easier and quicker for me to upload the images to the website other than just randomly looking for the images. But as I said, all these are freely a album from Splash. I've just downloaded from the Okay. Once you uploaded all your data, then cross here. So we're going to add an element, click here on the left hand side, strip. I'm just going to drag this one here. Okay. So I will now change the background of this click change background. Then I'm going to go to select image side file. I'm going to choose this one. Before I choose this one, I'm going to adjust a little bit, make the brightness a bit less, increase the contrast. I'm going to save it. Once you saved, click change background, this will appear here. I'm going to adjust the size of this a bit more. As you can see, this is already stretched for a full screen. If you press here, you'll have a option to keep it stretched or within the page. Since it's a big image and the main subject of the image also covered the dotted line, I'm going to keep it stretched. I feel like I am going to adjust a bit of brightness of this image. For that, you can click on change background and then click on this dotted ones and just going to make a bit darker. That's all. This is because I'm going to add some text on top of the image. To make it make the text a bit clearer. That's why. Now I'm going to bring the text. Click on this add element. Click text and if you want you can choose from here as well, the text format. I'm just going to choose one heading two. Once you are here, you can click edit text and customize the text. First of all, I'm going to make it a bit smaller, 36, then change the color of the text to white. I'm going to change the style. Sorry, and not the heading style. I'm going to change the front. I'm going to choose L to light, for some reason, color didn't change. I'm just going to save it again white. Okay. I will add some texts in a bit later. On a moment, I'm going to bring add a button as well. Click on this plus button again, click button, and I'm just going to drag this button here. Change the color and the style of this pattern, so you can click on the design. If you like to choose another one, you can go ahead and select the one. For the moment, I'll choose this one. But I'll Probably, I'll go ahead. I'll actually choose this one. It goes with our color in the background. Change the text of this button to double click on this button and it will come here. I'm just going to write a book now. If you want, you can change this icon are, and click on this one. That for this, you need to upload a file icon file. If you have one, then you can upload it here and choose this one. For the moment, I'm going to keep it as it is. So I'm just going to add some text here. Probably if I bring this in the middle, right here, make it a bit bigger. Bring this right here. Try to position it at the center. I'm just going to adjust to align it to the middle. This goes a bit left on here. Maybe we can place it at the middle as well. I'm going to make this a bit bigger. We get the full picture. You can adjust however you like it. Now we have this first image. And if you click, this button is not working at the moment. I just here. If you click on preview, you're to see how it will look for the moment. This is the only content we have uploaded to our website. Let's go back to Editor. 8. Home Page Part 2: Hello. In this tutorial, I'll show you how to add another section to the home page. This new section will showcase a few photos with a button linked to our gallery page. Let's get started. First, hover over the existing section of your home page, and you will see an add section button appear. Click on it. This will bring a menu on the left hand side of the screen. Scroll down to find the gallery option. Click on it. Weeks offers a variety of gallery template. You can choose any template that fits your style. For this two tool, I'm going to choose this one. Just drug and drop it to the desired section of your page. It might take a second or two to load your website. Once it's there, we can start customizing it to fit our needs. First, let's addit this text. Select the text and click on Added text. Here you can change the size font and the style to match your rest of the website. Next, to see how it looks, I'll stretch this section to fit a larger screen. It seems this template doesn't look great on larger screen, so I will keep it within the dotted lines for now. Now, let's add a button at the bottom of this section. To match the style of the page, I'll copy the button we have at the top section. Then select the new gallery section and paste the button here. Perfect. Now we have the button for visitor to click on this. Next, we're going to customize this button and link it with our gallery page. Click on the button, then click on Settings. In the setting menu, change the button text from book now to gallery. You can link the button with an external website or another page on your website. For this tutorial, I'm going to link it with our gallery page. I'll allow the user to open it in the current window since it is our internal web page. If it was an external web page, then I would have clicked on the new window. Now, let's change the media that we have in this gallery section here. Click on the page and then click on the Media Managed Media, and then you can keep these or you can add your own. These were the pictures that I uploaded earlier. If you want, you can choose from the ones you upload you by yourself, your own media, or I'm going to show you how to use other websites such as Slush Splush. Here are the pictures. I'm just going to randomly choose a few of them just to show you how it works. So you can go ahead and select the ones you like. You can use control or command to select multiple ones. Click on it and press command, hold, and then select the other ones that you like. After selecting the media, after selecting the media, click Done and give it one or two second to load this into your web page. Now you can see that we have uploaded our pictures to the small gallery section here. Now we will make both sections seamless, connect them together. First, I'm going to change this text from black to white color. Change it to white, and then I'm going to change the background of this new section. Click on this section, change background, click color, and then I'm going to choose black from here. Now you can see that the text looks more visible. Then adjust this page. With the top section. Make sure that you are adjusting the page with the top section so that there is no space in between. That's it for this tutorial. Don't forget to say these changes. If you see one of these pop up, ignore it for now, go ahead and click on preview to see how it looks. If you need to adjust any section or anything, you can go back and watch this tutorial again where you need to. Then that's it for now, see you in the next one. 9. Website Footer Background: Let's change this footer from this to this. In the next few tutorial, I'll show you how to create this amazing looking footer for your website, including e mail subscription, all social media links, and all other essential links. Let's dive in. Select the footer section and click on Add element. Go to the stripe and go to classic, then drug the black color stripe. Adjust it with the top section. Then click on Change Background. Click on color, and we're going to select the gradient color picker. Go to the middle one. I'm going to add one more color here, and then choose it to black. I'll do the same for this one, select on the right hand side one and change the color to black. I'm going to adjust the left hand side degree to zero, which brings the color at the bottom. You want to can play with it and see how it looks. I'm going to try to see how it looks with this one as well. It doesn't look that great, I'm going to leave it to 100. I'm going to go ahead and select the left hand side one again. Change it to a different color. If you want to can leave it to this one, click on plus and then change the color however you like. Once you're happy with the color, I'm going to leave it with the bluish purple, click on a ply and then cross this tab and you will see the footer background. 10. Footer Text : Let's quickly add this text to our footer section. Go ahead and click on add element and then go to the text. Once you are there, you have lots of options to choose the text style phone style. I'm going to go ahead and select the heading five from here. It's up to you which one you like, position it at the middle, try to position in the middle. And go ahead, click on added text. Change the phone size. If you need to change the heading or the phone style size as well, whatever you like to. Then go ahead and type what the text you'd like it to be here. Remember, we're going to add the text for our e mail subscription box. If you want, you can write something like subscribe to our e mail to get weekly update, or you can write something like offer, join on community and get 15% off in your next booking, something like that. It's up to you, whatever you like, and then go ahead, click on alignment, select this one, and then position your text how it looks and fits your website and try to position it at the center of this. That's it. I. 11. Email Subscription Box: Let's make this email subscription box. So go ahead and click on Ad element. Once you're there, click on conto and Forms and go to subscribe. F you're there drug one of these form and then position it to the middle of the footer section. Once you position it, give it a couple of seconds to load to your website. Once it loaded, click on it, and then click on edit Forms, it will take you to Dashboard and load the form section. Once you are there, you can delete and keyboard what you like. I'm going to get rid of these. I don't need to because as I already put the text up on the foter section. If you want, you can get more field if you require for your website for your needs, all the details, phone number, first name, last name, address, whatever you like. There are a few more options available. If you just scroll down, you'll see a couple of more options you can choose from there as well. For now, I'm just going to keep the e mails box and get rid of everything else. I'll show you also the subscribe e mails will be here. All subscribe e mail will be here. I'm going to just go ahead and click on Save. And get out of here, and it will take a few seconds to load. Okay. Once it loaded, we'll go and design the website e mail box. So click on setting, and then I already created another form without clicking record button to record this. Now, follow this three simple step. Go to design and click on Form background, and once you change the file color and opposite to zero, We have a transparent background, and then if you want, you can play with other options, see how it looks. I'm going to go to step number two, so go back and click on Foam fields. Once you are there, change the corner radius to 28 pixel and just scroll down a bit more, and you can change the field title style and color to white. So you'll see its e mail is visible hair. So once you did this, step number three is to go to button, and this is our subscribe button. So once you're there, change whichever shape you like, I'm going to keep it to round, and then color city, I'm going to make it 100%, and then go ahead and choose the color that you like or you've been choosing for. Then also, I'm going to choose the parple color for border. You can choose white color, also goes well with it. Then also, I'm going to change the phone style and text color. Basically, it's the subscribe button that text, so I'm going to change it to white so it's more visible. Now go and close this because we are missing one more thing from the forms that we need to add. So go ahead and click on Edit Form again, and as it's going to take you to dashboard. Once you there, click on the e mail. And then when you select, click on setting, and then add placeholder text, click on it. So this is where you can write something some sort of instruction like sign up here or e mail here and save it. Once you saved it, you see it will come here as well, sign up here. Then adjust your subscription box, however you like it. However, it fits your footer section. One last thing you need to do, click on Subscription box and click on setting. Once you're there, go to design and submit button. And then Hober section, you will have border color and opacity change the color. Once you change the color that stand of the tutorial, you might need to go back and forth to complete all the steps. If you run into any problem, please let me know under the discussion section. I'll get back to you as soon as possible. 12. Social Links: Tutorial, I'll show you how to add social media links and other important links with horizontal line and finish with our footer section. Let's get started. So go ahead and click on Add Element. Go to the stripe, get the classic stripe, the one we're using. And then now you're going to remove the stretch. So you're going to make it page. Okay. And then we are going to adjust this. Bear in mind that when you're adjusting this, sometimes it's a bit hard to adjust if you are adjusting from the bottom because sometimes weeks automatically select the bottom portion of the website. So in this case, you can see that I'm adjusting it adjusting with the photo section and the stripe as well. Once you adjusted the footer with the stripe, then click on change background, and then you can go ahead and choose a different color. In this case, what I'll do I'll go and click on settings, then remove the opacity 20. And then click right click and then add a column. Once you add a column, there will be two section here. Then what I'll do, I'm going to add while it's selected, I'm going to click on Add element, and I'm going to bring a text format here. I will just bring a normal one, but you can choose whichever you want. I'm just going to choose a random one because and I'm going to change, but you can bring a different style that matches with your website. Then adjust the text because we're going to write the social media name, such as TikTok, Instagram, Facebook. What I'll do, I'll choose a different front here. I'm just going to choose a different one here. If you want you can choose the same one and adjust the front size to 16. Actually 16 looks a bit bigger than what I'm expected. I'm going to change it to 12. The meantime, I'll also change the color to white. So after that, I'm going to copy a couple of times the same text box. So just control C, control V, copy them a couple of times because we have the same style format as well, same size for the all social media links. Once you did that, you can just select each box and write the social media names that you have or that you would like to add. So you can see it just speed it up this section to add the social media. Once you did this, you can click on tech edit text and go ahead and click on the link, and then you can choose web address. Then here is what you need to write is your social media link, such as instagram.com, then your user name. Whatever the link of your social media, it could be Linkedin and other website as well, depending on what type of social media you would like to add. Once you do that, go ahead and do this for the all other social media. After that, we are going to work on the right hand side. So I'm going to go ah and get the same, text format from the right hand side. I'm just going to copy the U tube here and then bring it here because and then I'm going to do copy paste adjust them on the right hand side. Then same, I'm going to write a few more text here and also get rid of the link because we don't want to direct them to UT. So these are tons and conditions that you will have once you create tons and condition pages, and you can link them here as well. So otherwise, you can just leave them empty or without getting rid of the link from hair because it's going to take you to YouTube. After that, I'm going to adjust a little bit of these because the stripe is a bit bigger, and then bring them on the right hand side. You can adjust however you feel like as long as are in the middle part of the footer section. I mean, the dotted ones. Then I'm going to go ahead and click on decorative. From there, you can choose different sort of decoration if you have something in your mind. I'm just going to bring a simple horizontal line. Bring it down, and I'm going to adjust with the footer section. You can see that if you want you can design different or you can customize the design as well. You change the color. Change it to white and then I'm going to just expand a little bit more so that it covers our footer section. Then I'm going to bring again a text just to write the copyright 2024, something like that, that you see that reserves the right of the content and everything that you have on your website. I'm just going to type it again. I'm going to bring it to 11 bit smaller than the ones we wrote and then change the color to white. Then I'm going to go ahead and type Once you type this, to be honest, I can change copyright to the copyright symbol. Go ahead and just search copyright symbol on Google and copy the first one and you can just paste it here. So that it's a bit simpler and it looks a bit nice. That's it for now, and I'll see the next one. 13. Common Page Templates: So far, we have created our home page, and we just finished with our footer section. The footer section remained consistent throughout the whole pages. If you go to gallery page, you can see that the footer section is still remain same. However, the main body part is not completed. And if you go to other pages, you can see that it's the same. So in this tater, what I'll do, I'll show you how it can add content to the body section. But the quicker way, you don't need to start from the scratch. Obviously, if you want to can start from the scratch as well, and you can go ahead and click on managed pages. Again, then you can click on Ed page. Here are the templates that are available from Weeks. All these templates are typically available in all the website that you visits. These pages are such as about us team or contact form. Obviously, if you want, you can go ahead and click on blank page, this will create a new page for you and you can see that the footer is still available to a new page. You want to can keep it and add it however you like it. Otherwise, I'll show you how you can add the preset. You can go ahead and click on add page again, and then select the one you like. Go ahead and click on add page. Once you do that, it will take a couple of seconds to load. After you load it, you'll have the name. You can see that we already have our team page. What I'll do, I'll write this one as our team, and get rid of the existing so you can select and delt. Now you have our tam page and then in the next tu, I'll show you how you can customize this. 14. Customise Template: Let's start customizing this page. So first of all, we don't need this unnecessary section, so right click on the bank base and then click late. Next, we are going to change the background of this section. So before we do that, I'll change the text color here, meet the team, and then just choose a different color for now. I can choose white color or different ones. I'm going to leave it to purple for now, I'll change it later. Click on change background and go to color after that click on black. So once you change your background color to black, you see that the page is going to be look so much better with the photo section as well. If you scroll down, you can see that how it matches with the photo section. It brings a very smart design. Next, we're going to change the background text color of the container. All these container are connected, their group. So if we change text color to one, it will automatically change the text color to other side as well. If you want to can leave highlight to the founder and CEO, the position of the team member or leave it as it is, and once you to change the color. Why am I changing the color of this text in this container? Because I'm going to change the background of each container, that's why and I'm going to change it to black. So after that, let me show you, click on change background. Once you change the background, it will change on the selected one. Then you can see that the social bar has been disappeared. So we'll do set click on this and replace the one because it doesn't look good and add one more as well, so click on add icon. Once you do that you have almost of them, all of them almost. Then select the one missing or select the one you like to add. I'm just going to add TikTok, and then obviously, you have to add the link to your TikTok page or whichever icon or social d that you choose. After that, we'll click on done. So now I'm going to replace these images because they are black, so we don't need that here because it's disappeared on the page. So go ahead and select the ones that looks better. Probably for your website, the ones already there, it looks better. However, if you choose a different template, not choosing this one, then you will have similar options as well. So they're not very different. So you can still watch this tutorial. So you can see that this has not changed in all other container. However, we don't need all these containers. I'm just going to click on manager item and then delete the last three containers. Obviously, depending on your team or depending on the purpose of the website, you can leave or add more. Now I'm going to change the text color to white to match the color, the theme of this web page. There's a way to change the background of this person. So I'm just going to show you how Weeks has its own studio photo studio that you can use to customize your website. For example, let's cut out the background of this person, so basically it will get rid of s, and then we can. After that, click on save, once you save it, it will take a couple of seconds to add it to your website depending on your Internet speed as well, and it will load it. So you can see that it has changed. I'll show you in other ones as well. Let's change this one as well. Change background, and then you can click on to black. So I'll do the same for all of them. Now, the social bar, we have two copy. So if we copy and paste it on top of that social bar existing one, you can see that it's already there. Then we can delete the existing social bar, so we can just delete. Once you delete them, you already have the one that we customized, and then you can use this one for the social bar, and it will get reflected all over. So I'm just going to change the background here as well. Once you do that, I'll show you how you can edit this image to a different background. So go to support a Studio, cut out, and then it to automatically remove the background, and then you can choose the same background, or you can choose it to different colors as well. Also, how you can change different image. Click on change Image and then choose the image that you like to add. So I'm going to choose this image on this page, and then crop and edit it as well before I Now I'm going to make it a bit smaller, trimming down a little bit, the way it looks better on the web page. Once you save it, it will automatically load in your web page, choose the image, and use its difference look in. So this is just to show you how you can edit these pages. I'm going to do same for other ones as well, I'm just going to change the background so it doesn't create a contrasting effect on the web page. To finishing all the edit, just click on preview, and then you can see how it looks in your web page. So this looks pretty good. To me, obviously, you can go ahead and edit more and customize it more and you can click on publish, and then you can click on Dw or you can visit the site. 15. Booking System Set Up: I'll show you how you can create the booking system where a client can go and book a call with you or any other appointment sort of booking. So let's get started, and this will allow you to make all sort of bookings that you like. So in the last tutorial, we just created our Tim page. So our tim page was just a way to show you that you can still use the templates that are available with the wigs. So you don't need to make our tim page. We just for the purpose of showing you how you can add or content in your website. So for this, we are going to click on M business on the apps section on the left hand side, and then go click on Find Apps. You might see one apps or two, and then click on Weeks booking. It might take a couple of seconds to load. Once the page is loaded, you'll see a new page called book online and a couple of template services here. So go ahead and click on managed services. After that, this will take you to dashboard where you can edit the services. There are a couple of templates that already provided. You can start from the scratch or you can go ahead and click on edit. If you start from a template, it will help you to design your own one because these are p a customizable 100%. In this service page where you write all the details of the service you are going to provide or the call is about, so go ahead and name it, and then you can write a tag line and a description. So it's say definitely write a description where you describe what is this call about, how this coll will be structured and how this call will benefit the client. Can pose and read the description where I wrote here. Next, we're going to change the duration of this call. So it's up to you what time you would like to set. I'm going to choose 30 minutes here, then price and payment. So for this, you can use different price and plan. But for now, I'm going to choose pssion and price type. I'm going to keep it free. Since it's the first initial consultation, Next, choosing the location obviously, if you're meeting someone physically, you can choose the location. However, adding video conference will require you to have a premium. So let's click on save showing you if you want the complete package of online blocking system, you need to get upgrade the plan Weeks plan. So here, if you go down and scroll down to the section adding video conference, it gives you a Zoom, which will automatically create the link. Or if you want, you can use another option such as Teams Mcmsof Teams or Google Meat as well. Next, stuff section, you can add one more person who can take care of the booking or take the calls as well. If you want, you can also add a cover page of the booking, so you can go ahead and click on the picture that you'd like to add. Just click on it and you don't really have to. I'm just showing you that the option is available. Also, you can add more pictures of the service that you are providing if that's require. The booking policy, I'm going to leave it as it is, different policy. Also the booking form, I'm going to leave it as it is, and also booking requests, you can manually accept them or automatically accept them, depending on the service you we're going to provide. Maybe not every all of them are going to be able to accept online if there's a high volume. So next when you click Save, it will take you the service page service one, and it will show you that service is there. Also when you go back to book online page, you'll see that the recently created one is there. So that all other ones were here that gone. Also, you notice that there is two new button here. These are automatically with the booking apps that is provided by Weeks. Normally, you don't need to do anything. There is a logging system that is only provided for the who are visiting your website and also the card when they book or book a call, something like that, and if they need to pay for it, something that confirmation sends to you and them as well. So for that, you don't need to do anything. So go ahead and click preview, and then you can see that book online and this page is ready for you. So one more thing we have to do here, the book now button in the home page. So for this, we are going to go back to it back to editor, and then we are going to go to page home. This button which we have left without adding any link. Now we are going to add a link with this button. Click on the settings and then choose a link. Next, we'll s s the page, and then we're going to choose the page here book online. So this will sa the clients or visiting your website to the book online page where they can book a consultant. 16. Booking Calendar: See how booking calendar works. Go and click on Booking calendar, and then you might need to set up here. Click on set of services, which is already done. Don't know why it's showing. And here you will see all the services that you uploaded or make it before you came to this. And then you need to go ahead and create more services if you want to. Otherwise, go to Booking calendar, it will be showing here now. All will be showing in the calendar. Also, you can have a list view sorting with the time and everything, and the work schedule of the staff member. If you want, you can add more staff members for editing the stuff. Profile, you can click on ad profile, and then we will see that you have options to update this profile, this staff members profile. So you can go ahead and describe what they do add their e mail address, phone number, whatever you'd like to add, and also a image, not only for the clients in the website, but also for you, and also the permission to manage the booking for themselves, the staff member who is working you. C added their time as well, so you can scroll down and see that working hours. Let me show you how you can change it, so you could click on that and then I'm going to chose six to 9:00 P.M. On Tuesday. So now this will set. If anyone would like to book this person, they will be able to book on Tuesday six to 9:00 P.M. And then if you want, you can go ahead and click on ad services to see if you'd like to add more services, different types of. At the moment, you don't really have to worry about this too much, learn how to do the basics. 17. Create Gallery Page: Let's get started with our gallery page. So you can see that this has been a beautiful website so far. This is what I've implemented. I will show you how we can add this to your website as well. So let's get started. So go ahead and select the gallery page. And then you are now going to add element in here. So click on Add element here. You can see that Weeks has been changed quite a few. So you can click on Add element here or the plus butt on the left hand side. Then go ahead, click on gallery. Roll down and see which one fits your website. I'm going to choose the one very basic and has some elements that is common in all them, so that will be easy for me to show how it works. Choose this one. So you can see this has all the pictures and each picture has its own description name and everything. I'm going to click on setting, go to the color and show you that if we change back black, all the text and description has been disappeared. However, we need to make sure they are disappeared, not just because of the color, there has to go from here. So if we go to the settings and design, then click on text. Now here, you can style how you'd like the text to be. So I'll show you if you click on a ob, it goes above the description of this image, and you can see pretty much that this does not look really good. So I'm going to change the color to white so that when we change the background color to black, it is visible. So the next is a description color as well to white. You can see that we can't see right now. But what we'll do will change the background. So go ahead and click on change background, and then color. And then go to the select the color black. You can see that it looks beautiful now, we we will end up ting the description. Now you can see that the gallery page does not really look that stylish when to add few more good pictures that goes well with the website. And then here if you want to remove, just click on three dot, click on Remove, and then add the ones you like. I'm using n plus to add some pictures. You can see here. So go ahead and add your ones as well. You can also add individual picture with a title description and a link. So if you want to do that, you can just go to manage and then here, select the pictures, and then you can just add these details. For the purpose, could be linking with your social media or any other Once you're done, you can just click done. So go ahead and click on settings to get rid of this text and description. So Design and then click on text. Now tick this title and description. If you want, you can keep them. Is depending on your website. I'm just going to leave them. Also you can stretch and see how it looks. You can leave it because it looks better. However, for the purpose of all the screen size, I'm just going to leave as it is here without stretching. Now we're going to say this and then click t. Click preview to see how it looks. It looks really nice to me. If you want to keep it stretched, it's up to you, which looked good as well. And now what we'll do we go back to Home page and make sure that the bottom that we use before to go to that page is correctly linked. And next, what we'll do, we are going to preview again. Then publish. So this is your domain here. This is if you give it to anyone, they will be able to have a look at your website. So this is what we have done so far. So the gallery and images here you can see that. We lapped them before. We them, so people can see this and click on this button here, and then they can go to this page that we just created now. Here, they also can just see the pictures. The main goal was to create a portfolio sort of thing. So having this gallery page is very important. Online, this page does not really work, so because it is functional, you just have to make them upgrade the plan so that you can fully go through this sort of whatever we have done, it's good. And the logging, also, you can see that ik handles them. And here is our team page that we have created. Let's try to add an e mail here. We're going to randomly add an email subscription to see if it's still working functional. Just going to write hello at mis.com subscribe. And I'm going to go back to dashboard here. Then go to customers and leads and then contacts. You will see your e mail appears here. That's it for this video and I'll see you in the next one. 18. Mobile Website Design: After watching this, you'll be able to load your website on your phone. So let's go ahead and create this beautiful website. You can see that it is suitable and customized for mobile website. So now, just follow the tutorial. It took me 15 minutes, but it shouldn't take you longer than 2 minutes for you as well. So let's go ahead and click on this mobile version here. This will take you to this site, where it initially provides you with the layout that's not very suitable for mobile users, but probably your one looks better than mine, and you need less work to do. I'll show you a few examples how you can customize them and see how it looks. So you can see that it also provide as a preview version with the phone as well. And if you scan this code at the end of this tutorial, you'll be able to load your website into your phone, but you need to have website published. Okay. So let's back to editing. Now, what we'll do first? Obviously, we need to make this text a bit smaller. So you can click on A minus here, or you can just double tap on top of the text. It will give you a menu where you can customize as well. So go ahead and just adjust how you like it. Next, we are going to adjust this button. Before we do that, we need to make the image a bit bigger, so click on that arrow and then drag it down. You obviously need to experiment with your own website how it looks on a phone version. This is just a few tricks that you will help you to do that as well. Now click on that pen button, then go to the text, and you can also change the size of the text. And then I'm going to make it bold and you can just adjust and position the button in the middle. There are other options you can explore as well. Now, next, we are going to change this text size as well, and then hear the important part. So you can go ahead and click on settings and then you'll come up with this layout tear and choose slider hair. Next, also just adjust this button, the way you did it for the other one. So you can see that there's a space in between both section. I bring the top section down, it will make the space more. However, if you take that bottom section up, the footer section, it will cover the blank space. Next, go ahead and adjust this text as well, the way you did the previous ones. I can also explore how it looks. Now, this is the important bits with the photo section. What we need to do, we need to extend a little bit more to see if we are missing any element that it's not covering are. After that just adjust and you can see that how it adjust, it's very self expedatory. I'm not going to waste your time, just going to speed up this section. Then I'll also do the same for this column. There is two column that you can see. I'm just going to adjust this bit as well, and then we can bring one column here. Bear in mind Weeks mobile site editing has very limited options, so all the tricks are reasonable for your own website. Next, what we'll do, we'll go ahead and reduce one more column. So click on manage column and hide it. That's it. Now, what we'll do just drug this a bit up and then adjust it with the website. Next, you can see that the card button here that I have placed in the wrong site, and then it show us where not to put, give us an advice. Then you can click on that card and then position where you'd like to. Also, you can just drag and drop from the bottom to make the menu size, however you like it. Next slick on add element, and I'm just going to show you how you can add a logo or something that you would want to write on the blank space of the menu. You just need to you can add your own pictures or whatever the logo you have for your own website. I'm just going to drag this one here. And then also I'm going to show you that you can link with the page home page over so click and then page, then you can just choose home page. So even if you go to another page, they can click back the logo and come back to Home Page. Now, also, there is some space for a logo, sorry, text. And if you want, you can just click on ad and then here, you're going to drop and drop one textile that you'd like to add. All the tricks to asable, as I was saying before, because Weeks has very limited option for mobile sites. So almost all of them, you can use a little bit of tricks and your own creativity to make a bit better version of your website. Next, what I'll do, I'll go ahead and get rid of this cut button here, click on it and then hide it from the left hand side. And after that, that's almost everything done. You can go ahead and click on preview. And you can see that all the pages are here from the right hand side, and also the login option has more about options. As I said earlier, go ahead and click on the QR code and load it on your phone to see how it looks and how it feels on your phone. 19. Getting Paid From Wix.com: Here is how you get paid from wicks.com by selling your product or services. Wik takes all responsibility to connect all the payment provider all over the world so that you can get paid from anywhere in the world and connect with any clients without having any problem of payment. But starts with going to the settings, then click on accept payments. Once you are there, you need to make sure you choose the right country, it could be for yourself or for your clients. Make sure you have the right county to choose. Here, if you click on Connects, you will be able to connect with all the major cardholders. Make sure you read this list if you're selling one of these product, you on be able to connect through this. You have to choose Yes, and then can I. But I'm going to choose no here and then accept and continue since I'm not selling any of this product. Obviously, you have to upgrade the plan to accept all the payment, just like the booking service. Here, Apple Pay and Google Play also included within the plan, and also you can click on Pap Connect. You just need to add your e mail here, e mail address, and you can click on Connect Paple email, obviously. I can read the instruction here as well. Also, you have option for manual payments, such as I can provide instruction how someone can pay. If we go back, there are a few more options I would like to show you. So you can cancel this obviously in a Connected paper here. So go down and click on Smre payment options. Here are the options that third 30 options or probably the options that you have available in your country that you're watching this su from or the one may be convenient for you. You can see that all sort of payment options are available. You can click on third party, if you don't like to use weeks provided one. So these are the third party ones, you can go ahead and click. The ones that you like. So of is one of the popular one in the UK stripe as well, and you can go back here and click on Complete setup. Here you provide the business and all the details that the payment will come to your account. Obviously, the payment method I just showed you is to receive payment from the client and to receive payment in your and it should provide all the details here on this page with your bank details and everything so that you get paid from the weeks that which collected from the clients or the customer that you sold the product. You can click and submit and the weeks will have your information where they can send your money. That's all for this staterial.