In this article, we will try to figure out why to convert the Elementor site to Gutenberg (or not), what useful tips for this quite painstaking process are, and which tools to use.
Table of Contents
- Why Convert Site to Gutenberg?
- Is Elementor Really So Bad and Slow?
- Main Steps When Converting an Elementor Site to Gutenberg
- Tips for Converting Elementor Site to Gutenberg
- FAQ
- Bottom Line
Why Convert Site to Gutenberg?
There is one but all-encompassing reason for this: speed and performance. Or you just love Gutenberg and full site editing.
Pros of Gutenberg
- It’s fast.
- Full site editing is based on Gutenberg.
- Gutenberg is the only native WordPress editor inbuilt in the core. And it seems like WordPress developers have big plans for it.
- It’s very convenient for sites that don’t need complex animations, over-the-top designs, etc.
Limitations of Gutenberg
There is quite a long list of issues Gutenberg has.
One of the most annoying things is block stylization which is very limited by default. For example, the native Button block has no option for color changing on hover. And this is because, at the moment, Gutenberg’s core is not designed for this. From the technical side, you can find a workaround, but for the sake of such a goal, it is overkill.
But it is pleasing that in the last update (6.2), the Gutenberg team said that they are working on the issue of stylization. Therefore, there is hope that the problem mentioned above will be solved soon.
But for now, special Gutenberg-first themes and additional plugins with blocks are quite necessary. Note that most of them are not free.
From the developer’s point of view, there are still a lot of experimental components and hooks in Gutenberg’s core, the issue with the backward compatibility is still there, and the API is not very easy to deal with.
Is Elementor Really So Bad and Slow?
The principal complaint to Elementor is that it slows down a website. But can it be optimized? Yes, it can. It creates more database queries and loads more CSS and JavaScript, but with good hosting and proper optimization plugin settings, the site can meet Google speed requirements and load in under 2 seconds.
Also, the issues appear when the Elementor-based site is not optimized or assembled properly. We have a big article about Elementor website optimization, so feel free to check it.
In a nutshell, Elementor can bloat the site if there are too many add-ons, images are too big, unnecessary sliders above the fold, layouts are not optimized, and so on.
For example, it’s better to use an “Image with text” widget instead of creating a new inner section with two columns and using two widgets (Image and Text). Also, many developers still create separate columns or even inners sections to align items in one row, while it’s much better to use “Inline (auto) with” (Advanced > Width > Inline (auto)) and in the column settings set up a horizontal align which works best with those two or more widgets.
And now, we are getting to the main question here: can Elementor site performance be good? The answer is “yes.” Will Gutenberg be faster? In many cases, the answer will also be “yes.” But if the difference is not huge, and you will sacrifice the perks Elementor offers, think twice before rebuilding the Elementor site on Gutenberg.
✏️ To sum it up:
Gutenberg sites are fast out of the box. You don’t need to put a lot of effort into optimizing them. However, you need to invest time and effort to build layouts if your site’s design is a bit more than just very simple. Also, it’s still quite a limited choice of blocks, so you will not be able to create frilly sections and animations without dealing with some code.
Elementor sites will be very easy to build visually, and it will not take much time and effort. There’s a huge choice of widgets for even some over-the-top blocks. However, you will need to invest time and effort to optimize it.
So the choice is yours. 🤓
Pros of Elementor
- It’s visual – so you can see changes you’ve made immediately.
- It’s much easier and faster to create sites with Elementor. To build the same page with Gutenberg, you might spend twice more time.
- There are a lot of free awesome add-ons literally for everything, while most of the Gutenberg block add-ons are paid and more on the expensive side.
- Elementor is very beginner friendly.
Main Steps When Converting an Elementor Site to Gutenberg
There are two ways of doing this: one is to create a site anew using Gutenberg tools. But I’m not sure you will be happy to do it if there are a lot of pages and a complicated structure.
That’s why we’ll have a closer look at creating a new Gutenberg structure based on the existing site.
Deactivating Elementor and installing a Gutenberg theme
The good thing about migrating from Elementor is that it doesn’t use shortcodes like some other visual builders (e.g., WPBakery, Bold Builder, UX Builder (Flatsome), and others). So, you will not have to roll up your sleeves and dig deep into deleting hundreds of such shortcodes. You can just deactivate Elementor and all its add-ons and rebuild the pages using texts and images that are already there.
Now, it’s time to install a lightweight Gutenberg theme. It’s important because it will bring either some additional functionality for Gutenberg or at least Site Editor support.
Installing a plugin with extra blocks and templates
Installing plugins with additional Gutenberg blocks is a must in most cases because you will really need them if you want to create a layout that is a bit more advanced than very simplistic. There are quite a lot of plugins to choose from, and the most popular ones are Kadence Blocks (you will need to buy Pro for proper functionality, but it has an awesome style editor even in a free version), Spectra, Stackable and my personal favorite for creating post grids is PostX (which even has a template builder).
GenerateBlocks also gained a lot of praise, but it stands out because it’s not just a plugin with blocks but a solid product you can only purchase as one bundle.
Rebuilding pages
And welcome to the most tedious step, which will take time, probably more than building the initial site. That’s why setting up all the instruments prior to this stage is so important.
Don’t forget to check how pages look on different devices, not only in the editor, because sometimes Gutenberg is not very good at working with breakpoints.
Also, visual CSS editors may be a very handy tool here.
Optimizing
When all the pages are done, it’s time to back up your site once again and optimize the database. Use one of the plugins for it, and the main task here is to delete all the database tables created by Elementor and its add-ons.
This is a use case of recreating quite a famous website with Gutenberg:
Some Tips for Converting Elementor Site to Gutenberg
General tips
- Use lightweight and not multi-purpose themes. Saying “multi-purpose,” I mean those “Jack of all trades, master of none” themes that load a lot of unnecessary code because it has so many additional modules and features that you will never actually use all at once. Most of such themes can be found on ThemeForest or other marketplaces. The main job of the theme is to be optimized, lightweight, and compatible with most plugins. It can also have additional features but only those you really need.
- Use Gutenberg-first themes for Gutenberg sites. Сontinuing the previous topic, it’s also better to choose not a multi-purpose theme but one that is focused on either Gutenberg or Elementor (or other builders’) features.
- Then, decide if you want to use Site Editor and choose among the themes that support it. If not, use JetThemeCore by Crocoblock for creating reusable templates. It will be a godsend to save a lot of time without creating layouts repetitively for each page.
- Use a staging site or copy your website to the local environment to do all the changes because it will take some time to convert the site, and if you close it for maintenance for a long time, you will lose some SEO positions.
- Make good use of Gutenberg Reusable Blocks. But remember that you might need an extra plugin like Block Meister to have a consistent workflow and avoid the very annoying issue described in this video.
Tips when converting a site with Crocoblock plugins
- First and foremost, all the key Crocoblock plugins work with Gutenberg. Only those plugins that add Elementor widgets and styling are not available, which is logical. So, enjoy the powerful features they will add to your site.
- JetEngine listings can be built with Gutenberg just like you would on Elementor, so the same principle applies here.
- As I’ve already mentioned, JetThemeCore is exactly what you need when designing your Gutenberg site templates. It’s a theme builder with a very powerful condition feature.
- JetFormBuilder is the Gutenberg-first, very powerful form builder. It has a unique superpower because it uses Gutenberg blocks for creating forms. So, you can use not only blocks by JetFormBuilder but any others to enrich the functionality and design of the form. (However, please don’t insert other forms in JetFormBuilder forms). Another good news is that it’s free (and only the version with some extra add-ons is paid).
- Another free JetStyleManager plugin adds a Styles panel to Gutenberg with a lot of options, so now you are covered and can change colors, paddings, margins, fonts, hovers, and so much more.
FAQ
It depends on the layout, the set of additional instruments, and your skills. Definitely, building complex layouts will take much more time than doing it in Elementor. It also has quite a learning curve, so if you are a beginner, it’s better to use Elementor instead.
Gutenberg is a native WordPress editor with all that entails. The main advantage is that it doesn’t bloat your site, so it will be really fast without much effort on optimization.
There’s no automated converter or converting process. It’s actually rebuilding a site. Considering that Gutenberg is not a visual builder and is not extremely flexible when it comes to styling, it might take even more time than it took to build the initial site with Elementor.
They not only can, but it’s actually the best practice to use Gutenberg, even on Elementor-based sites, for creating and editing posts that don’t have complex and unique layouts. Take, for example, blog posts. You create a template once and then just use Gutenberg to add the content. It will significantly reduce the number of database queries created by Elementor; also, you really don’t need this editor just to add some text and images.
The Bottom Line
There can be many different reasons for rebuilding an Elementor website on Gutenberg, but the first reason is the page load speed and performance. At the same time, Gutenberg is not as flexible and powerful as Elementor when it comes to styling and different effects for impressive layout designs. However, there are many good add-ons, and they improve the situation significantly.
All the key Crocoblock plugins work perfectly with Gutenberg using the same principles and logic as with Elementor, so you will not be affected if your website structure is based on some dynamic JetPlugins.
