Make A Free Website 2016 – Wix Tutorial (DETAILED!)

welcome to this web tutorial on how to make your own website on this tutorial you will be seeing all the steps I took to create this website you’re looking at right here so you will be seeing how you use strips how you place anchors insert videos insert images have an anchor menu have a contact form and much much more also we’ll be talking about how you add a new page have a gallery with your own pictures or stock pictures how to add your blog
into the website and you will all be seeing that in 40 minutes of me doing this actually in Wix so what is Wix which is a super easy to use website editor where you can mostly use drag-drop to create all the elements you can see here it’s really easy to use you don’t need any coding knowledge of HTML or CSS and actually you get a mobile version of the website just as well so that’s why I use it if you click the link in the description box below
you’ll just be taken to the page where I sorry and then you can follow me step by step so let’s get started by clicking the link in the description box you will land on this side this is the landing page and you just click on start my website and click new user enter your email address choose a password click on go you have to type it again because it’s a new signup and reenter your password and sign up and it’s that easy here you can select what
if you already know what kind of website you need fro to choose like what purpose your website should serve or if you’re like me too you just want to browse all the templates just click on all templates and you are in the template browser here you can see all the templates Wix has to offer for you and most of them are free some we’re probably priced but I’ve never used a priced one before the free ones just look amazing as you can see if you find
one that you kind of like for the design you can go on view it opens up a new tab where you can see that template like how it would look in your browser so this is the website the template how it would look in your browser the cool thing about Wix is you can change all the texts and the pictures and the background if you choose if you choose to use this template so if you see one like this looks pretty amazing for a tech website then you can go
to edit this side and of course you can look at okay what did they have on the website as well for me I’m not going to use a premade template I go on blank template and use a one page layout it’s just view it so you can get a better understanding of how it would look so this is a simple one page layout template with which I’m going to work with in this tutorial you click on edit this site and you enter the Wix website editor mmm it’s loading and
here we are this is your bread and butter where you design your own website I’m going to just quickly go over some things in on this page to explain to you okay what are the important parts so one the most important part is the pages menu if you click on it you can see all the pages you have on your website because we use the one-play one page layout you can only see one page but if you in with two clicks you can add a new page name it I know for
a fact that I want to have a gallery page and like this I create an any new page while you’re editing the website this is where you choose on which part of your website you’re going to work on so the gallery page is empty and then that’s that as you can see if you create a new page you automatically get the new page shown on the horizontal menu you can actually choose not to show it on the menu by going on hide then the gallery page wouldn’t be
shown but I want people to access it so I’ll just put it on show you have some different things here so site this is important later I’m going to show it later when you go on site settings where you customize your SEO so search engine optimization the Nexus toolbar tools here you can show the toolbar you can take off the grid lines if you want to I like to work with them because they make it really easy to like organize okay where it’s my page
where should I put things and it just keeps it looking neat the last one is snap to objects if you have objects on your page let me just click in home for example you have this anchor button everything in Wix is actually drag and drop so if you click it and then you can drag it around and these lines you see right here these are the snap to object to object tool so if you uncheck it it wouldn’t show you the alignment on a page I like to work with
them I think there are a great help so I’ll just keep them on on this side you have to undo in video this the editor view so if you use Wix you can just check the mobile view on how it looks and preview is where you can see how it looks on your real website so this is how will look on your mobile and of course for my editing side I like to use the desktop view zoom out and via warrior I’m going to show it later but for a quick view you can just
like drag a whole part of the page around where you set your anchors I think so it’s really easy if you add content that it looks clean on the whole this is a toolbar this is important if you add images we’ll go into that later when we start editing images so this is the right side and here the five button stores are your creative things so on background as the name says you can change your background color image video for now we have a white ish
where it’s white probably a background color you click on color and then you can change the background color really easily one thing that I found out is if you click on change you can actually use different color palettes for the whole site so if you look closely not only does the background change its color but also the text and the well the text changes color so if I’m not really good with color and making color palettes and you can choose one
of them that fits you or you like to look of it and then you can use that as your color palette I’m pretty fine with this so I’ll just keep it if you want to use an image as a background you can upload your own images if you want to or you can use free images from Wix I think this is one really good aspect of Vic Wix where you can have a lot of free images that you can just use on your website and you don’t have to pay so then there are landscape
images abstract images and they even have a link to big stock images where you have more artistic page images where you have to pay for an image but for my needs for this I can actually use images as well you can have textures and patterns as well if you like so to change it you just click it and then go on change background and then you have the pattern and background I will just use white for now so I’m wait a second yeah this is the background
I’ll use so I’ll just use a color a video is the same you have some preset videos that would be your background in it so that’s that then now I’m going to start editing this site so it looks it fits my needs first of all the name of site I’m going to edit click on edit text and start editing it to Wix tutorial 2016 for example here you can choose the site theme so site title page title it all they all have different layouts these are preset
layouts or you can use your own font choose the font size as you see fit and make it italic or not I think I need to highlight this to actually change it yeah that’s it so you need to highlight and then you can change it around if you want to change the color or want to have a highlight or if you actually want to link it it’s all here you have some effects here and you can change spacing and alignment as well just like if you would use in word
for numberings and bullets and stuff so this is how you change the text in a website so we’ve finished editing our text now I want to show you a really good feature in which which you which are scripts you see one example here this is a strip which goes through horizontally through the whole page if you want to add your own strip you can go on Add button and then click on strip you have here the Classic layout but because we have already one in
certain we’re going to use this one so if you click on it you can change the strip background to either a color so just a color an image from Wix let’s just show you so or a video I like the video features a lot because it brings movement into your website and makes it a bit i’m where i caching especially on the first page on the top of the page which is what most people will see we’re actually all the people will see if they land on your website
so i’m using the underwater underwater video now you click play and you see how it would look on your website it just looks so yeah it just looks good if you have a short video there on settings you can make it play in a loop or even change the playback speed so if you want something to move in slow motion if you have your own video that you want to have as a strip you can change the playback speed to have a effect there and that’s how you add a
strip now one thing one more thing here in the strip in the toolbar you can change the height of the strip so now it’s like at 393 pixels I want it to be wider a bit wider so I go on 500 click enter and it’s a wider strip I like this I like it to be a bit wider to have a bigger effect when they land on your page one thing I forgot to mention before when I was talking about this many upstairs is a DS 3 button so the safe thing it’s clear if you
are while you’re editing you want to they’ve often so you can use your site the first time you say if you actually have to choose the domain for the free version so I’m just calling it with tempore because it’s a combination of your username and Wix calm and this page so the first domain should be home for me later I’ll show you how you can use your own customized domain after we upgrade but for now we’ll just continue using the free word version
so that’s how you save and as you can see your site was saved and let’s continue now that we saved our site let me explain the difference between publish and save say this only for you while you’re editing your website you just save your changes that nothing gets lost if your computer just crashes or something and publish is if you press this people can actually access the website on the domain you just set up so as a suggestion I’d like to work
on a website until it’s finished and then publish it but I will save often in between but we were talking actually about the preview feature I’m the preview feature you can actually see how the website looks on your browser as if you are on your browser so your viewers or your website visitors will see the website just as in this preview and now I notice okay this strip is actually a bit too long and it covers the about sign so I’m going to
change this no click on strip I’ll go from 500 to 450 and this is great okay let me just edit this text in here real quick edit text using strips look good okay now let me just show you how you can edit an anchor you can change the text by clicking on change text and I want to add our link to it so how we produce this video and still charge nothing or we don’t get money by for producing this video but we get a commission fee from Wix if you sign
up on Wix using our link which is in the description box or which is this link right here this just it doesn’t make the upgrade fee any larger for you we just get a small cut from Wix for every sign up and that’s what helps us keep these videos free so please if you want to try Wix use the links below now let’s continue we change the text here let me show you how you can add some elements and also change images for example so you can click on
change in images upload your own images and one new feature from Wix is you can use social images so you can link your Facebook Instagram Google Drive account here you just just show quickly show you if you click on it you have a pop-up where you put your username password on and then you can browse your Instagram and Facebook photos just as you would on your browser so it’s really easy to upload your own images you already have shared online for
now let me change this image to something from Wix and it’s choose an animal let’s take this Peter so I can show you some inbuilt editing abilities of wigs one thing you can do is the crop feature here you can say okay for example you want to cheat in a in the center so you crop it to 140 percent apply it and the image is image change like this in crop you can drag the image around to fit your framing eat so I want the cheater to be on the right
side okay apply and Wix also has some inbuilt image filters so you can look around try some filters on and I think it’s really cool for Wix said you can actually use filters in side the Builder and not having to use a different program to edit your just to make the crude image-editing so this is a really cool feature by Wix that is pretty easy to use now we know how we have been editing the things that were already in the template I’ll just
quickly show you how you can add your own element so I’m going to delete this text box by going on delete on my keyboard and I’m going to delete this button as well and I’m going to insert a video here on add you can see all the options you have what you can add like shapes and things but for now let’s add a video so just two clicks and you have your own YouTube video so let’s set up a link for this video you just I have one link already already
copied on my keyboard and I’m just clicking update and there you go you have the thumbnail of the YouTube video now I want this video to be a bit larger and I want to take this picture down but when I use this it overlaps with the services part so how you can do that is you go on zoom all in view order and you click on this drag space and you just drag the whole page down so you create a bit more space I think I need to picture to the video to
span the whole width and the picture so about this should be fine then I’ll take the picture drag it down and these lines really to help guide the process of dragging and resize this make larger and voila we have the video perfectly aligned I’m using my keyboard for fine tune movements that the video moves one pixel at a time so now you see how you can change the image and add a video let’s continue with okay this part you have a lot of shapes
here and if you click on shape it’s actually pretty interesting you can let your creativity fly by using the inbuilt shapes coloring it in a different way looking for shapes that represent the information you want to show so they have a lot of basic shapes and you can actually play around with this a bit you can change the color make a link here whatever you want so it’s really easy to make like 2d animations or shapes to insert in your website
and here we already have a gallery and I’m going to go to gallery so I’m going to delete this images plane and make it she let me just delete this whole part and reorder this so the bottom contact form comes up like this perfect so now let’s go to the gallery page and add some pictures just as before you have in both galleries with a lot of options I’m looking around and I’ll just start using these honeycomb triangles because I just like the
shape of it and you have to already the stock images of Wix inside now I’m just going to quickly show you how you can change the images first of all you can remove the images one by one like this and then the gallery will become empty let me just quickly do this and then we’re going add images with the same image browser from free Wix and I’m going to show you a quick little trick how you can add more images into the browser so let’s say I want
more animals in my gallery you click one you press down shift on your keypad and you click to the one where you want to stop and then you have selected like probably 16 images and you can add multiple images on to the gallery and I think it is the same way when you want to add images from your social media so it’s a really neat trick that you don’t have to add them one by one we’re done and you have the images in here so that’s how you make a
gallery page one thing some of you might want to start logging on your website so let’s just add a blog so just click on this B icon go on at now and which also has a really intuitive dog manager as you can see it created a new menu which is the blog you have the blog page this is how your blog page would look and you can actually customize this later for now let’s just add a new blog post so I can show you the editor for how you can manage your
blogs and how publishing works so it’s just a engaging title you can write your post here you can put in images galleries videos HTML code whatever you like in your text part and now here you can directly publish your post but one thing you can actually schedule post in from inside of Wix so you can say ok I want to publish daily but you have five texts already in your draft you just click on them they want to have it published set a time and
then you have a scheduled post for now let’s just publish this as is and now it is published let’s go back to the blog editor and as you can see the blog the text was published this manager of manager blog gets you to the editor where you can manage all the blog posts to draft schedules and even featured articles and you can manage your categories and tags like all the things you need to have a successful blog and now let me just show you ok you
have some blog elements on my blog you can add some new elements like recent posts which categories or s buttons everything’s here you just on as on your web site you can just click and delete for example if you don’t like it or you can make a actually a rectangle shape with your mouse let me just and drag it around so you can change you like a layout of your page anyway you’ve see fit so and group them and then use them over here or there but
for now I’m pretty satisfied with the basic design so that’s how you create a blog and add it to your page now we created about three pages worth of new pages but we because we use the one page layout I would like to use the anchors I’ll explain quickly what anchors are so here if you move the toolbar to the left you can see those black those blue signs with a anchor for a ship and these are called anchors and I’m going to quickly show you what
they do first of all you can add anchors it’s a bit hidden under more and here on their anchors you just click it and then you have a new anchor and you can move it on any any place you like so for example I’m going to use this on the contact form add a contact anchor and because we deleted the work page I’m going to delete this work anchor now how do you use them well you go on the pages menu and you can not only add a page but add a link to
your menu you can add email and web addresses but what you can add or anchors to so you can make an anchor which goes to the page anchor to about if you click done you have a new anchor and this is the ball place so I’m going to call that menu about page so it was added here let me just quickly add the second anchor to and then I’ll show you the functionality of those anchors services and the last anchor contact don’t contact now let’s quickly go
on preview and check out how anchors work so this is the first page everybody sees and you have the many points that you can click on so if I click on about it automatically moves to the anchor you set if I click on services goes down to the anchor I set there and if I click on contact goes on here it actually shows the same pages because we don’t have a lot under our page so it just Scrolls down until you can see the whole forum there and that’s
how you use anchors I think they are really important to use if you have a one page layout let me just quickly show you why your is the anchors that if I go back to the preview just to show if I click on services the anchor menu is gone right so for people who want to navigate a pretty long one-page website they have to scroll back up it’s not really ideal so what you can do there are actually two ways one way is to go on the menu here manage
menu well it’s actually to go on the header and go on settings and fees the header so what this does is anywhere you go on the page the header is still shown all the time so even if you go on contact and are on the bottom of the page you can quickly go up up on the top of the page or to a new page this is one way sometimes it’s really good that you have the contact thing because where people just can use this intuitively the other way is to add
an anchor menu which is you just see more under anchors and then you have different anchor meanies let me just use this for an example so this adds a menu on the right side of the page which will stay there wherever you are let me just okay click on settings match the background that’s good manage the menu and have three anchors so these are still in the anchor in preview what it does is okay if we go down you see this menu is all the time is on
the right side all the time so here we have like the header and the anchor menu mostly I would choose one over the other and just show you quickly if the header is not frozen how it looks unfreeze the header preview now I go to services and you have the anchors here so those are the two ways you can use the anchors I’m actually just let me just quickly create an anchor for the top page because I would love to have an anchor right here that goes
on the top of the page or the home page okay quick and now it was added in the anchor menu so anytime you create a new anchor it will actually automatically get added to the anchor menu but not automatically added on the horizontal menu as you can see we have like pretty a lot of points here in the horizontal menu and let me just quickly show you how you can add and remove these from the menu but still make them accessible I think in the
beginning of the video I showed how you can hide a page by going under height and then nobody it is just not except as accessible from the menu but another thing you can do is okay for example we have 3 pages block gallery in the home page and these are anchors you click them and drag them to the right and indent them in the pages menu and what it does is if you go up and on the preview part if you hover over the whole thing it makes a drop-down
menu where you can click the anchors and access them that way so it’s a if you have a lot of pages here and you have like overarching categories where you can put those pages together it makes sense to make a drop-down menu like this one little quirk of which actually is if you go here and then you want to undo it I just found out you have to start from the bottom to undo so I’m just we have seven points I’m not really concerned about the menu
being too large for now so these are now how you can make navigation for your visitor it’s easy on our website and that’s that about concludes how you can add content to your website and make the navigation easy so actually before I forget we have a contact form here and for some websites is really important that you have a contact form it’s pretty easy to use you just click on set your email you enter your email address if you want you can enter
a second email address and then you can change the contact form from what you include in the contact form you can say okay if it’s mandatory or optional and it’s pretty easy to use you can change the design as well from like for example this one or this one I’ll go with this actually and that’s one thing then one thing one other thing the social media bar so you have a social bar here that set the social links as well so you click here then you
add your Facebook link your Twitter link and your Google+ link if you have it and you can also add all the icons like from a lot of services Yelp YouTube let’s just add YouTube because we are using a YouTube video so okay and that’s how you use your social links and you can all of course drag them around like everything in this in the Wix editor so so this is almost all the basic building blocks you need to build your website this is just for the
basics and if you need more customizable options like you want to open a shop or you want some booking for a hotel or something there are actually a lot of apps I would actually call them more like widgets that you can insert in your website for um basically most of the needs you would have for a website so you can have the apps for online store which actually you have a where which store online stores if you want to start a store you have
different apps for bookings business tools marketing tools music you can add music I mean the I think Wix the good thing about Wix is you have a really intuitive design and you can use it and you and it’s really easy to add the things that you need without a lot of knowledge about coding and that’s why I prefer to use Wix when I’m creating the websites I’m that I want to create so because we finished building our website let’s publish it before I
just quickly save it and then I’m going to publish this and we’ll check it out how it looks on the domain that we set up yeah our site is published let me copy this I could click on View site but as a test I’m going to open up a new tab and there we are so this is the finished website how you would see it on your browser you can probably connect to this website if you use this domain right now and as you can see because we are using the free
service we have these little wicks ads included in our website they just follow you around on the header and footer for some websites I don’t think they’re as intrusive as they can be I remember they used to be bigger on the bottom but if you want to remove them or you want to have an own domain without the dot Wix calm you wouldn’t need to upgrade and pay for in the sake of this tutorial I will go through the steps to upgrade your website right
now so let’s go back to the editor so back to the editor let’s go on upgrade and well let’s just go over quickly the things you can do with an upgraded website so the one thing I touched on it the free domain the second is you get extra storage and extra bandwidth the third is pretty important too that you can connect to Google Analytics so you can see how many visitors your site has where on which pages they are and I will go into that later
after I upgrade it by creating a Google Analytics account at the fourth is to remove the wicks Brown adds so for now let’s just compare plant what Wix offers Wix offers four basic plans which you can pay on on a yearly or a monthly basis I opened up the monthly plan of course your yearly plans are just a bit cheaper because you put the money upfront the main differences between them are okay the e-commerce commerce one is just for for an online
shop you only only get online shop by going to the e-commerce one so if you have another shop you go for e-commerce and those see are the options if you have different needs so let me just go quickly over the pros and cons of each option one thing is okay the most basic Connect domain plan that gives you all your own domain name name so this domain with the dot Wix comm will be removed but the ads will stay the combo plan removes the ads and
gives you a bit more storage space than the most basic plan so this is what I’m probably going to choose because I’m not expecting a lot of bandwidth bandwidth is how much data you can transfer to your site to your visitors so if you have low bandwidth then the website will respond slower if the two gigabytes are used up in bandwidth and unlimited is for people who just have a really high traffic website who expect a lot of people to come who
want to have a lot of storage so they can upload their pictures and videos and whatnot on their website so for us we’re going to have to Como plan and for now we’ll choose the monthly plan so you just click on vinyl and you pay I’m just going to edit this out and great assault while I insert our numbers because well privacy matters so see you then so I’ve filled out my information and as you can see you have a 14 days money-back guarantee if you
don’t like how your website looks you can get your money back and I’m satisfied so let’s submit the purchase so as I told you earlier you can now choose your domain the one thing if you have a domain name in mind you can just type it in and search for it is available then you get it oh so because I chose the monthly plan I didn’t get a free domain but if you choose a yearly plan on Wix you get a free domain so you wouldn’t have to pay here for
now I’ll just reserve the domain for one year fill out my contact info I’m going to make a cut here so you can I’ll grade this all and it’s all filled out so let’s go on continue now you can choose between a private registration and a public registration as you can see this is recommended because if you choose to register of public key all the information this is grayed out but you can read it if you are here will be exposed on a web that means
that if somebody looks up your domain then they will get all the informations it’s keep your name email address address and your cell phone number or phone number you use to register the your domain so I would definitely recommend going with the private registration so let me just quickly fill out the information and it’s all filled out so let’s submit this purchase ok so which gives us a little option where you can actually get a personalized
mail box as you can see all the mailboxes are with the app Wix tutorial 2016 which is the domain we registered and we can use the mail address with our website for our website we don’t need it so we just go and close and our back on our now upgraded website let’s just check that out real quick so we had the domain Wix tutorial 2016 com let’s access it and there we are this is the upgraded website without the free ads and with our own domain so
let me just quickly close some tabs and show you what new features we unlocked on Wix okay leave this page go back go back go back and let’s open our wit scone on our sites so now as you can see we unlocked the domain Wix tutorial 2016 Khan and the Premium Package combo now on this dashboard you can actually do much more than before so first thing is under domain hosting you can choose a favicon just upload one right now so you can see what it is
um so let’s choose something with a bit more contrast this one super pattern now this is our favicon the favicon is what appears on the tabs of a web browser so this picture right here is a favicon we just change the favicon so let’s check back later if it changed this different things the next step for making the website more friendly to use is the analytics tabs this was locked when you were in the basic mode or in the free version but now
because we’re in the combo version we can use analytics so to use analytics we click on user analytics you see your site here go on Ln latex and then you enter the Google Analytics tracking ID I will show you quickly how you get this Google Analytics tracking ID and what you do is I’m going to open a tap go on analytics google calm if you don’t have a Google account you may need to create one then here go and sign up and now you fill out this
information right here let me just fill this out really quick so this is all filled up you just enter the website URL and then choose account name which is industry and stuff this one I would just keep clicked and then click on get tracking ID here well let me read this or not and just click on I accept and we’re here so this is the tracking ID you need and this is also the page where you can see all the data that Google Analytics collects so I
just copied this you go back to your Wix tab and then you enter the tracking ID and it has been added and now the Google Analytics will start tracking your website by using that Google Analytics you get really a lot of insights on how many visitors your page has on which page they spent most time on and it’s just a really good tool to track how the visitors use your web page and where they go so let’s just go back to the favicon I change this it
should appear right here when I reload this page and as you see there is a favicon we just set up so those are two things that you can use while after you upgrade I really do like the favicon thing and Google Analytics is just needed as that one last thing let’s talk about SEO s so SEO stands for search engine optimization it means that if you have well how a search engine looks for sites is it looks at the tags that you add into a site and then
it categorizes them into into keywords that if for example in Google people write Wix tutorial 2016 then you have to have those tags in your website that it appears higher ranked on a search what you can do is okay you have to suu all visit or you can use you can actually update the pages in Wix as well in the editor so let me just quickly show you how to do that we go in the editor we go on pages and go on page info and here you have SEO so
what’s the page title on the search engine so what would the website name be – Tori – those and you can fill this out for you can add like pay a page description keywords and you can actually also choose to not include it in search results and you can do this for actually every page you have on your website it’s a bit tiresome to do this but it’s really important that you do if you want to get found by search engines so if you have just think
about what kind of keywords you want to use what is getting searched and that’s how you optimize your website for the search engine so you can add your tags like that if you want to or Wix has an inbuilt search engine optimization wizard which you can access on site settings SEO and then use the SEO wizard you choose your site and then you make an example search phrase that you want to use so for example Wix tutorial step by step 2016 would be a
popular search phrase I think and then let’s just get the report now on this page the SEO wizard shows you okay which part I still need some changes to make them search engine optimize so for example what is the title the title of the web page like the first page they land on as home as you can see here so the SEO with success okay then the title is too short please change a different title the description of the home thingy home page which we
were just editing under pages is still too short so we should change that headline is great but we would like to the search engine optimization wizard with what’s like likes to have to step by step inside and the image name is also not named so if you you can actually get a full side report where you can see all the how much text you have how much unique tiles you have and it just gives you a rough guideline how you can optimize your web page to
make it search engine friendly that’s something I would put a bit of time into because it really dries to traffic up if you have a search engine friendly website and this concludes our web tutorial I hope you had a good time and learned a lot I’m confident and you have all the basic building blocks necessary to create an awesome looking website using Wix if you choose to use Wix please use the link in the description box below to sign up so when
you choose to upgrade we get a small commission so we can keep these videos free till the next time bye I want your handout it ok bye