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
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
Another problem with
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
It was a happy journey at the beginning, the learning curve is fine and I found myself create a much better website with
The honeymoon ended with updates,
There are lots of complaints on the Divi Builder Facebook user group, and some members recommend a new page builder call
After a few days of playing around
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.
- 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 5. Rebuild with
Elementor page builder
- 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 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.
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
If you are looking with web hosting with Cloudflare's Edge Network, check out Rocket.
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