How to Convert Divi to Elementor

Before you start to convert your Divi website into Elementor, you need to complete a couple of other things first. You want to make sure that you’ve got your website fully backed up. While the process is generally safe, you want to make sure that you can restore your website if something does happen.

The next step for you to do is to turn the caching on your server and the website off. If you’re using Cloudways you might need to speak to them about their caching. In addition, you want to ensure the website caching plugins are turned off.

If you’ve got the technical knowledge and the time, it is highly recommended that you create a staging website. This is like a testing platform where you can test the conversion and then migrate the success over to your live website.

Now you can start to install Elementor. Previously, this had to be done after uninstalling Divi, but the developers have made it so that both pieces of software can be activated on your website at the same time without your website crashing.

Once installed, create a test page and check with several Elementor shortcodes that there aren’t any problems. Sometimes conflicts do happen, so it is best to just check.

You might also want to check that there aren’t any errors with JavaScript or CSS.

To do this press F12 on your keyboard and then click on the ‘Console’ tab. If there are some errors, you might want to fix them or you can change to another Elementor-friendly theme.

Now you can disable the Divi Builder and any Divi-related plugins. After doing this, pages that were built with Divi will show raw shortcode content in the editor, and your frontend may look broken at this stage. That is expected.

To clean up the leftover shortcodes, use a plugin like Shortcode Cleaner (free on the WordPress repository). It scans all post content for orphaned shortcodes and removes them with one click. Run it immediately after deactivating Divi.

You will also want to clean your database of any Divi-specific settings and transients. WP-Optimize or Advanced DB Cleaner can handle this. The database cleanup is optional, but the shortcode cleanup is not – leaving them in place will show raw text like [et_pb_section] in your page content.

Do not delete Divi yet. Keep it deactivated until you have confirmed everything works correctly in Elementor.

Now you need to have your pages, posts and database ready for migration. The first thing you need to do for this to work is to rebuild your website’s header and footer sections within the Elementor framework.

There is a great drag and drop page builder that can help you with this.

With your header, footer, and global templates rebuilt in Elementor, you can now work through your individual pages and posts one by one. Open each page in the WordPress editor and click “Edit with Elementor.”

The Elementor editor opens, but because Divi is deactivated, the page content will appear as plain text or be missing its layout. This is where the manual rebuild happens. Use Elementor’s drag-and-drop interface to reconstruct each section, copying text from the deactivated Divi layout or from a browser window showing a backup screenshot of the original design.

Work through high-priority pages first: your homepage, landing pages, and any pages tied to your primary marketing or conversion goals. Lower-traffic pages can follow.

When you finish each page, preview it on both desktop and mobile before moving to the next one. Elementor’s mobile editing mode makes it straightforward to fix responsiveness issues as you go. Once every page is rebuilt and confirmed working, you can safely delete Divi and its files entirely.