Divi Layouts in Gutenberg Are Great! Until…

by | Jan 9, 2020 | Web Design | 0 comments

Elegant Themes just announced that Divi Layouts can now be inserted into a page using the Gutenberg editor (or, now just called the WordPress Block Editor).

While this is exciting on its face, and I’m not discouraging anyone from using it, make sure that you understand the implications of what is going on behind the scenes.

The biggest issue that may come back to bite people, particularly bloggers, in the future is Divi’s use of shortcodes. Whenever you insert a Divi module, column, row, or section, and you save the page, you’re committing to the database one or more shortcodes.

Shortcodes are keywords and other parameters between square brackets [] that instruct the Divi layout engine (the theme) to insert a block of HTML, JS, CSS, and other effects into that spot in the rendered page.

WordPress maintenance cycle

Gone are the days of clicking “Update” and hoping for the best. Let Webidextrous manage your maintenance. We’ll give you back your time and peace of mind.

Those who don’t like Divi are against using it for this reason. Their argument is that if you ever want to switch your theme to a new theme, you’ll have these shortcodes to contend with. You’ll have to strip them out and replace them.

I’ve long said that this is not a problem if you’re redesigning a whole site. It’s also not a problem if your whole site design is exclusively Divi (no Gutenberg) and you use Divi again for the new site.

That’s because even though you can instantly switch themes in WordPress it doesn’t mean you should. Whole-site redesigns, if done correctly, are usually comprehensive in scope, with massive changes to both look and feel and the content. So, your new look and feel will never come close to resembling your initial design. You’ll likely redesign your site, reintegrate or rewrite your content into its new look and feel. No need to worry about the old shortcodes. There’ll be new ones in the new design.

The problem of using Divi layouts in Gutenberg is that when you need to move your pages and posts via exporting and importing to a new site that doesn’t use Divi as its theme, you’re gonna have a bad time.

If you insert Divi layout elements into your content using Gutenberg as the primary visual editor, Divi’s shortcodes will stick with your content. When you export that content and import it into another site, if the new site isn’t Divi-based, those shortcodes will be displayed in the post rather than the Divi-formatted content and UI elements they’re supposed to render.

Blog Post on a Site Designed in Divi with Divi Layout Inserted in Content via Block Editor

Divi Layouts in Gutenberg Are Great! Until... 1

Blog Post on a Site Designed in Twenty Twenty with Imported Divi Layout Content

Divi Layouts in Gutenberg Are Great! Until... 2

Again, I’m not telling you not to use Divi Layout blocks. Just be certain that you’ll be sticking with Divi for a long time, or that you have a shortcode removal plugin and a plan for dealing with the design changes that will occur under a new theme.

The following two tabs change content below.
Rob Watson is the CEO of Webidextrous, a web consultant, and a developer. Beginning in 1996 as a self-taught web designer, he has created websites for everyone from small business owners to multi-national companies. He is the co-organizer of the West Orlando WordPress Meetup and a WordCamp speaker.


Submit a Comment

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



  • Web Design (10)
  • WordPress (10)
  • Hosting (7)
  • Search Engine Optimization (7)
  • Social Media (7)
  • Customer Service (6)
  • Digital Advertising (4)
  • Website Performance (4)
  • Website Security (4)
  • Accessibility (3)
  • Reset


  • wordpress (17)
  • web design (10)
  • SEO (7)
  • customer service (6)
  • security (6)
  • social media (6)
  • digital advertising (4)
  • hosting (4)
  • pricing (4)
  • reputation management (4)
  • Reset

post author

  • Rob Watson (102)
  • Matt Lee (1)
  • Reset

post type

  • post (73)
  • page (30)
  • Reset