Components are reusable modules, rows, and sections that stay in sync across your website. You build an element once, save it as a component, and use it on as many pages as you like. When you edit the component, every copy of it updates.
Components replace the global modules (global elements) from earlier versions of Divi. They do the same job, with a much more flexible way of letting individual pages differ from the original. This article explains how components work and links to the step-by-step guides for each part of the feature.
Try the Divi AI Agent
The Divi AI Agent can create components, save existing elements as components, convert matching elements to a component, duplicate them, and update their settings - the same jobs you do by hand in this article - from one sentence.
Open the Divi AI Agent from the Visual Builder sidebar, describe the result you want in plain language, and it inspects your page, makes the changes, and stops for your approval before anything destructive.
Prompt: Save the call-to-action section at the bottom of this page as a component named Footer CTA, then convert the other call-to-action sections on this page to that component.
The AI Agent is part of every Divi AI subscription. See The Divi AI Agent in Divi 5 to get started, and Approvals and Risk Levels in the Divi AI Agent to learn which component changes it asks you to confirm.
What's new compared to global modules
If you used global modules before, here is what changed:
New name, same idea - Global modules are now called components. Your existing global modules are components now, and you don't need to do anything to convert them.
Each page can change selected settings - The component decides which settings are shared and which settings each copy can change. A copy starts with the component's value and only differs where you change it. Previously, unsyncing a setting left it empty.
Selective sync works on sections and rows - You can choose which settings each copy can change on any element inside a section or row component, not only on a single module.
Detach part of a component - You can detach one module inside a component so it becomes fully editable on that page, then attach it again later.
A separate component editing mode - Opening a component's settings now edits that copy only. To change the component everywhere, you switch to component editing mode, similar to editing a preset.
Convert to Component - Turn an element on your page into a copy of an existing component of the same type.
The Components Manager - A new panel, like the Preset Manager, that lists every component on your site.
Import and export - Components travel with exported layouts, and you can import or export all your components from the Components Manager.
Slots - A new Slot module lets each copy of a component hold its own content.
Nested components - Components can be placed inside other components.
Faster loading - Components appear instantly in the builder instead of loading with a spinner.
How to create a component
You can save any module, row, or section as a component from the right-click menu.
Right-click on any module, row, or section.
Choose Save to Library.
Give it a name.
Enable the Save as Component option.
Click the Save To Library button.
You can also save elements as components by opening the element settings modal and clicking on the component icon
.
For more details, check the How to Create a Component in Divi 5 article.
How to recognize a component on the page
Components are easy to spot in the Visual Builder:
Their hover outline and action toolbar are purple.
In Wireframe view and in the Layers panel, they're shown in purple.
When you open a component's settings, the header shows the component's name instead of the module name, with a link icon in front of it.
Two ways to edit a component
When you open a component's settings, you can work in one of two modes:
Instance mode (the default) - You edit this copy only. The settings panel shows just the settings the component allows each copy to change. If there are none, you'll see the message: This component doesn't have any unsynced settings. All settings are currently managed at the global component level.
Component editing mode - You edit the component itself. The settings panel turns purple, shows every setting, and has Save and Cancel buttons at the bottom. When you save, you confirm that the change will update every copy across your site.
To switch to component editing mode, click the component's name at the top of the settings panel and choose Edit Component.
Check the How to Edit a Component in Divi 5 article for more information, including how to detach a copy from its component.
Let each page change some settings
By default, every setting in a component is shared. In component editing mode, you can mark individual settings as Make Editable on Instances. Each copy then shows those settings in instance mode, starting from the component's value. For example, you can share a call-to-action's design across the site but let each page set its own heading and button link.
You can also detach a single module inside a section or row component, so that one module becomes completely independent on that page, and attach it again later.
Check the How to Use Selective Sync With Components in Divi 5 articles for more information.
Give each copy its own layout with Slots
Sometimes you want the frame of a component to stay the same everywhere, but the content inside it to change from page to page. The Slot module handles this. Add a Slot inside a component, and whatever you place in that Slot on a page belongs to that page only.
Check the Slot Module in Divi 5 for more information.
Put components inside other components
A component can contain other components. For example, a pricing section component can contain a Button component. Each nested component stays linked to its own original, so editing the Button component updates it everywhere, including inside the pricing section.
A component can't be placed inside itself, either directly or through another component. Divi won't let you drop it there.
Manage all your components in one place
The Components Manager in the Visual Builder sidebar lists every component on your site, grouped by element type. From there, you can search, edit, duplicate, reorder, and delete components, and import or export them to move them between sites. Check The Components Manager in Divi 5 article for more information.
Who can work with components?
Creating, editing, and detaching components is controlled by the Edit Global Items permission in the Role Editor, along with the Divi Library permissions.
Users without it can't edit components or open the Components Manager.