Every component on your site has two levels: the component itself, which is shared across your whole site, and each instance, which is a single copy of it on a page. Divi 5 gives you a separate editing mode for each, so you always know whether a change affects one page or every page.
This article explains the difference between instance mode and component editing mode, how to edit and save a component, and how to detach a copy when you want it to stop following the component. For an overview of the feature, see Components in Divi 5.
Instance mode and component editing mode
When you open a component's settings, the settings panel always starts in instance mode.
Instance mode - You are editing this copy only.
The header shows the component's name, with a purple link icon in front of it
.Only the settings the component lets each copy change are visible. Tabs and option groups that have none are hidden.
If the component doesn't let copies change anything, you'll see: This component doesn't have any unsynced settings. All settings are currently managed at the global component level. Click the Edit Component button below it to switch to component editing mode.
Component editing mode - You are editing the component itself.
The settings panel switches to a purple color scheme.
Every setting is visible, including presets.
A Component Settings group appears at the top of the Content tab, with a Component Title field you can use to rename the component.
Each setting has a small link icon
next to its label. Use it to decide whether copies can change that setting. Check the How to Use Selective Sync With Components in Divi 5 article for more information.Save and Cancel buttons appear at the bottom of the panel.
Choosing which settings each copy can change is covered in its own article. This one focuses on editing the shared component.
Edit the component from the page
Open the settings of any copy of the component on your page. If the component is a section or row, you can also open the settings of any module inside it.
Click the component's name at the top of the settings panel. Its tooltip reads Manage Component.
Choose Edit Component. You can also click on the component you want to edit to select it and click the Edit Component button. The panel switches to component editing mode.
Make your changes. You can change any setting and add, move, or remove elements inside the component.
Click Save at the bottom of the settings panel. It stays greyed out until you've changed something.
A confirmation appears: This will update all instances across your entire site.
Click the Confirm button.
Divi saves the component and returns to instance mode. Every copy of the component, on this page and every other page, now shows your changes.
To leave without saving, click Cancel. Everything you changed since you clicked Edit Component is undone.
Note: If you click somewhere else on the page, close the settings panel, or open another panel while you have unsaved component changes, the same confirmation appears. Click Confirm to save them, or Cancel to throw them away.
Pro Tip: You can also edit a component from the Components Manager, which opens it in a separate preview instead of on your page. Check the Components Manager in Divi 5 article for more information.
Undo and redo while editing a component
While you are in component editing mode, Divi keeps a separate undo history for the component. The first step in it is Loaded Component. CMD/CTRL + Z and CMD/CTRL + Shift + Z only step through your component changes, not your page changes. This history is cleared when you save or cancel.
Changing the structure of a component on a page
⚠︎ Important: Adding, moving, duplicating, or deleting elements inside a component on your page changes the component itself, even when you are not in component editing mode. The change is saved to the component straight away and shows up on every page that uses it, without a confirmation. Only settings can be different per page.
If you want each page to have its own content inside a component, add a Slot module to the component. Whatever you put in a Slot belongs to that page only. Check The Slot Module in Divi 5 article for more information.
Detach a copy from its component
Detaching turns a component instance back into a regular element. It keeps exactly how it looks right now, but it stops following the component, so future changes to the component no longer reach it. Other copies on other pages stay linked.
Use the right-click menu:
Right-click the component on the canvas.
Choose Detach Component.
Or use the settings panel:
Open the component's settings.
Click the component's name at the top of the settings panel to open the Manage Component menu.
Choose Detach from Component.
The purple highlight disappears, and the element is now a regular module, row, or section that you can edit freely.
Note: To link the element to a component again, open its settings, click its name, and pick a component under Convert to Component. Check the How to Create a Component in Divi 5 article for more information.
Detaching one module inside a component works differently. It keeps the module in place inside the component but lets you edit it freely on this page, and you can attach it again later. Check the How to Use Selective Sync With Components in Divi 5 article for more information.