by Adam Preiser updated August 20, 2017

How To Setup Elementor For Faster WordPress Website Development


Share on facebook
Share on twitter
Share on linkedin

Video Transcript

How To Setup Elementor For A Faster WordPress Website Development Workflow

Snowing to get into the real fun stuff and
that is building out these beautiful pages

now the plugging that I’m using to build these
beautiful pages is called Elementor now Elementor

is completely free and I love that about them
they are so generous in giving a full featured

free plug and now they also have a premium
add-on that is totally optional now let me

show you the homepage that were to be building
in a moment so I can show you the different

parts of this that I used the premium version
of Elementor so all the stuff you see here

were using the free version of its were still
using the free version still using the free

version now we have this beautiful pricing
table and the pricing table feature as part

of their Pro package and when I scroll down
we have this countdown timer that I probably

need to fix the date on this is also part
of the Pro package so when you head over to

Elementor’s website and I have a link down
below that will take you there but I wanted

to show you the Pro package so when you come
to the website right here it’s basically showing

off the free version which is full-featured
and you could totally just roll with the free

version of it and then maybe when you start
getting some sales of your courses then you

go in and maybe purchase this to add more
power to your website, click right here it

says get Pro and it’s going to briefly show
you what you get with the Pro package and

also how much it costs to get the ability
to create a beautiful post grid but it’s not

just for posts you can actually have a a lesson
in grid so you see these different options

they list the grid Manson re-or for a blog
you can do that for your lessons as well or

your courses and that’s really nice you have
this form editors all these forms that you

see here in the background often forms contact
forms. To be able to visually build all of

that in this same visual editor that you are
to become a master of using its interface

so we also have this global widget option
I’m not to talk about that right now but this

is very powerful so you can create an element
that you use on one page and then you can

use it on multiple pages but if you need to
change something you can change it in one

location and it changes across your website
site that’s a little complicated custom CSS

when I can I need this in this project but
it’s a very powerful feature to have embed

anywhere is nice as well were not to be using
that though in this project slides this is

amazing because you can create a beautiful
slideshow without having to buy something

else and without having to go learn a new
interface you can just do it all in Elementor

Pro and as a scroll down if you wanted to
have a traditional e-commerce platform in

your website typically in use this thing called
WooCommerce and it has a lot of elements for

WooCommerce to basically get by buttons and
product images anywhere you want on your website

it’s very powerful and it’s also to come with
Pro templates now these aren’t all the pro

templates that it comes with but these are
gorgeous and beautifully designed additional

templates that you’re going to get included
and right here is another breakdown of the

different widgets that you get the features
that you are to be able to add to your website

with this so we got that posts a portfolio
slider forms pricing table I talked about

all those but you also have a countdown timer
which is really great for creating sales pages

a priceless this is really awesome for a restaurant
of course were making a course website but

if you wanted a list of prices you could do
that the flip box is a very neat feature as

well there’s some really interesting ways
to use this that I made a video on here’s

our WooCommerce elements you get the premium
templates and here’s some items that are coming

soon they have a Carousel MailChimp integration
Twitter feed and they’re really putting some

innovative things in here I know some other
stuff that they’re adding that they haven’t

made the information public yet and by the
time you’re actually watching this video I

bet if you came to this page right here and
you looked you would see that they have a

lot more widgets added it’s just a pretty
amazing the powerful features that they’re

adding in the beauty is on these things you
have to go and buy something separate in order

to have and then you have to learn a whole
new interface and it makes it a little complicated

the beauty of just buying Elementor Pro is
that you don’t have to learn a new interface

it’s all just right there for you so here
the prices what I really like is that they

have a single site option so right here for
$49 you can have Elementor Pro on one website

and then the middle packages three websites
in the package on the ride is unlimited and

it’s gonna come with paid premium support
and you know I actually bought a personal

license and then I paid for an unlimited license
I didn’t even ask for a refund on the personal

license and the reason I did that is because
I just wanted to support the developers they

have made such an amazing free page builder
that you’re in a scene a moment and is so

powerful and I just wanted them to be successful
so I wanted to pie something from them and

this is a great way to support the developer
now if you didn’t go with the hosting that

I recommended in order to get the course bundle
that I was offering I do have different course

bundles available on these various packages
that you would purchase so if you purchased

this right here and he didn’t go with the
hosting I have a whole course on using Elementor

and you just send me the receipt and I would
go ahead and verify it in the get you access

to my course on Elementor’s you can really
master it and if you purchase this I would

give you that in an additional course I have
it all listed on my website to get his head

on over to my website all have a link down
below in the video as well that you can click

on to see what I’m throwing in if you did
purchase any of these through the link on

my website but like I said you can get it
if you want you don’t have to get it at all

there’s just one or two little things that
I said I decided I wanted to just show you

some of the power of this when I created the
template in your system frequently asked questions

so I really love this and I really love what
they are doing what they’ve given to us so

I need to install the Pro version on this
site that I’m building in order to re-create

some of those elements I showed you on the
homepage so I just need to go to plug-ins

add new and then I need to click on upload
plug-in and I’m just gonna drag and drop it

in there so it’s just an add-on plug and you
leave the same Elementor we installed a ready

you would just add this and it will unlock
those additional features in them to go ahead

and click on activate plug-in right there
and I need to click on this in order to actually

activate the license but it’s in there and
it’s working now now Elementor has it setting

panel right here and it’s probably good to
be on the bottom for you and when you click

on it like that this is where we can start
setting some of the options of four Elementor

before we start building out our page and
so right here is the different type of pages

that we want to use Elementor on will leave
the default post and pages and this is good

if you had a website with lots of different
people logging into it for instance an editor

contributor you can choose who sees and who
doesn’t see the Elementor page builder options

right here is some styling options were going
to leave these unchecked but essentially if

we did check these it would pull it styling
options in from your theme which is fine and

relieve the content with the same relief that
were not can it play around with any of those

and this recapture option right here this
is only if you have the Pro version and this

gives you the option to have a recap show
that said image verification that you can

have on a contact form to reduce spam so I’m
not in a set that either and then we have

this in my library option right here and this
is where were going to go ahead and import

templates and since were in here let’s just
go ahead and do it right now some the click

on import template and then right here we
just need to drag and drop the template files

that were in the download package that you’ve
already downloaded some to pull up the download

here it is and we have this folder that says
page template so go ahead and double-click

in there and this is what you see and there
might be different by the time you are downloading

it but what we want to do is import these
in Chaisson files seats is J sans and there’s

three months this is the main homepage there
working to create in this video series and

then here are the two others so this is how
you import the page template you just drag

and drop it right there and then you click
on import now and there it is there is the

main homepage so let’s do it for the other
two on a click on import templates and let’s

import the third homepages go there okay now
that that’s done I’m going to do the last

homepage right here okay so now we have these
three templates now I might change the name

at some point what you see here but it should
make sense to you what it is we’ve got the

main homepage and this will work and re-creates
here is the bluish homepage I showed you and

the pink orange homepage right here so now
that that’s done let’s go ahead and look at

the remainder of the options and then do a
little bit of set up before we start building

our page so go ahead and click on tools and
this is where there’s gonna be some troubleshooting

help here so if you run into some problems
you might want to click this re-generate CSS

I’ve never needed to do that before so you
should be fine sink library this is going

or re-sync it with their template library
that they have for their free templates it

does this automatically each day replace URL
is basically an option if you’re migrating

to a different domain name you can use this
tool to replace the URL and then system info

is actually very helpful if you are needing
support you might have to get this system

info page and send them all of this info so
you see right here you can just copy and pasted

this is gonna let them know the environment
that your web hosting account is on and all

these different variables so that they’ll
be able to better help you if you end up needing

help and if you have that pro version right
here you can click on license and just paste

your license key in there and then click on
the activate button if you don’t have the

Pro version and it will say go Pro or something
like that right here so don’t want to take

you inside of the Elementor page builder for
the homepage and there’s just a few steps

that I like to do in Elementor to set up some
global options so go ahead and click on pages

in the ring to go ahead and click on our homepage
right here it’s his home front page click

on that now by default when you want to use
a page builder you’re going to have to go

and set this option right here where it says
template and it’s his default template you’re

going to need to go to the drop-down and choose
full with the template this is essentially

going to unlock the particular page you’re
on for the page builder to work perfectly

ends let me actually show you what happens
with and without that so without that I want

to go ahead and click on this edit with Elementor
button and it’s going to take me right into

Elementor now you’re in a sea I’m stuck with
this sidebar and I’m not getting the full

width and I got this title right here and
so if I wanted to say me just add a section

right here in him and explain all this later
and then I click on section and I want to

give it a color I’m just doing this real quick
and I’m not expecting you to get this so I

just try to prove my point so there is this
background color this is not what were after

we want to get rid of all this space in the
sidebar and the title in the way we do that

is we choose that full with template so just
click on save and it’s going to save this

so this is how it looks now some to go and
I’m in a click on this ask and go back to

the dashboard to show you everything I know
I’m going fast but don’t worry this is in

the actual explanation of how to use the builder
so that’s how it looks without selecting this

and then when you do selected from default
to fullwidth you have to click on updates

and that will just take a second now I’m in
a click on edit with Elementor near to be

able to see the difference so now look at
that same section it’s moved up to the top

all that spacing is gone my sidebar is gone
the titles gone in its perfectly integrated

already and so that’s why you need to choose
for each page or can use Elementor on your

and want to choose that full with option right
there so it’s fully integrated and Elementor

will have full control over the area so okay
I want to just explain some things about Elementor

real quick and the interface and then will
get into building out that homepage so first

right here you have two options you have the
hamburger icons right here on the left and

then you have bike than the dial keypad right
here on the right so this right here is always

gonna take you to what you see now when I
click on this working I have some other options

right here which is very nice so we have this
area where we can choose global colors and

global funds in this going to make things
a lot easier if we just go ahead and choose

these now so global colors this will be certain
things were not you have to choose a color

and you can change globally in the same goes
for fonts so what I want to do is click on

global colors right now and it shows this
default color palette say we drag title in

here it’s gonna pull from these colors so
here let me give you an example so let me

get rid of this blue color because it’s going
to just drive me crazy okay McLaren so now

it’s it’s white someone to click on the dial
pad and I got all these elements that I can

just drag and drop in some a drag-and-drop
title and just like that you can see it has

this blue in your might be thinking where
the heck does it pull that blue from all this

is the global colors and if we set these up
front it’s going to make it building out pages

a lot easier and a lot more seamless so let
me go back and click on that hamburger icon

and then go back to global colors and you
can see it’s pulling from the primary colors

or member I made a video I talked about primary
colors and secondary colors and then I talked

about a pop color that’s it right there so
this is where working to choose the colors

that everything will look like by default
some to go ahead and copy those in right now

so for this primary color a minute click on
it and I wanted to be this color I just put

in my clipboard which is kind of a blackish
color you can just manually set one or if

you chose your colors you could do it but
you see I put that in in and immediately changed

it right there so that’s one of the colors
that I wanted to change in the next I wanted

to set this accent color that is the screen
I’m going to make it that color that I’m going

to use in making the homepage so these are
to be some global colors that show what’s

really neat about Elementor as it shows you
some of these really cool color palette so

you could essentially choose one of these
other color pallets if you wanted but this

is one of the things we always want to do
first so now I’m going to click on this green

apply button and that will be saved and then
I want to click on the hamburger icon again

and do something similar but for fonts this
time so we get to choose these global fonts

now anything you can override the font in
a minute be teaching you how to do that and

so but I wanted to show you how we can do
this globally so the fonts that I have selected

and I had that video I showed you find someone
click on primary headline by default etc.

bottle but I’m gonna do something different
is kind of that cursive looking font so all

you have to do is go to the drop-down and
choose the font you want you can start typing

it in and this is it right here shadows into
light soma go ahead and hit enter and there

it is it’s already applied to my template
globally and then for the wait time to leave

it at 600 this is the thickness the collapse
that and for my secondary font I’m in a go

ahead and leave that at rubato slab for my
body font them then and go ahead and leave

that for rubato 400 and for the accident I’m
to leave that for rubato as well so these

are essentially the diff or different fonts
that all the elements pretty much use and

you can set them globally right here to whatever
you want them to be so member I said you typically

want two or three fonts are can have a headline
found a body font and then you might want

1/3 sub headline font and you can see how
it’s all starting to come together or you

can put your fonts in and the thickness of
those fonts right here some go ahead and click

on apply and now that is saved so the only
other area of Elementor that that you’re gonna

want to put some custom settings in is this
color picker so for everything in Elementor

there is a color picker let me just show you
what I mean and there were going to come back

to this setting so if I click on the heading
it’s gonna start showing me the options right

here for the heading and colors are typically
not going to always be found where it says

style so my click on style and it’s his text
color right here and right now it’s pulling

it from the global color options that we just
said so that’s why this is clear but you can

override anything so I click on this it’s
gonna show me this bit of color here I can

take this dial and I can change it to whatever
I want but here’s a color picker and so you

have these eight color slots here now the
nice thing about Elementor is it allows you

to choose which colors you want in these eight
color slots years are not counseling having

to copy and paste color codes trying to get
things to match perfectly we can set this

once in the color picker setting and they’ll
be available to us right here so you can see

right now we have this light is green right
here let me get rid of this like that and

I’m in a go back into that little settings
panel, click on color picker and look you

see it’s that same green color in fact here
are those eight colored slot that you can

change to whatever you want so if I wanted
to change this color from that green to that

color that that I want to be using I can just
paste it in like that and now it’s changed

and I can go ahead and click on apply so now
let’s see what happens when I click on headings

on a click on it click on style in a minute
click on this to pull up the color palette

and there it is it’s not that great anymore
it’s that other color so this is a big timesaver

to go ahead and load in your colors in this
color picker option right here to just save

you time okay next we have revision history
and what this is is every time you click on

this save button it’s going to put an entry
in this revision history now I haven’t really

saved it so actually let me click on save
and see if it adds a second one so now it

added a second one so this was the first time
I saved it and then here was the second save

so I can click on any different prior saved
revision and it will just completely change

the content so I click on this is gonna change
it to exactly how the page looked at when

I clicked on save at that time if I click
on here it will go back to the save I just

made so this is actually very powerful and
very flexible way to try different ways of

doing things saving it and then being able
to quickly go back and forth and compare him

and not lose any of your work census revision
history which is a very powerful option so

let’s go back now if you click right here
it’s is Elementor settings it’s gonna take

you back to that settings panel in WordPress
that I just showed you this is nice if you

want to if you’re just testing a bunch of
things and you want to delete everything off

the page you can go ahead and click on this
so this is what happens you click on it and

oppose this option up to confirm you can just
click on delete and then everything you’ve

done on that page is erased and then you have
these options down here so you got your save

button right here we have this little folder
and when you click on it it’s gonna show you

the template library and give you an option
to save what you are doing right now and you

can even export it and use it for other things
or use it in other parts of your website when

you click on template library it essentially
pulls up this pop up and it shows you all

of the available templates now keep in mind
these ones that say Pro there are only accessible

to me because I have purchase the Pro package
and I can restore those if I wanted to but

here are all live the templates you can just
click on it click on insert or just click

on the little hourglass there to see a preview
of it now what’s also nice is right here it

says my templates look at this is in this
familiar these are those three page templates

that we already imported so I can go ahead
and click on any of these click on insert

in its can insert it into our page actually
let me do that now just to see what it’s going

to look like so there it is I clicked on insert
now the only thing that doesn’t come across

as our images so we didn’t get the image in
the background here we didn’t get the images

right here so just puts this image placeholder
we didn’t get the image right here of the

person standing and right here we didn’t get
the image of the two women that were together

just like that here’s our pricing table and
here’s our countdown timer but you saw how

powerful that was so what you would do is
you just restore your template and then for

each of these locations where there is an
image right here you would just click on its

and then right here you can choose whatever
image that you want to put in that location

and that’s how easy it is to restore any of
these templates from the template library

but working to build this from scratch anyway
and that’s how urinal learn how to really

use this page builder so we have this question
here and this is going to take you to a help

pages right here is really neat when you click
on it you can go into different responsive

modes you can see how the pages can look on
a tablet or on a mobile and you can tweak

some of the spacings for each of those so
that you can make sure that your webpages

pixel perfect for any device and then you
have this X here and when you click on this

it’s going to either go back into WordPress
or show you the page you’re working on so

now what I’m going to do is I’m going to erase
all this because working to build it from

scratch some to go ahead and click on delete
all content and click on the lead and that

is going to be all gone a minute click on
save and that’s pretty much as far as I’m

to take you in this video in the next video
organ to start building the page using all

of the various widgets and elements that are
available to us right here and I’m in a show

you exactly how to build this page it’s going
to be easy to be a little bit of a learning

curve but it’s good to be very rewarding and
in building it you can learn how to essentially

build anything that you could want to build
using Elementor I’m talking homepages landing

pages any page you can want you’re going to
have the knowledge and the skills on how to

build in this next video that’s coming up

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.

Join The Conversation

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

Stay Up To Date

Enter your name and email for the latest news, updates, and tutorials.