In this video, I'm going to explain the
basics of Elementor. And I'm going to show
you how it works inside of WordPress. It's important to
understand how Elementor, your theme, and WordPress works together. Otherwise, you're going
to spend a lot of time trying to figure out
it all by yourself like I did. So, let's get started. What do we need
to understand? The difference between
Elementor for free and Elementor Pro. Why you need a theme and what WordPress does. To simplify it, a website is nothing
more than a few pages that are connected
with each other. A page consists of a menu with a logo and
some menu items, the content of the page, and the footer. The menu and footer
appear on all pages and the content
within those pages is different on all pages. So, to edit these pages, you will need to go to the
backend of WordPress. WordPress is the interface
where all of your pages are, your plugins, your theme,
and your settings, which you can only
see when you log in. So, back in the days, you would download a theme
somewhere on the internet, which would give you
a lot of options to edit your pages, your
menu, and your footer. For every page, you would go to a
specific edit page where you could play around with the settings
of that page. Then you would save it and check if your changes
worked out on the live page. This meant that you had
to go back and forth all the time to see if it worked
out in the way you wanted. Also, all of the themes
had different options, but no theme had
all the options. So, often times, you would stumble upon
limitations of that theme, and you would
need custom code to get the page
that you want. This was how Elementor
worked for years. But then, something
new hit the market, the page builders
like Elementor. With a page builder, you
can skip the edit page and go straight
to the live page. You will get a sidebar
with different options and you can drag and
drop different elements on the page. This means that you
don't need to use the difficult edit
page anymore. And build up your
pages super-fast with an experience that's
similar to a design tool. The only reason you will
still need your theme is to run Elementor, because Elementor cannot
run without a theme. And you will need your theme to edit your menu
and your footer. So, let's build
our first page. So, here I am on the free
version of Elementor on a blank new page and I can just
drag the elements out of Elementor on my website. So, for example, I can
just drag a video on a canvas and then, I can place a YouTube link in here and I just have a
video on my website. Or for example, if I click here, I can add a title super easy and I can type
the title here. This is a title. I can drag a button and make it link to a
website that I want. Things like an image gallery, a progress bar, or for example,
a testimonial, where you can change
the photo, the text, and everything about it. And then, if I just
click publish, the website is saved
and this page is live. And if you have
no inspiration for what to put on your page, they have these templates. And these are fully
designed templates that you can click on to
get some inspiration. And what's even better is
that you can insert them. So, if you have a template that's similar to the
website you want to create, you just click on insert. And then, this whole page
is inserted into your page and then, you can
change that page. So, let's just try
that for now. Let's insert this page. Now, I need to zoom
out a little bit because my screen
is too small. But now, this whole page is inserted into my page and I can just change
the text in here. So, for example,
featured courses and if I then click update, this page is also live. So, this is super cool. But for people who want to make their own design, and don't want to rely on a
design from somebody else. They also have
something great and that's called blocks. So, that's what
you find here. And with this blocks you can build up a
page really fast because these are the blocks, the sections on every page. So, let's say you want to
build your own portfolio. So, you've made
a little sketch just on paper with
the first section and you want a big video
in the background here, you want some text then, you want your
services section, and you want three
parts here. And then, you maybe
want an image gallery for your work. And then, maybe you want
some contact information with a map. So, let's say this is
what you want to build. And this is where the
categories come in. So, they already have the most common categories
here in the block. So, if you click on hero, that's like the upper
section of your website. You can already insert something like we've
sketched on paper. For example, let me zoom out,
something like this. And then you can replace
this image background with a video. So, now, if you want to
add our services block we just go to services because they also
have a services tab. And then, you
will be like oh, this section looks
like what I want. So, you insert that. And then, you have
your services section. Maybe you just want one row. So, you delete this one, super easy. Now, we're going to add our portfolio section. They also have a
portfolio section. So, for example, check out my work. Something like this. Boom! You have your portfolio. Now, at last we want
a contact place. So, something like this, which I've sketched on paper. And there you have it, there's your contact
section, all right. So, this is, this
is super cool. Now, you have all those
blocks on top of each other. But now, of course, you
want to change the design to your fonts and
your colors. So, let's just
say for example, we want to change this title. So, we click on the title and
then there's the style tab, and within the
style tab we can super easy change the color, for example, right. Or we can change
the font size because we think
it's too big. We can even change
the font itself. So, I'll make it
something like this. Or the font that I use. And now, this looks already a little bit more unique. But now, I have
my other titles. And they've made
it really easy, this also is so cool. They have copy and paste. So, if you click, right click on the title, you click copy, you go up, you go to another title. And you click, right click, and you click paste style, is copying the style. So, that makes
it really fast and really easy to
change the whole page in like, 10 seconds, right. So, if you paste this style, now you see it's
middle aligned because this text is
also middle aligned. So, if it's left aligned
you can click here and then, you just
click on alignment and then it's left. Super easy, super fast, and if you click
save it's live. Now, we have just
designed a simple page that you can save
and it's live. This works great for
simple websites that don't change. But often times, a website is more than
just a few static pages. Most websites have sections
that change a lot. For example, a blog
with blog posts. Or a web-shop with product
pages and search results. If you have just
Elementor for free you would still need a
theme to edit those pages, with of course
the limitations. So, if you also
want to design those dynamic pages
on your website, you will need Elementor Pro. Also, with Elementor Pro you can design your
own menu and footer. So, as you can see here you can design the
header, the footer, your blog items. What's also a nice benefit
about Elementor Pro is that they have a lot
more templates, right. Because as you can see, a lot of those blocks
are only available when you buy Pro. So, for example,
on these pages, you will see this
first five are free, but then, a lot of them
have this Pro icon. So, if you want all the
templates that they provide you would also need Pro. Also, they will give you a
lot more widget, right. Because this is
pretty limited. It's already super nice, which you can do with
the free version. But for example, I'm here on a website where
Elementor Pro is installed. You would have this
new section, right. So, you could add sliders, you could add an extra
navigation menu, you can insert a form, your own contact form. And most importantly, you can insert your blog post and design them yourself. And also, when you're
designing bigger websites, you will have a
lot of elements that are the same
on every page. And if you only have
the free version and something changes, you would need to change
every page manually. And that's not a really
nice experience. So, that's why
in Pro they have this thing called template. So, if you think like,
okay, this part I'm going to use on all the pages on my website. You can click on it and click on save
as a template. And then, if you change something
inside of the template it will change on all
the pages, right. So, if you're building
bigger websites you would want that
template feature, trust me. And what's also really great
about the Pro version is that they have
a role manager. And role manager
allows you to limit what the client can do. So, if you're working
for a client and you want them to
edit the text only, but not mess up your design, they have a roll manager. So, for example, you add
a user, a vapor user and you give them their own
email and their own login. You can say they can
only edit the content. And then they can only edit
the text and the images. And if you give them you know, all access, they can just mess up
your whole website and you need to start over. So, that's also a
really nice feature if you're working
with clients. So, if you want
to get started the download link
for Elementor free is in the description. I've also put the link
for Elementor Pro and there's also a
recommendation for hosting if you don't have
hosting yet. I will make a video very soon on how to install Elementor and WordPress on
your hosting. So, if you don't
know how to do that you should wait
for that video. But chances are the
videos is already live when you're watching this.
So, check the description. All right, thanks so much and see you next week.
