How to Convert Elementor to Gutenberg

Speed and lightweight, furthermore Gutenberg is the default WordPress block editor. Is way more easy to maintain the website, you can easily to build a Gutenberg website to score above 90 in Google Page Insights.
4 minutes

Due to the Google ranking signal update — Core Web Vitals. I had help a couple of websites to convert from WPBakery / Visual Composer / Elementor / Divi to Gutenberg.

Gutenberg vs Elementor

Why use Elementor

Elementor is so powerful, any layman non coder can pick up easily. It have lots of cool features and functionality. For advanced user, building website with dynamic content is super easy with Elementor.

How to use Elementor with ACF Tutorial

Build website faster with Elementor

The ease of use of Elementor is way better than Gutenberg. As simple as moving a text blocks in Gutenberg is pain in the ass. Secondly is there are thousands of beautiful template with Elementor.

Use less plugin with Elementor

With Elementor, you can replace couple with plugins with Elementor widget, example like form. Benefits of less plugin is less headache to maintain.

Is possible to load Elementor under 2 second

Google suggest load speed under 2 second.

Site Performance For Webmasters

I'm Elementor Performance Expert, there are no problem for me to load Elementor site under 2 second. You may learn some speed up Elementor tips here.

In fact, I have a lots of enquiries from client request to build their website with Elementor. And I always recommend Elementor to anyone who need page builder.

Will Gutenberg replace Elementor?

The ease of use of Elementor is far more superiors than Gutenberg. As simple as moving a text blocks in Gutenberg is pain in the ass. Secondly is there are thousands of beautiful template with Elementor.

You can easily build a brochure site in a day with Elementor, and I would said extra day with 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 to use Elementor to create post.

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 through, with Kadence blocks, I can build as fast as Elementor.

Gutenberg uses fewer assets scripts and page size is lighter compare to page builder. Less is more, less scripts and page size give you better score in Google PageSpeed Insights.

Faster with Gutenberg

Below is a very good example of building with Blocksy & Kadence block editor. With such result, I don't even need to optimise further.

99 without optimization
PSI 99 without optimization

This is another site with simple optimise with Free plugin Autoptimize, without any cache setup.

100 with simple optimization
100 with simple optimization

Price

Elementor has increased their price on 9th March 2021. The price from USD199 per year to USD999 per year for 1,000 websites.

KadenceWP's membership is only USD599 for lifetime membership with Unlimited website.

My favorite 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 Elementor site to Gutenberg

Step 1: Research & planning.

For every website revamp, planing super important. I would suggest use lightweight theme like Blocksy, GeneratePress or Kadence. For Gutenberg block editor, I would suggest use Kadence Block.

My current stack is Blocksy Theme & Kadence Block. Can't wait for Blocky's block.

Step 2: Migrated to Rebuild in 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 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 of short code after you uninstall.

Step 4: Install lightweight theme

For those who have use lightweight theme with Elementor, may continue use back the theme. My current prefer theme is Blocksy. The theme customiser is the best I seem in a while. Way better than other lightweight theme in the market.

Step 5: Install Gutenberg blocks editor

My current prefer block editor is Kadence Block. Rebuild those pages with Gutenberg block editor is not as difficult as you think. The row layout is very handly.

Step 6: Optimise WordPress Database

After rebuild, I will use Advanced Database Cleaner Pro to optimise the database, remove tables left by Elementor.

Step 7: Speed optimization

Everyone love fast website, and Google suggest keep in under 3sec. You may follow this guide for Speed optimization for Core Web Vitals.

Is possible to speed up WordPress under a second

Below image is the results of convert from Elementor to Gutenberg. The PageSpeed Insights score 99 and the page load from 5.8 to 0.6 sec, 90% reduced!

elementor to gutenberg pagespeedinsights 99
Convert Elementor to Gutenberg
elementor gutenberg
Convert Elementor to Gutenberg

Ending Thoughts

I hope this tutorial will help you to solve your problem. Buy me a coffee ☕ if this tutorial really helps.

If you need to Convert / Migrate from Elementor to Gutenberg service,  let us get the dirty job done. Money-back guarantee!

Convert Services
Article written by Julian Song
WordPress Consultant | Elementor Performance Expert. Meet-up organizer for WordPress Penang; Elementor Community leader Penang and Wedevs Brand Ambassador in Malaysia.