A component is a module, row, or section that you save once and reuse across your site. Every copy stays linked to the original, so a change to the component updates every page that uses it. Components replace the global modules from earlier versions of Divi.
This article shows you the ways to create a new component, and how to turn an element that's already on your page into a copy of a component you've saved before. For an overview of the feature, see Components in Divi 5.
What can become a component?
You can save these elements as components:
Any module (except the Post Content module)
A row
A section
Columns can't be saved as components on their own. To reuse a column, save the row that contains it.
Save an element as a component from the right-click menu
Right-click the module, row, or section you want to reuse and choose Save To Library. You can also hover over the element, click the three dots icon, and choose Save to Library.
Give the component a name. Pick a clear one, because this name is how you'll find the component later.
(Optional) Add it to one or more categories or tags, or create new ones.
Turn on the Save as Component option.
Click Save To Library.
The element on your page is now a component instance. Its outline and toolbar turn purple, and the settings panel header shows the component's name.
Note: Components are saved to your site's Divi Library.
Save an element as a component from its settings panel
Open the settings of the module, row, or section.
Click the element's name at the top of the settings panel. Its tooltip reads Manage Component.
Choose Save as Component.
The Save To Library window opens with Save as Component already turned on. Give the component a name and click Save To Library.
Create a component in the Divi Library
You can also build a component from scratch, outside of any page.
Go to WordPress Dashboard → Divi → Divi Library.
Click Add New.
Give it a name and choose its type: Module, Row, or Section.
Check Save as Component.
Click Submit, then Edit With The Divi Builder to build it.
In the Divi Library list, the Component column shows which items are components. Use the Scope filter (All Scopes, Component, Not Component) to show only components.
Convert an element to an existing component
Already have a component and a page with a similar element on it? You don't need to delete the element and re-add the component. You can convert it in place.
Open the settings of the element you want to convert.
Click the element's name at the top of the settings panel to open the Manage Component menu.
Under Convert to Component, click the component you want to use.
The element is replaced by a linked copy of that component, and its settings panel reopens on the new instance.
Keep these points in mind:
Only matching components are listed. A Button module can only become a Button component, a row can only become a row component, and a section can only become a section component.
The element takes the component's settings. Your element's own design and content are replaced by the component's. Settings that the component lets each copy change (check the How to Use Selective Sync With Components in Divi 5 article for more information) keep the values your element already had.
You can switch an instance to another component. On an element that's already a component instance, the same list lets you swap it for a different component of the same type.
You can undo it. The conversion is added to your history as Converted to Component, so CMD/CTRL + Z brings the original element back.
If the Convert to Component list doesn't appear, there are no saved components of the same type yet.
Add a component to a page
You add a component the same way you add any saved Divi Library item. Click the Add Section, Add Row, or Add Module button, open the Add From Library tab, and pick the component. See How to Import Elements from Divi Library to a Page in Divi 5 for the full steps.
You can also add a component inside another component. For example, you can save a Button as a component and use it inside a Call to Action section component. A component can't be placed inside itself, either directly or through another component, and Divi won't let you drop it there.
Note: Creating, editing, and detaching components need the Edit Global Items permission in the Role Editor. Users without it can't edit or detach components.