Are you considering switching from Elementor to Gutenberg? Whether you’re a seasoned developer or a layman, understanding the benefits and processes can make a difference. Elementor is known for its powerful, user-friendly features, enabling non-coders to build dynamic websites with ease. However, Gutenberg offers a lightweight alternative to improve your site’s performance and reduce loading times.
In this guide, we’ll walk you through the steps to convert your Elementor site to Gutenberg, ensuring you retain functionality while gaining speed and efficiency. We’ve got you covered from planning and research to optimisation and final touches. Let’s dive in and transform your website into a lean, mean, high-performance machine!
Gutenberg vs Elementor
Why use Elementor
Elementor is so powerful that any layman or non-coder can easily use it. It has lots of cool features and functionality. For advanced users, building websites with dynamic content is super easy with Elementor.
Build a website faster with Elementor
The ease of use of Elementor is way better than that of Gutenberg. As simple as moving text blocks in Gutenberg is a pain. Secondly, there are thousands of beautiful templates with Elementor.
Use fewer plugins with Elementor
With Elementor, you can replace a couple of plugins with an Elementor widget, such as a form. The benefit of having fewer plugins is that they are less headaches to maintain.
Is possible to load Elementor under 2 second
Google suggest a load speed of under 2 seconds.
I’m an Elementor Performance Expert; I can load the Elementor site in under 2 seconds without problems. You may learn some speed-up Elementor tips here.
In fact, I receive many enquiries from clients who request to build their websites with Elementor. I always recommend Elementor to anyone who needs a page builder.
Will Gutenberg replace Elementor?
The ease of use of Elementor is far superior to that of Gutenberg. As simple as moving text blocks in Gutenberg is a pain. Secondly, there are thousands of beautiful templates with Elementor.
You can easily build a brochure site in a day with Elementor, and I would recommend spending an extra day with the Gutenberg block editor.
Furthermore every page builder is unique, I don’t see any real Elementor replacement in the market yet.
We strongly don’t advise using Elementor to create posts.
Why use Gutenberg?
You can easily to build with Gutenberg and score above 90 in Google Page Insights. For Elementor, you need to further optimise with defer JS, remove some assets, etc.
Building with Gutenberg is not as painful as you thought; with Kadence blocks, I can make as fast as Elementor.
Gutenberg uses fewer assets and scripts, and its page size is lighter compared to the page builder. Less is more, and fewer scripts and page size give you a better score in Google PageSpeed Insights.
Faster with Gutenberg
Below is a good example of building with Blocksy & Kadence block editor. With such a result, I don’t even need to optimise further.
This is another site with simple optimise with the Free plugin Autoptimize, without any cache setup.
Price
Elementor increased its price on 9th March 2021, from USD199 per year to USD999 per year for 1,000 websites.
KadenceWP’s membership is only USD599 for a lifetime membership with the Unlimited website.
My favourite lightweight theme – Blocksy, is only USD 299.
Can I change from Elementor to Gutenberg?
Yes of course, changing from Elementor to Gutenberg is not rocket science, with web design practices, you can easily score above 90 in Google PageSpeed Insights.
How to convert the Elementor site to Gutenberg
Step 1: Research & planning.
For every website revamp, planning is super important. I would suggest using lightweight themes like Blocksy, GeneratePress or Kadence. For the Gutenberg block editor, I would suggest using the Kadence Block.
My current stack is Blocksy Theme & Kadence Block. Can’t wait for Blocky’s block.
Step 2: Migrated to Rebuild in a Staging site.
Putting an under construction on the website for weeks is not a wise idea for SEO. Always build in staging.
Step 3: Remove the Elementor page builder and its add-on.
Unliked convert from WPBakery, you do not need to remove short code. Elementor, DO NOT leave you any miserable shortcode after you uninstall.
Step 4: Install a lightweight theme
For those who have used a lightweight theme with Elementor, you may continue using the theme. My current preferred theme is Blocksy. The theme customiser is the best I have seen in a while — way better than any other lightweight theme in the market. Its WooComerce function is far beyond that of other themes. Highly recommended!
Step 5: Install Gutenberg blocks editor
My current preferred block editor is Kadence Block. Rebuilding those pages with the Gutenberg block editor is not as difficult as you think. The row layout is very handy; form block, animate on scroll, and dynamic content are what you need to replace the Elementor Pro function.
Step 6: Optimise WordPress Database
After rebuilding, I will use Advanced Database Cleaner Pro to optimise the database and remove tables left by Elementor. It helps me clean up 10GB of database left by WordFence.
Step 7: Speed optimization
Everyone loves fast websites, and Google suggests keeping it under 3sec. You may follow this guide for Speed optimization for Core Web Vitals.
Is possible to speed up WordPress to under a second
The below image shows the results of converting from Elementor to Gutenberg. The PageSpeed Insights score is 99, and the page load is reduced from 5.8 to 0.6 sec, 90%!
Ending Thoughts
I hope this tutorial will help you to solve your problem. Buy me a coffee ☕ if this tutorial helps.
If you need to Convert or migrate from Elementor to Gutenberg service, let us do the dirty work. We offer a money-back guarantee!
You may also contact me to assist you with the conversion.
Photo by Bruno Martins on Unsplash