Introducing Components and Slots for Divi 5

Divi Components and Slots have arrived, introducing a completely new way to build reusable designs in Divi 5. 🎉

This is one of the most important updates to Divi since Variables and Presets!

Components are the evolution of Divi’s Global Elements. They retain the power of globally synchronized designs while giving you much more control over what stays global and what can be customized on each instance.

Detach settings from nested modules, add Slots for unique local content, edit Components from a dedicated interface, nest Components inside other Components, import and export them, and manage them using the Divi AI Agent.

There’s much to explore, so let me jump into the builder and give you the full tour. 👇

Components Are The Evolution Of Global Elements

Divi introduced Global Elements and selective synchronization nearly a decade ago. They made it possible to reuse elements across a website, update them from one place, and detach selected settings for local customization.

Components take that idea much further. They can contain complete layouts and nested Components, with selective sync extending through sections, rows, columns, groups, and modules. Slots introduce free-form areas for unique instance content, while improved attribute inheritance lets detached settings retain their global values until locally overridden.

Dedicated instance and Component editing modes make local and global changes easy to distinguish. Components can also be converted, managed, imported, exported, preloaded for faster editing, and controlled using the Divi AI Agent.

Together, these improvements transform Global Elements into a flexible system for building consistent, scalable, and reusable websites in Divi.

Customize Component Instances With Selective Sync

One of the most important improvements is support for selective sync throughout nested layouts.

You can detach individual attributes from modules anywhere inside a Component, including Components built from sections and all their contents.

Detach Attributes From Nested Modules

Imagine creating a reusable testimonial Component that includes Image, Icon, and Text Modules.

You may want its typography, spacing, colors, borders, sizing, and layout structure to remain consistent across the board. At the same time, every testimonial needs a different photo, name, and quote.

With Components, you can detach those individual attributes while keeping everything else connected.

Detach the content inside a Text Module, the image used by an Image Module, or any design setting that should vary between instances.

You decide what remains global and what becomes local.

Inherit Global Values Until You Override Them

Detached attributes now inherit their values from the source Component until you customize them locally.

Previously, unsyncing an attribute could leave it empty at the instance level. Now, local attributes sit on top of global attributes.

For example, you can detach a Button Module’s text while every instance continues to display the text defined by the Component. When you change the text on one instance, that local value overrides the global value on that instance alone.

Reset the local value, and it returns to inheriting from the Component. The source value is never erased.

Detach And Reattach Nested Modules

You can also detach an entire nested module from its parent Component.

Once detached, the module becomes editable at the instance level. Its settings can change freely without affecting the source Component or its other instances.

If you change your mind, attach the module again to restore its connection to the Component.

You can also detach an entire Component instance, preserving its current design while converting it into regular local modules.

Local And Global Settings Are Clearly Separated

Components introduce a dedicated editing experience that clearly separates instance-level customization from global Component editing.

You always know whether a change will affect the current instance or every connected instance across your website.

Edit Local Settings In Instance Mode

Opening an attached Component starts in instance mode.

The settings panel surfaces the attributes and child collections available for local editing. Globally synchronized settings remain hidden, reducing clutter and preventing accidental changes to the source Component.

If nothing is available for local editing, Divi explains that the settings are managed by the Component and gives authorized users a direct path to edit them.

Local changes are saved with the page and don’t affect other instances.

Edit Global Settings In Component Mode

Choose Edit Component from the settings panel header to enter Component editing mode.

This mode reveals the complete source settings, selective-sync controls, and Component information. Purple styling identifies synchronized values, making the editing context immediately clear.

Changes made here update the source Component and propagate to its connected instances. Save and Cancel controls protect unfinished changes when you close the panel or move elsewhere in the builder.

Build Unique Local Layouts With Slots

Components become even more powerful with the introduction of Slots.

A Slot is a new module that can be added inside a Component. The Slot’s position belongs to the synchronized Component, while everything placed inside it remains unique to each instance.

In other words, a Slot creates a free-form local area inside an otherwise global design.

Slots Allow Freeform Design Within A Synced Global Structure

Imagine creating a site-wide hero section Component in Divi 5. Its heading, description, image, button, background, spacing, and typography can remain globally synchronized.

To the right of the text, image, and button, you could add a Slot that creates a free-form content area within the hero section.

On one page, that Slot could contain an image collage. On the other hand, it could contain an Email Opt-in Module. Somewhere else, it could contain videos or an entirely different arrangement of modules.

Everything surrounding the Slot updates globally, while the content inside it remains tailored to each page. You get a consistent hero design across your site, with the freedom to create something unique in each instance.

A Component can contain multiple independent Slots, and Slots can contain other Components when they don’t create a circular relationship.

Components Are First-Class Citizens In The Divi Builder

Components now have a prominent place in Divi alongside other foundational systems such as Presets and Variables.

They are easier to create, find, insert, identify, edit, detach, and manage throughout the builder.

Create From And Convert To Existing Components

Turn any compatible Divi element into a new Component using Save As Component, and convert any local instance to an existing component.

Its design is saved to your library, and the element on the page becomes a connected instance. You can then reuse it across your website and manage all synchronized instances from a single source.

You can also convert an existing module into an existing Component of the same type.

Instead of deleting local content and manually inserting a Component, connect it directly to a reusable design from your library.

This makes it much easier to standardize an existing website. Convert repeated sections, rows, or modules into matching Components and maintain their shared designs from one place.

Manage Everything In The Components Manager

Divi now includes a dedicated Components Manager, similar to the Preset Manager and Variable Manager.

Browse your Components, reorder them, open them in the Component editor, rename them, duplicate them, delete them, and manage their portability from one central interface.

The Component editor provides a focused environment for updating a source design without first locating one of its instances on a page.

Nest Components Inside Other Components

Components can now contain other Components. 🤯

This lets you create larger systems from smaller reusable parts. A global header Component could contain separate Components for its logo, navigation, announcement bar, and call to action.

Each nested Component remains independently reusable and editable while participating in the larger design.

Nested Components also work inside Slots, allowing local layouts to reuse elements from your Component library.

Components, Presets, Variables, And Slots Work Together

Components fit naturally into Divi 5’s broader approach to building design systems.

Variables define reusable values such as colors, fonts, numbers, images, and text. Presets define reusable collections of element settings. Components define reusable elements and layouts while controlling what remains synchronized. Slots introduce unique content inside those Components.

Each system solves a different problem, and they become especially powerful when used together.

You could use Variables to define your brand colors, Presets to style your buttons, Components to build reusable call-to-action sections, and Slots to customize the content placed inside each instance.

The result is a much more composable way to build websites with Divi.

Import, Export, And Load Components Faster

Components are easier to move between websites, and they appear faster when you use them in the builder.

Import And Export Components

Layouts and canvases can include the Components they reference in the export. During import, Divi can recreate those Components and update their references for the destination website.

This keeps reusable designs together when you move complete pages or layout collections between websites.

You can also import and export Components directly from the Components Manager, just like Presets and Variables.

Nested Component relationships are preserved during Component imports, allowing complex reusable designs to travel together.

Load Components Instantly

Components used on the current page are now fetched before the Visual Builder renders. Their nested Component dependencies are loaded with them, allowing connected designs to appear immediately instead of waiting behind individual loading spinners.

After the builder loads, Divi also preloads up to 50 recently modified Components in the background.

That means the Components you are most likely to use are ready as you add them, resulting in a faster, smoother building experience.

Manage Components With The Divi AI Agent

The Divi AI Agent can now work directly with Components.

Ask the agent to add a Component to the page, turn an existing module into a new Component, convert a module to an existing Component, edit Component attributes, update selective-sync settings, duplicate a Component, or delete one.

You could ask the agent to turn a finished hero section into a Component, replace repeated modules with an existing Component, update a synchronized design, or decide which settings should remain locally editable.

The agent understands the difference between a Component’s source and its local instances, allowing it to make targeted changes without affecting the wrong content.

Combined with Divi’s upgraded AI models and quick tools, the new Component tools give you another powerful way to build and maintain websites with AI.

Try Divi Components And Slots Today

Components and Slots are now available in Divi 5.

Create a Component, detach a nested attribute, add a Slot, and see how easily global design and local content can work together.

Then open the Components Manager or ask the Divi AI Agent to organize and update your reusable designs.

If you are enjoying these updates, do us a huge favor by liking this video and leaving a comment. It means a lot to us to see you cheering Divi on, and it’s essential to feed the algorithm and spread the word.

Don’t forget to follow us on YouTube and subscribe to the Divi newsletter so you never miss an update. I’ll see you soon for another Divi 5 feature announcement, which I promise will be right around the corner. 😁

The post Introducing Components and Slots for Divi 5 appeared first on Elegant Themes Blog.

The Tech Zone