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
