Before the tutorial, I would like to share my journey of ThemeForest, Divi and Elementor page builder. You may use the jump to link to skip to the tutorial.

Ex-lover: ThemeForest + Visual Composer (WP Bakery)

I used to love ThemeForest + Visual Composer (WP Bakery), It provides a nice user experience on web development for non-coder like me. And I can create a beautiful website just like the theme’s template. Yes, just like the template, and there are thousands of them lookalike over the internet.

When I need to change the layout design, it turns to a nightmare, either you stick with the current theme design or switch to another ThemeForest theme, it cost you time and money to rebuild all over again.

Another problem with ThemeForest theme, most of them are the multi-purpose theme, they provide you everything all in one package, way more than what you need, and it turns your website becoming very slow website.

Ex-lover: Divi Builder by Elegant Theme

Therefore, I came across Divi Builder. Very affordable price at only USD180 for the Life Time usage and it provide more freedom to create the website layout based on my requirement.

It was a happy journey at the beginning, the learning curve is fine and I found myself create a much better website with Divi Builder.

The honeymoon ended with updates, Divi Builder always breaks my websites when I need to update, this is such a horrible experience. End up I spends more time to solve the problem.

There are lots of complaints on the Divi Builder Facebook user group, and some members recommend a new page builder call Elementor page builder.

After a few days of playing around Elementor page builder, I decided to subscribe to the expert package and never look back.

This guide works for Divi builder convert to Elementor page builder too.

Problem: Slow WPBakery Page Builder / Visual Composer website loads in 27sec

This website is built with ThemeForest’s theme with Visual Composer. It loads so slow and the client keeps facing trouble with it.

Slow WordPress Website
Slow WordPress Website Warning
Rebuild / Convert WPBakery Page Builder / Visual Composer to Elementor
Rebuild / Convert WPBakery Page Builder / Visual Composer to Elementor page builder and optimise from 27sec to 1.2sec

They put a notice to warning visitors about the slow loading website. To try to get better performance, the client hosts in AWS EC2, but the cost is so expensive. (595 request loads under 27sec is a pretty good performance)

Other problems that I found after the site audit

  • WordPress, theme & plugin are outdated for years.
  • Outdated PHP.
  • The website had been developed by numbers of times, they never remove whatever themes & plugins they no longer needed.
  • They installed lots of plugins to achieve some simple layout design.
  • Multiple repeated function plugins.
  • Use WPBakery Page Builder (Visual Composer) to create a post!

How to convert / migrate WPBakery aka Visual Composer to Elementor

Step 1. Create a staging site via Migrate Guru

  • Backup! Always backup first.
  • Create an A record “dev” and point to your staging server IP address.
    if you use dev, the staging site URL will be https.dev.website.com
  • I use Migrate Guru to mirage the website from the live site https://website.com to https://dev.website.com

Step 2. Remove WPBakery Page Builder / Visual Composer / Divi and others unnecessary themes and plugins

  • Records down the current list of plugins
  • Remove unnecessary extra themes, but I always keep a basic WordPress theme like Twenty Twenty for debug purpose.
  • Remove WPBakery Page Builder / Visual Composer / Divi and other unnecessary extra plugin

Steps 3. Remove the Shortcode from WPBakery Page Builder / Visual Composer / Divi with Shortcode cleaner

When you remove the WPBakery Page Builder / Visual Composer / Divi plugin, it will leave you tons of shortcode and is very time-consuming to go through page by page to remove. The Shortcode Cleaner Pro saves me lots of time & effect. Furthermore, the developer is very helpful. Below are some of the Pro features.

  • Clean up the backend editor admin content.
  • Clean up the content into a database.
  • Clean up broken shortcodes that are left from any page builder.
  • Show broken shortcodes status in the admin bar.
  • Force any active shortcodes to be broken [inactive].
  • Clean up unlimited number of posts, pages [intsead of just 100 in lite version].
  • Add new custom frontend site content filters.
  • Use default backend Admin WP content filters.
  • Add new custom backend admin content filters.

Step 4. Rebuild with Elementor page builder

  • Use Hello Theme from Elementor if you are using Elementor page builder Pro. Else I will suggest other awesome theme like Blocksy, GeneratePress or Kadence Theme.
  • If you are using Elementor page builder Pro, use theme builder function to rebuild theme’s header and footer.
  • Rebuild page layout with the Elementor page builder.
  • Rebuild post layout with call to actions with the Elementor page builder design.
  • Kiss goodbye to the slow multi-purpose theme from ThemeForest and WPBakery Page Builder / Visual Composer.

Step 4.1 Convert Elementor to Gutenberg

If you had notice, I had convert my Elementor site to Gutenberg with Kadence Theme Pro and Kadence Block Pro.

To convert from Elementor to Gutenberg is way easier than convert WPBakery Page Builder to Gutenberg. Because when you disable Elementor, it DOES NOT leave you any miserable shortcode, you just need to redesign again with Lightweight theme like Blocksy and Gutenberg block editor.

With the fixability of Kadence Block Pro, it allow you to create more advanced layouts with flexible grids, it makes the design process much more quickly.

Another Block Editor you should not miss is Gutenberg Page Building Toolkit – EditorsKit, it works like TinyMCE for Classic editor, but with way more advanced functions.

And it score 100 in Google Speed Insights!

Google Page Speed Insights
Google Page Speed Insights

These are few more results of convert Page Builder to Gutenberg.

Convert Elementor to Gutenberg PageSpeed Insights score 99
Convert Elementor to Gutenberg PageSpeed Insights score 99
Convert Elementor to Gutenberg, the load time cut done 90%!
Convert Elementor to Gutenberg, the load time cut done 90%!
Convert Elementor to Gutenberg, the load time cut done 90%!
Convert Elementor to Gutenberg, the load time cut done 90% from 5.8sec to 0.6sec.
rebuild pagespeedinsights 99
Convert to Gutenberg
rebuild 59 06
Convert to Gutenberg, the load time cut done 90% from 5.9sec to 0.6sec.

Convert WPBakery + Nitropack to Gutenberg

This is another client that convert from ThemeForest Theme with WPBakery + Nitropack to Blocksy Theme & Kadance Blocks. The website is totally redesigned to focus on client’s profession.

On GTMEtrix test, the performance is better than original website with Nitropack.

Convert WPBakery to Gutenberg
Convert WPBakery to Gutenberg

On Google Page Speed Insights test, the original website with Nitropack is 76, the new site is 98!

ThemeForest + WPBakery + Nitropack = Page Speed Insights 78
ThemeForest + WPBakery + Nitropack = Page Speed Insights 78
WPbakery to Gutenberg PageSpeed Insights score 100
WPbakery to Gutenberg PageSpeed Insights score 100

For website that is required dynamic content and more complex design, I use Oxygen builder.

Elementor to Oxygen PageSpeed Insights score 99
Elementor to Oxygen PageSpeed Insights score 99

Step 4.2 Convert Elementor to WPBakery

Convert from Elementor to WPBakery will much easier, because Elementor do not leave shortcode like WPBakery when you disable Elementor. Therefore you can skip the step 3 and start building with WPBakery.

Step 4.3 Convert Elementor to Divi

Convert from Elementor to Divi is same like convert Elementor to WPBakery, Elementor do not leave shortcode, you can skip the step 3 and start building with Divi.

Step 4.4 Convert WPBakery to Divi

If you plan to convert from WPBakery to DIVI, you will need to follow the steps above. Remove shortcode and rebuild the pages again with Divi.

Please note that when you disable Divi, it will leave tons of shortcode like WPBakery.

Step 5. Make use of Code Snippets

Some functions you don’t really need a plugin, and you can use code snippets to replace it. Below are some sites for code snippets.

Step 6. Use Gutenberg to handle the post

Use Gutenberg Block to draft out few post template for the client, so they can be duplicate post the template and replace with their text & graphic.

Always remember Elementor page builder is Page Builder, not post builder. You should NOT use the Elementor page builder or WPBakery Page Builder / Visual Composer to create the post. Please make use Gutenberg Block Editor.

Step 7. Optimize WordPress Database

Advanced Database Cleaner Pro
Advanced Database Cleaner Pro
Advanced Database Cleaner Pro Table
Advanced Database Cleaner Pro Table

Step 8. WordPress Speed Optimization

Swift Performance 20 % Coupon Code: FASTWP

You may check up my other post WordPress Speed Optimization to score 100 on Google PageSpeed Insights

Result: From 27sec to 1sec

And finally, the rebuild website load way faster than before, original hosted in AWS EC2 and load in 27.1sec, reduce to 1.2sec! Shared hosting at WPWebHost. Reduce the page size from 57.1MB to 755KB and reduce the requests from 595 to 54 requests.

Convert From Visual Composer To Elementor
Convert From Visual Composer To Elementor

Ending Thoughts

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

And if you have any question please give me a shout to my comment box. I’ll try to help you accordingly.  If you need Convert / Migrate from WPBakery Visual Composer to Elementor service, hire me to get the dirty job done. Money-back guarantee!