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.
