The Components Manager is a central place in the Visual Builder that lists every component on your site. It works like the Preset Manager: you can search and filter your components, edit one in a separate preview without touching the page you are on, duplicate it, reorder it, delete it, and import or export your whole component library.
If you are new to components, start with Components in Divi 5 to learn what they are and how they differ from the old global modules.
How to open the Components Manager
Open any page in the Divi 5 Visual Builder.
In the left sidebar, click the Components Manager icon
. It sits right after the Preset Manager icon.The Components window opens. Click the icon again to close it.
The window can be dragged, resized, expanded, and docked in the sidebar, like the other Visual Builder panels.
Note: The Components Manager icon only appears for users who are allowed to use and edit Divi Library items. If you don't see it, check your role's Library permissions in the Role Editor. You can also hide the icon yourself from Workspace Settings → Sidebar Icons → Components Manager.
How components are organized
Components are grouped by element type. Each group is named after the module it holds (for example, Button or Blurb), and there is one group for Rows and one for Sections. Groups are sorted alphabetically.
Click a group to expand it. Only one group is open at a time.
Use the Search components... box to find a component by its name or by its module type. Every group with a match opens automatically.
Use the filter dropdown next to the search box to show a single element type.
What you can do with each component
Edit Component
- Opens the component in a separate preview so you can change it (see below).Duplicate Component
- Creates a copy with the same name followed by Copy. Use it as a starting point for a variation.Delete Component
- Removes the component from your site (see Delete a component below).
You can also drag components up and down to reorder them within their group. The order is saved for the whole site.
Note: Some components are marked as read-only. Their Edit and Delete buttons show This Component is read-only. and can't be used, and their group can't be reordered.
Edit a component from the Components Manager
Editing from the Components Manager works like editing a preset from the Preset Manager. The component opens in a preview, away from the page you are working on.
Open the Components Manager.
Find the component and click the Edit Component icon
.A Component Preview window opens and shows the component at desktop width. Its settings open next to it, already in component editing mode.
Change the settings you want. To rename the component, use the Component Title field in the Component Settings group at the top of the Content tab.
Click Save at the bottom of the settings panel. The button stays greyed out until you change something.
A confirmation appears: This will update all instances across your entire site. Click Confirm to save.
Click Back To Components Manager to close the preview and return to the list.
Clicking Cancel instead of Save throws away your changes. Your current page is never changed by the preview, but any copies of the component already on the page update as soon as you confirm.
Note: If you were in Wireframe view, the builder switches to Desktop view while the preview is open.
You can also edit a component straight from the page. Check the How to Edit a Component in Divi 5 article for more information.
Delete a component
In the Components Manager, click the Delete Component
icon on the component you want to remove.A confirmation appears: Are you sure you want to delete the component "Component Name"? Existing instances may no longer render. This action cannot be undone.
Click Delete.
⚠︎ Important: Deleting a component does not convert or remove its instances. Pages that use it may stop showing it. Before you delete a component, replace or detach it on the pages where it's used.
Import and export components
You can move your components to another site in the same way you move presets and variables. Click the Import & Export Components icon
in the header of the Components window to open the Import & Export window. It has two tabs: Export and Import.
Export components
Click the Import & Export Components icon.
Stay on the Export tab.
(Optional) Change the Export File Name. It's All Components by default.
Click Export Components.
A .json file downloads. It contains every component on your site, plus the presets, global colors, and variables they use. Components nested inside other components are included automatically.
Import components
On the other site, open the Components Manager and click the Import & Export Components icon.
Click the Import tab.
Select the
.jsonfile you exported.Under Import Options, leave Import Presets checked if you also want the presets that come with the components.
Click Import Components.
Note: If the site already has a component with the same name and the same element type, Divi keeps the existing one and reuses it. It doesn't overwrite it or create a duplicate.
Components travel with your layouts
When you export a page layout, any components it uses are bundled into the file automatically, including nested ones. When you import that layout, an Import Components option appears and is checked by default, so the components arrive with the layout and stay linked. If a component can't be matched on the new site, the element is added as a regular, non-component element instead.
Faster loading
Components no longer load with a spinner. The components used on the page you are editing, including those in your Theme Builder header, body, and footer, are loaded before the Visual Builder opens. Up to 50 of your most recently edited components are also loaded in the background, so they appear instantly when you add them to the page or open them from the Components Manager.