How To Design A Beautiful Homepage Using Elementor For WordPress

How To Design A Beautiful Homepage Using Elementor For WordPress

Okay now in this video I’m going to show you
how to build a beautiful homepage using the

Elementor page builder and like I’ve said
in my prior videos even if the homepage that

I’m going to design right now it’s can be
beautiful but if it’s not what you want you

still should go through this process because
by going through this process you’re going

to learn exactly how to use this page builder
in exactly how to make anything that you wants

so right now this is what our homepage looks
like amp but in a little bit here this is

what it’s going to look like you have this
beautiful headline and word of these buttons

and it’s just going to be amazing like this
and you can make it look however you want

but this is what I’m going to teach you right
now so let’s get started so first what I want

you to do is upload some images to your WordPress
website that were going to use in the template

there so I need you to click on this media
icon right there and it’s good take us here

to your media library now you should only
have this one image in here and this is actually

the image from that D fault course that we
had added when we were installing the learning

management plug-in and that’s how we ended
up getting this image but we need to do is

upload the images that are included with what
you downloaded earlier in one of the videos

there we just need upload those and those
of the images were going to use in these templates

to get them all set up so right here is those
downloads if you double-click where it says

page templates there should be a folder that
says template images when you click on it

is can you show this a variety of images right
there swimming to do is I want to click on

add new and then I’m just gonna drag and drop
all these images into this space right here

are some of the highlight them and drag and
drop them and Uranus either all uploading

right now now this might take a sec because
there’s quite a few images and some of them

are on the larger size so and it’s really
easy to delete images oops we got that in

there twice someone have to click on that
and delete it so I clicked on it and that

Seattle here it is delete permanently let’s
get that out of their right so that image

is gone and so here’s the images were going
to use for the template now the homepage working

to create is really just using this image
and that image right there but the other two

homepage templates that I’ve included organ
to use the variety of other images that you

see now available to you on your WordPress-based
website so let’s get to building someone click

on pages and then for the homepage I’m just
going to click right here it says edit with

Elementor now if I hadn’t already gone through
this page in the prior video what you would

want to instead do is click into it and make
sure that the template right here are said

to full width okay full with disconnect you
have that full capability and integration

with Elementor and that’s the option that
we want right there but already have that

set so if you didn’t just choose then click
on update but now I’m to go ahead and click

on edit with Elementor it’s gonna take a second
then it’s gonna pop up into the Elementor

page builder okay everybody this is where
the fun happens we are going to build this

page right here step-by-step and this is where
we are starting from so I might give you just

1/62 overview of what a page builder is and
how every page is structured so every website

page that you go to on the Internet is going
to be broken down into a series of sections

in those sections you can have rows and columns
and then inside those rows and columns you’re

going to have text or images or some kind
of element and so that’s exactly how this

is so this area right here is a whole section
and this is a row with this headline a row

with this sub headline and another row here
with this button and that is a section and

when you scroll down this is a different section
and it has this beautiful image in the background

to show you how to do that might be hard to
notice but there’s a bit of a texture on the

top and the bottom of it on the show you how
to do that but this one actually has two columns

now I did some tricks to make one larger than
the other and to make it appear that it’s

on top of the other but that’s essentially
all this is a section with two columns and

this is a section with three columns in this
right here is a section with two columns and

guess what one column has this image and the
other one has this bit of text right here

and then this is a two column section and
then I flipped it right here and then I flipped

it here a again and this is a section with
three columns anyways you get the point I

don’t need to go on and on so that is essentially
all that any webpage is is a series of sections

with rows and columns and you put things in
these rows and columns now everything is good

to be drag and drop so the first thing we
want to do is we want to add a new section

some the click on add a new section and then
it immediately gives me these column options

are these layout options so this is going
to be a to calm and all I’ll be using that

for that second section and then here’s a
three column I’ll be using this exact structure

when I’m doing the testimonials and on and
on slick suit started I want to just use this

section right here and now I have it right
there so when I hover over it I’ve got one

column in it and if I click on this I can
have some settings for the column if I click

right here it’s a section I can like this
it’s good to show me a set settings panel

right here for this entire section now everything
has these setting panels so a section has

it a column has it and each individual element
like a headline or testimonial box they’ll

have their own set of settings as well so
they’re always typically broken down into

three different settings panels the middle
ones get to be your style and that’s the way

to visually get a look color as font options
etc. etc. and then some advanced options and

then this first option panel for each thing
we click on will be specific to what it is

so since I’m in a section it’s showing me
a layout option and I’m not can change any

of these and then we have this style option
here this background I’m in a leave is why

and then we have this advanced option so what
I need is when I’m looking right here I need

to have headline a sub headline and a button
so let me go ahead and toss those elements

in here so my click on the dial pad right
here I want a headline I’m in a drag and drop

it and then I want a another headline so I
can either click on the dial pad and Dragon

new one in or on these elements if I hover
over it off to the right of it there’s a little

duplicate button right here so if I click
on this it’s going to duplicate it so now

I’ve got my two headlines right there and
now I want a button so I can scroll up and

down here to find a button I know it’s right
there but there’s little search box right

here so I could start typing button if I wanted
like that in there it is obviously I already

know where it is but when you start having
lots of elements sometimes a search feature

makes it more convenient some to drag and
drop the button in right there and I wanted

to be underneath so I have these elements
right here now I can go and center each one

if I wanted to but there’s a really neat option
in the section right here the section settings

where I can center everything so I want to
do it that way because that makes more sense

to me so many click right here it says section
and now I’m back into the section options

and so centering everything in this section
is going to be found in the style options

for the section some click on style and it’s
good to be hidden right here it says topography

so when I click on that I have topography
options is essentially the font options that

would be global to this section only and so
what I want to change is this text align I

want that all in the center so that is the
easiest way to globally is set a setting for

an entire section now when I make a new section
everything is going to be back on the left

align this is just can apply to what’s in
this particular section right here so now

I’m in a go ahead and start styling this up
a little bit but you can see that a lot of

this is actually already done you can see
I’m I moving right along here now before I

start changing the heading I it’s a little
too high here I need to have a little bit

of spacing to make it look like this and push
it all down how there’s two different types

of spacing one is called margin and one is
called padding now margin is spacing outside

and padding is spacing inside so I added some
padding it’s can add spacing inside the section

in the margin would be adding spacing outside
of the section so I just want to push this

down but keep it all in the same section so
those options are always good to be found

in the advanced tab summit click on advanced
and I want to add may be I just want to push

it down some some and add padding now if I
just want to add padding to the top which

is to push it down if I start typing a number
in here it’s can add tat padding to the top

the bottom the left so if I type the hundred
just like this it’s pushing it all around

and that’s not what I want I just want to
push it down 100 I don’t wanted to to have

it be on the right and the left in the bottom
as well so what I need to do is let me just

delete that after click on this little link
right here and that’s can unlink everything

together and then I’m going to go ahead and
put my 100 in and so that’s can you give me

that spacing that I was after now I want to
start working on this heading right here some

a click on it and so now I have the settings
for that in my style in advance just for this

heading so let me go ahead and paste in what
text I have for the most amazing course obviously

you can put whatever you want and for the
HTML tag since this is the first headline

I don’t wanted to be in H2 I want to be heading
one is more of an SCO thing you see just made

it a little bigger but it’s not quite the
size I wanted to be yet so go ahead and click

on style and I want to turn on this topography
override by clicking on this little switch

here and now I can fully customize the font
the topography for right here and what I want

to do is increase the size to 55 so I can
click here and enter 55 or I can just take

this dial and I can bring it across till it
says 55 men in there I have it the most amazing

course and so when I look there it’s looking
pretty much the same okay so that is pretty

much all I want to do to that headline so
now this headline right here is going to be

a little different now the funny thing is
I’ve already made a mistake this I didn’t

want to be a headline actually I wanted to
be a normal text box so what I need to do

is delete this summer to go ahead and click
on this X right here to get rid of that heading

and then I might click on delete to confirm
and so this is real time you can see him and

to make mistakes but fix them and show you
that it’s okay to make mistakes as well so

what I wanted to do is click on this text
editor and I wanted to squeeze that in between

like that very go now let me paste in the
text I have for that okay so you see that

when I pasted it in and added this little
extra spacing here that I don’t want now unfortunately

sometimes WordPress does this where if I want
to goes like right here it’s is really and

I go back like that it’s gonna pull it up
to the same line which is not what I want

to but then when I hit enter it’s gonna push
it down which is also not what I want in the

way you deal with that is actually really
simple you go ahead and click on this option

here that’s his text is going to show you
your text but it’s can be wrapped in some

code but I don’t actually want any of that
something a highlighted like this I’m gonna

delete it and now I’m going to actually paste
my text exactly the way I wanted it and there

it is right there but you see now I’m still
on the same line but if I click on visual

now it’s gonna push it down to the second
line for me such as one a little quirk sometimes

when you’re using a visual text editor this
has nothing to do with Elementor just how

it is with all websites but the other week
I just got it all on two lines and that’s

exactly what I was after you can see were
pretty much looking the same right there so

next I want to style this button and this
is one of the things I love about Elementor’s

it’s so easy to style your button to be exactly
the way that you want it so for some to click

on it there to pull up its settings panel
now you can see right here where it says text

this is going to be the text for the buttons
you see it says click me and then right there

it says click me someone to put in what I
want and I wanted it to say get started just

like that now right here is where you actually
put in the link that you want someone take

into when they click on the buttons you would
just go ahead and put that in there now I

think the buttons a little on the small side
and you can see right here size is small of

an increase that to large and it just going
to make the button a little bit larger now

I could tell you though I don’t like all this
spacing on the top and the bottom I want this

to be a little more narrow so go ahead and
click on the style and let’s try to play around

with that size and the style overall so here
are our style options so first I actually

want to override the topography a little bit
I want my button to be in SO for topography

and monitoring this on and then further transform
this is where I have the option to put whatever’s

entered here in O choose U can see now I have
my letters in perfect N if I wanted to change

anything else I could if I want to change
the size of the font I can do all of that

right here very easily so I’m scroll down
so that we can start changing some other style

options so the next main style option is what
happens for the normal in the hover so this

is the normal color right here and it’s pulling
from the accent color that we set in Elementor

but then there’s also a hover color that we
can set now or not seeing it when I hover

over but if we collapse the editor settings
right here we can see how it looks and we

don’t really have it set to anything right
now when I hover over it so let’s pull our

settings panel out again and let’s click on
a hover and let’s set a background color for

hover some to click on that and just go ahead
and put in that other main color that were

using for this homepage just like that so
now I’m going to collapse it and you can see

when I hover over the button the color changes
now obviously you don’t have to have a different

color like this if you didn’t want to but
I tend to like it so that’s all I wanted to

do to the button color to have that hover
option right there so know what I want to

do is add some box shadow what that is is
it’s going to add an effect word kind of lifts

the button up off the page so when I show
you this button here you can see how there’s

a bit of a shadow here and it’s lifted off
the page a little bit of this is a very modern

design trend that works very well when you
use it subtly and a lot of the different options

in Elementor have this box shadow option so
I’m in a turn it on it’s actually just right

here box gentlemen to turn it on and you can
see it already added the box shadow and it

it looks nice right you know it looks like
it’s lifted up a little bit but what I do

is kind of spread that shadow out just a little
bit more than it is so let’s look at these

box shadow options now you can change the
shadow color and these four different options

here so first thing I would do something to
increase the blur and you can see as I increase

it it’s starting to kind of spread it out
some but the problem with that now is it’s

spread out how I like it but it kind of is
a little too dark for me it looks a little

like like there is dirt underneath the buttons
when you look at it just looks a little dirty

to me so what I want to do is, lighten that
up a little bit some of the go ahead and click

on the color and instead of playing with this
dial I’m in a play with the one here on the

right to lighten it up a little bit so let’s
see so now when I scroll down a little bit

you can see it’s a lot more subtle of an effect
so let me collapse the editor so now you can

see how it looks just slightly lifted up there
is this box shadow but it’s very faint and

you can’t quite put your finger on it but
it definitely looks lifted off the page some

and that was the effect that I was going after
with adding this box shadow and I use it on

all the buttons on this page I really like
it so the next thing is the size inside here

where the text is from the edge of the button
and this is going to be your text padding

so I’m go ahead and change this here so what
I want to do first is on link everything and

basically it sets all the values to zero and
you can see my button kinda just disappeared

and is now just wrapping around the text so
what I’m putting is 10 to 50 1050 so for the

top put 10 for the right, to put 50 for the
bottom, to put 10 and for the left I’m going

to put 50 and there we have this more stylish
looking button doesn’t that look so much better

than the way the default button looked it’s
got a custom spacing in this beautiful box

shadow around it in this beautiful fade when
you hover over it now the beauty of Elementor

is if I want more buttons on this page I don’t
have to go through the entire process I could

just go ahead and just duplicate this button
and move it wherever I want on this template

and that’s one of the things I love about
Elementor so to me it looks like this is section

right here is pretty much done it’s looking
close enough to how I showed you in the beginning

so that what we need to do is add a new section
and this section is good to be the one right

here with this background image and these
two columns so this is going to be a little

bit more of an admin advanced section because
of the all of the different tips and techniques

that I’m doing to make this effect happen
so let’s go back here I’m in a click on add

new section and this time I’m going to add
a two column section like this and you can

see now I have my two column section some
of go ahead and click on the section options

in the first thing I want to do is make the
content area not as why not take up the full

width so what you do for that is here is a
slider to set how wide the content area is

and I’m set this to 900 and that’s just how
wide I want the space for those two boxes

before I put the image in the background and
manipulate that I first want to go to the

advanced tab to add my spacing because I don’t
have anything in these columns if I don’t

add some spacing in there and I try to add
the background image I’m not can really be

able to see it the way that I want to see
it so what I want to do is add some padding

and remember that’s the spacing on the inside
of the section so I want to add some padding

and unlink it and I’m an ad 140 to the top
and the bottom so now my section has a good

amount of space to the top and the bottom
so now I want to do is go back to that style

tab and start adding some style to the background
of the section before I put my column information

in so what I want to do is for the background
type I’m gonna click right here it’s is classic

and then what I need to do is just choose
my image some to click on the plus now I’ve

already uploaded my images that we did that
in the earlier step and I’m in a click on

media labor and I’m going to see all of those
images right there now I have two of them

one of them is bankrupt to be a square and
the other one is a lot wider so this is the

wide one right here is the square so what
I want is the wide one just like that and

then I want to click on in certain media and
you can see I have my image right there now

for the position that’s how this image will
be positioned and I want to choose right here

it says center center and that’s gonna put
the center of the image always in the center

of this section so now what I want to do is
add a background overlay because when you

have such a vibrant image like this it’s hard
to put anything on top of it because it just

it will just dominate whatever the content
is someone to go ahead and click on background

overlay and I can go classic but on this one
him to do a gradient although it’s going to

be hard to notice the gradient because it’s
going to be a whites and a slightly off white

color so a gradient it’s kind of hard to explain
it’s essentially where you have one color

blending into another color so for the first
color here I’m going to choose whites and

so there is my white option and its are you
trying to blend into this color which is not

what I want some to click on this and I’m
been a change to this color which is kind

of an off white you see that it’s just a little
off white like that then I need to play around

with this location setting right here and
what to do is I’m going to slide this bar

all the way across like that to 100 and then
for the second color I’m going to move this

kind of in the middle to a 50 just like that
so you can see it’s already starting to wash

out and kind of faded that image into the
background now for the type of gradient I’m

going to choose a radial gradients like this
and then what I meant to do is bump up this

opacity settings opacity is how much you can
see through a color so right now it’s way

too low and that’s why the image is so prominent
still some move this up to know I’ll go eight

point .85 there he go so now it’s kind of
looking like it looks there you see how it’s

just perfectly blended in but see what’s really
neat about what I have here is if you look

the edges it’s kind of feathered a little
bit and at the bottom what that is is this

option called a shape divider and we can add
it to the top and the bottom so I’m going

to do that now now there’s all these different
shape options right here the one that I used

was called mountains so when I click on mountains
you can see it’s already starting to be feathered

in a bit but what I do is I want to play around
with the height a little bit so I have a little

bit more control and I will set this to say
70 okay and that’s just the height of the

mountain affecting you see it’s perfectly
blending in now but see I actually want to

do the same thing to the bottom sauna click
on bottom choose mountain and what I go with

that same 70 I like how that looks now there’s
lots of different types of shape dividers

alarming to be using some of them in other
parts of this homepage but I just chose the

mountain one and I really like it because
when you change the height it gives is a little

blended in effect to the image like that were
just looks very good there so now that we

have the background done we can start putting
content into these two columns so the first

thing I’m going to do is I’m in to go ahead
and click on the dial pad and if we look at

what I’ve got done here we’ve got a headline
we got a text box and a button so let’s just

go ahead and re-create it and what I would
do is create it right here style it right

here and then just duplicated over there and
that’s what I’m going to end up doing to save

some time so I have a heading now I want to
get back to put my other elements on click

the dial pad I got this text editor like that
and then I want to put my button in there

some to go here and remember she’s going to
duplicate this button and call it a day so

my go ahead and click on duplicate and now
I have two buttons and I can go ahead and

click and drag that button down here that’s
just the save time and wanted things I forgot

to do in the section was the center everything
so to get back into the section I want to

click on section right here and I think we
found that in the style tab down here were

it said topography and we clicked on centerline
so there you go now everything is perfectly

center aligned so no it’s set up this headline
here some to click on its and let me just

paste in my content right there and it’s actually
looking a little too big for me to changes

HTML tag down to an age 3 and it kinda makes
it a little smaller typically when you go

to a higher number header tag like this from
H1 to H2 to H3 just going to make it a little

smaller but I can already tell that I’m gonna
need to tweak that a little bit so what I’ll

do is click on the style tab right here and
let’s just start styling this a little bit

more Domino do a topography override him to
click on their to reveal the options and I

think for the size I might go with the 25
so let’s go with the 25 just like that now

the font is a little thicker than I’d wanted
to be and that’s called your fontweight so

instead of the default I’m in a go down to
a 300 and cc that just made it a little thinner

which is kind of the look that I was after
and lastly I would like to space out these

lines there little too close to each other
and it makes it a little hard to read so I’m

in a adjust this line height maybe two I 1.3
30 go 1.3 and I think that’s probably looking

pretty similar right there okay so that’s
looking good next him and I want to push it

in a little bit so when you see here I have
that there will a little bit of spacing for

the headline that isn’t also with this text
block some to push the handle and a little

bit and that’s good to be in the advanced
tab and summon to add a little bit of padding

to Ammon at about 30 to the left and 32 the
right so 30 and 30 and that just pushed it

in a little bit that’s exactly the look that
I was after so next we have this textblock

I like it the way that it is and then we have
our button and I like how that is as well

but if you noticed I need to have the background
to be white not the background of the section

just the background of this column now columns
have their own style settings so when I hover

over this column and click on column just
like this now I have my edit column settings

right here so first thing we definitely want
a background color or someone to click on

this classic and I need to choose white and
so there you go now we have that white background

which is what I wanted now I want also add
that back box shadow to the column so I have

the option right here it says box shadow I
just need to turn it on and it’s already given

me that box shadow but I want to do something
similar to the buttons where I spread it out

so remember I took the blur and I bumped up
the blur 250 and then I played around with

this color right here by going like this just
enough to lift it up a little bit something

like that that looks good to me right now
so now the only problem with this boxes I’d

like a little bit of inner padding on the
top the left and the bottom in the right I

like to add a little bit of padding there
and I want to do the little bit of spacing

to make this one larger than the one that’s
gonna be next to it so I need to go into the

advanced settings for the column and what
to do is for the top and the bottom for the

margin I’m gonna set it to a -20 but before
I do that I have to unlink it some to go -20

and then for the bottom to go -20 just like
that and now I want to go ahead and add that

padding so I’m going to unlink that and for
that I’m a do a 6025 just like this so I’ve

got 62 the top of the bottom and then I’ve
got 25 to the left and the right just like

that now you can see I kind of scrunched and
in just the amount that I wanted to know that

this box is exactly how I wanted him to show
you a ninja trick with Elementor and that

is duplicating columns so instead of doing
everything I just did in this column I can

click on column and it reveals these options
and there’s a duplicate option and now I just

duplicated that column but this is to be a
two column not a three column so I can go

into this column that is empty I can click
on column and then I can click on the little

X and then that’s going to delete that column
so I just the saved some time right there

now I’m going to need to do a little trick
to make it look like this column is on top

of this column so I need to get back into
the column settings of this column here when

I click on column my click on advance and
this is a little advanced I have to add something

here it’s it’s only to work if you were using
the CSS I gave you but we need to put something

in here and this is what we need to put on
top just like that on top and what that’s

going to do is make this appear that it’s
on top of this just like you see there is

see how it’s now on top of this is a CSS thing
that we added in the customizer that essentially

says there’s anything in Elementor and it’s
a CSS class and it says on top that it’s going

to appear on top of anything else that might
be around it and so that’s all that that is

so now we need to tweak this column a little
bit but you can see the timesaver of styling

by through duplication like that some go into
the column settings here like this and I’m

in a play around with the margin in padding
to make it look like it’s smaller and kind

of in the background so that’s good to be
advanced again and so we had these -20s that

we put here but I’m instead to put a positive
40 what that’s going to do is push it down

like that you see that 40 so this is just
playing around with margin and padding and

for the padding here I’m in a play around
with that a little bit instead of this sixth

EM to make it 40 this just the top and bottom
to further the effect of having it look like

it’s on the bottom so there you go and we
pretty much created that section but the only

thing left is to change the color of this
button and that’s actually a really easy thing

to do so let me go back here and then I’m
going to click on the button and I need to

player out the colors there so many click
on style and remember when I scroll down we

got the normal in the hover so for the hover
we have this color but I don’t wanted to be

the hover color I want to make it the normal
colors on a copy it’s in for the normal I’m

going to go ahead and put it in here and so
there is the color but then we hover turn

the lighter color some the click there and
here it is actually in our color picker so

now when I hide the editor we’ve got that
button and we have that button so we have

this slight variation there now the only thing
I don’t like is I want to push this button

down some there’s all this extra space there
so let’s go ahead and click on this button

and go ahead and add a bit of margin to push
it down so I clicked on the button them to

click on advance I’m going to unlink it and
to put some top margin and let’s just put

50 or so second it pushes it down a little
so that looks close enough for me for us to

move on okay so next we have this section
here and this is actually to be really simple

to do it’s a testimonial a section with three
columns and a testimonial so I’m a scroll

down click on add new section choose three
columns like this anime click on the little

dial pad and I’m going to find the testimonials
element it is good to be under general elements

most likely testimonial there it is my go
ahead and drag and drop it in there now off

the bat you can tell that we need to play
around with the size of the font to the line

spacing the padding on the left and the right
some and we want to have a little bit of a

box shadow but the first thing I want to do
is actually add a little bit of spacing above

this section to push it further away from
this section above you know you never want

to like have everything so tight together
some to go ahead and click on the section

settings right here and I’m going to add a
bit of margin so I’m to go ahead in for the

top and the bottom and go with that same number
of 140 I think of use that a few times and

that’s gonna push everything away just like
that which is exactly what I wanted so now

let’s go ahead and play around with the column
settings to kind of lift this off the page

a little bit with some box shadow someone
click on column and I’m in a turn on the box

shadow option right there and it’s kinda lifting
it up off the page which is what I wanted

now let me just play around with the blur
a little bit will go up to 50 just like we’re

using on the buttons that we been doing and
I’m in a dial this down a little bit in there

we have a nice subtle box shadow that I wanted
to next what I want to do is I want to add

a little bit of spacing in between these columns
so if I put a box shadow here in a box shadow

here everything to be kind of close together
so when you see here I have it spaced out

a little bit and that’s kinda what I want
to go after for this so we need to add a little

bit of margin in between these columns here
in order to do that is really click on advanced

for the column and then we have this margin
tab and so I want to add another 20 pixels

to the left and the right some and a unlink
gets I’m going to add a 20 right there in

a minute and a 20 right there and so now I
have this perfect spacing so when I duplicate

this column three times you can see up at
this perfect spacing in between the columns

now that I think the column in the section
is all set up right let’s go ahead and play

around with how this testimonial itself looks
so when I click on that here’s the content

for the testimonial so I want to go ahead
and paste my content in just like that and

next I want to add a little image that could
go right here someone to click on right here

to add image and will go with that box image
it’s a perfect square so typically for a image

where it’s going to be put in a circular frame
you wanted to be a perfect square so, click

on that click on insert media and there it
is actually that came out looking really nice

now one of things I don’t like about this
testimonial area is the text is just a little

too large for me and I think we should make
it smaller summit click on style and for the

content I’m going to override the topography
but you can control the topography for the

name and for the job’s we have the name in
the job right there but I want to just change

this and make it a bit smaller so want to
turn that on and I think him to go with maybe

when T’s let’s go down to 20 like that and
it’s already looking a lot better than know

you don’t like is I want some padding in there
to kind of make the words not go quite to

the edge so I’m go ahead and go into that
via the column settings when I click on column

advanced and I would add some padding I think
I want it all the way around so let’s increase

this number to where we might like it so let’s
see 1819 20 that’s a lot better than the way

it looked before so I guess we could stick
with that this 20 right here I think that

looks good so now what we need to do is my
duplication column duplication trick so even

though you have different testimonials we
can just duplicate the settings across and

then he could just change out the text in
the image which should be really easy so I

need two copies of this so I’m on the column
now when I can click duplicate twice and then

I have to get rid of these two columns, click
on column oops, click on column and then delete

and confirm its enema due to this last column
right here when the delete that and then I’m

a conferment and there we go we have our three
testimonials that are kind of lifted off the

page a little bit and they look great actually
I really like the way that that came out so

when I go like that it looks pretty near-perfect
to the example that I gave you alright so

next what we need to do is we need to create
this section which is going to be kind of

fun because we have a shape at the top and
we have a shape at the bottom and then we

have these two columns let’s go ahead and
knock that out real quick summon add a new

section 2 columns and on this time I’m in
a switch it up I want to go ahead and toss

my content in there so I know right here I
have an image so let’s drag and drop the image

across and I ready have it in my media library
so I can click here and I can click there

and choose the image and so there she is right
there all right so I know it’s kind of a dorky

image but I just wanted to show you the power
of having an overlapping image that will overlap

over the shape so kind it adds depth to your
website so that’s the reason why I wanted

to show you that so anyways right here looks
like we have a I headlined a text box and

we have another heading by right here but
it has a different font altogether to try

to make it look like a signature so let’s
go ahead and do that now cemented the dial

pad and window drop a heading okay let me
scroll up now I want to add a text editor

underneath that just like that right there
and then I want to go back and let me just

duplicate this heading and make it faster
there we go right so here is my content right

here now you notice is a problem the content
is appearing at the top yet I would probably

wanted to be in the middle there and this
is actually really cool feature in a column

you can actually have it centered so if I
click on this column right here and then I

go into the layout option is that there is
this content position option and so I did

it by default it’s gonna be at the top but
I wanted to be in the middle so it’s gonna

push all that content perfectly in the middle
just like that so now what I need to do is

now start styling this section it’ll be pretty
easy someone go ahead and click on a section

and I’m a go to style and I want to make that
background color with the background shape

so actually here I did a gradient is a very
slight gradient words lighter to darker but

for the sake of time I’m just gonna use the
same color right here so I’m just gonna paste

that in and there it is so we we are missing
our shapes and we have to change the color

of all of this of all of these fonts right
here so let’s first go to topography and for

heading color I’m going to make it globally
whites just like that and then for the text

color I’ll go ahead and make that globally
white like that hope it’s not showing it white

here let me just go ahead and click on here
and then go into the style of that actual

element and change the color right there okay
there we go now we have everything white which

is what I wanted so now let me get back into
the section settings because working to add

that really cool shape now the shape I’m using
is called the tilt so I need to go back in

the style and I’m to do a tilt on the top
and the bottom so here’s my shaped divider

and for the top I’m going to go in pop in
the tilt option and there it is actually pretty

much done already and so for the bottom I’m
pretty much going to do the same tilt and

just like that and you can see how easy it
was to get that tilt action and you play around

with the tilt the shape of the tilt and the
angle of the tilt but I’m just gonna leave

it at that for the sake of time you don’t
need to see me style these elements right

here because you seen that before however
this is signature right here let me click

on that and show you it’s just a simple topography
override so when I click on style when I turn

on the topography override it just a different
font and so I went to Google and I googled

Google handwriting font and I came up with
this font that’s called just another hand

there it is just another hand when I click
on it there it is you see how just added that)

so I know made it larger and I put Jane dough
and that’s all I did in order to get that

to look kind of hand written so that’s all
we have to do for that section there next

we have this alternating section and it’s
can be pretty quick we just have headline

text and we have an image so let me show you
how to do that and I think what I did is well

first let’s add a new section and it’s going
to be the two columns like this let me just

go ahead and add my image so my click on the
dial pad I’m going to drag and drop this image

in right there and I’m going to choose that
image and it’s good to be the square image

of the two women in them to click on insert
media and now what I need to do is kind of

make it smaller and round and then add the
box shadow and is actually really easy so

it’s just the style tab for the image right
here and it’s a simple border radius right

here so see what happens as I increase it
you can see the corners start to go in and

if I keep going up and I go up to 290 it’s
going to end up being a perfect circle now

it’s kinda hard to see that it’s a perfect
circle because the image is light in color

in the background is white so I just need
to go up to about 290 like that which is a

perfect circle turn on my box shadow we been
doing this a lot where I increase the blur

to 50 and then I lower this sum so that shouldn’t
be anything new and there we have it but the

thing is is the image a little is just a little
too large for the area so what I did is added

some padding some click on advanced and for
the padding let me unlink it and let’s add

60 to the left and right some in ad 62 the
right 60 to the left and now we have that

circle right there which is really perfect
so we have the images in a perfect circle

and it’s lifted up the page a little bit now
all we need is a headline in some text right

here and honestly where I got that from his
I just duplicated this summer to duplicate

my headline and I’m in a drag it on down and
drop it in there and then I did the same thing

for this body of text I duplicated it and
I’m in a drag and drop it down there this

duplication is how you can be more consistent
with the styles on your page so now I need

to center this content in the column and once
again you click on column like that and then

you go to lay out and working to put that
in the middle just like that whoops I have

that little bit of padding from this style
that I want to remove let me click on that

and remove this padding there you go padding
is now gone right so we have that and then

on the section I might want to push it down
a little bit with some margins on the click

on section my click on advanced all at about
80 to the top like this to push it down some

and because I’m an alternate this I’m going
only put 20 on the bottom like that so there

you have it we have that section so now all
I need to do is duplicate the section you

see me duplicate elements and you see me do
click eight columns but you haven’t seen me

duplicate an entire section that’s exactly
what I meant to do some click on section right

here and I’m going to duplicate it twice 12
so there we have it three times but I just

need to kinda flip these contents and there
is no trick to it I’m just gonna drag and

drop this in there like that and then I’m
in a drag-and-drop that there I’m in a drag-and-drop

that there may make sure the headlines on
the top and then I need to center this content

for this column click on column go to layout
and then put that in the middle just like

that so now we already did are three sections
where the content alternated like that and

so now we are down here to this beautiful
pricing table like I said this pricing table

is part of the Elementor Pro package so women
to do is I’m in a go down here and add a new

section with three columns like this and this
will be the pricing table in the three sections

there but go ahead and click on my dial pad
and right here the different Pro elements

that are available right now some in a drag-and-drop
in this pricing table and there is no more

powerful pricing table that I’ve ever come
across than this one that comes with Elementor

Pro the beauty is your to be working with
the same interface that you’ve already gotten

to know in your you to be able to build the
most flexible powerful beautiful pricing tables

that I have ever seen I didn’t really spend
a lot of time customizing it but there’s all

these little elements you can pretty much
change everything on it so first thing I want

to do a style out my section I’m going to
just add a bit of margin to the top and the

bottom and so here it is I’m going to add
hundred to the top and bottom so space it

down from there a little bit and next I’m
going to go ahead and add some to the column

as well and be as so these columns aren’t
so close to each other so I’m to go to advanced

and I’m going to add 20 to the left in the
right so let me unlink it I’m going to add

20 to the left 22 the right just like that
so it’s just scrunched in a little bit okay

now let’s play around with the colors of the
element here someone to click on it and it’s

just so easy to work with this element it’s
amazing but all I’m going to do right now

was play around with the style so the header
that’s kind of a dull color I’m gonna change

the background to this right here and it just
makes it pop a little bit in its consistency

of colors across the board and I don’t like
this gray right here I’m in a go ahead and

change that to white so I need to do that
in each individual section of this pricing

table so for pricing I need to expand it and
change the color to white in the see how just

does the pricing part so me collapse that
I need to do the same thing for features I’m

going to change that to whites and then I
need to do that for footer change that to

whites and then lastly we have this ribbon
I’m been to keep the ribbon on the middle

pricing table and the way you do it is you
just click right here and that’s it for the

colors and the last thing I really want to
do is add my box shadow but I just want to

add it to the pricing tables so what I need
to do is go into the advanced settings and

when I scroll down it’s right here under background
and border and there’s that same familiar

box shadows let me turn that on I’m in a stick
with the blur up at 50 and I’m going no change

this dial just a little bit and now we have
that perfect box shadow effect now timesaver

again I’m going to duplicate this across now
what I didn’t show you in the pricing table

is how easy it is to edit all of the content
here’s your title your subtitle you see that

there here is your pricing you see that there
you can change the currency to all these various

currencies right there here’s the future box
you can add those there here’s the footer

which is essentially this button and you can
change where that button goes and then you

can have the ribbon changes so rainouts is
popular but you can move the side that it’s

on and you can change what it says and you
can even disable it so now I need to just

duplicate my column and then get rid of these
two here my click click on column to duplicate

it twice and then I’m a click on this column
to remove just like that’s anime click on

this column to remove just like that and I
need to remove the ribbon on these left and

right Price table soma click on its Emma go
down to the ribbon, turn it off and then on

this one I’m to do the same thing click on
it and turn that ribbon off and so let me

go like that and you can see we just built
a beautiful pricing table and there are so

many different options it’s it’s just mind-boggling
with this price table but you can see it’s

identical there and only took a couple minutes
to do so lastly right here I think you get

the point it’s just the section with the headline
and a button and all that and I took these

from other places on the site so if you hung
in for this entire video we built this beautiful

page right here let me click save and then
let me show you from the top to the bottom

we did this in a very short period of time
and through it you learn to live the advanced

methods to have the most impactful design
for your website you can see the subtle use

of the box shadow were using these background
shapes right here were making images into

a perfect circle and then lifting them off
the page a little bit and we’ve created this

beautiful beautiful pricing table but like
I said you don’t have to build it yourself

you could just restore the template that I
in included so that is it for creating a beautiful

homepage with Elementor and optionally Elementor
Pro