Divi 5 is our most exciting iteration yet. It includes modern CSS Grid and Flexbox layouts. It uses tokenized values via Design Variables. It also allows you to cascade related styles with Element and Option Group Presets.
The Divi 5 Design System, available exclusively during this Cyber Monday sale, provides a production-ready framework that demonstrates these capabilities through hundreds of presets, designed section layouts, and a structured variable system.
Building a page with the Design System allows you to assemble pre-built components that already incorporate Design Variables and Presets. This is like Wireframing with easy editing access to Design Variables and Presets, so you can make the system your own as you go along.
This post walks through building an About page using Design System components, then demonstrates how to customize the design through preset modifications and variable adjustments. If you are still struggling to use Divi 5 effectively, this system offers a hands-on approach to learning from best practices.
With the Loop Builder feature in Divi 5, you can easily create a responsive grid using the free version of Advanced Custom Fields (ACF). In this post, we’ll demonstrate how to configure ACF, set up CSS Grid, and use the Loop Builder to build a team portfolio grid in well under an hour.
If you haven’t already, head over to the Elegant Themes Members’ Area and download the latest Divi 5 Beta so you can follow along with the tutorial.
What Is Loop Builder?
Divi 5’s Loop Builder is a feature that enables you to create dynamic, repeatable layouts directly in the Visual Builder or Theme Builder. This removes the limitations of Divi’s standard Blog and Portfolio Modules. Unlike traditional modules, the Loop Builder provides full control over queries and designs for virtually any content type.
You can loop through posts, terms, users, or custom post types — like projects, or in the case of this tutorial, team members — pulling in dynamic data effortlessly. Style just one card in the Loop, and every additional item automatically inherits that design, saving hours of manual tweaking. Incorporate Flexbox and CSS Grid for advanced layouts, such as masonry grids and carousels (using the Group Carousel module), to achieve perfectly symmetrical arrangements. It works seamlessly whether you’re building on a page in the Visual Builder or globally in the Theme Builder, making it ideal for scalable, maintainable sites.
As a website grows, small styling differences, such as a border radius on a button or spacing in a heading, begin to appear across pages. Fixing them means repeating the same changes over and over. We introduced Presets a while ago and continued to build upon the system. Divi 5 now takes it further with Nested Presets, providing a smarter way to bundle and update styles in a few clicks.
For the purpose of this post, we will focus solely on Nested Presets, with a separate article covering Stacked Presets. We’ll explain what Nested Presets are, how they build on Divi 5’s Preset system, and provide a step-by-step guide on how to use them.
If you haven’t already, download the latest Divi 5 Public Beta to follow along. Let’s get started.
Every website owner wants an accessible website, but it often takes work and some research. While the average user can navigate a website without supporting technologies, many people, including potential customers and fans, rely on an unseen layer of your website.
Screen readers and other assistive technologies tap into this unseen layer (i.e., machine-readable signposts) to interpret your content correctly. Visual design alone doesn’t communicate function or relationships to users who rely on these tools.
ARIA attributes (Accessible Rich Internet Applications) solve this problem by adding semantic meaning to HTML elements. They tell assistive technologies what something is, what it does, and how it relates to other elements on the page. Divi 5‘s Custom Attributes feature makes implementing ARIA straightforward, and we’ll show you how.
Building layouts in Divi continues to become more advanced and intuitive. You can now place modules inside other modules with Nested Modules. You can also put rows inside rows; these are called Nested Rows.
Both give you more design freedom, and both sound pretty similar when you first hear about them. However, they operate at different levels and fulfill different needs. In this post, we’ll show you the difference and help you pick the right feature when building your websites with Divi 5.
Understanding Divi 5’s Nested Features
Nested Modules and Nested Rows both expand our design options in Divi 5, but they work in different spots within our layout structure. Before we compare these two features, let’s look at what each one does and which controls help you choose the right tool while building.
Receive the latest WordPress, Divi, SEO and design news in your inbox for FREE from Web Design Solutions Unleashed.
We use cookies to ensure that we give you the best experience on our Web site. If you continue to use this site we will assume that you are happy with it.
