How To Design A Beautiful Homepage Using Elementor For WordPress
Share:

Video Transcript
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
Join The Conversation
Hi Adam, nice review on the Worpress page builder Elementor. I am new in wordpress developing and webpage designing. I have gained my wordpress skills mainly by watching your tutorials on the youtube. so thanks for sharing these useful information with us because without them it would have been very difficult to understand the concepts and skills of web designing easily for the newbies like us. In just 30 minutes I can now transform an ordinary website to business website. Thanks again for been the inspiration for me and my career.
How to change the elementor homepage into wordpress homepage later ??
How to change the elementor homepage into wordpress homepage later ??
Hello,
Do you use a basic theme for wordpress to get started? If so, which one do you use?
I use and recommend the Astra theme. It’s free and there is a Pro option, but the free version is pretty full featured.