Wix Tutorial 2019 | How To Build A Website on Wix Live | Step-By-Step Visual Tutorial
Articles,  Blog

Wix Tutorial 2019 | How To Build A Website on Wix Live | Step-By-Step Visual Tutorial


is it possible to make a website in just
an afternoon so right now today we’re gonna build a website so recently I’ve
been asked to recreate this website which is rainmakers adult worldwide it’s
a consulting company that brings in business and hard to reach people and
brings them together to add more perspective to big companies and I’m
gonna recreate this whole site in Wix and I’m gonna make it look stunning and
we’re gonna do it together now there’s about ten things we’re going to cover
we’re gonna get how to do the logo how to add the art how to add a call to
action how to pop ups SEO a mobile site a contact section and about section a
services section and trust element sections sound good okay
so let’s dive right in them and get this going so first we’re going to create a
new site we’re gonna click on business and we’re gonna go on the Wix editor
here now we’re gonna create wish could choose sort of a consulting template
which is I quite like this one and one we’re gonna have to download a few of the few of the well we’ll have to get
the the specific logos a bit later on but right now we can sort of we have all
the copy and stuff here so let’s first build out the outline of what our
website we want it to look like the wireframe and then we’re going to
personalize it make it a bit smarter so the first thing that I feel most people
care about is actually the images and their websites now what we will have
here is this sky position but I actually want to change this whole thing so if
you go to change strip Brack background images we’re gonna go free from Wix
and we’re gonna go Consulting what does that give us here
so sometimes you have to just sort of play around and really look for things so here we’re gonna have this sort of
walking we’re gonna make this a bit smaller by stretching it and we’re gonna
get so the name of the the company’s rainmakers worldwide so here we’re going
to sort of get there where we want to sort of bring them together so rainmakers we can make the font a little
smaller so it fits great here’s a little tip when you change the strip background
you can go into settings you can give it a white opacity and sort of let it come
out a bit more we know the theme is that looks great so
now the next thing I want to do is is change this around so you can sort of move it as you want here I want to make this contact us and
here we can add sort of a tagline base on the mission and I know from the
company that they’re changing for company so something a little bit like
that and here I want to make the design a green so we can go to customize design
feel color and just change that to a sort of green that fits so let’s see
that it looks good and we want to get rid of that border don’t we there we go
and we can also make the text a bit bigger so customise design text just so
it’s a bit easier to read because you don’t want something that’s not readable
to you so basically and I just want to change the layout so I’m just going to
drag this below and this is also hard to read so we’re going to make this into a
different font we’re go with Georgia so already we have something there and I
actually want to give this tint instead of a white let’s give it the same sort
of let’s give it that tint as well so that it sort of has a green tint that is
very subtle but actually blends in quite nicely so here let’s get some pictures
from the website so if we go to about us we have a picture here however it’s a
web file so I’m gonna have to take a screenshot of the picture which is not
exactly best practice but it’s something you can do to make sure that you have
something that works for the client you want to deliver always so here we just
took a screenshot of the picture because getting your assets is sort of the first
and foremost most important thing to do and rainmakers alright so now I’ve got
rainmakers going on here I’m gonna change the picture change column
background and I’m going to change this to about us and we’re going to change
the image and here instead of using free from from Wix we’re going to upload our
own image and rainmakers and as you can see we can actually see
the face so we need to position it down so there we have something perfect okay
great and now we can change this to copy for the website looking sort of a copy
and paste again because we’re using Georgia let’s go back and use Georgia
you want to be consistent throughout everything and we can update those
buttons later for now we can make it a smaller and there we go we have
something that looks a bit better so we have rainmakers which is still slightly
hard to read if I do say so myself and sometimes you know where I spend a lot
of time is is simply in the design I’ll spend a lot of time and like so instead
of green maybe I want a white and then I want the text color to be black and then
I also want the borders of the borders but rather the corners to be rounded and you can see that already it’s sort
of a very different feel just from that I think it looks quite good though you
have about us here and there’s a few other things we want to put in so we’re
going to want to have we have the call to action we have the art we’re going to
want the logo so we can just type in rainmakers type in rainmakers there and
here then the business is sort of for now we’ll put in London consulting which
is sort of the brand description here we can sort of we can do our services and we’ll do the three services that the
company offers I’m going to show you some cool tips and tricks here we should
bring this is our anchor tag which will bring up here and then you can sort of
drag this height which is a little finicky I’ve had a lot of people tell me
it’s really annoying but it only goes as high as the anchor tag that’s the secret
once you’re editing your website here we’re gonna add another strip and you
can see there’s different layouts here the base livers got a classic white
strip and we’re gonna go click that button and we’re gonna send to back ok
great now we’re gonna go click Add we’re going to click vector art and here what
we want to do actually is find the three icons that sort of describe our services
and the reason for this is that it’s icons are just a really great way to
communicate actually so we’ll get three different ones here again in the vector
art which is a Wix exclusive really and then we’re gonna sort of type in
three I actually don’t quite like that one anyways a lot of the web design is
really sort of an artistic creation where you want to find a good balance of
art and design while still communicating the main assets of the website and
that’s what’s really important I find ok so I mean we’re building this straight
from scratch by the way and after this will sort of end up with a contact here
and that’ll be good so now what I want to do is add three texts and I’m gonna
have three paragraphs and basically we’re going to go back to the web site
say corporate engagements and it will copy we’ll copy that and now we sort of have
our first paragraph obviously it’s quite a little long I’m gonna make this
slightly smaller and really this at this point we’re really getting the design of
the web side the feel of it up to scratch so those will be our three
services we’re then going to you know make the strip a bit smaller so one way
to do that is just hold it up go all the way to the bottom and then again this is
sort of the one annoying thing is that it’s often annoying to get rid of all
this blank space but that’s just one of the things about Wix cool so now we have that and we’re just
going to add a little call to action so that is just a button and let’s just add
a border to that and you can imagine it saying book us
now but instead we sort of want the green so you go to borders and we can
use that same green and let’s and if we want to make this as well so now we can
keep that consistent green and that consistent brand all the way through
which is really really makes a website pop out okay great so we have the green
we have the about us we have the services and we have the final contact
us okay good let’s publish that site and that’s the first one we’re gonna do a
few more things so one I’m going to add a pop-up that asks people to subscribe
so here we’re do a lightbox and we’re going to do so really simple we’re gonna say never
miss an update get your name on the list and we’re also going to ask for the name
and email we’re gonna make this slightly smaller whoops I guess we’ll just leave
it as the default for now and we can add sort of a vector art to make it really
pop and again we can change the change it so it stays on brand colors so then
it’s sort of node fits a bit better than it did before and we’re going to okay
that looks good so here we’re gonna change the overlay
so it sort of pops up behind that looks beautiful okay I like that so we change
the overlay we set it up we’re going to set up a trigger so it pops up after ten
seconds great and there we go we have the the
pop-up that comes up we have we’re going to publish that the next thing I want to
do is I want to change the mobile so go to the top there and go to mobile view so here we can see what it looks like
on mobile so it comes up right at the top and this
is really the size of your phone will be this big but it’ll be similar so now we
go back to our homepage and as you can see it doesn’t look great but we can
make it look great in just a few seconds so one we have our button there we’re
going to move this up we’re going to move this down and we’re going to change
the font size here so it fits into one and then we’re going to sort of so that
sort of explains what we do so now we have that working we have the about Us
which is very clear our three services looks a little weird if I do say so
myself so we’re gonna make this slightly different so what we’re going
to do is we’re going to put this on the edge to make it easy for people to
distinguish obviously we’re going to have different text here but this is
sort of one version where we’re able to get our message across and we’re almost
done guys yeah look and this is the call to action which we can make a lot bigger
on the mobile version and then we can just make this smaller perfect now we
have the contact section and that looks great
so as you can see we’ve just finished the mobile section so we can publish
that now the next thing I want to do is I want to basically at this point get
found on SEO so what we can do is add alt text and
stuff but I just want to before we get into that change the Meta Description
actually of the page so if we go to the site manager we have rainmakers and so hear this if you go through this
process you can type in so what it’ll actually do is the SEO plan will say
it’ll recommend a blog post for you I believe so it’ll tell you things that
you might want to do so yeah okay yeah so you will if we go here if we click on
here click on the three dots page SEO this is really important rainmakers this
is we’re gonna put show up so so here you have the small
description so now we have what we show up on Google and then you could say rainmakers London and there we go now we can put that in
and save that and now we’ve just got sort of the main SEO but what’s great
about it is that you can get a lot more tips from that page so we have the art
to call the action the pop up the services the last strip I want to add is
because this client has so one thing knows when you’re moving something down
you’re gonna move everything down so if you want to move something down you need
to highlight you know the whole strip and then move it down together so here
I’m going to add a gallery and specifically so that’s a showcase trip so vegan so
it’ll still pop up there okay great so that’s what it looks like on mobile and
what this will do is we’re gonna get the logo of a few different things and then
we’re gonna bring those into Wix so one let’s download that logo Rio Tinto and Cambridge these are three clients three three clients my three clients the
person who’s worked with and then all we need to do at this point is change
images and we’re going to add images we’re going to upload our own images and if you hold down shift you can upload
multiple images done and now we’re going to select all of them great ad that’s a
gallery and it looks like Cambridge University doesn’t quite fit the last
thing is you could change the page background to white just so it matches everything so
unfortunately Cambridge University that’s not a good so we’re just gonna
take the the crest for now we’re gonna get here we go who’s still
not quite that great is it if not we can Deloitte logo for this you
can do if manually you can manually redo it in Photoshop but for now because we
want to we basically the first most important thing is can you get a rough
draft and then come back to it later I’ve always found that having a rough
draft helps a lot to providing you know at least the consistent momentum of a
great website so we have Deloitte everything and we make this smaller and we can eventually add more images and we’re going to add one piece of text
here just says client looks great okay perfect perfect and the last thing we
can do is we can change we can sort of make this a lightish gray
lightish green and this is so it sort of sticks out a bit more and helps bring
that greater green consistency that we know and love okay great so we have our
tres elements we have our services our about again we can whenever you add
something new you want to make sure that it looks good on the mobile site so you
have the pictures there you have a client you have button contact form
the last thing we’re going to do before we wrap this up guys and it’s been a
really I think really powerful tutorial today is finally we’re gonna link all
these buttons to the anchor tag so let me tell you what I mean by that we’re
going to link to so these things right here contact that’s what we’re going to
link it to so if you go and link anchor contact done we’re going to change this
to contact us again we’re going to link
that to anchor contact done perfect here we go again contact us
anchor contact done and now all that’s going to link directly to there now the
last a few just we’re just going to hide a few of these so we have the services
we’re going to hide that we have the blog which we’ll get into we have the
About section so now we’re gonna move about here so that when you click on
about it will take you there let’s see how does that look now pretty
good pretty good moving forward let’s finish off with the block shall we so
that picture actually sort of works for us and we have different blog posts here
if you go to blog you can do a create post and we can do our first post and
we’ll just make the defaults a picture some text and a headline and that’ll
really be so well doing something really simple and then we can add an image free from
Wix one of these snazzy pictures and you can add your name anyways that’s
it also if you go back in your dashboard here you also have a few other things
like contact CRM so that’s your blog now we just published a post obviously
you’ll probably want to get rid of the other post but if you want to see it
you we already clicked on publish there we’re gonna click on View site and at
this point all we’re going to do is this is what the site looks like so there’s a
little bit of a bug with this now working right so what we’re going to do
is we’re gonna make that a static and I think that’s because there’s a parallax so change strip background settings none
and that way it stays so now when we reload it we shouldn’t have that problem perfect whoops it’s still reloading the
old version there we go the non parallax version perfect so that’s our site and
as you can see the About section takes you to each part and we even get the
pop-up that comes up that wants your name and email address so said it said
why so now it automatically subscribes you and if you want to check out where
those goes where that goes if you go into site my dashboard and wait for that
to load you can go into contacts CRM and you can see that said you subscribed and
in your contact list you have one more person so that’s sort of a cool tutorial
about how to make your website your consulting website you know from scratch
from the beginning we made the whole thing mobile version included the last
thing is if you want to have a great domain and you want to remove the ads
that we saw on here then I highly recommend that you click upgrade and get
the get one of the plans it’s just it’s a great it’s easy it’s fast Wix test
backups for you I highly recommend it if you’re serious about getting a website
but watch our other videos on e-commerce and on 24 mistakes you want to avoid
will make your website and yeah subscribe and comment comment on this
video tell me if you liked it or not tell me we thought was a good tip so
that’s about it see you in the next one

3 Comments

  • S Taylor

    This is the most ridiculous tutorial I have ever seen!!! You're not explaining anything — "playing around and looking for things" — a tutorial will show you exactly where to go. You keep telling them what you're doing, but YOU'RE NOT SHOWING ANYONE HOW OR WHERE TO NAVIGATE TO. All you're doing is creating a website and letting the viewer see you do it — you're not actually telling us HOW!

Leave a Reply

Your email address will not be published. Required fields are marked *