In previous versions, Divi relied on shortcodes—small snippets of code that acted as placeholders for design modules—enabling the Visual Builder to create complex layouts and styles from behind the scenes. But Divi 5 takes a different approach, reimagining this core process for even greater speed, flexibility, and performance. Read on to see how this shift is transforming the way designers build with Divi.
With the release of Divi 5, shortcodes are a thing of the past, as the framework has been completely rewritten from the ground up. This post explores how Divi’s new framework, designed similarly to Gutenberg blocks, delivers a more efficient and powerful experience than ever before.
What Are Shortcodes?
Shortcodes were designed to make it easier for users to add complex content and functionality to their websites without requiring long-form code. For instance, instead of manually coding an entire form or image gallery in HTML and CSS, users can insert a shortcode like [ gallery ], and WordPress will automatically generate the necessary elements when the page is rendered. The idea behind shortcodes was to make WordPress more user-friendly. These short snippets could run custom functions and render custom elements, which could be re-used throughout your website easily.
How Divi Used Shortcodes In The Past
Divi used WordPress’s native shortcode system to organize its builder elements, with each shortcode acting like a single building block in a larger design.
For example, when a user adds a button in the Visual Builder, behind the scenes, Divi inserts a shortcode for that button that defines all of its properties, like color, size, border-radius, etc. This makes it possible for people to build incredible layouts, but behind the scenes, Divi stacks shortcodes to define and render each element.
If you have ever disabled Divi and visited a page you built with the Divi Builder, you would have seen these shortcodes below.
Why Divi 5 Moved Away from Shortcodes
With WordPress shifting toward blocks and moving away from shortcodes, Divi has followed suit by eliminating shortcodes in Divi 5. This transition aligns Divi with WordPress’s future direction, as shortcodes are likely to be deprecated. While Divi 4 worked within the constraints of shortcodes, Divi 5 is built for the future, offering several key benefits for users:
Improved Performance
Shortcode-based pages are less efficient, as parsing a page with shortcodes lacks a clear hierarchy. In Divi 4, it took more time to process large blocks of shortcode content, and the speed at which WordPress rendered this content left room for improvement. By moving away from shortcodes, Divi 5 achieves significantly faster load times and improved performance.
Enhanced Versatility
Shortcodes weren’t designed for complex, nested designs, so Divi 4 had to work around their limitations when nesting modules within columns, rows, and sections. Adding further nesting options, such as columns within columns, posed even more challenges. Divi 5’s new storage format overcomes these restrictions, enabling infinitely nested elements for greater design flexibility.
Increased Stability
As an API, shortcodes have limitations. Their bracket-and-attribute structure for complex data is prone to errors, with a single misplaced character potentially causing system crashes. By adopting a new storage format, Divi 5 reduces the chance of bugs, leading to a more stable and reliable user experience.
Better Cross-Compatibility
Divi 5’s storage format is now similar to WordPress’s native blocks, facilitating better integration between Divi and Gutenberg. This overhaul required a complete rebuild of Divi’s architecture, but it strengthens Divi’s long-term viability and compatibility with WordPress’s block-based future.
The Shift To A Block-Based Visual Builder System
Recognizing the need for a more modern approach, Divi 5 has moved away from shortcodes in favor of a block-based approach aligned with WordPress’s future. Instead of relying on shortcodes, Divi 5 mimics WordPress’s block-based architecture. Removing shortcodes in Divi 5 is part of a larger push to make Divi faster, more flexible, and easier to use. By eliminating the old framework, Divi 5 delivers significant performance improvements.
In terms of flexibility, Divi 5 allows for more dynamic and scalable site-building capabilities. This modern new framework can easily be expanded and integrated with more complex features, which is impossible with Divi 4’s shortcode-based framework.
How Will Divi 5 Impact Existing Websites?
One of the primary concerns for long-time Divi users is how Divi 5 will affect existing websites built with Divi 4. Fortunately, this transition was carefully planned. While Divi 5 eliminates shortcodes for new site builds, current Divi 4 sites will remain unaffected. Divi 5 includes a migrator tool that will seamlessly convert Divi 4 shortcodes to Divi 5 blocks with the click of a button.
Divi 5 also supports backward compatibility, ensuring that websites continue to function smoothly, even before migration. If Divi 5 detects legacy shortcodes, it will automatically run in compatibility mode until content is migrated or any third-party modules are updated to support Divi 5.
Final
Thoughts
Divi 5: Faster, Cleaner, & More Flexible
Moving away from Divi 4’s shortcode-based framework marks a major advancement. Now is a great time to test the Divi 5 Alpha and explore its improvements firsthand.