Elementor – WordPress Page Builder Tutorial (2018)

By | January 23, 2020

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

Leave a Reply

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