Welcome song this is the final design that will be designing in today's tutorial to the
good news is you should lie to use this layout in your freelance jobs or even your personal
projects you can go ahead and do so all you have to do is to click the link I provided
in the show notes below and download the layout is also a video that you can use that shows
you step by step how to download and install this on your own website secondly I have some
deals for you in this tutorial so firstly I give you up to 57% off on hosting with a
company called in motion so it's a fantastic day also if you want some very good hosting
I really really recommend this company secondly if you'd like to learn TV I also have a fully
featured caused this course is called Davy blueprint three it will show you everything
that you need to know about DV to get you up and running if you haven't really started
working with WordPress I also have a WordPress course which will get you up and running as
well and these two courses are all at discount and I've also let them in the Shadows below
finally in order for you to design this layout you are going to need a elegant themes membership
so again I've learnt everything that you need in the show notes below so without wasting
a lot of time let's diving and let me show you how I managed to create this landing page
alright so let's build this page so first off what we're going to need to do is to create
a brand new page someone to come over here to my dashboard and I'm going to go come over
here to pages and click on add new so we're going to call this page fitness so this page
can be used for a fitness club gym or whatever club that you wish because all you have to
do is to change the images to make it whatever club you want to customise it to ok so I'm
going to click on Tuesday divi builder and use visual builder right so with that in place
we're going to start off by adding a background image so I'm going to come over here to my
section settings click on background and I'm gonna come over here to the image click the
Plus button here and the image of money used for this is this one right here click on upload
image ok so I can see my images right there in the background the next thing I want to
do is to come over here to advanced click on custom CSS and we're gonna add this CSS
code now what does CSS called does a district is my image so that it fits the whole page
right so let's go over back to my content and then click on background now over here
on my background I need to come over here to the second tab because this tab is very
important because the style that we're going to get from this is quite interesting so let
me choose my colours for my gradient type something to come over here and select this
blue and then I'm going to come over here to the right and this is where we can play
around with his colours and see what works so now that I have my two colours selected
I'm going to come over here to my third tab which is the images tab and then click on
background image blend not here we can try x k so I can see we have this but this doesn't
look really nice because this is a swimming pool ideally we want to have this water as
blue as we can so I'm going to come back over here change the clo and let's find a version
of blue so I'm just going to write this around until I get to a spot which I'm happy with
so I'm only that they for now I will try and I shift my graded directions well and see
what if I can get from this so isn't dragging this in Fatima come over here to my image
and let's see what changes are happening so we can see the darker part is towards the
top right of the image and that's not what I want so I'm just like this again to make
sure we have a very good balance right so I think that's ok I'm gonna go ahead now and
save the next thing I want to do here is to add a column structure so the structure I
need here is a single column and in that column I'm going to add a text module so I'm going
to type in here text so I can find it easier so the texting I'm going to use is some dummy
text from lorem ipsum so I'm just going to come over here and copy a chunk of text so
I'm so copy this and come over here tonight and I didn't hear what I hear the text is
quite small now let's fix that straight away so I may come over here to my design tab click
on text change it from Dark to light and detect orientation that needs to be centred rats
that's looking good so far I'll just come over here to the text font not over here we
need to Is there a font called Vulcan and let sadness increase the font size so we can
make this really big so I think 40 is perfect and then I want to come over here to my line
height and reduce that about 1.6 ok so that's looking good so far I will come back to my
accountant tab click on text now what I'm going to do here is I am going to add a break
to this text so I'm gonna click right here and add my HTML code well that's that's not
what I'm looking for have a look let me add my break ok I've added my break in there so
that's looking really nice I'm going to go ahead now and save the next thing I want to
do here is to add a button song or click the Plus button here and add a button module so
I'm going to add it by clicking this button here and are we going to call this sign up
ok no let's start this button so I'm going to come over here to design click on alignment
and make sure that the light centre and then we're going to come over here to button and
for us to customise the spots and we have to make sure that use custom styles for button
is activated so I'm going to click on yes and then we're going to increase the size
of a text to about SE28 and we're going to come over here to button border colour rights
we're gonna make it right and then I'm going to come over here to my text colour and make
that White 2 right so that's looking good so far but now we need a button with rounded
edges so I'm going to come over here to buy button border radius and I'm going to be increased
dad's until I get to about 7:30 is fine in fact not living crystal bit more to about
3:40 right that's better so I'm going to make my font bold and all caps like that that's
look too much much much better now my border with that's a bit too thin let me make it
about 4 in fact maybe 3 will do right three is fine I'm happy with that and then finally
I prefer not to have an icon there so I'm going to come over here to add button icon
and set it to know so all I'm going to have as a button without the icon so I want to
screw over here to the bottom and what I'm going to do here is I'm going to make sure
that I have a transparent colour because we don't have any indication that this is a button
when we have a Rover it so imma come over here to button have a background colour and
I am going to choose a colour hair but add transparency to it so let's see right I don't
really like that colour so let's try this no that's not working ok with Jesus Orange
ok maybe that could work in fact maybe it's users yellow that matches that cap ok so I
think that's fine but what I'm going to do here is I would like to get rid of this have
a radius so I'm gonna put 0 in there so next one I'm going to do is I will increase my
border radius 242 match what we have up there on the top so that when we have Rover it we
don't get a weird shape and then I'm also going to come over here to my hover border
colour and I'm just gonna study tool transparent so when I hover over it I don't get that border
so I think I like the first are better ok so I'm going to go ahead now and save now
we need to find a way to push all this text and the button will slightly below so that
it becomes scented so to achieve that I'm gonna come over here to my row settings and
we are going to add some margins sawmill click on to sign clickonce pacing and for margin-top
I'm going to add 300 not this is where you can just play around with this with the sizes
to see what's what works for you because sometimes when you have a different sized monitor you
might need to add a bit more so maybe the Striped 360 right in fact I'm think I'm happy
with 300 ok so let's leave it at 300 so that's it for this section on the go ahead and save
now let's go ahead and add on next section someone come over here and click this Plus
button here to add a new section and the click on regular and we need three columns here
right so what we going to have in these columns are blood so I'm going to click on blurb and
I'm going to stand out of my contacts on my come over here to my lorem ipsum text I'm
not like this paragraph and I'm going to Your and paste it like that I'm gonna take a bit
of this text and use that as my heading text so I'm Gonna Pay study on the top so you can
see her with this is starting to take shape has come over here to design click on image
an icon in fact sheet on the image an icon we don't need to do anything here so let's
go to text and we are going to change the orientation to centre eventually we're going
to have this text to White but for now we need to be able to see what we designing so
I will come over here to it had a text I'm going to make sure that this is bold and I'm
also going to change this to a font which is vulkan and we're going to make this bigger
so let's letting criticise let's make it bad SE22 maybe even 24 right let's make it all
caps and let's add a bit of line height so it's a 1.3 is perfect now and next just go
to the body text now here we used to to increase the so bad SE16 me about 16:16 is fine ok
now I'll bodyline hide I think 1.8 is perfect so that's looking good so far now let's come
over here and an hour I can't someone to come back here to content click on image an icon
and then I'm look like a news icon so here we can just use any icons that work without
being so I'm going to start with this lock so this could be something that signifies
a membership whatever it is but you can change this if you want ok so now that we have our
I can't I want to come over here to design check click on image an icon now we have the
opportunity to change that I can colour and make some settings so first off I want to
come over here to use icon font size and decrease tattoo about say ST4 and then I can colour
we might as well start making it so white so I'm going to add my hexadecimal for white
like that and then I'm gonna come over here to my text change it from Dark to light ok
so that's looking good so far I'm gonna go ahead now and save changes now let's go into
our house lettings right so the role settings click on background so for my first background
here on the text Plus button to add a background colour so I want to start off with ya Mustafa
green next I'm going to save and then duplicate this so I can add it to the other two columns
so duplicate this twice like that and dry cleaned position right so right now it looks
like there's nothing on there that's because we don't have a background colour so let's
go and fix that Sam will come back here in tomorrow settings click on background and
I want to start adding my background colours so my next car here is this ok so that's fine
I'm going to save and then I'm at my final colour so back again here click on background
and I'm going to go to my third column and add read ok so I'm happy with that now I'm
gonna go ahead and save so we can see now that this section is taking shape next what
I'm going to do is going to come over here to my section settings and click on design
spacing and I want to make sure that my custom padding on the top is set to zero and zero
at the bottom because we don't want any space is here as we designing this so go ahead and
save. Let's go back into a section settings click on design sizing now we need to make
this full with some the click on yes for 4 with and then I may come over here to my god
of wealth and asset it to one not the reason why we said sending it to one is because we
want this to be edge to edge and then I'm going to click on a finalize column Heights
ok so that's looking good nap ok so let's go ahead and save and now it's time to come
into our models telling someone to come over here click on design and I want to come over
here to spacing not let's start off without margins summer start up with adding 100 at
the top and 100 at the bottom let's see how that looks ok it's not too bad so I'm gonna
try maybe 1:20 and 1:20 ok that's looking cool so I'm just going to copy this and I'm
going to add it to my Columns Dominic come over here please don't design spacing at my
margin-top and my margin-bottom it safe and do this to the final one
pasted here and paste it there perfect summer go ahead and save so we can do I can see I
have this white space and it's really annoying me so let me get rid of that by coming over
here to Miro settings click on design and spacing so the spacing here on my custom padding
top I need to add 0 and now as I've added that you can see now that my section here
is touch my top section which is exactly what I want not let's do the same to the bottle
to get rid of that white space like that and that's perfect I'm going to go ahead now and
save tonight can see all pages really really taking shape so let's go ahead and add on
next section so I'm gonna click this Plus button to add a new section it's going to
be a regular section and single column so what I'm going to do here is at a text modules
on the score all the way down and select my text module so here I want to paste my texts
I'm just not copy some text from here my fat and paid in place then I'm going to come back
and I am going to copy some text which I'm going to use as my heading text I've pasted
in here and I'm going to add my HTML tags for my heading like that perfect ok so that's
looking good on the come over here now to my design click on header text and I'm gonna
make it bold my headphones I'm going to choose my font, Vulcan, ok so I can see her that
we don't have enough text so let me add a bit more texting there so I'm not come over
here to Durham too and I'm just going to copy some more text and paste it in here like that
ok so that's better so I may come back to my design click on text at some line-height
to this so I think 1.6 is perfect and yeah I think that's fine ok let's say it let's
save this for next week are going to add another row and this time it's going to have two columns
now in these two columns we are going to add buttons so I'm not click on button for button
module so I'll button text is let's say try out today ok that's going to be a text file
link I'm just going to add a blank coming from now click on design alignment now we
need is a light all the way to the right and then we're going to come over here to text
and make sure our text satellite click on button and we need to again as before access
that button Styles to be able to customise is so let's go ahead now and click on button
background colour sofa or colour hair you can choose any colour that would like to use
but I'm just going to choose a random colour maybe try choose colours that are close to
our palate ok let's go with that next one I'm going to do is I'm gonna come over here
to my phone's make it all bold and all caps for my I can't I'm going to say no and then
I will come over here to my button border radius again we would like this button to
look like a pool ok so that's fine 8:40 and perhaps we can just increase our button text
size a little bit more to about same ab24 maybe 22 ok that's looking good so I'm going
to go ahead now and save because I'm happy with that but next time or I can just copy
and paste it and all the way to the left so they get to be close together on left and
come here tomorrow and another 4.3 I'm going to go ahead my next module perfect Safe for
now and then I'm going to come over here to my router settings so it Miro settings I may
come over here to design click on sizing make the school with a van I'm going to come over
here to use gutter with said that to one like that so ready we can see now that this section
is taking shape and when I click on equalise columns and then I'm going to go ahead and
save so we can see now that's that's looking good now as before we going to come over here
to
our section settings click on design spacing and he's going to make sure that the top padding
is set to zero and the bottom is set to zero ok so what we need to do next to come over
here to our text module and click on design spacing and let's add are margin songs start
off with margin-left let's add 100 to the left and to the topless at 3 E100 so I think
that's looking really good so I'm going now and safe so that's perfect so I still have
this white space is here so let's go back into our row settings click on background
in fact you need to go to design click on spacing and we wanna make sure that are custom
padding to the top is set to 0 and 0 to the bottom like that cancel that something good
on the go ahead now in safe now let's add our final section and this section is going
to have our latest news all the blog so I'm a click this Plus button to add a new section
so this going to be a regular section single row and in that row we are going to have a
Blog so much for it and click on blog and for this the only need 3 but obviously if
you have more than three you can always add more let's come over here to design click
on layout so instead of having a school with like this it's much easier to read if it's
a grid from the select upgrade so now we have a perfect grade which is exactly what we're
looking for let's go ahead now and save and then we need to add a title to this so all
we need to do now is to come over here and add a new Row single Colin and I'm just going
to close this drag this to the top now for consistency what I'm going to do is gonna
come over here and duplicate this so I'm scarred duplicate that and drag it into my room like
that ok perfect so I've got it in here so I need to come into my module settings because
they just sitting there that has all this padding so let's come up here to design click
on spacing and you can see here this is the reason why we have all that space songs can
get rid of it and also to the left and I'm just going to make sure that this text is
centred and also reduce that text because it's a bit too much sun will come over here
and just get rid of it like that ok so that's looking much better I'm a go ahead now and
save changes so pretty much this is our layout its final and it's really looking nice to
make things even more exciting if you are going to change your landing page can always
come over here and swap is images so you can always you can also use a different image
so let me show that let me show you could see how you can do that so I'm not come over
here to section settings click on background and I'm a background tab comma delete this
for now click the Plus button to add another one and this time I'm gonna add this image
click upload an image so you can see hear this is actually is a much better image right
ok so let's play around with the blending modes so I'm not ikon my type here for the
blending mode and I am going to select a colour so I think what works with this is a nice
warm colour like that ok so just click on an image so we can see hear the warmth is
over to her to the right you can play around with this however you want I can even change
this to maybe a purple and then I can play around with my direction so I can see here
as I'm dragging this you know it's changing my Direction so I'm living like that and I'm
going to save so this is another layout that you could actually have so the beauty of using
the template is you can go in and change your background according to season a To what's
happening that week in your arm in the company ok so that's really cool so all you have to
do now with this layout is download it is absolutely free you can use it in your designs
or with your clients and all you have to do is to go in a change this text and also change
these background images ok thanks a lot for watching I hope you like this tutorial and
also to support this channel please do use my affiliate links to know if you do that
I would really really appreciate it so all the links that you need to purchase your hosting
is the show notes below and also if you haven't bought DVD TV membership you can also do so
by purchasing it in my comment box below we also have a course which will show you step
by step how to use TV right from the Ground Up and this course is called TV blueprint
3 you can go Ed and get a 50% discount if you purchase this today again I'll leave the
link in the show notes below thanks a lot for watching and look forward to more tutorials
like these and make sure that you subscribe or subs or sign up to my newsletter in order
for you to be notified when I release new tutorials there's a lot for watching and see
you soon
Không có nhận xét nào:
Đăng nhận xét