Already, so today we're going to
take a look at Elementor 3.0,
so this new update brings a lot of cool
new features to Elementor, which
I'm pretty excited to go over.
So a couple of the big
things, the Elementor 3.0
is bringing out the sort
of the new design system.
So the first thing here is the
new site settings like this.
Three elements that are really cool about
this update, the site settings, the
global colors and the global fonts.
So I've also just pulled up
Elementor on the GitHub.
So they are on to a
stable version of 3.0.4.
So we can just confirm that by looking at
the updated plugin, so I've
just got it on a staging site.
So they're at 3.0.4
for Elementor and Elementor Pro got 3.0.1.
Why it's important just to know what
version you are running is when
these big updates come out.
There are some problems
that come with them.
Let's go over to our pages and
let's start to see this in action.
I'm going to go blank page
and we'll just go edit with Elementor
so we can start to see
the new updates to start to see things.
What I'll do is I'll just
put in a random page.
What's really cool is the bringing more
power to the build up sobuild-up
as that loads in here.
If we go to a hamburger button on the top
left, that's where we get our site
settings and our theme builder now.
So, it's cool to see the theme builder
is something that we don't have to
go back into the dashboard to see.
We can now just go see our header's
our footer's
and single person in that sort of thing.
So the theme builder is cool that
we can access it right then.
What I
think is like the most powerful part of
this is in our new site settings area.
So they've really revamped
this this whole panel.
Now, the two things that I'm loving the
most is the global colours
and the global fonts.
The more I've been playing around with
this, the more I am just so thankful.
It's a two edged sword because this
is where I've had the most problems.
At the same time, I've had a lot of
glitchiness coming from these two so we
can do everything in if we
just go to Global Colours
we've got four
default colours in there and then we've
got all of these new global colours
that we can sort of change to whatever.
So we could have like a color palette, for
example, and we could have, you know,
color one, colour two, color three, et
cetera, et cetera, which is really cool.
All right.
So I'm I'm liking how this it took me a
little bit to get used to because I was I
like the old color picker,
but I'm appreciating how this works.
So let's just say I'm
happy with those colors.
I'll hit update
and then I'll just go
back to editing our page.
And like, I really enjoy how
quick it is, by the way.
Like, it's really nice.
So let's grab this.
So we've got this colour, this
greenish colour at the back.
So now we hit this globe icon, which
brings up our global icon colors and that
sort of icon there is notifying you of
it being global so you can look out for
that for colors and for typography.
So here we've got our colour, one and
colour, too, so we can just sort of
select our colour one like cool.
I'm happy with that.
So let's go ahead and just change a couple
of other areas, so I'm just going to make
this let's just go here the same colour.
I'm going to go on this guy.
Let's get the same colour one.
Let's keep our consistency with that
design group's style content color one.
What happens if I copy styling
will change picture and our great.
That's good.
So we've now just applied very quickly, by
the way, I took me a few seconds now new
colour out colour one
to all of our page, which is good red.
So, you know, maybe you
selected the wrong colour.
Maybe the colour palette has
changed since you designed.
And now instead of going back and changing
that all manually, we can just come in
here and just quickly tweak the colour
to something and it will
apply everywhere, that
that colour has been used.
Oh, and that's pretty good like
that in itself is a great update.
OK,
so I'm really like that.
Next is the global fonts.
So the global fonts works
in a very similar way.
We've got our full
default global fonts, but now
we can add our custom fonts.
OK, so maybe we just have an accent too,
or main headings like
we call it like that.
As you can see, I'm just
sort of making this up.
And we can sort of style
this heading however we want, so let's
just go for a font that I'm
looking at the moment, Poppins,
and we can say that we want it.
You know, we can specify the size, the
weight and everything just as normal.
Like we would, hit update and then we'll
go apply that main heading across our
site, just like we would
with our colours now.
So we go up to the style tab and then
under typography, we see
this new custom or global.
Here and it's a little UI thing, but I
love the fact that we can actually see
what the font looks like, which just makes
our life a lot easier if we
do have lots of different
custom fonts or sorry.
Yeah, custom fonts or just global
fonts like whatever to pick through.
So I'm going to go ahead and I'm going to
apply this main heading that I've just
created, which arguably
is not looking as nice.
So I'm happy with that.
Now, I do want to make some changes,
so just go back to global fonts.
I'll click in on the main heading, and
then I'll just adjust this
sizing and see that that will get applied
across all of the elements that
have got that global font.
So really cool.
Like, really,
this is exactly the sort of thing
that the Elementor really need.
And what's nice is it's very easy then
just to pull something
off that global font.
So for example, this is looking just a
little bit too big, so I'll just take it
off the global font and
just style it separately.
And that's it.
It keeps all of the same
styling except for what I've changed.
And if that was a mistake,
we can just quickly go back
to whatever.
So what's nice is global colours and
global fonts is easy to
work in to your workflow.
And as you would expect, your theme style
that we're used to from the previous
updates, you typography, buttons, images,
formfields, they're all still there.
We've got our site identity, which we can
now change like our name
and our description.
And even now logo, which I think is great,
we don't need to use
the appearance tab in WordPress,
which I sort of like,
and then brought over some of the settings
that were in the back end of Elementor.
So that brought it right into our site
settings, which I'm very grateful for.
I think we should do more and
more of this with Elementor.
I mean, we can add our custom CSS in there
and if we do hit additional settings, it
will take us back to the settings page
now, something just to be wary of.
You need to disable your
default colours and fonts, so
if your fame has any styling, make sure
you can disable them so that
Elementor takes priority.
I believe that I'm just using,
Hello, so there's no real
styling that comes with it.
But that is really elemental.
Three point art.
How are you using
elemental three point art?
What's been good for you?
Have you even tried it yet?
I've been trying it out a couple
of websites and it is really good.
I'm absolutely loving it.
I'm excited to see whether they take it.
So, I would love to hear what your
experiences are with 3.0 and Elementor.
And also, if you enjoyed this video, I
will leave a link to my
last video, it's How to set up a coming
soon page with Elementor,
which is really handy.
It's something that I have to do with all
of my client websites
so that somebody doesn't accidentally go
to the main site as I'm working on it.
So the same page is pretty cool.
I'll leave that in the description.
So if there's anything else I can help you
with, please just leave
a comment below and.
Yeah, I'll get back to you.
Have a good one!
