How to Convert WPBakery (FKA Visual Composer) to Elementor page builder

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 + WPBakery (FKA Visual Composer)

I used to love ThemeForest + WP Bakery (FKA Visual Composer), 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.

Please note that the Visual Composer that I refer here are the old version of Visual Composer, which had rebranded as WPBakery. The new Visual Composer is React-based Website Builder & is free of shortcodes.

Visual Composer Website Builder vs WPBakery Page Builder

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.

Slow website with WPBakery Page Builder load 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.

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 (FKA Visual Composer) to Elementor

Step 1. Create a staging site via Migrate Guru

• Always work on staging, not “Under Construction”.
• Create an A record “dev” and point to your staging server IP address, the staging site URL should be https.dev.website.com
• Install WordPress in the staging site.
• 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 (FKA Visual Composer) / Divi and others unnecessary themes and 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

Step 3. Install Lightweight theme

• Use lightweights theme like Blocksy, GeneratePress or Kadence Theme.
• Or use Hello Theme from Elementor, and use theme builder function to rebuild theme’s header and footer.

Step 4. Remove WPBakery Page Builder (FKA Visual Composer) / Divi shortcodes from content

When you remove the WPBakery Page Builder (FKA Visual Composer) / Divi builder, it will leave you tons of shortcode with content and is very time-consuming to go through page by page to remove.

Shortcode Cleaner Pro saves me lots of time & effect. You can easily remove all the shortcode in minutes.

• 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.

https://youtu.be/dXVZ5bSUduc

Step 6. 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.

• isitwp.com
• generatewp.com
• wpmudev.org

Step 7. 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 8. Optimise WordPress Database

• You can remove the orphan’s table via phpMyAdmin or use Advanced Database Cleaner Pro for better database optimization. If you prefer FREE plugin, may try plugin WP-Sweep, Plugins Garbage Collector.

Step 9. WordPress Speed Optimization

• Regenerate all the thumbnails with reGenerate Thumbnails Advanced, it helps to remove not-used-anymore thumbnails, which is super useful in this case. Furthermore, it integrated with ShortPixel Image Optimizer.
• For WordPress Speed Optimization, I use FlyingPress.

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

Is Elementor good for speed?

Yes of course, the 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.

If you are looking with web hosting with Cloudflare’s Edge Network, check out Rocket.

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 Convert from WPBakery Visual Composer to Elementor service, let us get the dirty job done. Money-back guarantee!

Photo by Matthew Henry on Unsplash