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
Không có nhận xét nào:
Đăng nhận xét