Exploring Divi 5's New Features

New flexbox options are available for everything. You can control layout wrapping, direction, ordering, spacing, child element positioning, and more—no hacks, no JavaScript, no mess, just intuitive controls that work wonderfully.
For more information, check out the Flexbox Layout documentation.
​

CSS Grid is a new layout system being integrated into Divi, allowing for more efficient arrangement and alignment of items within containers. It is available for Sections, Rows, Columns, and Module Groups.

For more information, check out the CSS Grid Layout documentation.

The Loop Builder is a tool that lets you display a loop of content from your website’s database (like posts, products, categories, and authors) and customize the design of each item in the loop. This allows you to create post-based content, such as custom blog feeds, product lists, event calendars, course lists, category pages, and more.
For more information, check out the Loop Builder documentation.
​

Unlike other carousels, each slide in the Group Carousel is a blank canvas; you can add any module to each slide to create any carousel or slider. You control the number of slides, the content of the slides, and other animation settings. Since groups can be styled using Divi’s wide range of design settings, you can craft unique styles and transition effects.

For more information, check out the Group Carousel module documentation.

The new Lottie module makes it easy to add Lottie animations to your website and control their animations and interactions. Lottie animations are great because they are JSON and SVG-based, making them lightweight and pixel-perfect.
For more information, check out the Lottie module documentation.

The Icon List module is a simple addition that fills a small void in Divi’s most basic modules. It makes creating lists and assigning unique icons to each item easy.
For more information, check out the Icon List module documentation.
​

Divi 5 now comes with seven pre-defined breakpoints that cover every type of device, and you can customize the width of each breakpoint, giving you control of your design at every size. It’s fast, it’s easy, so let me show you how it works.

For more information, check out the Customizable Breakpoints documentation.

Option Group Preset leverages reusable styles to manage your website’s design system. You can turn Divi’s option groups into presets and apply them to any element. Option Group Presets are unique because they are not module-specific, allowing them to be mixed and matched across all elements. If you want to use the same background, border, or title text style across multiple elements, you no longer need to design those elements repeatedly.

For more information, check out the Option Group Presets documentation.

The Advanced Units system includes a new multi-functional unit field that supports the full range of CSS units, functions, and variables. It supports all CSS units, including unitless values such as unset and fit-content. It functions such as clamp() and calc(), making creating responsive designs with fluid typography easier than ever. You can also define CSS variables and reference them throughout your designs.
For more information, check out the Advanced Units documentation.
​

Design Variables for Divi 5 is a new system that will significantly improve Divi’s design workflow and give you a serious leg up over other builders. You can define variables for anything, such as colors, fonts, numbers, images, and text, and plug them into Divi elements and presets. When you update a variable, your website’s design and content change.
For more information, check out the Design Variables documentation.
​

You can add rows inside rows. When you click the plus button inside a column, you’ll notice a new row tab where you can select from Divi’s premade row templates. You can set rows alongside modules and keep nesting rows inside rows to create advanced layouts.
For more information, check out the Nested Rows documentation.

The Group module is a new container in Divi’s layout hierarchy of Sections, Rows, Columns, and now Groups. Groups can be added inside columns to group modules and put them into a shared container. Once grouped, your modules can be duplicated, dragged, dropped, styled, and managed as a single element.
For more information, check out the Group module documentation.

The Attributes Management system allows you to selectively or collectively copy, paste, and reset attributes across elements. You can copy styles, presets, and content from one element and paste them onto another. You can copy attributes at the field or group levels and paste them at the element level. You can even selectively manage group-level attributes via the right-click menu, allowing you, for example, to reset certain aspects or parts of an element.

For more information, check out the Attribute Management documentation.
​

Divi modules have a lot of settings, and we’re only going to add more over time. Clicking through tabs and groups and scrolling through settings to pinpoint one setting you need to change can be cumbersome. That’s not unique to Divi; that’s the case with every page builder! Settings Search & Filtering eliminates that frustrating task you probably perform hundreds of times daily.

For more information, check out the Settings Search and Filtering System documentation.
​

Extend Attributes can take any attribute or collection of attributes and propagate them through your page to make sweeping changes instantly. Right-click on any element and select the Extend Attributes option to choose which attributes you want to extend, whether styles, presets, or content, and where and to which elements you want to extend them.
For more information, check out the Extend Attributes documentation.
​

The new Find and Replace system, which requires only a few clicks, lets you swap dozens of static font instances with a new title font variable created using Divi 5’s design variable system. Using Find and Replace is an excellent way to remove static fonts and colors and replace them with variables.

For more information, check out the Find and Replace documentation.
​

The Relative Colors & HSL system allows you to manage and define colors as variables. On top of that, you can create different color variations based on a primary color by changing/setting the hue, saturation, lightness, and opacity using HSL. When the base color is adjusted, all colors that are based on the base color change automatically, retaining their color relationships and keeping the entire website’s color palette in perfect harmony.

For more information, check out the Relative Colors & HSL documentation.

The Interactions System is a robust system for creating interactive elements such as popups and toggles, and creative scroll-based and mouse-movement-based effects.
For more information, check out the Interactions documentation.

The new responsive editor allows you to quickly make responsive changes to a specific design option without having to move your mouse to the top of the screen to switch view modes and make responsive changes. In fact, you don’t need to switch view modes at all. Click the new responsive editor icon and adjust values across all view modes simultaneously. It’s especially helpful when you already know the values you want to use, which is often true when using Divi 5’s design variable system.
For more information, check out the Responsive Editor documentation.

Attributes play an essential role in accessibility. While Divi can add baseline attributes for elements, it can’t always predict how you will use each module or the content of each element on your page. With the new custom attributes system, you can always define the characteristics you need to ensure screen readers can understand your content.
For more information, check out the Custom Attributes documentation.