How to Create a Free Website (Free Domain & Hosting) 2020

what's up guys i'm dale mcmanus from create a pro website and in this video i'm going to show you how to create your own free website using a free domain and free hosting by the end of this video you'll have a website that looks like this and it will be published live so that anyone with internet access can view it and this website was designed using drag and drop and i'll walk you through the whole process step by step so if you're ready let's get started step number one is to create a wix account so to do that just click on the very first link in the description or you can just go over to create a pro website dot com slash wix and that will take you to a page that looks like this and it's completely free to set up an account so to do that just simply click on start now then you can just go over to sign up right here and then just type in an email then type it again and then a password and then retype your password then just go ahead and click on sign up okay so now we can move on to step number two which is to customize your website so to do that you can just go ahead and skip this tutorial down here at the bottom right and then we're just going to select choose a template and you can explore tons of different templates in here and really what i recommend doing is starting with one that looks semi-like what you want your website to look like and then we'll go in and drag and drop and replace items on the website and you've got all sorts of different categories up here like creative you've got photography design music and so on or you can just search by all templates right here but in this case i'm gonna go with a professional portfolio type one so i'm gonna click on portfolio and cv and then i'm just going to scroll down and look at some of these websites and if you want to view one you can just hover over it and click on view and it will show you a little animation of what the actual website looks like so i like this one so i'm going to go ahead and click on edit and then that's going to bring us into the wix editor and then you can just go ahead and close out of this tutorial as well so now let's do an overview of the interface so first you've got your navigation menu over here on the left and this is where you can create new menus and add pages to your website as well as change backgrounds and add new sections and elements to your website and a few other advanced items here which i'll get to later in a different video then over on the right you've got your toolbar for editing the elements on your website such as their alignment and position the size and so on and then you've got your main toolbar for the website up here which i will be getting into later in this video so first let me show you how to change text on your website it's very easy so to do it you can just go over to some text that's already there and you can just double click and then you can write whatever you want so i'll write my name then you'll see this text editing window pop up here on the right so if you'd like to change the font just simply double click and then you can change the font right here there's a whole list of ones that you can try out or if you'd like to change the font size make sure that it's highlighted and then you can just drag this little slider bar up that will make it bigger or smaller but i'm going to stick with an 88 just like they had and if you'd like to change the color of the text you can just go over here to this little color button and click on that and you can change it to anything that you want and you can just hover over to see a preview of them but i think white looks pretty good but if you'd also want to add your own color that's not in this little list here you can just go down to add color and then you've got a whole spectrum of color to choose from simply by clicking and dragging through this hue slider but again i'm going to stick to white and then you can just close out and then if you've ever used anything in a word document it's pretty much all the same settings right here and then we've got effects down here which we can open up and you can add drop shadows to your text borders and things like that and then you can also edit the line spacing the letter spacing and so on in this menu right here so now i'm going to change the second bit of text and i'm going to make this one a bit lighter so i'm going to go to the color and then i'm going to choose maybe something like this let's just make sure that's highlighted go to color and we'll go with maybe something like that and then just click the x and if you'd like to write new text onto your website so let's just say that there's some here that you want to add underneath you can just go over to add and then just go up to text and then you can pick theme text titles paragraphs and so on so with theme text let's just say we'll do a heading two and that will just add that in and then you can edit it however you want and you can just move it around by simply clicking and dragging but in this case i kind of like what i've got so i'm just going to hit backspace and delete it so now i'll show you how to change the images on your website so it's really simple i'm just going to scroll down and i'm going to click on this guy right here and then i'm just going to click on change image and then you can upload new files by clicking on upload media right here so i'm going to go ahead and upload a picture of myself and then upload from computer then i'm just going to grab this one and then click on open cool so now i've got that image of myself and you can crop and adjust them over here on the right but i like the way mine looks so i'm going to go ahead and click on choose image and there we go now i've got an image of myself right there and if you want to change the background image you can just go up and click on this whole section and then just click on change page background and then you've got ones that you can select here that wix gives you and some of them are even videos which you can see a little preview of here so let's say there's some sky movement right there it's pretty cool and if you load that in it's not actually going to play in the editor you'd have to preview your website up here to actually see that video working but in this case i'm going to use another image of my own so i'm just going to go to image and then back to upload media up here and then upload from computer and then i'm just going to drag in this blueprint paper right here and click on open cool and then now i'm just going to click on change background and there's my new background in there and it looks a little bit light so what we can do is also add an overlay to this so what i'm going to do is just go on over to settings and then i'm going to click on the color behind image and i'm going to change that to black and then click on the x and then you can just drag this image opacity slider down and create a bit of a darker background which i like just something like that then just click on the x and that looks pretty good so now let's look at how to change the button and the button style so to do that you can just go over and click on the button and in this case i already have one but if you don't you can just go over to add and then go to button and then select one from the list so i'm going to cancel out of that and then if you want to change what the button says you can just click on change text and you can change that right here so right now mine says download my full resume i'm just going to keep that the way it is and if you want this button to go to a specific place you can just click on this little link button right here and then you can send them to all different places so if you want to do a certain url you can just click on web address and then you can paste in that url right here or you can go to a different page on your website right here and then you've got things like anchor which will send them to a different part of this home page down at the bottom maybe or you can display a phone number or an email and so on but let's just say you wanted to do web address you could just type that in right here but in this case i'm just going to leave it and then if you want to change the style of the button just click on design and then you can pick different themed options right here which are presets or you can just go over to customize design and then you can change kind of the style of the button so if you want a little bit of a shadow on it or some sort of a border on it you could i'm going to leave it the way it is and then you can change the color so right now this has got an empty fill on it so if i wanted i could make it a blue button by simply clicking there and selecting one of the colors here or i could go to add color and create my own maybe something like that and then just click add and then click on the x but in this case i'm going to go over to hover and i'm going to change the hover color to be translucent so you have the option to change the color or in this case i'm just going to bring this all the way down that way when i hover over the button it turns transparent like that so it will start blue and then whenever i hover over it it will be transparent so let me show you so i'm just going to click on the x and then i'm going to click on save to save my work and then from here you can also just name your site so i will call this free website just like that and then click save and continue cool and then just click on done and then i'm just going to go over to preview and then as you can see whenever i hover over this button it will turn transparent cool so now just go back to the editor and you can drag around and resize any element on your website so let me show you if i were to scroll down i could just grab this social bar right here and i could drag that around anywhere that i wanted so if i wanted to reposition it i could or if you want to add new images and things like that to your website you can just go over to the add button and then click on image and then just go over to my image uploads right here and then again upload media upload from computer and then i'm just going to drag in this mouse so i'm going to click open and then add to page cool so now i've got this giant mouse all over my screen so what i can do is resize it by simply going up to one of the top corners you can see the mouse changes to this little resize button so we're just going to drag that down to make it a bit smaller and then i'm just going to scroll down and put this somewhere else on my website so maybe something like this or actually i'm going to drag this down to be maybe somewhere on here just like that i'll resize it just a bit maybe just like that cool now let me show you how to resize sections on your website so maybe you've got a section that you think is too big or too small what you can do is just click on that section and then you can just go down and drag this little stretch button right here and that's going to resize the whole section just like that and you can do this for any one of the sections on your website and if you want to reorder these sections what you have to do is just go on over to the little zoom out and reorder button right here which is a little magnifying glass and then you can just come down and drag whatever you want around so if i wanted i could just drag this whole section and put it underneath the contact me if i wanted which i don't want to do because it looks a little funny so i'm just going to drag it back the way it was just like that cool so now just click on the x and if you'd like to add a new section to your website you can just go over here to add and then just go down to strip and then you can select all different ones in these little categories right here so let's say that i wanted to add a service as one i could just go down and click on one and that's going to add that at the very bottom so what i need to do is reorder it so now i'm just going to go back to this little magnifying glass and zoom out and reorder and i'm just going to grab it and i will put it right underneath the about section just like that and then just click on the x cool now if i go down we've got that whole section right here which we can edit the same as everything else you can replace text replace these icons by simply clicking and then you can just change the basic shape so now we can move on to step number three which is to create a header so first what we want to do is add some menu items to this menu so what i'm going to do is just click over here in this orange area and then i'm just going to go over it to menus and pages and then from here you could add an entirely new page to your website so if i wanted i could click on that and then call it about and that's going to add if i click on done a completely new about page that we can edit completely separate from this home page but in this case i'm going to control z and then what we could do is also create an anchor so if we wanted we could click on a button up here in our header and that's going to take us down to say our about me section or it might scroll down automatically to the services section so let me show you how to do that so what i'm going to do is just go on over to the add button and then if you go over to menu right here you can go over to anchors and then you can just click on an anchor right here and just drag that in and we'll put that right here so this is at the top of my about section just like that and then what you can do is just click on rename and then you can just call it about just like that and then click on the x and then that way whenever we go back up to the header and we click on it then we can go over to menus and pages and then you can just go down here to this little add a link button and then you can just create an anchor right here so you might already be on web address or something like that just click on anchor and then you can say where you want this to go to and it automatically has about already put in there so i'm just going to click on done and then i'll just name it about and then click on done cool so now if i just click on the x and scroll up you can see i've got a little menu over here on the left and if i were to preview this and click on about it's going to automatically scroll to that anchor right down here so let's add a few more anchors to our website so i'm going to go over to add and then grab another anchor and i'm just going to put that here on services and then i'll just rename and then call it services click on the x i'll go down go over to add drag in a new anchor and then we're just going to rename this one and call it skills click on the x and then lastly we'll do contact so i'll go to add anchor drag it in right above the contact section right here and then rename it and we're just going to call this contact and then click on the x cool so now let's go back up to our menu and click on it and then we're going to go to manage menu and then we're going to add a few more links in here so i'm going to click on the little link button and then we are going to call this one services so just go to which anchor on this page and click on services click on done and then just name it services then click on done and then we'll add another one go over to here go to skills done we'll call it skills and then lastly we'll add a new one and go down to contact and then done and then just rename it contact and you can reorder these in your menu so if i go up it's going to be blocked by this window so i'm going to just exit out of that so you can see we've got contact skills services about i'll show you how to make this a horizontal menu instead of a vertical one but in order to reorder it just click on it go to manage menu and then you can just click and drag so i'll do about first and then i'll do services then skills then contact just like that and then i'll just click on the x and scroll up so now let's make it into a horizontal menu so i'm just going to click on it and then we're actually going to delete it by clicking on the backspace and then i'm going to go over to add go down to menu and i'm going to go to themed menus and just pick this basic one up at the top which is a horizontal menu that's going to add it into our website and then we can just click and drag that up to the top just like that and i also want to get rid of the home button so i'm going to click on the menu then go over to manage menu and then i'm just going to go to the little three dots next to home and then i'm just going to hide this and then just click on the x and there we go now we've got our four different menu items and we want to kind of align it with our button so i'm just going to drag it down just a bit maybe like that so now let's save our website and just click on done and then just go over to preview and now you can see we've got our menu up here at the top so if i click on these they will jump to the different sections services and so on which is pretty cool all right so let's go back to the editor and now let me show you how to add a completely new page to your website and edit it okay so to do that you can just go back over to your menu up here because realistically you're going to want to put this page in your menu so that people can get to it so i'm just going to click on that menu and then go to manage menu and then we can just add a page so i'll just click on that and then we can give it a name but in this case i'm just going to call it new page you can call it whatever you want it to be for and then just click on done and then this is going to add it to your menu so now if i just click on the x you can see we've got new page right here and you can see it's also created a whole new page for us automatically there's nothing in this page yet so if you wanted to add stuff to it you could just go over to add and then you could go down to strip right here and you could drag in all these different types of strips and build your website out like that but in this case i don't want to waste too much time doing that just wanted to show you how to add a new page so i'm just going to go back and click on that and go to manage menu and then just get rid of that page cool okay so now let's move on to step number four which is to create a contact form so let me show you how to do that so if we just scroll down to the bottom of our website you can see i've already got a contact form right here but if you don't maybe you selected a different template that doesn't have one you can just go over to add and then just go down to contact and forms right here and you can select a whole bunch of different contact forms but in this case i've already got one so i'm just going to edit this one so what you can do is just click on it and then if you just click on form settings first what we want to do is make sure that this contact form is sending these emails to the correct email so to do that you just go over to settings and then you can rename your form right here if you want and you can go down to email notifications and then you can see we've got my email down here and it's going to notify me whenever i get a new submission to this contact form so if you wanted to add a new email or change that one you can just click on add new contributor and if you go over to submit message you can change what the submit message says right here if you'd want or whenever they actually send you an email through here you can change it to go to a specific site or a external url it just depends on what you're using this contact form for now just go ahead and click on the x and if you'd like to add a new field to this contact form you can just click on the add new field button right here and then you've got a whole bunch of different options here like text number the anti-spam options and so on so if i wanted to add let's say a phone number i could just do number and then click on number field and that's going to add that in right here and i can just click oops i can just click and i can rearrange the order of that by simply dragging up and let's say i want to put it underneath the subject and then i can drag the message one down just like that cool and if you want to edit each one of these fields let's say you wanted first and last name here you can just click on name and then click on edit field and then you can see placeholder text right here we could just say first and last name just like that and then just click on the x and if you want to edit this info over here all you have to do is just click on it and then you can just edit the text and put in your information okay so now let's move on to step number five which is to edit for mobile you always want to make sure that your website is looking great on the mobile version because honestly more than half of internet traffic is actually searched on a phone rather than a computer so you want to make sure that it looks great on both devices so to do that you can just go over to this little switch to mobile icon right here and click on that and then it's going to try to give you this little tutorial we're just going to go ahead and click on skip this and it's going to give you this little simulation of a phone just like that and all you have to do is just scroll through your website and make sure that everything is looking good so maybe i want to drag this anchor down a little bit to be right on top of my about and by the way whatever you're editing on the mobile version is not going to change on the desktop version so let's just scroll through and make sure everything is looking good so maybe my text is a little bit big so i'm going to click on the text and then i'm just going to click on this little a minus button and that's going to bring it down just a bit maybe like that and i'll edit the text underneath to be just a bit smaller as well just like that and i want my button to be lower than my image so i'm just going to drag that down to be somewhere around there and i'll just drag my image up like that and then you can use the arrow keys on your keyboard to scoot them in micro doses to go up or down and then let's just keep scrolling and make sure that our website is looking good so this section is a little big so what i'm going to do is just drag the social bar and put it right underneath the text and then you can resize a whole section by simply clicking on it and then just dragging this little slider button up like that and that's going to close off that section a bit which looks a lot better and in this case we've got a little bit of blue in between these sections so what i can do is just click on this one and then i'll just move it up just like that and also adjust the anchor there we go so keep scrolling down again we've got a little bit of blue popping through here from my background so let's just go ahead and scoot that up just like that cool and then you can see we don't have a background behind our contact form well to fix this all you have to do is just grab this section and we're just going to pull it way down to fit that contact form in and then i'm just going to grab the contact form and just slide it up into that section just like that and we'll give it a little bit more room maybe something like that that looks pretty good and then to close off this whole blue section here all we have to do is just click on this section and we're just going to slide it up with that little button right there and close that off fix our anchor which is looking pretty good so let's just check the rest of our website so again a little bit more blue here let's just drag this footer up just a bit whoops got to drag this section down put this guy up in here and there we go now it's going to close that off cool so now our website is looking great on mobile and on desktop so what i'm going to do is just click on the save button and then just click done and now we can move on to step number six which is to publish your website so this is very easy to do i'll show you right now so all you got to do is just go up to the publish button right here and click on that and then it's going to give you your url right here and the reason this url has the name and a few numbers and then says.wixsite.com is because you don't technically own this domain wix is actually hosting this website for you and the domain so it's going to give you a little bit longer domain and this is why i recommend buying a domain and hosting because then you can put in your own professional domain like yourdomain.com and there's a lot of limitations to free websites as well the first one being that you do not own your own domain name which is why it looks something like this secondly with a free website with wix you're going to have wix ads appearing on every page and even in your favicon which is the site icon in the browser tab and you also can't monetize your website by putting google ads on it so you can't make money with this website you also only have 500 megabytes of storage which will fill up relatively quick and you also can't put google analytics on your website to see how it's performing in google searches so this is why i highly recommend paying for hosting and a domain name and it's very cheap so if you want to do it let me show you just go ahead and click on done then we're just going to go up to the upgrade button and then just click on compare plans and here you can see we've got a few different options now the best option which is obviously the cheapest is the unlimited option for entrepreneurs and freelancers this is going to give you unlimited bandwidth 10 gigabytes of storage you can connect your own domain name and if you sign up for one year you get a free domain so i'm just going to go ahead and click on select and then you can see here we've got our different plans so the longer that you commit to the cheaper it's going to be it's only going to be six dollars a month and a yearly is 8.50 a month but let's just say that you just want to try this out you're not sure then just go ahead and you can do the monthly plan and then just click on select but this is also not going to give you your free domain for one year that only comes with the yearly plans but domains are relatively cheap they're usually anywhere from 15 to 20 dollars so i'm gonna go ahead and click on select for the monthly plan and then here's where you just put in your card information and then it's going to ask you to find the best domain name for your site so now we can just type in whatever one that we wanted so i will do my free website dot com and then click on search and it's gonna say that this one is not available so i need to pick a new one so i'm just going to type in let's say my new free website and then click search cool and then that one's available so let's just go ahead and get it if you already have a domain name bought somewhere you can just hit on this button right here to connect it but in this case i'm going to get a new one so i'm just going to click on get it and then it's going to ask you how long you want to buy it for let's just say you just want to try it out we'll just do one year but obviously you save a little bit only about a dollar or so whenever you commit to two or three years but i'm just going to do the one and then click on continue and then it's got all of my same information again so i'm just going to click on continue and then i highly highly recommend the private registration because if not you might get called by people that want to you know design your website for you and optimize it and all this stuff they're going to call you email you it basically protects all of your information by having this on and i made the mistake of not doing this on my very first website and i really wish i had so go ahead and leave that checked and then click on continue and then we're just going to go down and submit the purchase cool so now it's going to say thank you for your purchase your new domain name is now assigned to this website and this could take around 30 minutes to an hour for this website to propagate and propagation is basically just wix is sending out your new domain name across the entire world to let every server in the world know that hey this domain name now exists and it can be viewed and this process can take a little bit so just give it an hour so now i'm just going to scroll down and go to my domains right here and then from here you can see that our site is live right over here and again after about 30 minutes to an hour we can go ahead and check on it so i'm just going to open up a new browser type in my new free website.com and here is our website which is all live and ready to go it's mobile friendly and looking good alright guys so that was how to create a free website with a free domain and free hosting as well as how to upgrade to a professional domain so if you like this video please hit that like button and feel free to check out my channel i have lots of awesome website related tutorials for how to make professional websites from home as well as how to make money with websites and so on so please hit that subscribe button alright guys thank you for watching and i will see you on the next video you

Channel: Create a Pro Website

Views: 266,709

Keywords: How to create a free website 2020, How to create a free website on wix, How to create a free website for your business, How to create a free website in mobile, How to create a free website for online business, create a free website on wix, create a free website 2020, make a free website with wix, make a free website with a free domain name, make a free website with free domain and hosting, free website, free website for business, free website domain and hosting 2020

Id: gnY6PWai8vw

Length: 33min 49sec (2029 seconds)

Published: Thu Aug 20 2020