How to change from Divi to the Block Editor

divi to gutenberg

This guide will walk you through how to change your website from the Divi Theme to the WordPress Block Editor, Gutenberg.

Divi is one of the popular WordPress Themes in the World, and is now use on over 750,000. One of the key reasons that Divi is so popular is because it comes with it’s very own page builder, called the Divi Builder.

The Divi Builder is a drag and drop page builder that makes it easy to create great looking websites.

However because the Divi Builder is built into the Divi Theme, if you change your Theme all your content will be wrapped in Divi code.

Divi Shortcodes left behind after switching to a new Theme

How to change from Divi to the Block Editor 1

These codes are called Shortcodes, and these are what the Divi Builder uses to create it’s page layouts.

Normally when you switch WordPress Themes your content will flow into the new Theme and inherit the styles of that new Theme.

However the way Divi Builder works is to wrap all your content in Divi Shortcodes, and if you activate another WordPress Theme on your website, your content will show all the Divi Shortcodes, and be largely unreadable.

This is called ‘content lock in‘ and it’s a major problem with Divi.

Why move from Divi to the Block Editor?

There’s four important reasons why you should think about moving your site away from using the Divi Theme.

1) The Divi Theme fails the Google Core Web Vitals test

In May 2021, Google is releasing a big update to their ranking algorithm where page experience and page speed are going to become a very important ranking factor.

Unfortunately for Divi Themes users, the Google Core web vitals update is bad news. This is because the Divi Theme will slow down your website and your page speed scores quite a bit.

Divi Page Speed scores are very poor

I tested the page speed scores of Divi and you can see the results in the screenshot below. This test was run on a site using the Divi Theme with no plugins installed. You can test the page speed scores for your own website by going to the Google Page Speed website.

divi page speed score

As you can see Divi fails the Google Core Web Vitals test.

Divi scored 28 out of 100 on the mobile test, and 72 out of 100 on the desktop test.

Divi is slow because of the way it’s been written, and because it contains so much functionality that should normally be added via plugins.

If you would like more information on the change that Google is making, then check out my Google Core Web Vitals Webinar.

So in summary, page speed is increasingly important to your Google Ranking, and the Divi Theme performs very poorly, so your best option is likely to be to look for a new faster Theme.

Here are four great Themes that you might consider. These are all built with great Block Editor support and are lightweight and fast.

2) Block Based Themes are here – great alternatives to Divi

Over the past year, forward looking Theme companies have really embraced the Block Editor. Here’s four great Themes that you might consider as replacements for Divi. These all have free versions so you can test them out.

3) Divi is no longer better at page design than the WordPress Block Editor

First a little history.

When Divi was first released, the WordPress editor was just a simple word processor, with very limited page layout options.

The old WordPress Editor, now known as the Classic Editor, was fine for simple text and image layouts, but very limited if you wanted to achieve proper page design.

However the default WordPress Block Editor can match Divi in most page designs now.

Here’s a video where I cover the core Divi Modules and show you how to re-create them using the Block Editor.

Further on in this post I chart the existing Divi Builder Modules to their Block Editor equivalents.

In addition, the WordPress Editor is now true drag and drop, making it very intuitive to use.

4) You can now use the WordPress Block Editor to customize WooCommerce Pages

woocommerce customization

One of the real advantages of using Divi are it’s WooCommerce Modules. These allow you to edit and style WooCommerce elements using the Divi Builder. This allows you to use Divi to create custom WooCommerce Shop and Product pages.

However It’s now possible to customize the WooCommerce Product Page using the WooBuilder Blocks plugin and the WooCommerce Shop Pages using the Storefront Blocks plugin.

WooBuilder Blocks and Storefront Blocks contain all the WooCommerce Modules – currently available within Divi Builder – that you need to construct unique WooCommerce Pages. In addition, WooBuilder Blocks also contains sales boosting Blocks such as a Sales Countdown Block, and Stock Countdown Block.

Divi to Gutenberg, practical migration tips

There’s a few practical things to consider before you start rebuilding your Divi Pages into the Block Editor, such as what is going to happen to your existing pages and/or website.

There are two general approaches you might consider when migrating from Divi to the WordPress Block Editor

  1. Build new website from scratch
  2. Migrate pages one at a time

Let’s go into a little detail on each one starting with building your new website from Scratch

This is sometimes the cleanest approach, but obviously requires quite a bit of work. 

If you go this route then you have a number of options. 

Some hosting companies provide you with a staging website, where you can build a new version of your website and then push it to live once completed on the staging site. 

If your hosting company doesn’t provide you with a staging server then you could use a staging server plugin like the WP Staging plugin.

Alternatively you could build your website on a new install of WordPress under a temporary domain name. Once you have finished your new website under the temporary domain name, then you re-point your domain name at your new server IP address. Your hosting company will help you with this process if you get stuck, but it’s quite simple. 

The other alternative is to migrate your Divi pages one by one

If you go down this route then it’s important to make sure that your page titles are the same as your old pages, and also the permalinks are identical to the old pages.  So you might need to rename these once you’ve finished the replacement pages.

Here’s a few extra tips that will help you migrate Divi Pages into the Block Editor.

  • Use a staging server to rebuild the Divi Pages – A staging server is essentially a copy of your website. If your hosting company provides you with a staging server – quite a few hosting companies offer this now, so it’s worth asking you existing host – then you can migrate your Divi Pages across the Block Editor one at a time. Once you are finished you can push the staging site to the live site.
  • Re-build the site on a temporary domain – You could re build the entire site from scratch. This is sometimes the easiest solution. Here’s a tutorial on how to build a new site whilst the old site is live. Remember to keep the same page titles, and permalinks.
  • Strip out Divi Shortcodes automatically – The Shortcode Cleaner plugin is a really useful plugin that will automatically strip out Divi Short Codes from your pages. You’ll be left with clean text, but remember that when you run this plugin you will lose all existing Divi page formatting.
  • Important Note! Remember to keep the same Permalinks – If you are re-creating pages from scratch they will be given a new url. To preserve your SEO ranking you will need to keep the same URL as your original Divi page. The way to do this is to rename the URL of your old Divi page, and then give your new page that old URL.

Comparison table – Charting Divi Modules to Block Editor Blocks

In this section I’m going to go through the Divi Modules and show you which Block Editor Blocks you could use to re-create them using the WordPress Block Editor. Divi Modules are the equivalent of the WordPress Block Editor Blocks.

In most cases we’ll be able to recreate Divi Modules just using the core Block Editor Blocks, but in some cases we’ll be using additional plugins. You might be sat there thinking ‘why should I need to install additional plugins when I could just use Divi?’.

But that really highlights the major problem with Divi.

Divi requires a huge amount of code for all the Divi Modules. But in my experience most users, and most sites only use about 15-20% of the functionality built into Divi.

So imagine you’re running a website, but you don’t need testimonials, or sliders, or accordions, or portfolios or video. Even though you don’t need these Divi Modules, your website, because it’s using Divi, still has to carry all that Divi code.

Also remember the big advantage of moving away from Divi is that your content will no longer be locked into one Theme, so even if you need to use additional plugins, you’ll still be able to switch Themes without losing any content.

Divi modules mapped to their Block Editor equivalent

Here’s a table that lists the Divi Modules in the left column, with the equivalent Gutenberg Block and/or plugin required in the right column.

Divi ModuleBlock Editor Recommended Blocks
The Divi Container ModuleThe Columns Block and Gutenberg Pro
The Divi Testimonials ModuleThe Columns Block and Gutenberg Pro Plugin or the Testimonials Block in Ultimate Add ons for Gutenberg
The Divi Accordion ModuleThe Accordion Block in CoBlocks
The Divi Text ModuleThe Paragraph Block
The Divi Toggle ModuleThe Accordion Block in CoBlocks
The Divi Slider ModuleThe Gutenslider plugin
The Divid Social Media ModuleThe Social Icons block
The Divi Tabs BlockThe Editor Plus plugin Tabs Block
The Divi Video ModuleThe Video Block
The Divi Search ModuleThe Search Block
The Divi Pricing Tables ModuleThe Columns Block and Gutenberg Pro (tutorial here)
The Divi Post Slider ModuleThe Gutenslider plugin
The Divi Post Navigation ModuleThis is built into 99% of WordPress Themes
The Divi Portfolio ModuleThe Visual Portfolio plugin
The Divi Person ModuleThe Columns Block + Heading Block + Social Icons Block
The Divi Number Countdown ModuleThe Sales Countdown Block in Storefront Blocks
The Divi Map ModuleThe HTML Block or use the Maps Block plugin
The Divi Login ModuleThe Advanced Gutenberg Blocks plugin login Block
The Divi Image ModuleThe Image Block
The Divi Gallery ModuleThe Gallery Block
The Divi Full Width Slider ModuleThe Gutenslider plugin
The Divi Menu ModuleThe Navigation Block
The Divi Filterable Portfolio Module (inc full width)The Visual Portfolio plugin
The Divi Email OptinThe Atomic Blocks plugin Email Optin Block
The Divi Divider ModuleThe Separater Block
The Divi Contact Form ModuleThe Ninja Forms Plugin
The Divi Code ModuleThe HTML Block
The Divi Call to Action ModuleThe Cover Block + The Buttons Block
The Divi Buttons ModuleThe Buttons Block
The Divi Blurb ModuleColumns Block + Heading Block + Image Block
The Divi Blog Module The Latest Posts
The Divi Bar Counters ModuleThe Getwid Gutenberg Blocks plugin Counter Block
The Divi Audio ModuleThe Audio Block
The Divi Video Slider ModuleThe Gutenslider plugin
Divi WooCommerce Modules
The Divi Product Page ModuleThe WooBuilder Blocks plugin
The Divi Shop ModuleWooCommerce Blocks & Storefront Blocks plugin

Divi to Gutenberg Cheat Sheet

divi to gutenberg cheatsheet

Conclusion

Now is the time to seriously consider moving from Divi to the Block Editor.

Divi will slow down your website and most likely your Google ranking will suffer because of the upcoming Google Core Web Vitals ranking update. In addition the Gutenberg Block Editor has made huge improvements and with a few additional plugins – that I’ve listed in the post – can now match Divi for page layout functionality. If you use the Block Editor instead of Divi you’ll still be able to produce beautiful looking websites that load quickly and rank high in Google.

I hope you found this guide useful, if you have any comments or questions, I would love to hear from you in the comments below.

15 thoughts on “How to change from Divi to the Block Editor”

  1. Jamie, your point that Divi’s performance is poor because it contains so much functionality that should be left to plugins, and can be matched by Gutenberg…when you add a bunch of plugins. Not the most logical point I’ve read.

    The shortcode argument is valid, but in my opinion, not a critical issue. Changing themes is not a common real world issue within a single organization, when the web site is competently implemented in the first place. And when it does happen, it is by no means insurmountable.

    1. Jamie Marsland

      Hi Rich,

      My point is that with a normal theme you have the choice to add the plugins you need for that particular site. With Divi you have no choice. You carry the code regardless of whether you require the functionality. Changing Themes is a really big issue for many of our customers so our experience is different to yours. But thanks for your thoughts :)

      jamie

  2. Are you running the latest version of Divi? When I run the tests on a new installation, I get 73 and 92. Much slower than some other themes though, the Twenty Twenty One and Kadence both score 99 for mobile and desktop.

    1. Jamie Marsland

      Hi Paul, yup running the latest version – I tested on shared hosting.

      Is that what you tested on?

      jamie

  3. Jamie,

    You make great plugins but there are a couple of other factors that make Divi appealing. One is that you have a choice of a lifetime unlimited license. This is great for small companies and freelancers to able to use it on many client and personal sites.

    Second is the ability for Divi to export and import settings and layouts. This speeds things up when designing site elements for many different sites.

    I also agree with Rich. While installing only the plugins you need can make sense, having that functionality built in without having to rely on whether or not a plugin actually works with the theme seemlessly saves time and aggravation.

    1. Jamie Marsland

      Hey Shane,

      Thanks for the reply and your thoughts – agree 100% with your point about ease of use of Divi and not having to worry about plugin compatibility.

      However, my prediction, I might be wrong but I don’t think I am :) is that on balance many Divi users will now start looking for how they can make the move to use WordPress core features i.e the Block Editor. I’m already seeing this.

      I should also say that I’m a big Elegant Themes fan, and have been using Nick’s themes right from the beginning. But with Full Site Editing on the horizon, and the incredible innovation happening in the Gutenberg space, the pressures on Divi are only going to increase.

      It’s going to be an interesting space to watch for sure,

      jamie

  4. Stephen Turner

    Hi Jamie, i use Divi daily and yes, have started to become aware of it’s slow speed compared to Gutenberg (no comparison, Gutenberg wins hands down), but maybe you would answer a question? I’ve been looking into using a theme where Gutenberg is used to build the site, like Kadence for example, so you get some design elements to help you build like with Divi, but as Gutenberg is being used, it’s a lot faster than Divi, so as long as i was happy to compromise on the ease of Divi and the amount of design modules it has, does Gutenberg themes like Kadence enable us small web designers to build good looking sites (like Divi does), but obviously benefitting a lot by the speed improvements a Gutenberg used theme like Kadence for example gives us?

    1. Jamie Marsland

      Hi Stephen,

      Many thanks for the reply :)

      I think you’ve answered your own question – there’s no doubt you can create beautiful websites with themes like kadence, astra, storefront with Gutenberg. If there are additional requirements e.g to customize the woocommerce product page, there are plugins like woobuilder blocks you can use. Or if you need an accordian there are some great gutenberg alternatives.

      The other big benefit of moving to gutenberg that my article doesn’t really mention is that you can tap into the wordpress ecosystem of blocks – whereas when you are using divi you’re limited to the divi ecosystem, which although big, is much much smaller than wordpress.

  5. Are you singling out Divi because it is a theme & builder? In your opinion, other builders, like Beaver Builder or Elementor, are still fine to use on top of the right theme?

    I’ll certainly be looking into this with our sites, but I’ll admit I’m a little skeptical right now.

    1. Jamie Marsland

      Hi Scott,

      Good question – Hopefully I’m not singling out Divi, it’s just the focus of this particular post.

      You make a good point about the difference between Divi and sites using a page builder and a fast theme.

      However, my prediction is that there will be a general drift away from Elementor and Beaver Builder as the WordPress Block Editor matures and Full Site Editing is implemented.

      If you have a few hours to spare I ran a few webinars where I cover this in more detail
      – introduction to the block editor https://youtu.be/g35USaZWltI
      – taking the block editor to the next level https://youtu.be/NRxYDD5tUDY

  6. Great idea. So you are suggesting to replace one all-in-one theme/builder with 1 theme + 13 different plugins. Those plugins will cost $180 a year in their cheapest version (1 website only), + whatever premium theme you choose.
    I wanted, how fast will be that website with those 13 new plugins, will it “fail the Google Core Web Vitals test”, as Divi?
    Should I calculate further how long would it take to configure all those themes and plugins?

    Elegant Themes team should work on Divi’s speed, but I will still use one or 2 more plugins to optimize it, than 13+plugins.

    1. Jamie Marsland

      Hi Mio,

      Not quite – I’m suggesting that most websites don’t need all the functionality built into Divi, and most website won’t need 13 plugins, but will only need the plugins that their websites require (possibly no extra plugins depending on the website). The problem with Divi is that you have no choice, your website has to carry all that technical overhead regardless of what functionality you need.

      Make sense?

      Jamie

      1. In a way, yes. I would agree one doesn’t need all divi functionalities/modules. Although there are some cases I would use Block editors, I do find Divi better than Block editors for the most (in my case, at least). Unless you use some caching plugin, image compression plugin (or tool – like tinyjpg) etc, I don’t think any other theme will pass Google Core Web Vitals test.

        I must say, I have Permium versions of (almost) all major theme builders and plugins, Divi is in most cases still no1 option for complex websites, especially if more functionalities are required.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top