We’re back with another Divi 5 sneak peek, and this one introduces two upcoming features that will fundamentally improve the way you build reusable designs in Divi: Components and Slots.
Components are a reimagining of Divi’s existing Global Elements. They retain the power of globally synchronized elements while introducing a much more flexible system for controlling what stays global and what can be customized on each instance.
You can detach individual settings from modules nested inside a Component, making those settings editable at the instance level while everything else remains globally synchronized. You can also add Slots, which create free-form areas inside Components where unique content can be built for each instance.
We’re also giving Components a much more prominent place in the builder, alongside systems such as Presets and Variables, with new interfaces for creating, managing, editing, using, and detaching Components.
The following video covers it all. Let’s take a closer look. 👇
Components Are The Evolution Of Global Elements
Divi was ahead of its time when we introduced Global Elements and selective synchronization nearly a decade ago. The ability to reuse elements across your website, keep them globally connected, and selectively detach individual settings gave Divi users a powerful way to build more consistent and maintainable websites.
Now, it’s time to take that concept to the next level.
Detach Nested Attributes For Instance-Level Editing
One of the most important additions to Components is the ability to detach individual attributes from modules nested inside the Component.
Imagine creating a reusable testimonial Component that includes an image module, an icon module, text modules, and other design elements.
You might want the Component’s typography, spacing, colors, borders, sizing, and layout to remain synchronized globally. At the same time, every testimonial needs a different photo, name, job title, and quote.
With Components, those individual attributes can be detached.
Once an attribute has been detached, it becomes editable at the instance level. The rest of the Component remains connected to the global Component definition.
For example, you could detach:
- The text inside a Text Module.
- The image used by an Image Module.
- A Button Module’s link URL.
- A background image or background color.
- Specific design settings that should vary between instances.
You decide which attributes remain global and which attributes become local.
This gives Components a much more practical balance between global synchronization and instance-level customization.
Local And Global Settings Are Clearly Separated
We’re also updating the Divi Builder interface to make the distinction between local and global Component settings much clearer.
When editing a Component instance, the settings panel will surface the attributes that have been detached and are available for local editing.
These settings are unique to the current instance.
The globally synchronized attributes remain separate from local settings and are edited directly in the Component.
This makes it immediately clear which changes will affect only the current instance and which changes will affect every instance of the Component across your website.
When you enter Component editing mode, you can work with the global structure and settings without mixing them with instance-specific values.
Components Become First-Class Citizens In The Divi Builder
Components are also getting a dedicated place in the builder interface.
Rather than treating global elements as an extension of the existing module workflow, this update elevates Components alongside other foundational features such as Presets and Variables.
The new Component interface will make it easier to:
- Create Components from existing Divi elements.
- Find and insert Components while building.
- Identify Component instances on the page.
- Manage detached attributes.
- Detach a Component instance when you no longer want it synchronized.
- Convert existing elements to existing components.
The goal is to make reusable design a core part of the Divi 5 workflow, rather than something hidden behind individual element settings.
As websites become larger and design systems become more sophisticated, Components will provide a much better foundation for building and maintaining reusable layouts.
The Upcoming Slot Module
Components become even more powerful with the introduction of Slots.
A Slot is a special module that can be added inside a Component. The Slot itself is part of the globally synchronized Component, but the content placed inside it is unique to each Component instance.
In other words, a Slot creates a free-form editable area inside an otherwise global Component.
For example, imagine creating a site-wide call-to-action Component. The heading, description, background, spacing, typography, and overall layout could remain globally synchronized, ensuring every instance shares the same design and messaging.
Within that Component, however, you could add a Slot specifically for the call to action.
On one page, the Slot might contain a Button Module. On the other hand, it could contain an Email Opt-in Module. Somewhere else, it could contain a Contact Form or an entirely different collection of modules.
Everything surrounding the Slot remains part of the global Component and updates everywhere at once, while that one designated area can contain something uniquely suited to each instance.
The Component defines what stays consistent. The Slot defines where you’re free to build something unique.
Components, Presets, And Variables Work Together
Components also fit naturally into Divi 5’s broader approach to building design systems.
- Variables let you define reusable values.
- Presets let you define reusable sets of element settings.
- Components let you define reusable collections of elements and determine which parts remain synchronized.
- Slots let you introduce unique content within those Components.
These systems solve different problems, and they become especially powerful when used together.
The result is a much more composable way to build websites with Divi.
0 Comments