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, thatthat 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!
