How To Design A Beautiful Homepage Using Elementor For WordPress

Articles, Blog

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

100 thoughts on How To Design A Beautiful Homepage Using Elementor For WordPress

  1. I followed your tutorial step by step by i always get the "The Content Area Was Not Found in Your Page" please add: <?php the_content(); ?> onto your page. Do you know how to fix that? I tried several things, but this didn't solve it…

  2. Maybe someone has already highlighted it… but if you just want to do a carriage return (i.e. change of line without a different paragraph, or space), you just hit Shift+Return/Enter…

  3. Hi, firstly, thank you for this instruction video. I did the almost the same as you guided to create my own theme. However all what i created is not fit with the mobile version, it looks totally a mess when I look at the website under the mobile size. I tried some other designed themes and they seem work very well on mobile. However I still want to use my own theme for my homepage. Do you have any advice on how to make self-designed theme be fit on mobile screen? Thank you!

  4. Hi, could you please make wordpress downloable audio playlist with table, or refer me if you made video as such as that.
    Thank you!

  5. Hi. If i pay for the pro version of elementor, and build a website for a client, then the client must pay for elementor? Thanks for your answer!

  6. Hi! Excellent video work well didactic. By the way, I'm wondering how to use Elementer with the Yost plugin to do a great SEO job. I have browsed the internet with several more unsuccessful keywords so far on this my doubt. Remembering this is truly to be congratulated.Elementor with SEO Yost! Thanks in advance!

  7. I understand I can't edit my default homepage using elemetor. How do I make my "Newly Created Homepage" as the default home page of my website? When I visit my sitem I am routed to the default home page not to the one I created. Helpp Please

  8. Based on my personal experience, the best 2 web page builders are BlusVoda Website Builder (Simple and Consolidated) or Microsoft FrontPage 2003 (Bit more comprehensive). Using them is Fun and I enjoyed both; building colorful three dimensional sites with just a WYSIWYG interface.

  9. Thank you. I've learned more in a couple hours of your videos than in the 2 1/2 years I've had my site. 🙂

  10. Nice video
    but Why all options in style does not updated in my website only content option works fine , but when i edit with style nothing change

  11. Really awsome video. learned a lot about setting up a stunning home page .Actually m a non techie guy without knowledge of coding.I really enjoyed a video throughly.
    I have one query ? How we can link subscribe button in our elementor section page with our optin pop up subscription form ?
    see 14:11, where you are talking about putting a link, But if i want to divert to optin form, how i can link my optin form with Get Started Button ??????

  12. Hello I need an urgent respond. I created website with elementor that is perfect on my mac. But now I look at this page on an olh HP PC and all the elements are mixed al photos are not in the line, font is changed. How can I fix this problem. On the other side I will have to do all without elementor. Please help me. Other computers change the site. Pleaseee help.

  13. Thanks for your videos. I always get help from your videos. Please tell me you are using on-top css class. But there is link in the description from which we get the css code.
    Again Thanks WPCrafter.

  14. Sir
    I need help regards ad show on my site how to do it and how much time waiting for approval ad by AdSense

  15. Adam! Fantastic, But….
    In the video at about 32:00, in reference to the "on-top" command, you say, "this is only gonna work is you use the css code that I gave you…"
    WHAT CSS Code? Can you you tell me which video that is? This is my first video, so you didn't give ME anything 🙁

  16. When I made a homepage with elementor, it seems to be cutting things off when viewing on mobile. When checking if my site is mobile friendly, it says that it is. But it still gets cut off. How can I fix this issue?

  17. Hello.I want to edit home page on Xampp (web server) and i dont know how to make a url ( I am on localhost/wordpress! Thank you!

  18. why I'm not able to design my homepage using an elementor ? I have installed a WordPress on localhost ! plz reply…….

  19. Hey, may i know what's the name of the font for your heading "the most amazing course"? i saw it on your screen it uncer default, but i tried the astra theme & it didn't appear as a defult

  20. Mr Adam I have not used elementor a lot but after watching your walk through on this it inspires me, thank you so much for taking the time to make these sort of video tutes and for your time, appreciate it a lot. I have a question, so when you build a site with elementor like the one u did on this video. What would happen if after you clicked saved and took off elementor would it also delete the design on the page or will it stay the same. Would appreciate your answer. Thanks

  21. Okay there are some situations when you don't want an image to resize for responsive viewing. (Just reposition for example). Is there a way in Elementor that allows me to "lock" an element – and only adjust it on another break point manually?

  22. Great job, its an amazing tutorial! Im not a techie guy and it helped me out a lot, now my store is working online. Thanks a lot!

  23. Hi Adam, thank you for this material, very clean and clear, indeed. I am totally new to Elementor (just bought a pro version yesterday) and I am considering Astra theme to combine with it. A question: Elementor Pro seems to offer plenty of ready to use solutions for building the page, so does it make any sense to invest in a pro version of Astra or a free Astra theme is sufficient with proElementor to create quickly a nice, fully customized website (customized colours, header, fonts)? Does proAstra offer anything that proElementor does not cover?

  24. Your stuff is just amazing!!! I've only been set up with Elementor Pro for 4 days. I've been messing around with it on my own and have managed to learn a bit that way. But I'm having a problem with my "home page." It's probably something very small that I just can't seem to find. Think you might be able to help me? It sure would be much appreciated, but if not, that would be okay too. I'm subbed and have been starting to binge watch your videos. 🙂

  25. Thanks for this awesome tutorial. Now my homepage looks awesome and best of all, it's easy to understand what I do now. Thanks again! 👍

  26. hi! i am trying to use background image…i can see the image in the editor but the image is not showing up on live. do you have any idea why is that happenning to me?

  27. What an amazing video Adam. You explained it very clearly and in a very simple way. Thanks a lot. Keep doing this kind of great work.

  28. I have a strange problem. At 3:50 on your page you can see the Elementor section box is below the header, but on my page it half covers the header, so anything I put in there will be partially covered by the header. Any ideas whats going on? Maybe you answer this later in the video, but thought I'd ask early in case I forget. Thanks again for the videos, they have been good.

  29. Hello! Thank you so much for this excellent video. I am able to follow everything you show in this video. But I have a problem with my website's home page URL. I am not able to get rid of the word 'home' from the URL. It should be, but it is I see your website's home page URL has no such issues. Could you tell me what I am doing wrong? Thanks once again!

  30. You DONT show how to make a Homepage. You ALREADY have a template set that you built. No one watching this has that nor do they start way past the first 100 steps to there where they conveniently have your template. This video is NOT as advertised. Watching this you still can NOT make a homepage, you are stuck with twentynineteen and all the other BS templates that DO NOT come up as advertised nor is there even the ability to remove that garbage at top and bottom that says "just another wordpress website" Stop making videos titled for the basics when you are skipping years ahead!

  31. If you speak slowly than it would be more easier to understand for non English people. Sometimes we miss to understand your pronunciation

  32. Perfect amount of time. Really reinforced and brought home the basic concepts of Elementor for me.

  33. Great Video! I learned a lot from this. I was trying to make a section like you had in the video with the picture of the woman with the tilted blue background. How did you get your picture to be just the outline of the woman without the white background? Is that Photoshop thing?

  34. I want to create a wordpress website for my school where each student can see their quarterly report card through login system uploaded by admin. Username and password are provided by the admin and there should be no registration or sign up option, just login and forgot password. Each student can see their respective reports only. Can you guide me? Please

  35. Amazing. A lot of people think they can teach but you actually do with style and confidence. What a treat to have someone actually take the time to elequently make their points. No rush, perfect instruction. I learned more in the last hour than I have in three weeks taught by people that move so fast I need to stop three and four times before it's clear. Bless you!

  36. I know this video is 2 years old, but I tried to find how to add in the CSS class files so that the "on-top" would work on my site. How do I get that to work, do I have to download/install/use a plugin for this? Thanks, btw, great video

  37. Hi Adam…I have just started watching your videos and I can very well say that you are actually doing an excellent stuff for people like us.

    I am planning to launch a website and little bit confused. I want to have a full page background image in home page and there would be many categories and there as well I would need a full page image. For hosting I am using Grow Big plan on your recommendation from Siteground along with cloudflare CDN (so have optimization and caching taken care of) and again I am using Astra + elementor (free as of now), basis your recommendation.
    Now I am confused and want to know what should be my image size and pixels for background images and category images.
    If you have any video on it or any recommendations that will be a big help too.

Leave a Reply

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