The Gutenberg block editor has been with us for a while, but WordPress 5.9 introduced Full Site Editing with Gutenberg. That means you can now edit the header and footer areas of your site (theme permitting) as well as the contents of your posts and pages. That is huge and means that Gutenberg is starting to compete with the most popular page builder and site design tool, Elementor.
So what is Elementor?
Elementor is a plugin that can be used with any theme, and there are two versions. The free version is a page builder where you only have control over the post and page content (just like Gutenberg before WordPress 5.9). The paid version of Elementor includes the page builder, but also adds the ability to design your own theme, kind of like the Full Site editor in Gutenberg 5.9x.
So what are the pros and cons of Elementor? Let's start with the cons.
While the free version is an amazing page builder and far better than Gutenberg, IMO, to get access to the theme builder, you need to buy the pro version and it's not cheap. If you just want a page builder, it is a great choice. So why would anyone buy the full version of Elementor now that Gutenberg can do full site editing?
There are a few reasons.
Firstly, Elementor is a seasoned, feature-rich product that has grown and developed over the years into an amazing tool. It has great support and a huge user-base. It gives you a much greater level of control over the design of your posts, pages and site compared to the Gutenberg Full Site editor. There are also a lot of developers creating plugins for the free and paid versions of Elementor to extend it even more. If you want to add some fancy design element to your site, Elementor can do it.
I would say that for a web designer, Elementor is a far better, more flexible product. However, if you just want to make a few tweaks here and there, Gutenberg is probably going to be all you need.
There is one thing you need to know if you are going the Gutenberg Full Site editing route. To use the Full Site Editor (FSE), you need to be using a FSE-enabled theme. If you have an established site using any theme released before 2022, chances are it won't be enabled for FSE, so Gutenberg will only behave as a page builder. At the time or writing this, the WordPress theme repository only has 59 themes that work with Full Site Editing. With that in mind, if you have an existing site using a theme you are happy with, chances are the Gutenberg full site editing features won't be available to you. If you want to do a complete redisgn of the site, then you need to switch to a FSE-enabled theme and start your design from scratch (you won't lose the content on your site, just the existing layout).
So what about Elementor? The paid version of Elementor would make updating your theme design easier, and you could do it in your own time without your site ever looking a mess. Your existing theme controls all aspect of your site design and layout, including fonts and colours. Elementor can respect all of that, until you decide you want to change something, and you can then let Elementor take of that as well.
So how would you update a site to include full site editing, with Gutenberg or Elementor?
Let's look at Gutenberg first.
With Gutenberg, you'd need to switch your theme to a FSE-enabled theme like Twenty Twenty Two. When you do that, your site will lose all of it's current design. You'd need to go in and create templates for the header, the footer, posts, pages, archive pages, search page, etc. You'd be able to design all aspects of your site but until you complete all of these templates, your site will look a mess.
What about Elementor?
The first step is to install the Elementor plugin and then the Pro update. At this point, your site will look exactly the same as it did before.
You can then take your time to redesign your site.
Maybe start with the header and design that to get the exact look that you want. When you have completed your header design and you are happy with it, you can assign it to your site. At this point, your new header will replace the one being used by your theme. You might then look at redesigning your footer. When you have completed your new footer and you are happy with it, you can assign that to your site and it will be used instead of the footer created by your theme. You can then focus on other aspects of your site, like the layout of posts, pages, archive pages, etc. You only enable them when you are happy with your design, meaning your theme continues to do the hard work until you are ready. As you add more and more of your own design templates, the theme continues to take care of those aspects you have not yet worked on. All of this means that you can work at your own pace and while working on the updates, your site won't look a mess.
The other thing to consider is the maturity of these products. Elementor has been around for a long time and has matured into the most amazing site design tool. On the other hand, Gutenberg FSE is still a new product. As I write this, it's still in beta, meaning it has bugs to iron out.
In terms of flexibility and features, Elementor easily wins. But you can be sure that WordPress are working hard to turn the Gutenberg FSE into an Elementor killer. They are a long way from that at the moment, but as you'll know as a WordPress user, updates happen frequently so it is an exciting time for WordPress users.
So which should you use?
I am sure most professional developers will be using Elementor for some time yet. However, for the average webmaster who doesn't need pixel-level design control, Gutenberg may be enough for you now and it will only get better. Just remember that it is still a beta product and can crash or not work as expected. On the plus site, sites built with Gutenberg are likely to load faster than those using Elementor.
