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

WIX Tutorial for Beginners (How to Create A Wix Website)

📺 ดูคลิป · 👁️ 25,591 views · 📅 2021 · ⏱️ 52:29 · 🌐 Websites / WordPress / Hosting / Builders

📌 สรุป

คลิปนี้เป็น tutorial สอนสร้างเว็บไซต์ด้วย Wix แบบ step-by-step สำหรับมือใหม่ตั้งแต่เปิดบัญชีจนถึง publish และผูก custom domain โดย Simon จาก Metics Media สอนผ่านการลงมือทำจริง เน้นใช้ Wix Editor (ไม่ใช่ AI ADI) เพื่อควบคุม design เต็มที่ ระยะเวลาคลิปยาว มี timestamp ให้ข้ามได้

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

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

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


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

what's up my name is simon and in this video i'm going to show you step by step how to create your own beautiful looking website from complete scratch using the website builder wix so this is a complete and detailed wix tutorial for absolute beginners so even if you don't know anything about building a website after watching and following along with this tutorial you'll have your own professional website up and running in my opinion the easiest way to learn how to use this website builder is to simply build your own website and learn everything along the way and by using this video kind of as a guide it will definitely shorten your learning curve and get you to your website a lot quicker and like i said we're gonna start from complete scratch by signing up for a new wix account then we're going to choose a theme for our website customize everything to the way we want it to look like and afterwards we're going to publish our website so this is going to be a bit of a longer video so i'm going to leave all the time stamps down below in the video description and you can just also hover over the progress bar of the video and jump around to any part that you want to so let's not waste any time and get started right away all right so i'm already here on the wix website where you can get started creating a new wix account and by the way a free way you can support me and my youtube channel is to simply use the first link down below in the video description which is my personal referral link for wix which means that when you use that link and then sign up for a new account and then eventually go for a paid plan then i would get a commission from that at no additional cost to you which is basically how i'm able to make these free tutorials for you also if you're watching this from a mobile phone you can also just type in medicsmedia.com forward slash wix and then you also go through my personal referral link so if you use that link that would be highly appreciated but if not that's okay as well so depending on when you watch this video this website might look a bit different for you because wix oftentimes changes around the design of their home page but at some place there should be a button saying get started or sign up or something like that so just find that button for me it's right here and then click on the button and then you'll get to the signup page that you see right here so here to sign up for a new account all we have to do is type in our email address decide on a password or you could also just use your facebook account or your google account to sign up for wix so do that and then click on sign up and then here on the next step wix is going to ask you a couple of questions about what kind of website you want to build you don't have to answer those questions if you don't want to because there's a button that says skip on the bottom right of your screen but it's going to make it easier for you to find the right template for what kind of website you want to build so for the sake of this video i'm just going to go through it so i'm going to click on let's do it right here so i want to create a site for let's say myself and it should be a let's say a business site and i've never done this before and then we'll get to the next step and then here we can decide if we want to use the wix adi to create our website which is some kind of artificial intelligence that is building your website automatically so all we would have to do is give them a logo some colors that we like and also the text that we want to have on our website and then this computer program will design the website for us or we can use the wix website editor and design everything ourselves from a specific template now um you can experiment with this wix adi editor but what i actually recommend is to use the wix editor which is what we're going to do in this tutorial because that way we have full control over our website so that's what i'm going to do in this video so i'm going to choose choose a template right here on the right side and that will take us to the next step which is where we're going to have to choose a template for our new website so because i have told them before that i want to build a website for a business it has already pre-selected all the business website templates for me depending on what you've answered before here this might look different for you for example if you have typed in i want to build a website for sports and fitness it's going to show you these templates right here so you can always change around the templates that you see right here by just going uh to this drop-down menu and then choosing this sector that you want to build a website for if you don't find what you're looking for here you can always go to the top right and click on the search bar here and just type in what the kind of website you want to build for example something special would be maybe a sushi restaurant and let's see if there's some templates for that and they actually do have some japanese restaurants templates like this so um once you find a template that you like you can always check it out further by just going to view right here and then you see a preview of this specific website you can also go to view full demo right here and then in a new tab it will open up a preview of this website you can also scroll down use the all the features um you can click on different tabs right here let's click on the about tab and see kind of the structure of this website now if you don't like the colors or the the font or something like that then don't worry too much because we can change all of that later on in the actual editor which is what i'm going to show you later in the tutorial now what i would do is also go to the top left here and click on the mobile phone here because there you can also see what this specific template looks like on a mobile screen which is very important nowadays because a lot of traffic comes from mobile phones nowadays so make sure eventually that your website also looks good on a mobile phone so let's close out of this tab right now and actually find a template that we like so for this tutorial i was looking for a very basic template so what i'm going to go with is business and consulting consulting business website and i'm going to choose this one right here so business consulting company i'm going to click on edit and that will take me directly into the wix website editor great so now we are inside of the wix website editor where we're gonna start to build out our website and do all the design changes so that our website will eventually look like exactly what we want to have so this is kind of a drag and drop website builder so each element that you see right here you can simply click on it drag it around put it in a place that you want to have it and you can also simply click on the elements change the text change the colors change the fonts so it's kind of really a an intuitive way of building and changing around your website so i'm going to give you a quick overview over this interface that you see right here i'm not gonna go too much in detail because most of the tools and the features that we're gonna use in this video you're gonna learn while using them anyway so to make this tutorial not too boring i'm gonna just skip over a lot of things that i think are not that important and that i think are we're gonna learn anyway later on in the tutorial so the first thing that you have to know here is on the top left you can see this little drop down menu right here where you see page and you can see right now we are on the home page this is where you can change between each of the pages on your website so by default this template has a home page it has an about page a services page a product page projects page and so on so if you would want to change from the home page to the about page we simply click on the drop down menu right here go to the about page and then it will switch our editor to the about page and then here we can make all the changes that we want to make and then once we're done we can click again here and go back to the home page so this is going to be a feature that you're going to use a lot while building out your website and then right here you can also switch from the desktop editor over to the mobile editor so normally we do all the content work and all the changes to our website here on the desktop editor and then once we're done with our site we're gonna go over to the mobile editor right here and make sure everything looks good on mobile as well now usually you're not gonna have to do a lot here because wix is pretty good at optimizing your content for mobile already so normally there's not a lot you need to change but some sometimes something gets messed up and you're gonna have to come in here and change some things around but normally you're gonna spend most of the time here on the desktop editor then here on the top right you have the save button to manually save your website when you do some changes and the autosave feature is on so you don't actually have to manually save your website all the time because the changes should be saved on autopilot then you also have the view site history button right here which is very useful if at some point you mess up and you want to restore a previous version of your website just click on view site history and then you can restore a previous part or previous version of your website like that then you also have the preview button right here which when you click on it you can see how the your website currently looks like as a visitor you can also click on different pages on your website right here and kind of navigate through them to see if everything looks exactly how you want it to look like and then you can go back to editor right here and then it takes you back inside of the website editor now the publish button is what we're going to use after we have completed our website and we're actually ready to publish our website then this undo this redo button is something that you're probably going to use a lot then you also have the zoom out and reorder option here which is something that is very useful because this allows you to see your website from a kind of larger perspective which also enables you to see the structure of your website so mostly a website is going to have a header right here a footer here on the bottom and then these sections here in the middle which basically make out your content so these sections that you see right here on wix are called strips so this would be a strip right here which is kind of the hero section then you're going to have a strip right here and then the about a strip and then also a contact a strip now if you want to move these around right here it's very easy just go to these little arrows right here so we can move this one down we can move it up again we can also duplicate different sections by clicking here and then start designing it from kind of use this as a template you can also delete different sections so this is a very useful uh feature that i use to kind of get a larger a macro view of my website and move things around especially when i have a long or a a page that is very long so then you can always go to exit mode and then it will take you back inside of this editor right here now then we have the tools right here which is pretty much set up nice by default i would just make sure to have these snap to objects feature on right here because it will make it a lot easier to move things around and align them on your website and then i usually turn off this toolbar right here because um i'm actually not really using it a lot when i'm building websites here websites here on wix so i just turn that off so i have a cleaner view here off my website and then here on the left side of the editor we're going to have the tools that we're going to use a lot to build out our website and change all the design so for example you have the menu and pages option here to change around all the menus and the pages you're going to have the the theme manager here where you can change the fonts and also the colors so i don't want to go too much in each of these tools right now because like i said learning by doing we're going to go through the most important ones over the course of this tutorial and then you're going to see exactly how this works so the first thing that we're going to look at is how to change the colors of our website so the color theme and also the font of the text on our website so to do that we're going to go to the left side toolbar here and click on theme manager and here we're going to actually start with the color so make sure colors is selected right here and you can see by default this is the current color theme so we have a white a blue a gray a green and a yellow now you can manually change all of these colors individually by just scrolling down and then go to edit color and then you can just choose whatever color you want here and it's automatically going to also change different shades of that color that you have selected now this is one way you can go or you could also just click on change theme completely and then choose a default theme that they have already set up for this specific website so for example let's maybe choose this theme right here and then you can just check out how it looks like close out of this then go to preview and see how your website currently looks like with this new color theme you can also go to different websites here different pages and see how this looks like and see if you like it now another option you can do is you can go to a website called coolers dot co i'm gonna leave a link down below in the description and then this is basically a website that that's automatically generating a color palette for you so colors that fit together very well so if you need some inspiration you can just click on start generator right here and then it will automatically generate different colors that fit together very nicely so you can have it you can have this color theme on your website so when you find colors that you like you can simply go to select color right here copy this code just right click copy and then go back to your website editor go to theme manager and then you would have to change each color individually again so we're going to go to let's say this color we're going to go to this color code right here right click paste and then it will paste the color that we have copied from here into this color that you see right here so this would be an option as well to kind of have more options that wix is giving you here but um just play around with it a little bit and then find the color theme that works the best for your brand so i'm actually pretty happy with this theme that i've chosen right here so now i'm gonna move on to the text so i'm gonna go to text right here and then it will open up the text options so here we can see that we have different heading types which is just different sizes of headings on our website and also different paragraphs and by default the the font of our heading on this theme is railaway and the default font on our paragraphs is open sense now i would just keep it so that all the headings have the same font and all the paragraphs have also the same font i would keep it at two fonts for your website maybe three at a max if you have uh the more fonts you have for your website the longer it will take for your website to load which will also um be a worse user experience and also decrease the rankings on google so i wouldn't really have too many fonts on your website so if you would want to change your font to maybe another one that you like you can just click on the heading and then change it from rail away to something else right here but again if you do that for a heading make sure you do it for all the other headings as well so that you have a similar style across your website alright so let's now look at how we can change the main background of each of the pages on our website and also the background of each of the strips here on each page let's talk about the main background first and to illustrate that i'm going to switch from the home page to the about page so here to change the background the main background of this page we're going to have to go to the left side toolbar and click on background right here so here the default color for our background here is currently set to a white now you can simply change the color by clicking on color right here and then all your theme colors that we have set up before will actually come up and you can choose each of these colors right here and you can also directly see how this change affects the how your website currently looks like you can also use custom colors if you want to add a color here on the bottom and let's for example choose this yellow right here so let's close out of this and then this would be how our website currently looks like now let's actually switch from the about page to the services page for example and now i notice that the background here is still white and not yellow the way i actually want it to be and that's because we didn't actually apply our background changes to all of the other pages so let's go back to the about page click on background again and now when we actually like this background what we can do is just click on apply to other pages here on the bottom and then click on all pages right here and that will apply this background to all of the pages across our entire website to make everything look um the same way so when we close out of this again when we switch now to services right here then we can see we have the same kind of background now to be honest i don't actually like this color so what i'm going to do is i'm actually going to change it again so again i'm going to go to background right here and now instead of changing to a color what i'm going to do is i'm going to change it to an image right here so i'm going to click on image and then we could either upload an image from our computer or we could also choose a media from the mix the wix media library right here so you can just type in some keywords here on the top let's type in consulting because this is a website for a consulting business and let's see what actually comes up so let's for example just take this image click on change background and then this image will be put in here into this background but it doesn't really make the text readable anymore so what i'm going to do is i'm actually going to go back to the background menu go to settings right here and what i can do now is either change the the opacity right here and then the background image color will actually kind of shine through or what i could also do is um maybe change the background image color change it back to white to just make the opacity a little bit lower and kind of fade it into white maybe make this 10 and now we have a little bit of a transparent image here in the background but you can still read the text pretty nicely so again if i want to apply that to all of the pages we have to go to background go to apply to other pages on the bottom left and then click on all pages and then again it will be applied to all of the other pages so again let's go to the about page to see if it actually worked and there we go the background is also available right here now let's actually switch to the home page right here and there we notice that we don't really see the background that we have just changed it to and that's because each of the strip that you see here on the the home page has its own background now if you would want to change that you could just click on the strip right here click on change strip background and then this menu will open up so if you want to have the main background kind of shine through in this strip you can click on settings lower the opacity right here and then you can see the background kind of lightly shines through because um it does it's not really saturated because you have lowered the opacity so much and what you can also do is just simply change the color of the background of only this strip so now we're talking about changing the background of each strip on your page so again click on chain strip background we can again change it to a color right here we could change it maybe to another image or we could also change it to a video so maybe for the hero section right here we could just click on change strip background click on video right here let's maybe click on this one here change background and now i have a video here as a background when i click on preview here on the top right i can see that this is actually a video right now so i'm actually going to change this again to a photo so let's again click on the strip click on click change strip background click on image and again you can also use your your own images of course by just uploading media i'm actually going to use this image right here click on change background and there we go i'm just going to use this image right here as a strip background here for this hero image cool so now that we have our basics already set up like colors fonts and background we can move on to actually add some content to our website or just change around the content that is set up here by default so the first thing that i would do is actually upload the media to wix so all your photos all your videos which will down the line save you a lot of time so you don't have to manually upload it every time you want to add like an image or a logo or something like that so to do that we go to the left side here click on media then we're going to scroll all the way down and we're going to click on upload media and then what you can do is click on upload from computer and just select all the files or you can just drag it in whatever works for you i actually already have uploaded some files here that i'm going to use in this tutorial so once you have done that you can just cr close out of this window right here and we can start um adding some content so what what i'm going to do first is i'm going to um do some changes to the header right here and also to the footer here on the bottom because the header and the footer is what's visible on each single page on your website this is one what's going to make it easy for your visitors to navigate through your page because every time they're going to see the menu here on the top and also your logo where they can go where they can click on and get back to your home page so let's start by changing the logo here on the top left so this right here is a text element and what i want to do is actually have my logo as a png so what i'm going to do is i'm going to just delete this text element by by right clicking clicking on delete right here and then this text element is gone now i'm going to add a new element so what i'm going to do is go to the left side toolbar here go to add and now you have tons of different things you can add to your website now what i would recommend is on your own time just go through each of these elements right here to really see what's actually possible to put on your website there's a lot of already uh pre like design templates that you can use so you can simply change out the images and it already looks kind of very beautifully it looks very good and what i'm going to do here is simply add an image because that's what my my logo is so i'm gonna click on image right here image and then i'm gonna it's already taking me to my uploads and so i'm gonna click on my image uploads and then it will open up my upload library what i'm gonna do is i'm gonna choose this white logo right here click on add to page on the bottom right and that will add my logo here in the middle of my page now obviously this is way too big right now so what i can do is simply go to these edges of the logo and simply drag this down a little bit to make it smaller maybe like this and then because it's drag and drop i can simply hold a click and hold and let's drag it here on the top in the in the header so as you can see these little magenta lines right here these kind of help you to align your elements so that it just kind of keeps the symmetry on your website which makes everything look very nice so i'm just going to put it right here and i think this looks pretty good now what i also want to do is i want to make this logo be a link which directly goes back to my home page so whenever somebody clicks on this logo it will get back it will take them back to the home page so what i'm going to do is go to the menu here of this element click on this link icon right here and then you have different options so you can link to a different web address so it will go to another website or you could uh maybe choose an anchor you could choose a document an email address so there's a lot of possibilities in my case i simply want to link it back to the home page so i'm going to choose page right here and it already has set this to home page and um it should open it in the current window as well so that's fine i'm gonna click i'm gonna click done and then i also like to test out things when i have done something and when i've set something up so i'm going to click on preview here on the top right and then it will open up my website so i'm going to click on about on the about page here and now i'm going to click on the logo and see if it takes me back to the home page so right now it works perfect so i can go back to the editor right here so let's now look at how we can actually edit this top menu right here so how can we add new pages how we can move around these pages and actually delete pages right here so the way we do that is we go to the left side toolbar click on menus and pages and then this will open up so here the first thing you can do is simply move around the order of these pages so for example if you would want to have the projects here on the in the first spot we could simply go here and direct the projects up here and then the projects will come up first now what you can also do is simply add a new page by going down here clicking on add new page and then a new page will be added to the top menu and also to the pages of your website we can give that page a name so for example let's name it our team click on done and as you can see the our team page is now in the top menu now what uh when you create a new page it will also be accessible right here through this drop down menu you can just click on our team and then this new empty page will show up and later on in the video i will show you how to add new content to this specific page so let's go back to our home page and actually keep editing our menu so for example for our new our team page we are still working on that page and we don't want people to actually see it in the top menu and actually be able to navigate to it so what we're going to do is simply we're going to hide this page and we can do that by simply going here going to the three dots clicking on hide right here and this will still enable us to work on our page but it will be actually hidden in this top menu so people can can't actually go to it if you for some reason want to delete the entire page simply go to the three dots again scroll all the way down and click on delete right here now on some of the website templates you also have this little login bar right here which is specifically for websites where you're going to have a members area for and then people can actually sign up for an account on your website um if you don't want to have that option what you can do is either simply remove that login bar by clicking right click and then click on delete but what i actually like to do is simply go to the menus and pages and then delete all the member pages all together if i don't want to have a website where there's going to be a members area i'm simply going to go to the gear icon click on delete members area then confirm here and then this login bar will automatically be deleted now i can actually move this then to the right side because i have little more space here in the top [Music] navigation bar and always make sure to not go past this line right here because if i set it like this then not the the menu might not be displayed on every type of screen size so i'm going to make sure to to keep inside of these main two lines right here so these lines and then i'm going gonna be fine so another thing we can look at actually is the um the transitions of the different pages so how the the effect will look like when people uh go to different pages on your website so we can again go to uh site to the menus and pages uh tool here and then go to page transitions right here and here you have a couple of different effects so by default it's set to out and in which basically uh looks like this here um you can also switch it to horizontal and then it will kind of slide in from the right side i usually keep it at crossfade or at out because i think that looks more professional so that's basically how we can edit our header and also the navigation menu right here and like i said the header and the footer will be visible on each single page of our website and we can actually also change how the header will be displayed on each page so when we click on it and click on the gear icon we can see header scroll settings so do you want to have the header displayed at all times also when people scroll down or maybe you can also have it scroll out of sight when people scroll down on the website maybe you want to have it disappear or maybe just fade out when people scroll down so that's really up to you what i would suggest is simply try out these options for yourself click on preview right here and then see what you think looks the best so let's now move on to the footer of the website so we're going to scroll down here where we get to the footer and it doesn't really matter if we edit this footer on the services page or on the home page because like i said the footer is displayed on every single page and all the changes we make here will also be applied on each single page so all i'm going to do here is actually change the text from here from what's written here to um something that i want to have on my footer let's just change it to copyright by medics media and obviously you can add a more a lot more stuff here on your footer like for example site links that go to different steps on your website and whatever you basically want to but i'm going to keep it basic here and just leave it here as it is and then also you have your social links by default in the footer so if you want to have them here you want to basically change them by clicking on it go to set social links and then here you're going to be able to set the link to your facebook page the link to your twitter page so basically just go here and then change the link to whatever your social media link is so for me it would be medics media um for the twitter and you can also add more social links by clicking on add icons here and then maybe also add your youtube channel or your instagram your tick tock whatever you want to make sure you change the links and then the links when people click here they will actually go to your social media channels alright so now that we have set up our header with our nav bar and our logo and also the footer we can move on and kind of edit the the content of the different strips on our website so we're going to start here on the home page again so i'm going to switch to the home page and now i'm just going to show you a couple of examples of what you can do obviously your website is going to look different so you're just going to have to play around yourself but i'm just going to show you a couple of things how you can add some elements how you can move things around and just a couple of tips along the way so for example let's say i want to add a call to action button right here under this text so first i notice that i don't really have space here so what i'm going to do is just move things around a little bit so the first thing i'm going to do is move this strip a little bit to the to the bottom right here like this then i noticed that i need to maybe also increase the size of this image a little bit maybe like this and then also drag around drag down stretch out this part of this strip right here like this and just like that i have now space for my button as you can see it's just kind of playing around with it a little bit and then eventually you'll probably find the solution to what you want to do because it is a really intuitive editor so let's say we want to add a button right here so we're going to add an element every time you want to add something you just go to the plus sign here on the left side click on add and then you have an entire library of what you can add to your page so in this case i want to add a button so i'm going to hover over the right here and then you have multiple different buttons now here on the theme buttons you you have these four buttons which is specifically made for the theme of your current website with the colors and everything so i usually just use these buttons right here so i'm going to simply use this black button right here then it will automatically put it on my website i can drag it down make sure it's centered maybe also increase the size a little bit like this and maybe again make sure it's centered that looks pretty good i would actually increase the font of this button so i'm going to go to layout right here then i'm going to go to text and i'm going to increase the font size maybe to a 20 and also and change the color no actually i'm going to leave the color so that's pretty much it then obviously i want to change the text from button to let's say contact us so i'm going to go to change text and icon and change the text to contact contact us and then obviously i also have to add a link to this button because otherwise nothing will really happen when we click on this link so here is just the option to add a link or you can also click on the button and then go to this link icon right here and then this menu will open up now obviously you can link to many different things in this case i want to link to a specific strip on this home page because the contact us section is not really a separate page on this website it's actually a part of my home page which is right here so what i want to do is i want to have it when people click on this button that it automatically scrolls down to this section and the way we do that is by using a so-called anchor on our page and as you can see here the anchor is already installed right here so i'm just going to delete this anchor real quick so i can show you how to set this up manually so when we have when we want to have anchors on our website we're going to go to the plus sign to add something to our page in this case you would have to go to the menu right here go to anchors and then simply drag the to the part you want to have it so i want to have it just right here over the contact us section and then i have to give the anchor a name so i'm going to name it contact us obviously contact us and then i have created a new anchor and now i can go back to my button go to a link right here and now i'm going to choose anchor and i'm going to have it which anchor on this page so i'm going to choose the contact us anchor which is the only one that we have we're going to click done and now when we go to preview and we click on this button it will automatically scroll down so that the anchor is on the top of our website and it will scroll down to the contact us section so this is exactly what i wanted to do with this button what you could also do is link this button to another page of your website for example this button right here we could simply click on it go to link and then we could link it to a page so here click on page and then choose the page that you want to link it here it's already set to services because this box is representing our services now if you want to delete an entire strip on your page what you can do is either just click on this strip go right click and then click on delete and that will delete the entire strip from your page and as you can see we have kind of a hole in our website that we obviously want to close and the way i usually do that is by simply going to this icon right here zoom out and reorder and then we will see the macro view of our website we can see the hole right here and what i'm going to do here is simply drag this next trip up to this strip right here and just like that we have the hole closed so we can click on exit mode and now we are back in our main editor then let's scroll down a bit and maybe move on here with the about us section let's say we want to add an image of ourselves here to the about us section again all we would have to do to add an element is go to add on the left side then i'm going to choose image right here go to my image uploads and in this case i would just add an image of myself click on add to page and then i'm gonna just make it a bit smaller by dragging out the edges and placing it here obviously i have to also decrease the size of this paragraph right here just make it like this and also we can center both of them here in the middle and obviously i also have to maybe put this here so you can just simply drag out every thing here on your canvas and you can also edit everything by simply clicking on the element and then you have all the options right here so for example we could change the design we can maybe give it a round frame like this and you could also maybe add a filter to this image by maybe making it black and white like this so there's tons of things you can do by simply exploring it by hovering over each element and then you'll find out how everything works now a cool thing i want to show you here with a different text on your website is something called get text ideas so for example let's say i am a fitness coach then i could just simply click on get text ideas and then let's click on [Music] fitness coach let's just type in fitness and then they will it automatically give me text ideas for different things on my website so for example the about a section for a fitness coach i could simply go to about go to create text and then it gives me an example text that i could use for as a fitness coach on my website for example i believe living a healthy healthy lifestyle begins with maintaining a strong and fit body and so on or this one right here or this one right here so i could simply click on use text and then it will automatically put this text into this text block so this is just a very cool feature that you can use to get some inspiration if you don't really know what content you should put on your page what you should write about your about section and all that kind of stuff so that's something i wanted to show you here again everything make sure it's aligned very nicely in the middle you can also select multiple things by hitting shift and then selecting multiple elements and then dragging them out so that they're actually centered here in on your website and then if you would want to add a new strip here on your website you would also simply go to the add button right here and now go to strip and then for example go to maybe testimonials right here and maybe choose this one and then it will automatically put this strip here on your website maybe you don't want to have this all the way to the bottom so what i would do is go to zoom out and reorder and then you're going to have an easier way to view your strips so i could just click on this little arrow icon and then it will automatically put this strip above this next one i can simply also drag this around like this however you want to then once it's sitting in the perfect position just go to exit mode and then i can start editing everything right here i can change the images i can change the text and so on then here on the bottom you also have a contact us section here you just want to make sure to actually update the location to the location of your business or wherever you um you are located so when you click on this little google maps application here you can click on manage locations and then you can change the location right here and then it will automatically update this map to your location and also don't forget to change your location right here and in exactly the same way you can obviously also change all the content on the other pages like your about page your services page and so on and then once you're done with your with all of your pages on the desktop view you also want to make sure to actually go inside of the mobile view and make sure everything looks nice there as well so most of the time there's not too much you need to do but some spacing problems is something that i face a lot here for example right you can see that the logo is kind of centered and i actually want to have it here on the left side then the menu icon right here and then maybe drag this a little bit make it smaller like this and then maybe also here we need some more space so let me just drag this down a little bit drag this out as well and everything you change here on mobile is only going to change here on the mobile version so whenever you change back here then everything is exactly the same as before so that's pretty cool so they definitely want to change everything here first on the desktop version and then switch over to mobile and make sure everything is lining up perfectly on mobile as well so most of the templates that you're going to use here from the um from the add options right here they are already optimized for mobile so there shouldn't be a lot of work that you need to do on the mobile editor right here now if something doesn't fit on the mobile version at all what you can do is simply on the element or even click on the strip and then click on height element and then the entire element will will be hidden on the mobile version but only on the mobile version and on the desktop the element will still be visible what you can also try to use is this page layout optimizer right here on the left side so when you click on this and click on optimize page then it should automatically optimize the page for you but in my experience a lot of the time it doesn't really work that well so i usually just do it manually myself and then you also have some specific mobile tools that is only available on mobile for example the back to top uh button which is this one right here where people can always just click on it and then they will automatically scroll all the way to the top you also have a quick action bar which will make it easier for people to call send you an email and stuff like that again just play around with it and see what is um useful for your specific website and make sure also that each page you go through each page here and that each page is actually optimized for mobile as well awesome so let's now say our website is actually finished and we're ready to our website so the way we publish our website is to simply click on publish on the top right and then it will automatically take our website live and this currently the link that you see here is the current link that people have to go to to actually see our site so when we click on view site right here then it will take us to our website and we can actually test it out we can scroll down we can click on services we can check out all the different pages but the thing that's really not good here is that we have this little wix um advertisement here on the top and we have also wix site in our url which is not very professional at all so what we have to do to actually put this site on our own domain so for example medicsmedia.com or whatever your domain is we're going to have to upgrade to a paid plan so in order to do that we have to click on upgrade right here and then i'm going to quickly compare the plans for you and give you my recommendation of what i would choose so i'm going to click on compare plans right here so here we first want to make sure that we're actually on the website plans right here because wix also has plans for business and e-commerce websites which are a bit more expensive so as you can see the cheapest plan is the connect domain plan and basically all you can do with this plan is connect your own domain but the disadvantage here is that this plan still includes the wix ads that you can't really get rid of if you are on this specific plan this is why i personally recommend to use this combo plan right here because this will get rid of the wix ads and will also enable you to put your website on your own domain and it also gives you two gigabytes of bandwidth which should be enough in the beginning for your website if you don't get too many visitors and storage space three gigabytes and also 30 minutes of video hours um video hours in my opinion is not that important because you can also embed your videos on your website and kind of host them on a platform like vimeo or even youtube so this isn't really important to me and so i would go for the combo plan and then if at some point you get more visitors and you need more bandwidth you can also go for the unlimited plan right here so in this tutorial i'm just going to choose the combo plan right here and then you can decide on what kind of billing cycle you want to go for now if you know that this website is the website that you're going to keep for at least two years then you can go for the two-year plan to save some money obviously you're gonna have to pay more in advance um or if you don't really know if this website is gonna work out you can also simply go for the monthly plan and then pay each single month this is what i'm gonna do in this tutorial because i don't want to spend too much money because this website is simply for demonstration purposes and i'm not really going to use it so i'm going to choose monthly here and then i'm going to click on continue to checkout then here we have to enter our credit card information and then click on submit purchase and by the way there's also a 14 day money back guarantee in all premium plans so if after like 13 days you realize okay this is not going to be the thing that i want to have then you can still send them an email and then they will send you a refund to your credit card then after you confirm you will get to this page right here which first is confirming that we are now premium and that we can actually put our site on our own domain now if you already have a domain you can simply click on connected here on the bottom and if you don't already have a domain then you can simply look for a domain using this search bar right here now i would recommend to get a dot-com domain because it's just it looks more professional more official um a lot of the time you don't really get the domain that you want to with a dot-com so maybe go for co or net or maybe just choose another name altogether to really go for the dot com domain so you can just type in any names here that you think is good for your website let's just say i'm going to use medics media consulting as an example and see if that's available and that would be available so i'm just going to click on get it right here and then it will just guide me through how to purchase this domain so i'm just going to go for the yearly plan right now because i'm not actually going to use this domain in the future this is just for this tutorial but if you want to keep this domain for a long time anyway you can actually go for the two or even three year plan so then i'm going to click on continue here and then on this step i would actually recommend to go for the private registration as well because otherwise you're going to have a lot of spam emails going to your inbox and your address is going to be publicly accessible and all that kind of stuff definitely not something you wanna you wanna have so definitely go for the private registration here and then click on continue and there we go this domain that we have just decided to go for is now assigned to my site so i could just go here copy this domain and actually test it out by opening up a new tab pasting it in the url box and as we can see this domain is now pointing to the website that we have just built and we can also test out everything if everything works so that's awesome now what i also want to take a quick look at is the dashboard of your new wix website which is here under settings and then all the way down my dashboard which will take it kind of into the back office of your website where you have a lot more information where you have your analytics of your website and also a lot more tools so what i want to do here is quickly go into the settings here on the bottom left and then what you want to do is go through each of these settings that you see here and make sure you fill out as much information as possible for example the website settings when we click here then first of all we have to enter our site name so let's say this is medics media consulting then we can scroll down and here you can see the domain that it's currently on that we have just purchased before then something we also have to add is our favicon a favicon is basically what you see up top here this is kind of this small icon in your browser so what i would do here is simply upload an image um actually add an image that i've already in my library which is this one for example so i would simply choose your logo of your website and then when you click save here on the top and then when we go to our website we can see that this logo is now here on the top which makes everything look a lot more professional then you also have like this a general social image when somebody shares your website on a social network like facebook then also an image will be displayed that you can choose here so again i would just choose my logo so i'm going to choose this one right here so that's all i would do here so then we go back to the settings and also go to business information make sure you type in all your business information right here your logo your location and all that kind of stuff it really helps you getting ranked eventually on google and it makes it easier for people to find your actual website especially when you have a local business you want to have and google know where your business is located so that people will actually find your business and you get more customers through your website and then the final thing i also want to mention is the seo tool of wix which will help index your website in the google search engine and also rank your website so that people can actually find your website so when we go to marketing and seo right here click on seo tools then we will get to um to the get found on google tool so you can just click on let's go right here and then it will basically walk you through how to index your site on google and also kind of what you have to change so that it's easier for people to find your website on google so i don't want to make this video too long so i'm not going to walk you through this entire process but it's actually very easy just click on start now and then it will tell you exactly what you need to do to index your site and also to optimize your site for the google search engine so i hope this video was actually helpful to you getting started with the website builder wix if it was i'd really appreciate if you click that thumbs up button down below that would really help out my youtube channel also if you have any questions leave them down below in the comment section and i'll try to get back to you as soon as possible also if you want to see more tutorials just like this one make sure you subscribe to the channel as well and with that being said thank you very much for watching and i look forward to seeing you in the next video

← Hostinger Website Builder Tutorial 2026 How To Get A Free VPS Server For One Yea →