Elementor – WordPress Page Builder Tutorial (2018)

Updated: June 1, 2018
Filed Under:

 
elementor_logo
Cost

Free to $199

WordPress page builders are all the rage and Elementor is by far leading the way in innovation.

If you are wanting to get started using Elementor, then this tutorial is perfect for you. It covers all the Elementor settings and how to build pages using the WordPress page builder.

Elementor


In this WordPress page builder tutorial I’m
in a show you how to get started using Elementor

so let’s jump right on it so here I am logged
into WordPress and I do not have Elementor

installed just yet to get Elementor super
easy just go to plug-ins click on add new

and then you could do a simple search for
Elementor Elementor will pull right up just

click on install now now that it’s installed
go ahead and click on activate to activate

Elementor on your website now before we jump
into Elementor I just want you to know that

Elementor is compatible with every WordPress
theme however there are certain WordPress

themes that have better specific integration
for some to go to appearance and then teams

and share with you four different themes that
are specifically made to accommodate Elementor

however whichever WordPress theme you are
using I’m sure Elementor will work fine but

here are the top four themes for Elementor
there’s the Astra Theme the GeneratePress

theme OceanWP and page builder framework theme
and those are in alphabetical order to go

ahead and activate the first one which is
Astra now that aster is activated let’s go

ahead and take a look at the settings panel
for Elementor by clicking on Elementor in

the menu here when you first click into Elementor
it takes you straight to the template area

one of the power features of Elementor is
that you can save things so that you can reuse

them you can save entire pages and you can
save sections of pages for easy reuse and

all of the different pages on your website
for the Elementor settings will go ahead and

click on a settings right here this is going
to provide some settings with how Elementor

will work on your website next we have a role
manager this is very good if you are making

websites for people or you’re going to have
people logging into your website and you want

to control what they can and cannot do with
Elementor next we have the tools panel and

this is where you have some options here one
of them being version control if you ever

wanted to Beta test the future version of
Elementor this is where you would enable it

or if you wanted to roll back to a prior version
this is how you would do it and we also have

maintenance mode this is a very nice feature
that allows you to use Elementor to create

a under construction or a coming soon page
that will show when someone visit your website

if it’s not ready just yet lastly we have
a helpful link right here that says knowledge

base this will take you over to Elementor’s
website for any how-to articles that they

might have their that interest you so now
that we’ve gone through the settings in the

back end of Elementor let’s go ahead and create
our first page using Elementor I’m in a go

to pages click on add new and I will name
this Elementor next out click on publish to

publish this page and then I’ll click on the
button here that is says edit with Elementor

this will open up Elementor and we now are
in the Elementor interface and we can begin

assembling the content on our page but before
we do that I want to show you a couple helpful

settings in the backend of Elementor in the
basic Elementor interface right here we have

a hamburger icon and we click on this it will
take us to some of the specific Elementor

settings right now were looking at the view
that shows us all of the useful modules that

we can use when assembling our page if we
ever want to get back to this we can click

on the dial pad icon right here down on this
bottom row we have several other icons that

will go over in a moment and we also on some
areas we have tabs here so you see words as

elements and then we have global and with
a growing list of useful widgets there is

a search option here to quickly get to the
widget that you want to use on your page and

let’s not forget we can make this panel completely
disappear when were previewing our page by

clicking right here and we get a full preview
of what the page looks like so now let’s take

a look at some of those settings by clicking
on the hamburger icon in the top left so first

is it default colors and this is where we
can choose the default colors that Elementor

modules will use when you are starting to
drag and drop those on your page so we have

primary secondary text and accent and you
can set these colors to whatever you want

by clicking on it and choosing the color that
you want or putting in a color code also there

are several different color palettes here
that you can use if you prefer them to go

back into the settings panel by clicking on
the hamburger icon you can also set default

fonts so these would be your headline font
your secondary headline font body Texan accent

text you can click on any of these and set
what you want those fonts and the font wait

to be I’ll go back to settings and we also
have an option to change the color picker

colors so everything you use in Elementor
when you’re selecting a color there’s a color

picker on the bottom with eight color slots
this is where you would set what you want

those color slots to be and will go back to
the Elementor settings next we have this global

settings option right here where we can set
some default to generic fonts for our Elementor

pages also the width of the content area of
our page and also some various spacing items

let’s go back into our settings if you click
right here it’s gonna take you back into the

WordPress dashboard and when you are done
in a page you can click this button here that’s

is exit to dashboard so I’ll get back to the
modules by clicking on the dial pad right

here now let’s go over some of our settings
that we have down here on the bottom first

we have the settings and when you click on
this these are mostly BPH settings so you

saw a moment ago how I created a page named
it Elementor what this is where you could

change that if you wanted and you saw that
I publish this page this is where you can

change it to draft or something other you
can set a featured image for this a piece

of content and if you wanted to start your
page with a fresh slate when you click on

advanced you can click this delete button
here and it will delete out all of the content

on this page next you can click on this style
icon right here in this where you could set

a background color or a background gradient
color you can manipulate some of the padding

and spacing and also for Pro users you can
add custom CSS let’s go ahead and get back

to our module list next we have this icon
here which is responsive mode one of the power

features of Elementor is you can see exactly
how your pages going to look like on a desktop

on a tablet or on a mobile device and you
can make settings to the way it looks so you

can get your designs pixel perfect on every
device next we have this history option right

here where every change you make to your page
will be recorded so that you can easily go

back in time also if you want to go back to
a previous save there’s a revisions tab right

here or you can go back in time to any prior
time that you clicked on the save button you

can go here and go right back in time next
we have this I write here which is to preview

the page that you are building so when you
click on this your pages can open up in a

new tab outside of the Elementor interface
and give you a chance to view the page to

see how it’s going to look to your website
visitors and lastly we have this update or

save a button right here and it will turn
green whenever there is some content that

needs to be saved so now that we’ve gone over
those basics let’s start building a page out

so when you first jump into Elementor in your
pages blanked you have these two options one

of them is to add a new section and the next
one is to add a new template now the way that

every webpage that you go to in visit there
all structured the same it’s simply a series

of sections and a section will have columns
in it and those columns will have elements

like text or images or videos that is all
any webpage actually is in a section you can

set different background types it could be
a background color a background gradient background

image or a background video and we can do
all of those things very easily with Elementor

so first you would click on add new section
and you can choose you want that section to

just be one block or you wanted to be two
columns or three columns or any of these various

column layouts now don’t worry you can easily
adjust the size or the width of each of the

columns in your sections so first I’m going
to choose this one right here so now when

I hover my mouse here you can see this blue
bar and that will take me to the settings

for this particular section so I can click
right here where it says edit section and

then I have all of my section settings so
remember moment ago I said in your section

you can have colors and images and videos
those are to be in these style options right

here and so for background type I can click
right here it says classic and then right

here I can choose a color and here are those
color picker colors that I talked about a

moment ago so if I wanted this color to be
the background color simply clicking on that

color will change the background to that color
you have the option for gradients you also

have the option for background videos now
each of the modules sections and columns are

typically going to have these three tabs appear
at the top layout or if you’re editing a module

it will say contents style and advanced so
now that we have our section set up let’s

go ahead and put two columns in it so my click
on the dial pad and here’s a columns option

right here I can drag and drop it right there
and now I have these two columns but they

don’t have anything in it so many click on
the dial pad again and let’s put some text

in this column right here I’ll let go in there
is our text and let’s go ahead and put a video

in the other column so I will just go to the
video element right here drag and drop it

right there so now what I want to do first
is let’s go ahead and put our link to our

video summit click on the video here and then
right here we have our content options and

replace that URL with the different one that
might be a little more appropriate for this

video and it’s my Elementor review video we
have some options here for the video if I

wanted it to autoplay if I wanted to have
the suggested videos just various settings

that we have specific to the video they’re
all right there now one of the nicest features

of Elementor’s most the areas that have text
it has a feature called in-line text editing

and what that means is I can just click and
I can start editing my text visually now you

always have this option here in the settings
panel to start editing your text as well so

go ahead and put a headline in here okay we
have a nice headline there and I can choose

my alignment right here some of the properties
of the text right here let’s go ahead and

change the color of the font so I can go ahead
and click in their highlighted and then we

have these options here in this let me put
bold or underline or italicize this but what

I want to do is change the colors on the click
on style and then here’s my option for the

text color to go ahead and choose this a white
because that just works better for the background

I hope you’re starting to see how easy it
is to build a page on your WordPress website

using Elementor so next let’s take a look
at some of their templates that come for free

with Elementor that was this option right
here that says add template now when you click

on this it’s going to pull up the template
library I want to draw your attention to words

as blocks pages in my templates so blocks
are these sections but they’re predesigned

and you can easily just click on any of the
predesigned sections that you want now they

are organized by categories and you have all
these options here to choose from you can

even put a heart next to the ones that you
like and favorite them there is a wide variety

of blocks for all kinds of different purposes
right here adding a block to your website

is very simple you just hover over it in they’ll
be an insert option click on that and it will

download and be inserted right into your design
building websites is never been this easy

let’s quickly take a look at some of the page
templates that were available click on add

template to pull that up and I will click
on pages right here and we can see a wide

variety of page templates now any of these
thumbnail images that have a little Pro badge

in the top right those are for people that
have Elementor Pro which is an add-on to Elementor

to give it additional modules and features
that help you take your web design even further

and for any of these you can simply find the
template that you want and then click on insert

in it will download and it will insert this
into your page and there you have it it went

ahead and inserted that design right here
into my page now before we go I want to show

you how to save section so that you can reuse
them later so if you notice I’m hovered over

a section we have this blue bar here at the
top these are section settings panels there’s

going to be this little floppy disk icon and
when you click on that we get the option here

to name this section were about to save I
named it my first save section and then we

can click on save in it has now saved this
section to the library so that I can use this

over and over again on any page that I create
using Elementor and you can see it took a

straight here to my templates so now whenever
you see the option here to add a template

and you click on it and you click on my templates
right there you’re gonna see your various

saved sections right there simply click on
insert right here and that will be inserted

into your page let’s click on the X here to
leave that menu now I want to show you how

would you add content in between this section
in this section whenever you hover over a

section and you have your section options
there’s this little plus when you click on

that it will reveal the add new section and
add template so that’s how you can later on

add content in between existing sections you
can also move these sections around by a hovering

over to the leftmost icon clicking holding
your mouse and then dragging and then dropping

that section wherever you’d like to reposition
it on your page so I’m in a go up to the top

and remove these two sections that I created
I’m did click on the X right there click on

the X right there and they are now removed
I’m in a go ahead and click on the update

button right here and let’s go ahead and preview
this page I’m in a click on the preview changes

icon right there it’s going to open up into
a new tab and you can see were already well

on our way to having a beautifully designed
websites so that is the full beginner’s guide

to using Elementor the WordPress a page builder
I’m going to have a link in the video description

box to a playlist of tutorials that I have
created that are here on YouTube covering

Elementor and you can work your way through
those if you want to advance in further your

training and understanding of Elementor so
that you can build beautiful websites for

yourself also if you’re new here I should
have in and introduce myself in the beginning

my name is Adam and I’m from WPCrafter.com
where I make WordPress tutorials for non-techies

I try to make this stuff makes sense I hope
you’d consider clicking on that subscribe

button if you want more tutorials like this
there’s also a little bell when you click

on that you two will let you know when I have
a new tutorial video if you found any value

in this video I just want to ask you to give
it a thumbs up and if you have any questions

I’m more than happy to answer them for you
in the comments section down below I want

to thank you for spending this time with me
thank you for watching and I’ll see you in

the next Elementor tutorial video

Adam @ WPCrafter

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

LiveAgent Lifetime - $59

Bring all your customer support channels under one roof with LiveAgent

linkcheeta-review

LINKCheetah Lifetime - $49

Monitor all of your backlinks from one dashboard with LINKCheetah

website-hosting-discount

InMotion Hosting

50% Discount Offer

free-course-offer

Free Course Offer

WordPress Starter Course

  • Kevin Grover says:

    Hi, I am wondering why my default header template comes with the hamburger menu icon that I cannot get rid of in the top right of my screen, it is making it impossible for me to setup my menus in the top header, Please help me get rid of this hamburger !

    Thank You

    Kevin Grover

  • Andrew Lian says:

    Follow up to my earlier message. I think I solved it. I used a negative margin setting on the section. I thought I might report this. Sorry for any additional work for you. I have to say that I love your work and have started following it, especially the LifterLMS and related stuff. Thank you Adam.

  • Andrew Lian says:

    I am not sure if you can help but I need a bit of help. I am using Elementor free version. I would like to move the first section on the front page higher up the page but am unable to do so (cannot find the right settings). D you have any advice?

    Thanks so much
    Andrew

  • Tony says:

    Hello Adam, amazing tutorial I follow all your youtube videos. I have a question; your website i notice how your top menu and main menu join when i view it on mobile, do you minding telling us if that can be done with elementor custom template header.

  • Gregg says:

    Firstly WP Crafter is superb. I agree that Elementor Free & Pro are very good especially for making web pages mobile responsive. However one exception is – the Accordion Widget. This VERY VITAL ‘piece of equipment’ for any website is utterly useless. #1 : The first item is always open by default on landing which is stupid. The idea of an Accordion is to hide text so the web page loads faster. This problem is mentioned time after time on forums & reviews but Elementor won’t resolve it. [I have rectified this with complicated javascript which shouldn’t be necessary if Elementor is supposed to be the ‘bees-knees’.] #2 : Even worse is that with long item articles when a visitor finishes reading say Accordion Item 1 & clicks on Accordion Item 2, Item 2 opens at the end so the reader has to scroll back to the top to start. This is barmy, like landing on a web page & it opens at the bottom so you would have to scroll back up. Since the Accordion is available in the free version check it out first to see if its ‘limitations’ fit with your ‘accordion plan’. If yes then Elementor Free & Pro are absolutely brilliant.

  • Vitaliy says:

    Hey Adam,

    What plugin do you use to make YouTube sticky videos?

  • >