by Adam Preiser updated August 21, 2017

5 Ways To Use Elementor Like A Pro To Build Websites Lightning Fast


Share on facebook
Share on twitter
Share on linkedin

These 5 strategies will enable you to build faster and have more consistent designs using Elementor the WordPress page builder.

Whenever you are using a new tool, it can get a little overwhelming.

You ask your self, am I using this the best way.

I understand that, and that's why I created this video to share with you 5 tips that you may not have thought of to use Elementor more efficiently and effectively.

Video Transcript

5 Ways To Use Elementor Like A Pro To Build Websites Lightning Fast

In this video to share with you five tips
to help you build Elementor base websites

faster and have the designs be more consistent
hi my name is Adam from were

I make WordPress videos for non-techies if
you enjoy the content in this video consider

clicking on the subscribe button and if you
like video notifications click on the little

bell off to the right and the YouTube will
send you an email when I upload a new video

this video is all about Elementor and some
of the tricks and that I have compiled as

I have used it to have faster build the website
designs faster and have them be more consistent

so let’s just top right into it number one
use hotkeys a lot of people might not be aware

but Elementor has hotkeys these are keyboard
shortcuts that you could tap to do some things

faster like save a page or to preview a page
or two undo that would undo the last thing

that you did or redo these are all shortcuts
that Elementor gives you you can just enable

them on your keyboard so a perfect example
for me a lot of times I want to preview my

design so all I have to do is hit the command
button and P command P and it’s going to put

it in preview mode if you’re using a PC it
would be control P so this is what it’s gonna

look like there it is I just tapped it and
there I just tapped it again and it on did

if I want to save this where I’m at I can
just hit command S and it’s gonna save and

these are all with these hotkeys or keyboard
shortcuts to number two is to load your colors

into the color palette of Elementor it’s very
simple to do this click on the hamburger icon

here in the top left and go right here to
where it is color picker now these are the

default colors that come in the color picker
but you can click on any of them and change

it to a color that you’re going to consistently
use on your website so far I’m not never in

his this blue I might as well click on it
and put my colorcode in for the color that

I am going to use and say this is what it
was and I could just go like that and now

I have that new color so when I apply this
now when I click on any element in Elementor

where I have an option to choose a color it’s
going to show me that color I just entered

as an option so I five clicked on text and
I went to style and right here chose text

color if I click here you can see there is
that new color that I added to the color picker

and Elementor gives you eight different color
slots that you could put your colors in that

you’re going to use is going to be a huge
speed boost and is also going to increase

the consistency of the colors that you’re
using in your design and you just toss in

your color codes and you are off to the races
my third tip is a tip that I use all the time

and that is creating a safe save section in
Elementor with design assets that you’re going

to use over and over again let me demonstrate
this for you so if I go to Elementor and I

go to my library I would create a new library
item by clicking add new in nominating this

design assets once I’ve done that a minute
click on publish and then I’m in a click edit

with Elementor it’s going to pop me into Elementor
first thing I like to do is put this in Canvas

mode so that will remove the header and the
footer of the page so I have a complete blank

slate to do that click on that hamburger icon
again go to page settings and then right here

it says template change it from people default
to Elementor canvas and now we just have the

canvas here so now what I like to do is I
like to put headings buttons everything styled

the way I want them so when I go to create
a new page and Elementor were I’m going to

use some headings and use the buttons and
whatever design elements that I throw here

for my design asset page I will just restore
this section on that page and then reuse those

elements let me demonstrate it so say I of
course somebody use a button on multiple pages

so I would just drag and drop a button in
there and I would click on that button and

then I would start styling it’s Jos’e9 wanted
to center edits and I wanted to change some

of the colors so for the background color
let’s use that new color that I just add to

the color picker that’s pretty cool and say
this is how I want my buttons to look now

when I noticed a lot of the time that I spent
in designing a page is in all those little

settings on an element that will make it exactly
how I wanted the problem comes in if I want

to go on a different page and I want to create
that element again inputting all those little

settings in and making sure they all match
with the prior element that I created and

so this is where this design consistency comes
in so there I have that and so say I also

want to throw in a headline so I have a consistent
headline instead of this I would probably

center edits and may be changed to some various
things like maybe be add some text that shadow

to it an accident looks ugly but just say
I want to do that so I would build up this

design asset library let me go ahead and click
on save okay obviously I have a whole heck

of a lot more than these two but that’s okay
him to get out of here and I want to go back

to my WordPress dashboard so now say I am
creating a new page on my website I would

just go ahead and click add new I’ll give
this a name okay services page I’ll go ahead

and click on publish the number to click on
edit with Elementor it’s gonna pop up so instead

of starting with a complaint a complete blank
slate instead what I want to do is I’m going

to click on the little folder here or you
can click on add template go ahead and click

on add template I’ll click on my templates
and we can see design assets so now I can

go ahead click on insert and it’s going to
put those in there so I can start building

my page with all of these design assets already
created and I would probably just maybe want

to change the text of the button and I would
probably just change the text of the headline

as well and I’ve saved so much time from having
to re-create the style of these elements on

these pages now tip number four is an even
better way to do this if you have Elementor

Pro so far everything I’ve shown you is in
the free version of Elementor which I think

they’re incredibly generous to give the library
feature in the free version of Elementor so

I got Elementor pro in here let me just go
ahead and activate it and now what I’m in

a dues I want to go back into a page I’ll
go back into that services page and click

on edit with Elementor so now I have the Pro
version enabled and it gives me some speed

features these features are to make things
go a lot quicker and the main thing is a having

global elements and let me show you what that
is so say here is my button and I want to

now save this as a global button I style that
exactly how I wanted so all you need to do

is go off to the right where we have this
little cursor here and there’s going to be

a save icon there that says save widget this
wasn’t there unless you had the Pro version

on and enabled so now I will give this a name
and I’ll call it my default button I’ll go

ahead and click on save and now I have saved
the global widget so now when I go to any

page in Elementor I have this new option here
that says global and I can see I have my default

button that it saved element that is already
been designed and styled exactly how I wanted

I have it right there is a global widget and
so all I need to do on any page I can drag

and drop it in there it is now here’s the
thing this is going to be linked it’s it’s

a now a global widget which means if I change
it here it’s going to change here this is

a huge timesaver but there might be times
where he might want to change the link and

keep the style you might want to change the
text but keep the style all you have to do

is click on this on the link option like this
and then confirm by clicking on link and now

they will not be linked together but you saw
was just a faster and easier way than this

design asset way to be able to save time without
having to restyle everything all over again

this is a huge huge timesaver last tip is
a more of an advanced tip because it involves

custom CSS know whether you’re using the free
version of the Pro version of Elementor this

feature is in all of them in every module
every element there’s some debate whether

they should be called modules elements or
widgets I use all three terms interchangeably

so in every single one when you click on it
you go to the settings and click on the advanced

tab and scroll down there’s an option to assign
a CSS class so essentially CSS is how you

style things with websites so you could write
some custom CSS for how you want this button

to be styled and you can save that in one
location in your teams CSS to file your style.CSS

file and then come in here and just add your
CSS class to it then what happens is it will

inherit the style that you defined in that
CSS that you wrote what’s really nice about

this is if you can have say 50 buttons on
your website you only need to go to that one

little bit of custom CSS maker change they
are in it automatically will change on all

of your buttons that is really the biggest
Pro tip but it’s a lot more advanced because

number one you have to write custom CSS number
two you have to know where to put it but if

you can write it you probably know where to
put it and then all you need to do on these

different widgets that you’re using an Elementor
there I go using a different term all you

have to do is add the CSS class in there and
it’s going to inherit that style that you

defined in one location ultimately that’s
the best and smartest way to style some things

but I know for me I try to use as little custom
code as possible and that’s my preference

and that’s one of the benefits of Elementor
that’s why this is the last tip and it’s the

advanced tip if you enjoyed these tips and
want to learn more about Elementor I have

a training course called Elementor essentials
it’s right here on my website because the

course is $150 however if you don’t own Elementor
Pro and were thinking of purchasing it if

you purchase it through the link in this video
and head on over there I will give you access

to this element or essentials course for free
I got lesson after lesson after lesson I had

to re-update everything after Elementor 1.5
was released because the interface change

so it’s all current and ready for you and
we happy to have you in the course if you

don’t have Elementor Pro already or you can
purchase a course is only hundred and $49

KI want to hear what tips you have for Elementor
to speed up your workflow if you have tips

that I didn’t include in this video and would
like to share I would really appreciate if

you leave that information a comment down
below hey I gotta tell you people read these

comments and I really appreciate it when you
take the time to add a comment with some input

into this video and I want to hear your speed
tips hate thank you for watching this video

and I’ll see you in the next one.

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 *

  1. Hey

    I know this video is nearly 2 years old but is your offer of free access to your course if buying Elementor Pro through your aff’ link still on?

  2. Hi Adam,

    I have been an Avada user for many years and have built dozens of sites with it for my clients, but I am very impressed with the ease of use of a front end builder like Elementor instead of the backend Fusion Builder. Also my Avada sites get such low speeds scores 🙁

    However, I love the Avada Theme Options where I just setup/design my buttons, headings,… once and every time I insert them, they are already styled.

    I have seen your use of the Elementor Library which is cool, but you’ll have to insert a whole template on each page first in order to copy them to other parts of that page. That seems a bit messy.

    The Global element looked nice a first, but having to unlink them every time seems time consuming.

    Are css classes then the best solution?

    If I insert 5 headings on 6 pages, I don’t want to select the font-family, font-size, line-height,… 30 times.

    Looking forward to your view on this.

    1. Elementor is currently working on extensive global options, so it’s going to get a whole lot easier to set global styles here very soon.

  3. Hi Adam. I recently had a custom wordpress theme created to match a Weebly theme I was transferring from. The page builder the dev used is a nightmare. So I’m stuck scrapping that and rebuilding myself with Elementor. The issue is, I’m hearing impaired so I can’t watch most videos. Is there a specific CSS that needs to be added to change the ‘body’ style to an overlay color? Example- … The background is a photo, but then the lighter overlay is for the content, and I can’t figure out how to do it myself.

  4. Adam, what is the most useful theme to build an ebook selling site. I want to use easy digital dowloads or woo commerce. Which is easier? I also want to use elementor pro . I also want to display the books in a table like view, with like 10 books on each page. What is your suggestion?

  5. Hi Adam, i am a web developer and i am looking to begin using elementor for my clients websites for the ease of them being able to manage the website content.

    My question for you is will elementor be an OK option for more dynamic websites like a real estate site that uses IDX/MLS data or for a product comparison site that would require us to pull in CSV data for the comparison tables. Didnt know if you have any examples of a more dynamic site that uses elementor so we can get an idea.

    Thank you!

    1. Well typically if you are going to need IDX integration, you would use a plugin that controls everything, the entire look of those particular pages. So you would be using Elementor for your content pages, and maybe blog posts, but you would need some plugin to facilitate the IDX and displaying the information.

  6. I have watched a half dozen of your videos and am leaning to get Elementor Pro from you, but I don’t understand the multiple site purchase option. I just want a blog. I already have an (old) veterans website built with Xara, and can’t imagine resurrecting it. It and my blog are hosted by GoDaddy. (Does any of that help?) My blog will cover veteran stuff so I won’t need both. Should I just buy one site? Why do you say most/average person has 3?

    1. Some people have more than 1 website. So the lowest package is for 1 website. Sounds like that is all you need.

  7. oh I made it sound like I have the pro version and I do not… maybe some day:) blessings

  8. thank you Adam, your videos are great and I learn so much. Do you think elementor will customize the ccs class to be a drag and drop some day…? I am not a coder and do you teach about css class..? thank you again

      1. Do you have any resources on how to build and add Custom CSS in elementor? I don’t know much of anything about CSS so it would need to be a “for Dummies” kind of content.

Stay Up To Date

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