Metics Media · คลังวิเคราะห์

Wix Tutorial for Beginners - Start Here

📺 ดูคลิป · 👁️ 350,368 views · 📅 2022 · ⏱️ 52:53 · 🌐 Websites / WordPress / Hosting / Builders

📌 สรุป

คลิปนี้สอนวิธีสร้างเว็บไซต์ด้วย Wix ตั้งแต่ศูนย์แบบ step-by-step สำหรับมือใหม่ ครอบคลุมตั้งแต่สมัคร Wix, ใช้ Wix Editor สร้างหน้าเว็บ (header/strip/footer), เพิ่มหน้าและเมนู, ใส่ฟีเจอร์ Booking, ปรับ mobile view, ตั้งค่า SEO พื้นฐาน ไปจนถึงการ publish และผูก custom domain ตัวอย่างใช้เว็บ fitness coach เป็น case study ตลอดคลิป

🔑 ประเด็น / ขั้นตอนหลัก

🛠️ เครื่องมือ / บริการ / ลิงก์ที่พูดถึง

💡 เอาไปใช้ / ข้อสังเกต


📄 Transcript เต็ม (English, 10,229 คำ)

in this week's tutorial i'm gonna take you through step by step how to build your own wix website from complete scratch we're gonna cover every single step from signing up to wix to building a website from a blank template and then publishing that website on your custom domain so if you want to build a personal website for yourself a website for your business or you want to build websites for clients this is the perfect video you need to watch so the first step is to go to medicsmedia.com forward slash wix or simply click on the first link down below in the video description this will take you to the correct signup page where we're going to start the tutorial and a quick tip if you get lost at some point in the video simply hover over the progress bar and this is where you're going to find all the chapters so here on the signup page all we got to do is type in our email address and click on start now then here we gotta set our password for our wix account and then click on sign up and then wix wants us to answer a couple of questions about what kind of website we want to build however that's mostly for them getting to know their customers a bit better so we can actually skip this process to save us some time by clicking on skip on the bottom right side of the screen and then we need to decide on if you want to use the wix adi to create our website or the wix editor now we're going to use the wix editor because we're going to create a website from scratch and using the wix editor also gives us a lot more control over how we want to build our website so we're going to click on choose a template right here and now what we could do is choose a template right here where the structure and the design of the website is already kind of made for us and we just need to change out a couple of things and add our own content and then the website is basically finished and i'm gonna have a separate tutorial where i explain how to build a website from an existing template so what you could do is just browse these categories right here or you go to the search bar and type in what kind of website you want to build for example a consulting website and then you're going to find all the templates that are specific to a consulting business website so if you find something that looks exactly what you want to have you can do that as well however in this video we're going to build a website from complete scratch using an empty canvas so we're going to click on blank templates right here and then we could also either use these templates where we already have a structure given and all we need to do is add our content to that structure or we can start from complete scratch using this template right here which is what i'm going to do in this video so we're going to click here on edit where it says start from scratch and that takes us inside of the wix editor where we're going to start building out our website however before we start doing that i want to quickly show you how a basic structure of a website looks like because then it makes the process of building the website a lot easier for you so this is the basic structure of how most websites are built so you're gonna have a header which is on the top of the site you're gonna have a footer and then you're gonna have content in between the header and the footer which is called strips when you use wix so you can add as many strips as you want and you can add as much content as you want to each of the strips so normally the header has your menu maybe some social media links maybe a button maybe a login then on the footer there's some links maybe also your social media maybe a disclaimer so basically whatever you want and then in the middle the content of the page really depends on what kind of page that is if it's a home page usually you're going to have a hero section so the first thing that people see when they visit your website where it should represent your business or what this website is about normally if you have a business you're gonna have to you're gonna have a button so a call to action this could be to sign up for your email newsletter or maybe to um to book a call and then on the other strips on your site you can have whatever you want you can have images a portfolio prices of your product so whatever you want so this is the basic structure and in wix we can simply add new strips and add content to each of the strips which is what i'm going to show you here in this video and it's always good to have a basic idea about what the pages on your website are going to look like before you actually go into the editor and start building it on wix because the building part is actually pretty quick once we know exactly what the page should look like all right so let's go back to the wix editor and actually start building now the first thing we're going to do is upload all the media that we already know will use on our website because this also speeds up the entire process so we're going to go here on the left side menu click on media and then we're going to click on this upload button and then i'm going to upload some pictures that i actually have from wix itself and if you actually want to follow along with this video you can simply go to the video description download all the images that i'm using here and then build the same website as you watch this video so all you got to do is click on upload from computer and upload all of your images once that's done we're going to simply close the window and then go back to our editor so currently the only thing we have on our website is an empty header here on the top an empty footer and basically nothing in between and currently we are on the home page as you can see right here and obviously later on we're going to add more pages to our website so first we're going to start building out the hero section of our homepage which is the first thing that people see when they visit our website so let's add a strip to our homepage by going to the plus sign here on the top left side and this is basically where you can add all the content to your pages we're going to go to strip right here and then we either choose the black one or the white one doesn't really matter because we're going to change the background anyway we can simply click and drag into our canvas and now we have a black strip on our home page we can also adjust the size here by stretching out this trip and we can also go to this little arrow where we can decide on if you want to have it stretched all the way filling the screen or we can also make the page a bit more narrow and then all the content will basically sit here in the middle but i'm going to use this the stretched version for this website so let's change the background of this strip so i'm going to click on the strip and then i'm going to click on change background right here and then i'm going to go to image and look for the images that i have uploaded to wix already now you can also use media from wix or from unsplash or shutterstock which is just stock images that are royalty free that you can use however i'm going to use the images that i have uploaded before so i'm going to go to site files and i'm going to use this image right here and then i'm going to click on change background so you want to make sure that the image that you're going to use for your hero section the main subject is inside of these lines right here so you can see this line and this line and the reason we need to make sure that the main subject is inside of these lines is because when people change the window of the browser or have different screen sizes everything that's inside of these lines will be visible on a desktop screen so that's why you want to make sure to crop the image so that the main subject is inside of these lines and if it's not the case you can always go to this icon right here and then you can simply adjust the image you can basically crop the image right here and also change the contrast shadows and stuff like that so that it actually fits inside of these lines so this is already cropped so i'm going to just leave it as it is however i'm going to drag out my section a bit more so that you can also see the entire head off of her basically so a bit more okay so this looks good enough let's now also add some text so we're going to go to the plus sign again on the top left side and now i'm going to go to text and just drag in a heading to my canvas now i'm going to put the heading basically wherever i want to and wix is trying to help you to put the heading in the in the correct place by having these magenta lines and snapping into an object now whenever you don't want to have these lines what you can do is go to tools and untick the snap to objects feature however i actually like this feature because it makes it very easy to center objects on your website so i'm going to leave it on so i'm just going to put the heading about right here so you might have already noticed that i'm building a website for a fitness coach who wants to offer private lessons through this website so i want to change the heading to something where people know exactly what this website is about basically three seconds after they land on this website so to change the text i'm going to simply click on the heading click on edit text and then i'm just just going to put a train with susan so people know exactly what this website is about and now before we go any further let's quickly talk about fonts because we don't need to change the fonts every time we add a new text on our website we can basically just choose our default fonts which will then stay the same throughout our website so we can click on the site design icon here on the left side then go to site theme and click on text right here and this is where you can change the fonts for each of your headings and also for your paragraphs so all you have to do is go to the heading that you want to change and then you can choose the font right here now i would highly recommend to only choose two fonts one for headings and one for paragraphs so i've quickly created a couple of heading styles and paragraph styles i've used the noidside grotesque font for the headings and proxima nova font for most of the paragraphs and i've also used some headings with italic and bold style just to have some variety for my website now you can use the same fonts if you want to or you can create your own ones and you can also change these later on whenever you don't like them anymore so don't worry too much about what you're going to choose here just make sure you don't use more than like three fonts otherwise the loading time of your website will increase and it will just not look very good if you have multiple fonts spread out through your website and by the way if you can't find the right font here of the fonts that wix is already offering you can also upload your own font so you could simply um close out of this and then go to a text object click on edit and then you go here under fonts and then all the way on the bottom here you can see upload fonts so you can click here and then simply upload your fonts and then you can also use them throughout your website so let's move on with our home page i'm going to do some more adjustments to this text right here where you can see the font already changed to my default font for this heading so i'm going to click on edit text and i'm going to change the color from black to a white and i'm also going to change the spacing right here so i'm going to go to character and line spacing and go from 1.4 to a let's say 1. okay so that looks already better now i can also just drag this out a bit so i have train with next to each other and now for some reason it changed my section height again so again i'm gonna need to stretch that out like this okay so this looks pretty good let's add some more text so again we're gonna go to the plus sign go to text and now i'm gonna drag in a heading five and i'm gonna put it in position here let it snap in i'm going to click on edit text change the color to a white again and now one feature i want to show you if you don't know what kind of text you want to add so what you should write on your website you can use wix's feature to get some ideas about what you want to write on your website so let's try that out let's click on get text ideas and then you can type in the kind of website that you uh want to build so for me this would be fitness coach and then you can see different types of text so let's try the about text so i'm going to click on create text and now it's generating me some text ideas of what i can put on my website so here for the titles option one your body the way you want it making fitness fun and so on you can also have entire paragraphs right here so i believe in a healthy lifestyle blah blah blah so this is just some generated text that you can get some inspiration from of what you can put on your website i think it's a pretty fun feature so let's say i'm just going to use this one your body the way you want it use text and then just going to put the text in right here i'm just going to adjust this a little bit like this and that's fine so let's also add a button so we're gonna go to the plus sign again go to button and what i like to use is these theme buttons right here because they will just use the style that you already have on your website so whenever you want to change your design later down the road then you can simply change the theme and then the button colors and the theme of the buttons will also change automatically which again saves you a lot of time so i like to use these buttons right here so let's drag in a button like this let's put it into position we can also increase the size a little bit let's click on change text right here type in start start here and you can just play around with it a bit you can click on layout right here you can change the text right here maybe you want to have it as a different theme maybe the text a bit bigger you can also change how it looks like when people hover over the button and so on so just go through these options here and then change it to whatever your thing looks the best for your site i'm just going to leave it as it is for now and whenever you add a button you need to tell wix where that button will take people to when they actually click on it so when i click on this button right here then i can go to this link icon and here i can tell wix where the button takes people to so you can either go to a simple address on the internet or you can go to an anchor which i'm going to show you how to do this later and to the bottom or to the top of the page or what you mostly want to do is just take people to another page of your website so you want to select page right here and then here you can choose what page people should go to when they click on the button however currently we only have the home page so let's see how we can add some new pages on our website so to add a new page on our website we simply go to the left side menu click on menus and pages and then you can see the only page we currently have is the home page so here on the bottom we have a button called add page so we're going to click on that button and then we can decide on what kind of page we want to add so again like with our website there's a couple of different templates that you can choose from where you already have a pre-built page for you and you can basically just choose or you can just replace all the content you can go to different categories here services projects and so on however we're going to simply add a blank page right here and then add all of this stuff ourselves so i'm going to click on blank page and now i have a new page on our website here we can name our page so let's name this page private uh session click on done and there we go and now we can choose um between our home page right here and our new page that we have just created so whenever we want to edit our private session page we simply go here click on private session add our content adjust our content and so on then we can go back here to the home page and keep working on our home page so i've now added a couple of more pages to the website and here is also where you can rearrange the order of these pages so the first one will be home then let's say i want to have the second one the private less private sessions so i'm just going to drag this under the home and then pricing and plans and about then contact so that's fine and this is also the order that they will show up in the top menu of your website and now we can come back to that button that we have added before and link that button to the new page that we have added so when we click on the button again then on the link icon i can now choose what page that button should go to so i'm going to choose the private session page click on done and now we can actually see if this works so let's go to preview here on the top right and now we can actually uh try this button so we're going to click on it and now it takes us to that new site which obviously there's nothing on yet so this is why we only see a white canvas but the button does work so we can click on go back to editor and that will take us back and we can change back to the home page right here so let's move on and build out the header of our website which is on the top of every page now with a blank template we already have a header because wix already includes that because every website needs to have a header and a footer so the first thing we're going to do is drag in a menu because people need menus to navigate through your website so again we're gonna go to the plus sign right here then we're gonna go to menu and anchor and like i did with the button before i'm gonna choose one of these themed menus right here because again later on it will make it easier to change out the design of this menu and the entire page without going to every single object so i'm going to drag this heading or this menu into the header so when it says attach to header then it's good so i'm gonna just let go and now we have the menu here in the header i'm gonna again center it and these magenta lines are gonna help me i'm gonna put it here to the left side and as you can see the pages that we have created here on our website are already displayed in the menu now when we want to change the pages that we see here in the menu we can simply go to menus and pages and then we can change the order right here or we can also hide specific pages so when we go to the three dots we can click on hide right here then the page will still exist but people will not be able to click on it here on the menu and we can also um change the design here obviously so when we click on go to customize design we can maybe change the text to or the font to the other one we have this one and then make the font a bit larger maybe like this 21 and that looks actually pretty good so i'm going to just leave it as it is actually i want to make this header section a bit smaller so i'm gonna click on the header section and just stretch it in a little bit so it's a bit slimmer like this then i have to re-center my menu like this and now we can add more things to our header so for example we can add links to our social media as well so when we go to the plus sign here we can simply go to social and then we can drag in the social media icons so let's just choose these ones right here i'm gonna drag it then we can click on set social links um we can add different social pages that aren't here yet already or we can also delete um for example twitter and let's say tick tock and then obviously you want to set the links to your personal social media or the social media of your business right here on the right side just type in your link right here and if you want to change out the icons to other ones you can also just click on replace icon right here and then look for the icons that you think look the best on your website however i'm just going to leave it as it is click on done make sure everything is nicely centered here in the header and that's basically it now we can also change the background of the header by clicking on it going to change header design and then currently it's set to no color however we can also use maybe a gray a blue a pink whatever you think looks the best in your site i'm just going to leave it for no color for now then we can also change the scrolling design so when we click on settings then we can see we have some different options you can choose from how it looks like when people scroll down the page so the first one would be to have your header just scroll with the page out of you basically then you can have the header with the menu and everything freeze so then people will always see the header you can have it disappear or fade out so let's say we're gonna leave it at disappear for now you can just simply check out how it looks like we're going to preview and then you can just scroll down and you can see what it looks like as you can see now i have a small problem that kind of the header it scrolls out of the page but then the links they basically stay here which is not what i want so sometimes you face this problem and i'm going to show you how to solve it real quick so we can go back to the editor and now we're going to go on the item that will just stick on the page we're going to right click and then we can see a pin to screen so we're going to click on pin to screen and we can see that this element is pinned to the screen which means that wherever i scroll this object will be visible so all i got to do is click on unpin this element and i do the same thing with my social media bar pin to screen unpin this element and then again i go to preview and now you can see that the menu actually scrolls with the page so it's not sticking on the the window basically so this is just a problem that you sometimes run into and that you can solve like this so let's go back to the editor and again make sure this is centered right here and this as well all right so now we're pretty much done with the header of the website and we can move on to the footer which is also visible on every page on the bottom on your website so here we can simply scroll down here where it says footer and let's first change the background of the footer so i'm going to go to change photo design and i'm going to change it from this one to a darker one maybe this one right here and then i'm not gonna do anything fancy here i'm just gonna add some text and also some social media icons so i'm gonna go to add i'm gonna drag in some text right here and i'm just going to edit the text so i'm going to change the color from black to let's use kind of a gray like this that's fine and then change the text to copyrighted by susan smith which is her name here i just color that then also go to alignment and make this centered like this then we can also just use these lines here to center it in the middle of the website like this and then we can also use some social media icons so i'm gonna again go to add go to social and now i'm going to drag in some gray social media icons like this and again center it and we can again set our icons delete the ones that we don't need add our links and so on but you already know how this works so this is fine again maybe we're going to change the color a bit make a color bit darker like this and then this is basically our footer now you can add more things like a search bar more links to different pages of your website but it just works the same you just add some text and you can make the text also a link by simply going to the text and then you go to a link and then you can also link it to different pages of your website so um you can just do that by yourself awesome so now we've created the main parts of our home page and we can now continue to build out our website adding more strips also going to the other pages and building them out and i want to quickly just go over some more things that you can do here on wix to build out your website build it out efficiently and make it look very nice so we're going to add a new strip here under the hero section by going to add going to strip and then dragging in a new strip under my hero section like this and then now on this part i want to have a picture right here and a some text and maybe an icon right here so i'm going to need to have two columns so that's very easy we simply right click on the strip and then we're going to click on add a column right here and now we have two different columns then i'm going to change the background of this column and add a picture so i'm going to click on change column background and i'm actually going to choose an image that i have already uploaded to my files so i'm going to choose this one right here change background and now i have a picture in this left column now sometimes you need to crop the picture a little bit so you can go to uh this these settings right here you can also change the contrast saturation and so on um let's first make the section a bit bigger like this and then we can also change kind of the layout uh where it's positioned i'm going to position it all the way to the right side so that her head will always be visible also when we change the browser size when we are on the website so this is fine and then i also want to have some padding on the strip so i'm gonna now i want to actually select a strip but i don't know how to because these columns are kind of in the way so what we can do is we can go to a macro a macro layer view so we're going to go to the bottom left side click on layers then you can see all the layers and all the strips off your website so on the top we can see the header we can see the footer on the bottom and then all the content that is in between the header and the footer so currently i have a strip this is the hero section with one column with uh my my text here the heading the paragraph and the button so now i'm working on this second strip right here and i actually want to change some settings so i'm going to select a strip right here and by the way if you have an element and it's kind of just kind of um you don't know where this element sits on what you can do is just drag this into the right strip right here so sometimes when it's kind of messed up you just want to go into the layer settings and then make sure you just organize everything right here because it's a lot easier if you have a lot of objects here on your site however now we're going to select the strip and now we're going to go to um to layout and here we can either adjust the column sizes but now i just want to add some padding so here i'm going to go to padding i'm just going to add let's say 20 pixels of padding so i have kind of a border around my my strip so 20 pixels is fine now you can see i have this white border around this picture which i think looks pretty good and then on the second column here we're just going to add some text so i'm going to click on add drag in let's say a heading then i'm also going to drag in a paragraph like this and just name it whatever you want to maybe something like get fit now and then write something here what you can also do is add like symbols so when you go to uh media right here you can type in whatever you're looking for so i've typed in fitness right here and then you can scroll down and go to free vector art click on show more and then you see a lot of different possibilities here let's just say we use this one this barbell click add to page and then we're just going to drag it right here make it a bit smaller maybe also change the color to a blue let's go to change no let's go to design then change the color to a blue that's fine and then you want to again make sure everything is centered using the snapping feature you can also select objects multiple elements and then just drag it here to the middle so it's perfectly centered like this so using objects like these just makes your site look a bit more professional a bit more modern so there's so many things you can do here with these uh with these objects and with these elements and now if you want to get a macro view of your site what you can do is go to this zoom out and reorder button on the top and then you can see a macro view of your site where you have a better overview of what your site currently looks like and here you can also change like reorder strips here if you go to the arrow you can put this strip on top and so on you can also duplicate strips right here so when we click on this button it duplicates the strip and we can basically change this one and make it look a bit different but this saves us a lot of time when we use this feature as well so let's go out again so now we have this trip again and now let's say i want to have the picture now on the right side so i'm going to just go to manage columns and then i'm going to go to this arrow and now we have the picture here on the right side obviously i would again change the background to something else so let's say i want to use another picture here let's say i want to use let's say this one change background and then again i can change the text right here and just build out my website like that so i've quickly created a pricing and plan section here on the home page to show you how anchors work so maybe you've been on a website before where you clicked on some button or a link and then instead of going to a specific page on that website it actually just scrolled to a specific part on the page you're already on this is basically what anchors do so we can add an anchor to this section by going to the add then to menu and anchor anchor and then we're just going to drag this anchor here on the section we can rename it to pricing and plans and then we can just drag it to the exact part where the section starts and now we can for example add a link here on the top menu that when we click on it it actually scrolls down to this part so right now we already have a pricing and plans separate page so let's quickly delete this page so i'm going to go to pages [Music] delete and now i'm going to click on this add a link button right here and i'm going to click on anchor and now i'm going to tell wix what side that anchor is on so it's on the home page and then which anchor i'm actually wanting it to go to so i only have one pricing and plans click on done and now we can click on preview and when we now go to this new link that i've just created we can also rename it later on it will automatically scroll to this part of the page and now to rename it we just go to menus and pages and then three dots rename and then we can also name it pricing and plans done and now we have a menu item here at the top where instead of going to a separate page it simply scrolls down to the page on to the part of the home page so now that we have some content on the home page we can start playing around with the color themes of our website so when we go to site design on the left side we can click on site theme and then we can see the current one that we have is this theme right here where when we go to colors we can see that we have these colors set up now we can manually go ahead and change all these colors by simply clicking on it and then changing the color right here or we can just try new themes all together and themes that wix has already created for us so we can for example go with this retro vibrant theme right here then you can see it automatically changes all the colors of the buttons because we have used themed buttons and also the the text because we before have changed our our fonts for this specific theme that we have right now now what you can also do is use your own branded colors and what i would recommend is to kind of get a color palette for your business for your website and then use these colors throughout your website so one very easy way you can do this is you can go to a website called coolers.co i'm gonna leave a link down below in the description it's a free website where you can simply generate new color palettes so you can click on start generator right here and then this side will basically generate colors that fit together very well so if you like some of these colors you can simply click on the log icon right here and then start a generator again so just click on just hit space and then it will just keep this color and just generate new ones for these other colors so maybe i like this one as well click on the lock icon and then generate more colors until i find this palette that will work well for me for my website once i have that i can simply click on this color code copy this code right here and then go back and then i can go to colors and i can change these colors individually by just pasting the code in right here so i'm just going to leave the color theme as it is but that's how you basically change the color theme of your website what you can also do here under site design is changing the background of the entire page so when you click on customize right here we can either set it to an image we can set it to a specific color so let's maybe set it to just a simple white and then when you want to have this specific background across all of your pages on the entire website you want to make sure to go to apply to other pages here on the bottom and then click on all pages so it actually applies to all of the other pages so you have a congruent background across your entire website and then the last thing you can do here on the site design menu is changing the page transitions so how it will look like when you change pages do you want to use a crossfade a horizontal swipe or whatever you want just try these out and go to preview see how it looks like it doesn't really matter in my opinion they all look pretty good so just try it out for yourself so let's talk about some applications that you could put on your wix site for example this website is for a fitness coach who maybe wants to schedule some fitness sessions using their website so what we could do here is add a booking feature on this private session page that i've just quickly created so what we can do is go to the plus sign here then i'm going to go to bookings and then as you can see here we have to add this feature to our site first so i'm going to click on add to site and now it has added this booking feature now it has actually created a separate page right now for booking online which i actually don't want so i'm going to go to menus and pages and just um make this invisible so i'm just going to go to site menu booking online and hide so you don't see it on the menu but i'm going to go to my private session page and i'm going to add a just a small part here where they can basically book this fitness coach for a private session so i'm going to go to the plus sign again and now again i'm going to go to bookings and now i have some more options because now the feature has been installed i'm going to go to this featured service i'm just going to drag it in right here make sure it's in the right strip and now i have this specific um part where people can book sessions so let's just make this trip a bit bigger let's stretch it out right here make this centered and now we can click on manage services right here and we can actually add a service so here this would be a one-on-one coaching session and then we can name our service so this would be a private fitness session we can also add an image right here so let's add this image right here then also description we can add a price as well so how long is the session the price let's say this is 80 dollars and then you can just fill out everything that you need to click on save and then we have this new service here in the back end of our website so let's close out of this right now and now as you can see we have this uh widget where people can click on book now and then book a session with the trainer so when we click on preview right here we can see how this actually works so now we can click on book now and then we would be able to choose a date and a time and click on next right here and then what would happen is you would actually um create an account for yourself on the website so when we go back to the editor we can now see that there's a login icon here on the header of our website so and just by adding this feature of being able to to book something on the website people can now log in and create their own account so depending on what you want to use your wix site for you want to add different applications so for example if you want to have if you want to run events using your website you can add this events feature if you want to sell stuff you can add the store feature so you can actually take payments maybe you want to create a blog so you would have to add the blog feature however i'm going to have a separate wix blogging tutorial which you're going to find down below in the description once it's made it really depends on what you want to use your website for and then you can add the specific features that you need and they also have a marketplace for applications so when you go to add apps right here then you can see all kinds of different apps the same thing like on your smartphone where you can use it for many different things the same thing here people can basically code different applications for wix so if you do drop shipping maybe you want to integrate this spocket application where it helps you integrating products from spocket so you can drop ship them through your wix website so there's tons of possibilities um using wix nowadays and you're not just limited on creating a just basic website okay so now before we publish our website we want to make sure it's also optimized for mobile meaning that everything looks good on mobile as well and maybe you've noticed this before but here on the top we can actually switch from desktop view to mobile view and mostly when you create a site from scratch then it it probably won't look perfect as you can see right here so there's kind of things all over the place so what we need to do now is basically optimize everything for the mobile screen and we can just drag things around right here and we don't need to worry that we're going to mess it up on the desktop version so we whatever we do here it won't change on the desktop version unless we change some text or we change a main color or something so all we got to do here is just make sure we just drag things into the right position maybe make this section a bit larger drag this button here on the bottom and just make it look very nice so it just some it just takes some time in the beginning to do all that but once it's done then you also have a perfectly optimized website for mobile mobile as well because nowadays like half of the traffic or even more comes from mobile phones so if you if your website isn't optimized for mobile you're probably going to lose out on a lot of traffic and a lot of conversions so you can also change around the strips right here so maybe you want to put this to the top and again it doesn't change on the desktop version and now before we go ahead and publish our website we want to make sure that it actually looks good on mobile as well so maybe you have noticed it before but here on the top we can change from desktop view to mobile view and then we can see what we have built on a mobile phone screen and as you can see it doesn't look very nice things are kind of all over the place now when you use wix templates they are usually already optimized for mobile so there's probably not a lot of work that you have to do here however if you create a site from scratch you normally have to come in here and then just make things look pretty here as well and whatever you change here as long as it's just moving things around hiding things changing the size and everything it only changes here on the mobile version so when uh maybe when i drag this around maybe make this um this section a bit larger drag this button to the bottom it only changes on mobile and when i go back to the desktop view everything looks the same way as we have built it in the beginning so don't worry just drag things around you can also um you can also move entire sections around a tire strip so we can move that up if you want to we can again move it down and we can also hide stuff so maybe i don't like this section right here so i'm just going to click on the eye on the eye icon right here and then the entire section will be hidden on mobile because sometimes specific things you you can't really make look good on so you can just hide them here on mobile and i just want to go through the entire page right here make everything look nice then you also want to go through the other pages so the private session page for example you want to look you want to make that look very nice and then once every page looks nice it is optimized for mobile because so much traffic nowadays comes from mobile phones and if you don't do this optimization then you're probably going to lose out on a lot of clients a lot of traffic or a lot of conversions so once all that's done we are finally ready to publish our new website so to do that we simply click on publish here on the top right and that will publish our website so here this is the current link that people will have to go to to see our website so we can first of all check out if everything works so we're going to go to view site and we're just going to click on links we're going to check out all the design does it look nice we also go on our mobile phones and check the site there if everything looks perfect and then what we also want to do is change the domain because right now our domain is medicsmedia1.wixside.com [Music] forward slash my site which really doesn't which really looks bad so what we gotta do is add our own custom domain something like medicsmedia.com which looks a lot more professional however in order to add our own domain our custom domain we have to upgrade to a paid plan let's quickly go over the plans that wix offers so let's go to upgrade here on the top and then click on compare plans so first of all there's the website plans and then there's the business and e-commerce plans the business and e-commerce plans are for people who want to accept payments through their website and then there's the website plans right here which is more for basic websites where you're not selling anything directly on the website now in order to connect the domain you're gonna need to get at least this connect domain plan for 450 per month in euros and this this will enable you to to put your own domain on your website something like medicsmedia.com however if you get this plan then you will still have wix ads on your website which i don't really like so i would not recommend to get this connect domain plan unless you're really on a budget i would really go for the combo plan at least because then everything will look professional you will not have any wix ads on your site and you can still add your own domain you get two gigabytes of bandwidth which is fine for a new website and then if it gets slow then you can always upgrade to the unlimited plan however i think for most people the combo plan will be more than enough to start out with so i'm gonna choose the combo plan for the site and i'm gonna go for the monthly payment because this is just for demonstration purposes click on continue to checkout then here obviously type in all of your information and then click on submit purchase now you do have the possibility to get a refund in a 14-day period so if you think your website is not going to work out within two weeks then you can just message them and then they will refund you with the payment and then once that's done you can add your own domain to your website now if you already have a domain you can simply click on connected right here on the bottom and then it will walk you through how to connect your already existing domain or if you don't already have a domain you can find a new one right here so when it comes to domains you want to make it look very nice and optimally very short and you want to try to go for a com domain if you are operating internationally or if you're just locally in your country maybe for canada you do ca or whatever your country is now for example this site is for a fitness coaching business so maybe i would go for something like medicsfitness.com so let's see if this is available obviously the good the good domains are mostly taken so you can either buy it for a very high price or just go for another domain now this is available because nobody's using this so i can actually get it so i can click on get it right here and then i can decide on if i want to pay for one year two years or three years uh if you don't already know if the site is going to work out then maybe you want to go for one year but if you know that you want to keep that domain anyway you can already go for three years and save some money this is just for demonstration purposes so i'm going to go for the one year plan then again you have to type in all of your information and then click on continue and then i also highly recommend to get the private registration because if you don't then you'll just get a lot of spam mail and which is really annoying and you're just your information will kind of be out there for other people to see what you don't want so i would highly recommend to get this private registration which i'm going to do here so i'm going to click on continue and then it says that this new domain that we have just bought is connected to my new site now usually it takes up to 24 hours until you actually see your site under this specific domain and sometimes you also have to verify your email address first so when you go down here click on go to domains then you get to your wix dashboard under domains where you can see exactly what you need to do until your website is actually available on this specific domain and i've actually confirmed my email address so i already done that but now i also have to wait up to 24 hours until i will actually see my site under this specific domain so right now you can see i'm not able to access the site yet but in a couple of hours it should already work so let's now also go to the back end of our new website and look at some of the settings and features so when we go to this wix icon here hover over it and then click on go to dashboard it will take us to our wix dashboard so here on the home section of your dashboard you're going to see an overview of a lot of information about what's happening on your website like how many clicks you're getting how many new signups you're getting how many sales and all that kind of stuff so once your site becomes more active and you actually get traffic to it you're going to see a lot more information here and that you can then analyze and try to improve your website based on what you see here then on the left side you have more features like your booking services here you can adjust the services that you're offering on your site and the calendar so you can see an overview of when people have booked you then you have subscriptions contacts so you can see an overview of all the contacts that you have gathered through your website communication channels automations seo which will which is what we're going to look at in a moment here you can also generate some reports so you can see how your traffic for example is developing over time and finances so if you are taking payment through your website you can manage everything right here the different channels and then settings as well so let's first click on settings and here i just would like to go through all of these tabs right here and make sure you fill out as much information as possible so for example set your site name um and also set your favicon so here you can upload an image a small small image which will then be visible in the browser so currently you can see we have the wix favicon right here and obviously you want to have your own logo here in the browser so this makes your site also look a lot more professional a social image for social sharing and so on so this is all quite self-explanatory just go through it on your own time and fill out all the information that they ask of you as long as you think it is actually required and then another thing that i want to quickly go into is seo so what seo means is search engine optimization which means that you want to optimize your website so that it's easier for people to find it on search engines like google so let's go to seo and marketing and seo and seo tools and the cool thing here with wix is that they make it very easy for you to optimize your site for seo so first let's go to general seo settings here on the bottom and you want to make sure that this here is turned on so let search engines index your site so and google is actually allowed to index your site and show it to people when they look for a specific keyword and then we can click on get found on google start now and then they will basically guide you through exactly what you have to do to optimize your site for search so when we click on get started right here we can type in our business names let's say medics fitness click on next right here and then once you've filled out these couple of questions they basically will give you a checklist that you can see right here where they tell you exactly how to optimize your site so here the first one is set a home page title for search results so let's click on go for it right here and then they give us also different variations of what we can use so for example fitness medics fitness so let's ch check choose this click apply and here is exactly what it will look like here in the search results so all you got to do is go through this checklist right here and then do everything they ask of you here write some sentences about your site use some keywords that are relevant to your business and once you've completed this checklist right here the likeliness of people finding you through search and you're getting new customers through simply people searching on google is a lot higher so i hope this video was helpful to you if it was definitely give it a thumbs up this would help me a lot also subscribe to the channel if you want to see more wix tutorials also about how to build a blog how to build an online store and a lot more wix tutorials that are actually coming up and also say hi in the comments and i look forward to seeing you in the next video

← Webflow Tutorial for Beginners - Start H WordPress Blog Tutorial for Beginners 20 →