How To Build A WordPress Website Page With Elementor

by Adam @ WPCrafter   |   Last Updated: November 18, 2017
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

Yesterday I felt inspired to see what Elementor page builder could do, so I set out to re-create a very popular website.

Now normally to build something like this would require a lot of custom code and just wouldn't be possible for normal people with normal lives.

But with Elementor page builder, I was able to build this website in 40 minutes.

So if you want to know how to build a website, or how to create a website, or how to build a WordPress website, I think this video is going to get you on the right track.

While Elementor page builder for WordPress is free, there were two portions of this web sight that I use the Pro version to create. The form on the top and the pricing table towards the bottom of the page.

These two elements are only available in the Pro version of Elementor.

The best part is, if you purchase Elementor Pro through my link, I will give you free access to my Elementor Essentials training course which sells for $149.

In this course you will learn how to build a website using the exact website building success system that I created and have been using for over 10 years.

This website building success system will work for anyone that wants to build a website that will impress their friends, family, and colleagues.

So here is that link, and a link to get 56% off of web hosting.
Elementor Pro https://www.wpcrafter.com/elementor-page-builder
Web Hosting: http://OrderNewHosting.com
GeneratePress: https://www.wpcrafter.com/gp-addons

Video Transcript

How To Build A WordPress Website Page With Elementor

Welcome back to another video my name is Adam
from WPCrafter.com were I make WordPress videos

for non-techies and non-coders and in this
video me to do something special I been using

this new page builder called Elementor and
I made a few videos on it but I’m actually

to show you how I was using this yesterday
I was testing one of the Pro modules now if

you’re not familiar with Elementor it’s a
free full-featured page building plug-in for

WordPress you can create some amazing things
in fact a couple days ago they released a

new feature to give you the option to add
gradients to different elements and I’ll be

showing you that in this video but they also
have a Pro version that add some additional

features to the plug-in and one of those features
is the ability to add forms so I was using

it and I just felt inspired to see what the
plug-in could do and after about 45 minutes

I was able to almost completely re-create
the digital ocean website now digital oceans

websites beautiful website you see you got
this beautiful blue gradient a very stylish

contact form here where you can create an
account and it just blends into the background

right here you have a really nice style the
future grid right here with six different

features and then you have this different
type of pricing grid and that was going to

be a challenge and then you have a call to
action down here that I created someone to

see how far I could go in creating this website
with zero code skills and zero code that anyone

can do see if I can do it myself using Elementor
and Elementor Pro and this is what I came

up with so you see I’ve got that beautiful
gradients and I’ve got this a form right here

I got a feature grid and I’ve got that price
table pretty spot on by the way I got there

price table and then this final call to action
now it took me about 45 minutes to create

this in one of my doing this videos I’m actually
going to create it now normally I am in all

my videos you can see me right now in the
top right and actually get rid of that so

we can just focus on the how to build this
page with Elementor now there is one caveat

you can do almost all of it with the free
version of Elementor but there’s two things

you can’t do with the free version because
there only features found in the Pro version

so you’ve got this form here Elementor Pro
has the most powerful visual form creator

and styler that I have ever seen there’s nothing
like this and that’s part of the Pro package

and then this pricing table right here this
fully customized pricing table this is only

available in the Pro version as well to be
able to come up with a highly customizable

pricing table like you see here which is pretty
spot on in every way and you need the Pro

version for this as well now the programmers
is not that much money they have different

licensing options I do have a link down below
and here’s the best part when you click on

my link to purchase Elementor Pro not only
are you going to get an amazing plug-in you’re

going to get to support these developers that
have been so generous with the free version

but I’m also going to give you access to a
course that I’ve created called Elementor

essentials and so you’re going to learn my
complete website building system using Elementor

and it is going to save you time it’s going
to cut down your learning curve and is can

help you to get amazing results in building
a webpage for your self that you can be impressed

by so that is Elementor Pro and my special
offer there is a link down below and I wanted

to give you Get the last thing I want to mention
before I go is that Elementor has an amazing

template library that gives me the ability
to export this template and I can give it

to anyone is this the file and then you would
import that so I’m also going to provide a

link down below there’s no sign-ups no anything
is just the link and you can download this

file and you can import it into your template
library if you want to see exactly what I

did to create this beautiful beautiful webpage
right here now and the last thing is I’m not

suggesting you go and copy websites verbatim
no one has a copyright on color schemes and

font schemes and overall layout obviously
it’s not a good idea to take someone’s images

very not is not a good idea at all is not
a good idea to take someone’s icons these

are

all right this is kinda new for me I’m used
to being in every video but that’s all right

this is a learning time to learn exactly how
we can re-create any webpage that we see on

the Internet almost exactly so let’s go ahead
and get started so I’m assuming that you already

have hosting if you do not have hosting you
can visit order new hosting.com and it will

take you over to InMotion hosting and this
is the page you’ll see you’ll see a picture

of me there and this is a special discount
that they give to my viewers here on YouTube

so the normally they might have a 20% offer
30% off when there’s a sale but for my viewers

you’re going to get 57% off and it is just
when you visit order new hosting.com and you

can go ahead and order your hosting package
from them it’s very awesome reliable fast

hosting and it’s very affordable all their
support is US-based and you can call him when

you need help you can live chat them and you
can open a ticket so anyways here is WordPress

that I’ve already installed Elementor and
I’ve also installed Elementor Pro now Elementor’s

easy would just go to plug-ins add new and
you can install Elementor that way and then

if you purchased Elementor Pro you can download
it from your members area and you can upload

that yourself and then activate it so I’m
going to start so before I begin there are

two tools that I will be using most likely
throughout this video and if they are called

web browser extensions now I’m currently using
the Google Chrome web browser but they are

also available for Firefox if you are using
Firefox and these tools and allow you to guaranteed

these are custom icons here I’m not saying
that you definitely don’t want to take peoples

text and I’m not suggesting any of that I
was just using this as an example to show

you the power of Elementor Pro and that anyone
that that wants to build a website can do

it without touching a line of code it just
takes having the right tool and having the

right training and you’ll get both of those
with Elementor Pro and the link down below

so anyways I’m going to take off and working
to start building this webpage analyze a webpage

and this one right here will basically let
you know any color that you see on any webpage

and this one right here is gonna let me know
any font on any webpage in the size so let

me show you that an action so here I am on
the real digital ocean website and so the

color extension right here is called color
zealous he could just Google color Zillah

and then the name your web browser and I’m
sure the extension will pull right up so the

way works as I clicked on it and then I choose
pick color from page and I can go like this

and it will show me any color on it on a page
that I’m on so here’s that little bit of a

green right there let’s see if I can go on
and there’s a green here’s the blue the different

shades of the blue and what happens is when
I click on my mouse and scan a copy of the

color code into the clipboard of my computer
and then I can paste it into Elementor wherever

I want to put that color so that is color
Zillah the other one is called what fonts

and you could just search for what font Chrome
extension or what font Firefox extension and

when you click on this anywhere you move your
mouse it’s gonna show you the name of the

font and the size so I’m showing that this
is Proxima nova now I do know that Proxima

nova is a paid font when I click on it is
going to show me as a says type kit but that’s

okay really use an alternative font but what’s
nice is I’m able to see the size of the font

right here and sometimes the weight is just
saying its regular which is fine but I can

scroll anywhere on over any font and see exactly
the size of this is going to be smaller in

seat 16 pixels the fontweight is 600 so working
to be able to use those values to try to re-create

a similar font scheme not using the same font
though but for a similar size and weight it’ll

work out fine and that we can basically hover
over anything severe and I want these two

tools and I would go ahead and recommend you
install it so right away what I’m going to

do is create this section and when you look
at any webpages just a series of sections

that have column so when I am looking at this
I see a section with the gradient blue in

the background I see two columns what you
see right here and what you see right here

in this is just some text and a form of field
and a little bit more text and this is just

simply an image and when I look here I see
another section with a full column here that

is just given me a headline and then I see
these three columns right here each one has

an image headline and a little bit of text
and then I see a duplicated and then when

I scroll down it’s the same thing we have
a headline I am not going to be able to re-create

this switcher right here so when you click
on this it toggles the way they charge I’m

knocking to be able to re-create that so but
I am to be able to re-create everything that

you see in this pricing grid and this can
be pretty close and then I’m going to skip

this map it just an image and this is just
a series of images you can see is just one

big thing of images on the skip that and I’ll
do this final call to action and so your to

get the point so right off the bat though
I’m going to tell you this form section right

here in Elementor it requires the Pro version
so let’s just go ahead and get started some

to go to pages anima to add a new page and
let’s just call this digital ocean I write

and I am using the generate press theme will
also have a link down below to it it’s free

but they have an add-on package that gives
me the option to disable some elements on

the page so just for cleanliness and to disable
the header the navigation M actually disable

all of these because I just want to look at
the page builder and I need to go here in

choose content no sidebar so that’s letting
Jerry press know that I am working with the

page builder and I’ve got a check on this
box so now when I click on publish and then

I click on edit with Elementor like this it’s
been open up Elementor and it’s just a blank

completely blank slate and that’s fine so
let’s get started on the first add a new section

and Artie know it’s gonna be a two column
section like this so now I have these faint

two columns are right here so I already know
that I’m good have an image here so why don’t

I just first search for image and let’s just
get that in there real quick some of the drag-and-drop

that over let go and then when I click right
here a minute delete the placeholder click

on the plus and I have that image right here
is a matter fact I’ve already uploaded it

by the way summary click on insert and we
can see there is my image now right here I

already know working to have a headline and
there were never form and number and have

some text so let’s go ahead and do that right
now so my click right here and then here’s

my heading some in a drag-and-drop that’s
and then I’m in a click right here again and

I’m in a scroll down to the Pro element and
I’m going to choose the form animal to put

that right underneath the heading elements
and then right underneath here I’m going to

put instead of a heading element for that
little bit of text I’m talking about this

little bit right here I’m in a go ahead and
use the text editor for that and let’s get

that dropped right there okay so now what
I’d like to do is get the background looking

right in this section so when I hover over
any of these elements here you see this option

here for sections only click on that and it’s
gonna say edit section so the first thing

I want to want to do is click on style and
we have all these great background options

now for me I’m in use the gradient option
which is right here and what a gradient is

I even made a video on this yesterday you
need to colors now they are using a gradient

here you can see all the way on the top right
it’s a lighter blue than it is on the bottom

left so I’m in use my color picker now to
get this exact number to get a close enough

so that you get the point so many choose pick
from color picker and then I want to go to

the very bottom here and I’m in a click and
that’s gonna put that color code into my clipboard

number and go back here to Elementor and so
here’s the first color of the gradient click

right here and I’m going to paste that in
so there you see we’ve got the first color

of this background now I’m in a go and I’m
to get this lighter blue right here now this

is and can be an exact science like I said
so there you go it’s just a little lighter

and let me click this to make that collapse
and then right here I’m going to put the lighter

blue in just paste it in like that so you
can see we have it now if we want to make

it similar to how it is here working have
to tweak it so it’s darker here in lighter

there so let’s play around with these settings
real quick summary go from linear to radio

and then I’m going to have it go to the let’s
see how about the bottom left let’s see if

that does it and I think that actually did
it so I’m have to put some spacing so we can

better see it and change the colors of these
fonts but working up probably have to play

around with these just a little bit these
toggle switches here in order to get it just

right you see that Eric I think that’s actually
probably perfect so first let’s put a little

bit of space between these elements in the
top and the bottom since were already in the

section so we have this bit of space here
in this bit of space here looks equal some

to play around with the spacing here it’s
called padding in the advanced tab to see

if I can get close to that some to go to padding
right here I’m good have to click on this

this little link right here to and went when
it’s that when it’s highlighted and you increase

one it increases them all and that’s not what
I want I just want to increase the top and

the bottom there so I’m thinking the top might
be 80 pixels so when I hit 80 and that looks

close maybe a little more than is there so
let’s actually go with 70 I think that’s pretty

close and then for the bottom I want to put
70 as well and when you’re in Elementor you

can always click on this little tab here to
preview what it looks like so you can see

that I’m I’m pretty close actually little
tweaking to lighten up the color on the bottom

left here so let’s go ahead and play with
that a little some to go back to style and

let’s see want to play around with these little
bit just the very goats lightning up a bit

okay that’s actually looking very close right
there alright so now I’ve got my spacing I

think that I need to have a little bit of
padding in this column on the left and right

to kinda squeeze it in a little bit and maybe
here as well to to make the image a little

smaller so let’s do this column first summit
click here it says column and him click on

advanced animal to do the padding again I’m
going to click on this little link and for

the left and the right time and it just play
around with it may be maybe 25 or 30 on each

side let’s see here okay so let’s go like
that she can see it’s it’s tightening up maybe

just a bit more maybe I will go a little tighter
let’s see what would 50 looks like see 50

okay that’s going to be fine so I’m right
here and I’m going to highlight and copy this

little bit of text and I want to go to the
heading here in a minute pasted in just like

that now let’s first make that font color
white so working to do that in the style and

then the text color a minute she was here
and then I’m a go to White so there we have

it now the font here is a lot thicker and
it’s a little more spaced out here so let’s

see if we can get close to that now here’s
one of things I don’t like about Elementor

in that’s when you’re using the heading elements
I can hit as many enters as possible here

in it doesn’t reflect there it’s not made
to do that you actually have to put a little

bit of HTML and it’s simple whenever you want
to

you put bracket BR bracket like that and then
it will put it on a

like that such a little Elementor tip for
people that aren’t used to coating and I said

that would be very minimal coding in this
tutorial so let’s play around with the style

some more and see if we can get it closer
so I’m a new turn on the topography options

and this is can allow me to customize the
topography right here so first let’s try to

get the size someone ago I go this actually
I think let’s just do this for speed to go

into what font and see what size it was already
know it’s a 4040 pixels there so I’m in a

go to 40 just like this okay and now I want
to make the weight Leiter sewed so thick right

here let’s let’s change that something is
probably about 500 or 400 let’s see 400 so

it’s a little better actually maybe just the
two had bit lighter but I think 300 makes

a little too thin actually I think were going
to go with 300 looks pretty close considering

were not using a different font so the line
height was set to 50 let’s first click on

the right here it says PX and then let’s see
if we can go up to 50 and see if we like how

that looks so there is a 50 and I guess it’s
pretty close let’s see so there it is cloud

computing designed for developers and let’s
exit what font it looks close enough to me

alright so you can see the differences in
the font that were using so let’s go ahead

and open this up a little bit now let’s start
tweaking our form here and like I said earlier

that Elementor is the only visual form builder
that I’ve ever experienced that allows you

to build the form and style the form visually
so one of my dues on my click on the element

right here and now I have the option so I
just can ask for name and email I don’t want

message, click on the X and you see that made
that go away now also many get rid of these

field titles right here there called the labels
on the click right there to get rid of the

labels so were already getting closer to it
now we just need to changes some of these

styling options to get it to look similar
to here so we have a white button we have

a white border we have this very transparent
but it’s slightly you can see a slight hint

on it this font is whites and let’s see if
we can get it pretty close to that song go

ahead and take that color code again usually
I will make a note pad and put these color

codes in it so I don’t have to keep using
the color picker alright so work to spend

most of our time in the style options but
let’s go right hero quick and I want to click

on the submit button and change what it says
MMA could say create an account I just want

to match the text there to make it say create
an account now when you are creating a form

you want to go to this option here email and
options you want to put your email address

in the said this is where the submissions
to this form and to go to and you also want

to put in your subject line and all this kind
other information right there so let’s go

to our style options and a first of all let’s
see I don’t want the form styling let’s look

at the field so the text color is going to
be white so I can choose the option why right

here now we can see because the backgrounds
also white and the topography will see if

we have to play around with that the background
is white but working to make it transparent

so go all the way down but up just a tad tad
because I think it was a long handle a slight

tint to it there we go so many do that and
the border color I am going to make a border

animate to make that white now let’s see if
I need to make it any thicker want to go here

K years digital ocean and then hears us so
it looks right is pretty close now I’m in

a go ahead and start playing around with that
button and seeing if we can get that pretty

close so now my new go into the styling of
the button and let’s go ahead and make the

color of the text what I copied in my clipboard
which is that deep blue and then I’m going

to want to change the background color to
whites and it looks like we are getting there

we are pretty close now so when I go here
we can see if it looks pretty close to me

so now let me go ahead and put this in my
clipboard this information about the terms

of service right there now obviously there’s
little adjustments we can make we can adjust

the spacing we can get it exactly perfect
but I want to go with this forsakes of times

TO click on the textblock here and let’s go
ahead and click on the edit there and I want

to go here and I’m gonna paste in my little
bit of text now here’s an option you can highlight

this and change the text color here if you
want but then if you do that and make it why

you’re not can be able to see it here because
it’s going to show it here but if we go to

style we can change the text color here and
we can make that white sets kind of a good

best practice there to go ahead and change
it in the style don’t change it in here unless

you want multiple different colors you can
do that now it’s obviously a little too big

right here sorting to make that smaller return
on the topography and my guess is it low’85

See I don’t want to guess let’s see how big
that it is that is 14 pixels so let’s go ahead

and set this to 14 as well just like this
and there is our terms of service now one

of the problem so far is this is aligned to
the top we want to kinda push it down into

the middle you see how this is in the middle
right there we want to push that down into

the middle a little bit so what I’m in a do
is I’m going to go into the column options

for right here somewhere click on column and
it’s gonna pull up my column settings and

in here working to have an alignment option
that alignment option can be found underneath

the layouts and it’s his content position
and we want to change that to be in the middle

so now when I go like this it’s showing that
perfectly in the middle nicely we can put

little spacing and stuff like that but this
is pretty close as it is you can see it’s

very close and I saw how easy that was to
change the form and style it like that it’s

pretty amazing so alright let’s go back here
now what we want to do is we want to start

working on the next section we just want a
headline and then we want to start with a

big future grid right there so to make this
two separate sections one with the headline

and one with these feature grids some to go
here to create a new section and it just to

be one column like that and I’m a go ahead
and put the headline in I like the styling

of this I think it’s probably similar to that
to that but a different color we see this

and then we see that lets the size difference
is this right here were run in a 32 in this

right here were at 40 so when I want to do
is I’m just going to duplicate this like that

and then I’m in a drag and drop it here click
on it for some to change the color to Blackman

to lighten it up a little bit just to soften
it up and then I’m going to click on the content

I want it all on one line actually what I
should do is just copy there little bit of

text right here like that and I want to put
that in so now it’s on one line I do want

it centered so I can click on the alignment
option right here all right so there you go

I have it in the center and want to add a
little bit of spacing to the top and bottom

I think we should stick with that 70 number
we had here so I’m in a go to the section

right there on the click on it and I want
to go to the advance and I’m going to add

a bit of padding someone new click on this
lock here and on the top and bottom let’s

just go with 70 like that and so it’s can
give us that space the last thing I forgot

to do was to change the font on this summit
click on it and it set the 40 and let’s go

down to 32 which is very similar to what this
is the 32 Sedona work on my feature grid and

one of the dues create a new section and in
this section is going to have these three

columns let’s go ahead and get our three columns
in there just like that now let’s find which

elements we should use now I could just put
in each of those columns and image headline

and then some text but there is a specific
element that is made to do that siliceous

scroll down to that element right now it’s
gonna be a general element and it’s good to

be this image box right here so I can just
drag and drop my image box and you can see

there it is so the first element in an image
box is the actual image some to go ahead and

click on the settings here click on delete
and then I’m going to choose it and it’s right

here now this is one of those things where
I grabbed it from their website and I talked

recommend that okay so let’s go ahead and
just take some of this text right here and

see if we can get it to look very similar
just like this and I’m at a pace that in there

so we have it so far except there is alignment
differences here it’s aligned to the right

here it’s not and then there’s some changes
that need to be made right there so we are

going to go into the style settings first
and then were to go to words is content to

look at some of the options we have there
so if I was in the content tab right here

you see there was an image position and if
I go like this it’s not going to be what I

want to scan a look like that and that’s not
what were after so if I go to the style the

overall alignment is going to be right here
underneath the content tab and I can choose

to the right and that’s kind of what we see
happening over on digital oceans site now

for the title is the font looks a little too
thick and I don’t know if the size is right

let’s see so it is a 24 and it’s a 600 and
the weight of the font so let’s go ahead in

the title and let’s make the color similar
to that normally I would suggest having your

font color codes in a text editor we can just
copy and paste it across on the customize

the topography to make this 32 just like we
saw actually wasn’t 32 is 24 sorry and it’s

a little too thick let’s see what the 600
looks like he had to different font some to

go down to 400 maybe 500 there go I’ll do
500 just like that and you can see let me

get out of what font it’s looking pretty good
here and the content color should be a little

darker so I go down a description let’s go
to the font let’s make that darker as well

just like that that looks good to me so now
let’s see how this is looking and Emma to

compare it and it looks fine to me you can
of course manipulate the spacing a little

bit so now what I would do is him and it duplicated
two times like this and I’m going to drag

and drop it over and I’m going to just duplicate
this entire section I guess I find wanted

to I could just duplicate it and have two
elements in each of these rows I could just

go like this and like this and that I can
put some spacing between it but I think I’m

in a just make it a separate section altogether
to delete those out anima click on section

and I’m in a just duplicate the section that
we have some spacing issues we definitely

want to have a bit of spacing between these
so let’s go here to section and I’m in a pull

of the section options but go to advanced
and for that I’m going to margin to push some

space between these somata unlock that and
I am going to actually here’s a situation

where I think we can keep it locked and then
roll up will increase both of them at the

same time so maybe something like but see
my ball and get something like that that’s

fine so let’s just go up to 65 just for kicks
and there it is so so far we have that and

then we have our feature grid okay so now
is going to be the hard part of this and that

is to create this grid not to put a headline
you know how to do that you already know how

to do button I’m just gonna work on this grid
for the remainder of this video on this pricing

grid in case him to go back to Elementor them
to click on add a new section and I want a

five column option now what’s odd is most
page builders don’t give you a five column

option but Elementor does and I like that
a couple years ago I use visual composer and

if you’ve used that page builder you know
there is no five column option I don’t I don’t

know why that is but I’ve experienced that
so anyways I’m going to click on that and

working to make this five column pricing table
right now this is probably one of the also

one of the most powerful Pro elements is this
pricing table I’ve never seen a pricing table

plug-in or software that has this much power
it’s an and options to customize it so here

it is price stable I’m a drag and drop it
in there and so this is just the default look

that is giving us and working to get this
all changed to look similar to here are we

have some line items there’s no line in it
we have a dollar we have a number here for

the pricing and we have this little bit of
information just appearing off to the side

of that and we have this border this blue
border so let’s go ahead and see how fast

we can do that’s only going to the options
here for it and there right here on the side

so were looking to use a title or subtitle
said air information right there someone to

go ahead and delete those options and what’s
nice is if you don’t want them you just remove

the text and they just completely disappear
and so there’s our header and for the pricing

working to just make it similar to what we
see on digital oceans website which is five

and instead of monthly working to do that/MO
just like that per month working to move it

obviously okay sets our pricing and then we
have our features right here and I don’t think

we need to adjust anything in them icon color
will not commit adjust anything in those looming

collapse that in the footer if you notice
here there’s actually just one big button

here this is more for informational purposes
so I’m in a remove the payment button that

is right there so all you have to do is highlight
and remove it and that’s what I love about

this pricing table builder that’s as simple
as it is to get rid of that button if you

don’t want it and I don’t want this additional
bit of info there and you can see there it

is now obviously we have some spacing issues
and what I did to overcome that is I just

put a space and right there just literally
a space in a kind of put that space back there

for me summit collapse footer going to ribbon
and I don’t want that that ribbon there I

do think the ribbons are pretty awesome and
you can put it on whatever side you want and

you can make it say whatever you want but
for this example I’m going to have to remove

it just like that now let’s go into the style
and take a look at some of her options there

so our background color we know we want that
to be white just like this and that’s our

background color and actually I remember now
when I was initially making this this page

that was actually just for the header and
we got rid of the header of the title and

the subtitle so let’s go ahead and collapse
that I actually didn’t need to do that were

actually going to now start playing around
with the pricing options so the background

color here is good to be white let’s see if
that gets us that got us halfway there whoops

and we have more options here we want to play
around with the padding I don’t think we need

to play around with the color is fine I can
play route the topography as you seen the

currency symbol that’s okay as well and I
think it’s this fractional part is what we

need to play around with no no no not the
fractional part it’s the.

Let’s see position below position beside there
it is what that position beside and let’s

see I think now I might be there we go so
to get this there I had to for the.

I had to position it beside and then I have
this vertical position option right here sorting

to go to the bottom and that’s what we sell
right there it’s just right there on the bottom

okay so that is the pricing let’s go to our
features and it’s the same thing working to

get our background color just like that in
the end then let’s change the color of the

items we want that blue I don’t think I have
in my clipboard anymore and this is why say

it’s good to have a little text editor are
you saving all this stuff let’s take the blue

right there there it is okay so I got the
blue so let’s space that blew in and there

it is who it’s so bright okay some click on
that the collapse said I’m not to play around

with any of the topography the alignment is
fine the with this fine now the divider let’s

get rid of that now the divider we probably
need to maybe space a little bit let’s see

if we can space it out just a little bit I
think I’m when I have to go into the topography

option like this and scroll down to the line
height let’s see there we go so we can space

that however we want maybe just a little bit
more like that actually it gives you the option

of pixel or EM I prefer pixel like that let’s
see there we go just like that though looks

fine to me okay so that is it for our line
items the feature boxes go to the footer it’s

this area here working to make that whites
and there it is so were getting getting pretty

close now were getting pretty close now let’s
go into the advanced tab now I need to make

a border on this item right here some to click
on background and border and I’m in a choose

a color enema to put that same bright blue
in just like that and now we have a border

but the only promise this border needs to
touch this border and they all kind of need

to link together but we have that little bit
of padding that you see in the column there

in a minute have to get rid of that and so
I think what I’m going to do is I’m going

to click on column and I’m in the column settings
but go to advanced and for the padding and

to put zero let’s see so we have zero now
let’s see what it looks like what when I did

that I lost my little border so let’s see
if we can get that back I wonder if I needed

to make this one let’s see let’s see if that
got me my border back it didn’t okay so I

gotta go find what happened to my border to
go ahead and now click on the element here

again and I would go into advanced anima go
to background and border maybe I just need

to make my border thicker or maybe actually
just need to select the border by choosing

border type solid and then one about that
okay there is my border I knew I would find

you and that I got a select that border color
okay I’m just getting a little ahead of myself

let’s choose a border color and we’ve got
that blue there it is now standing out now

or get ourselves a border you can see that
right there okay so now what I’m in the need

to do something you need to clone this all
the way across in each column I’m going to

have to get rid of that padding so they all
kind of a butt up against each other and so

what I want to do here is just the duplicated
four times just like that animal to move them

all across you can see I have to just the
padding so when I do this one last because

I need to figure out how to make it a little
larger and put a box shadow so you can see

it’s larger and then there’s this kind of
a blue box shadow swimming to do is just blast

through this Andaman to set this to zero and
him to click on here actually make sure I

do it right click on column right there and
do the same thing here just like that and

then for here Mona click on that and make
sure I get that right there looks like I didn’t

get it right here that’s okay let’s go and
do that again Larry go so now we have it looking

pretty close to where we wanted it looks like
I might have accidentally messed this column

up so let me click on that column and see
what I did wrong let’s see let’s go like this

and this is good this is good I think I messed
this column up I will go and fix that in a

moment but let’s deal with the elephant in
the room and that is this I need to make this

bigger I need to add some box shadow and I
needed to just sit on top of this and on top

of this so let’s see how we can accomplish
that someone click on the actual elements

right here and then I would go to the advanced
tab Emma play around with the margin in the

padding so let’s see here so for the margin
let’s see how a negative margin’s gonna look

at that’s going to accomplish it someone to
go to a -10 like that and actually I think

I needed to zero it out in the column for
solemnly go back into the column remember

how I zeroed it out on all of these the padding
slits zero that out okay that’s what I will

never go we already have it taller we already
have it here and right here on this side it’s

this one’s on top of that and there’s a little
fix for that so we go back into here go back

into my advanced and of course I want to add
that box shadows well now for I think I needed

to play around with the padding a little bit
let’s see actually let me zero out something

in the column if I go back into the column
make my margins is zero as well in all that’s

left is stretching it down I know how I did
this I was playing around with this bottom

area right here in the setting so if I’m in
the price table and I went into the style

and then I went to the footer I’ve got some
options here for additional information and

this is the info that it shows here so let’s
see if there you go now it’s now it’s: there

we go just like that you see how it’s increasing
that’s that’s actually perfect for me maybe

down the 40 or something maybe 3535 like that
let’s see if we get a little bit of a box

shadow going on on that so I think it for
that I just go to advanced and then go to

background and border and then here’s a box
shadow’s and I’ve got a bit of a box shadow

going on to but my big problem is that this
element is not on top of this element and

unfortunately with this there’s a little tweak
you need to make it via CSS now if you have

the Pro version and you must if you’re making
this pricing table if we go to the advanced

tab of the pricing table there’s this custom
CSS option and we just need to paste something

in there and someone to bring that over right
now actually we don’t put it on the price

table we put it on the column itself to have
this column be on top of everything else in

the scalded Z index so when I click on column
and go to advanced and then custom CSS I’m

just gonna paste it in right there and you
can see it immediately lifted it on top of

everything else and so this is called the
Z index and it’s basically how you use CSS

to instruct the browser what would appear
on top so sometimes when you see a sticky

header on a website you scroll and it appears
on top of everything that’s usually going

to have a Z index is a higher number than
others see indexes and I know it’s a little

geeky there but so let’s see how it’s again
right now and you see it’s actually pretty

close only thing I would do differently is
I would scrunch these and just ever so slightly

and I’ve got to find out what happened here
why these aren’t linked up let’s do that real

quick okay I figured it out I had just put
a wrong setting here for padding I had ones

in there for this column and that’s where
that problem was coming in so you can see

how were looking so far you can see we’ve
got ourselves a header here that’s pretty

spot on a future grid and this pricing table
that is pretty spot on one thing I would do

is maybe add a little bit of spacing in this
pricing tables section here so we were doing

a bit of 70 I think okay so we’ve got some
spacing now let’s just add a quick section

here and finish wrap this up and working to
just go ahead and get that blue again and

the same blue that’s in this column there
and go like this in My blue to make the background

of this section that same blue go to style
I’m going to just do a solid color this time

not to do a gradient paste in my color and
then we have this volunteer and then we have

a button or headline so I could just grab
this if I wanted like that and we can change

the alignment to be centered like that and
we can go ahead and get ourselves this little

bit of text right here and remember that whole
issue with the line break we have to put that

BR someone do that after the letter a so the
large right here some ago like that and it’s

going to give us that and then we just need
to add a bit of spacing to it so let’s go

ahead and were going to unlock here and for
the top I’m in a go 70 and for the bottom

70 just like that and then we can just pop
a button in there and use that same style

so anyways this is it’s I mean this is it
right here I’m in to do the little bit of

touchup and I will have a link down below
for you to import this if you wanted to have

it for yourself sorry for the length of this
video I just want to show you the power of

Elementor and how you can pretty much in design
whatever you want you just have to get familiar

with the controls and find what you want to
design and with the tools it gives you there’s

literally no limits you could solve the only
two little bits of code I added was at one

point I added the back it] BR to get this
to be two lines and the only other bit of

code I added was to put this on top of this
element here on the right of it that’s the

only time I added any bit of code to this
template and we are able to do the most amazing

things with it remember I got a link down
below if you wanted to purchase Elementor

Pro I also have a link down below to hosting
you get 57% off and if you did purchase Elementor

Pro through my link I will happily give you
access to my Elementor essentials course because

you made it to the end of the video I have
a free gift for you but before I talk about

that I want to ask you to do something for
me if you can give this video a thumbs up

down below that would really help me out if
you’re not subscribed to the channel go ahead

and click on that subscribe button and become
a subscriber and support this channel and

if you’d like YouTube to notify you when I
upload new videos there’s a little bell next

to that subscribe but you can click on that
and set that up as well if you have any questions

or a comment about this video I’d love to
answer it there’s a comment section down below

all you have to do is put in your question
or comment I respond to every single one I

made a course just for you and it’s called
the three steps to WordPress success and I

want to give this to you if you’d like to
enroll in this course there’s a button right

here off to the right you go ahead and click
on that role as a student and that’s just

my way of saying thank you for supporting
me and making it to the end of this video

I make them just for you!

Adam @ WPCrafter

Adam @ WPCrafter

My passion is making the best quality video tutorial online, for non-techies. When I am not behind the camera, I am usually helping out one of my YouTube subscribers.

8 thoughts on “How To Build A WordPress Website Page With Elementor”

  1. R

    Hi. I am definitely not a techie, but for the most part, I have found Element fairly easy to use except for one think. I want to put Amazon Affiliate link on specific pages of my site and I cannot figure out how to do it. No matter which of their widgets I use (such as text editor) when I paste the code in that’s all I get – code. Even when i view the site live, the only thing there is either code or sometimes a box that can’t load any content. Thanks for any help

  2. R

    Hi Adam, thanks for your awesome videos and tutorials. Can I build an online course using Elementor?

    I want

    (1) A customized landing page with header, VSL (video sales letter) and button ‘Yes, I want this course’ all stacked vertically
    (2) Checkout/shopping cart after customers press button to buy the course
    (3) Auto-responder (I watched your Mautic tutorial and am learning how to start using it)
    (4) Course with member login after purchase

    I watched LifterLMS tutorials but want to customize the way described above. Can you please help me understand my steps/plugins I need?

    Thanks,
    Rus

Leave a Comment

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