How To Build A WordPress Website Page With Elementor Page Builder Plus Free Download

Articles, Blog

How To Build A WordPress Website Page With Elementor Page Builder Plus Free Download

How To Build A WordPress Website Page With Elementor Page Builder   Plus Free Download


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

61 thoughts on How To Build A WordPress Website Page With Elementor Page Builder Plus Free Download

  1. So here is the template download link, the Elementor Pro link, and a link to get 57% off of web hosting.
    Download The Template: https://www.dropbox.com/s/w9gvryg1efwf69f/digital-ocean.json?dl=0
    Elementor Pro https://www.wpcrafter.com/elementor-page-builder
    Web Hosting: https://OrderNewHosting.com
    GeneratePress: https://www.wpcrafter.com/gp-addons

  2. This builder is just amazing great potential here. Please do more of this kind of tutorials, especially focusing on re-designs or design thinking. Once again, Thank you. You have no idea how these tutorials are helping us!

  3. Awesome video Adam! Thank you so much. This will help all of us a lot!
    Would you consider making a must have top 10 plugins for every wordpress site?

  4. Hi. Been waiting for this!!! Remember??

    Will this work easier for me than the tesseract I am trying to use? I have my site & domain!

  5. how to develop complete wordpresss theme and sell it on themeforest this is my dream and want to make some money i have been 2 years on internet but not make money i have watched your all videos but still could not develop a theme

  6. Subscribed! I freelance to make websites and I love your inspiration on how to use Elementor.

    QUESTION: Which is your favorite source of web designs (inspiration)?

  7. More informative video Adam. Great to see a site being created in 'real time' with Elementor Pro and witness some frustrating moments when you have back tract on input settings. Happens to me all the time along with talking to myself in order to discover the right answer!!!

  8. Great video Adam, I would like to see more like it. It is a great help watching you use Elementor to build various pages and have you go through all the little details that would take us hours to find and fix. Thanks a bunch

  9. Hi Adam. Thanks for another great video! As user of Beave Builder, I always use Beaver Builder as the gold standard to compare page builders.

    Right now it looks like Elementor has more advanced design options than Beaver Builder. with that in mind, I have a couple of questions:

    1. Does Elementor utilize short codes like Divi or is it more like Beaver Builder where all page content remains intact if the plugin were to be disabled?

    2. Under what circumstances would you choose Elementor over Beaver Builder?

    3. Where does it rank in terms of popularity among page builders?

    Any insight you can share would be great. I do plan on using the GeneratePress/Elementor combo for an upcoming restaurant site i'm designing.

    Thanks in advance!

  10. Hi Adam,

    Thank you for this precious information.

    I have a few questions :

    1 Does Elementor provide with advanced parallax options and parameters such movement direction, speed, zooming effects, etc ?

    2 Does Elementor support multilayers parallax ?

    Thanks for your help !

    Tom

  11. HI Adam can you recommend a simple stable email marketing service? So many choices with pros and cons. Should I avoid 'contact-based' in favor of 'list-based' if I need to segment lists? Do I also need a lead capture tools plugin like ConvertPlug for example to use with an email list service?

  12. Hi Adam from France. I can't find what font for firefox… This extension seems no more exists… can you send me the right link to this … thanks . i love your video

  13. Really Great work I have another option for generate pro ,also Its Free from wordpress download Blank Slate plugin….it will blank all ur page

  14. can you help me how to make a streaming live on a wbsite in wordpress? please I 'm using wise-church theme and there is a section where there is live strem but I can set it plese your advise i'm one of your favourite follower on youtube your tutorials had inspired me to become a wordpress fan as now I love elementor, I though before that divi was the best of all but since I have followed your tutorial about elementor I became addicted to it, thank you go on help people like us

  15. So how does Elementor behave when you uninstall it? Does it leave a mess of shortcodes?
    Also I am looking for a good builder to deal with the loop of articles in the blog pages,thanks

  16. Bought it using your link. The coupon code was not here, but hey, it is very reasonable for what it is can do.Turning off in a minute or two but wanted to thank you, as always for excellent guidance.Elementor (free) improved my website, looking forward to new features when I work out the pro version. (Put on a countdown timer already.) Phew, not bad for an old lady 🙂

  17. Adam, I want to create a website that gives the public the ability to add video and audio posts, any ideas? Also, given the growing popularity of podcasts would you consider doing a website tutorial on building a podcast website?

  18. (12:51)hello wp crafter i am a huge fan of you i would like to know how can i make that first image that you insert to page
    with all that moving things inside it .i would realy be happy if you can direct me to that software that makes it or whatever.
    keep on the good job

  19. Hi. Thank you for the great tutorial. I just have one question. How can I create a menu which is on top of an image, just like in the elementor.com page?

  20. Can anybody help me? How to reduce/increase , or resize a section width? (No stretch section) in Elmentor Pro

  21. ..hello, adam… it's folks like you in the nether world of cyberspace that give digital technology a good name when it comes to teaching all us "non-techies" out here how to build a presence online using the various website / blog tools like Elementor… you rock…!

    …I did try Elementor one time but decided to stick with the SiteOrigin builder plugin for some sites i built for friends, but since discovering your most excellent videos on Elementor i decided to give it another try… i have a two monitor setup so it makes it easy to following along as you go through the different steps of using the Elementor editor…

    …thank you for a great instructional video, but most of all, thank you for being a great human being in sharing your knowledge when it comes to this website / blog building stuff…! you are inspirational in your approach to teaching – keep up the good work and may your fingers never get tired of dancing on the keyboard creating great teaching videos…!

    carl in edmonds, wa [just an old retired dude] 🙂

  22. Hi! I am trying to get elementor, but it requires 5.4 PHP and the theme I have is gantry theme, and i do not know if it well work fine after i upgrade PHP in go daddy. please help

  23. thanks for this great tutorial. i really like this, can i use it for ecommerce?
    Is Elementor works the same way in all themes?
    which theme would you recommend for ecommerce site?

    Can I use Elementor and the regular page building style together thanks

  24. At a risk of appearing dense, I want to know how to use the landing page I created………how do I "load " the page so that it appears instead of the old one when I bring up the web site? Thank you kindly

  25. Hi I'm new to this and it's quite confusing. I assume I need to have a WordPress account first but according to WP I need to have a hosting account first and in your video you already have WP before adding hosting?

  26. How do make this the page new subscribers see when they sign into your email list? Or even the first page on your website?

  27. Hi – love the video tutorials – at the beginning of the video you inserted an image in the second column which was dynamic with navigation to the bottom and dynamic slide bars – is there a reference on how to make one similar image from scratch,

  28. When I use the search function widget in Elementor, how do I target the page results to an Elementor page vs the Generate Press theme?

  29. Thanks for great video. I see you chose GeneratePress theme. My question; Am I right in thinking only certain themes work properly with landing page software like Elementor? Im asking as with my theme, when i make a page I don't see any means to hide certain aspects like I see in your video like Disable Elements or Sidebar Layout etc. Thank you 🙂

  30. I m using site origin theme … den i saw ur video and started using elementor …. when m imoporting templet directly … my menu bar goes off … and n i want multipage site … so menu bar is important for me … pls help …

  31. I am trying to make an external link with a button or a picture but when I click it dont take me there. Is this because I am in maintenance mode? What do I need to do to make this work please.

  32. Hello, how would you compare the pagebuilders in Newspaper 8 and Elementor? Can I use Elementor in Newspaper 8? And can I make the same structure with Elementor as in the Newspaper 8 theme?

  33. @ 29:11 instead of the image box could you have chosen Icon box instead since it was icons, H2 header, Paragraph?

  34. You Are The Man!!! You make Everything WP related Seamless! Thanks Adam. I'm working on that Website Live Template for Selling Website/Design to customers this weekend. Thanks again for the Sub-Domain Creation Tip. Blessings-Don

  35. Hi thanks for the tutorial. But could you please guide how to make the site live , i mean even after clicking the save button I dont see the new changes on my website. Only in the elementor editor 🙁

  36. Hi, I am using Elementor in WordPress with an Eduction Hub Theme. I am having a situation where I keep getting an error message where it states that "the call_funtion" was not called. I build out my home page first then I make my home page the static page and attempt to view it by clicking on the link. I see nothing but the header and the footer with my navigation and non of the changes for the entire page. What can I do to fix this so Elementor is working properly? I need this fix for work.

  37. I have a question…hope that it makes sense. I have no experience in building websites & i'm still trying to figure all this stuff out. I'm using shopisle theme to create my online store. My idea is to have an online store with a blog/website. I know you have suggested & made video's about other themes but do you think shopisle is a good theme to work with & a good theme to use elementor page builder with ?

  38. Thank you for your quick response, Lovely. Question you talked about going to up something to find pictures or ? Didn't write it down Have to say you are the 4th YouTube maker for WordPress I have been on and really like what you do and how you do it. I sent an email to one YouTube WordPress guy who I was in the middle of making my site with and he never answered. I got so frustrated I quit trying for over two weeks.

  39. Hey Adam, can you make a video showing how to make the new header of the newly redesigned digitalocean website? i had lots of issues recreating the new header and homepage. Can you please illustrate on that? Thanks

Leave a Reply

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