By default, every setting in a component is shared, so every copy of it looks exactly the same. Selective sync lets you choose individual settings that each copy can change on its own.
For example, you can keep a call-to-action's design identical across your site but let each page use its own heading, text, and button link.
This article shows you how to choose which settings are shared, how those settings behave on each page, and how to detach a single module inside a component when you need full control over it. For an overview of the feature, check the Components in Divi 5 article.
How selective sync works
Each setting in a component is either:
Synced
- The setting comes from the component. It's hidden on each copy, and changing it in the component updates every copy.Editable on instances
- Each copy can set its own value. Until you change it on a copy, that copy uses the component's value.
The second point is new in Divi 5. A setting you make editable doesn't start out empty. It starts with the component's value, and a copy only differs from the component where you actually change something. If you later change that setting in the component, every copy that hasn't changed it updates too.
Make a setting editable on each copy
You choose which settings are editable while editing the component itself.
Open the settings of a copy of the component.
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.
Find the setting you want to unsync.
Hover over its label and click the small link icon
next to it. Click on it to deactive/activate the sync of that setting.Repeat for any other settings.
Click Save, then Confirm.
The settings you chose to be unsync now appear in instance mode on every copy of the component. Option groups and tabs that contain no editable settings stay hidden on the copies.
To share a setting again, go back into component editing mode and click the same icon
. Its tooltip now reads Use Component Value.
Note: Selective sync is set one setting at a time. There's no switch for a whole option group. An option group appears on the copies as soon as at least one of its settings is editable.
Change an editable setting on a page
Open the settings of the copy you want to change. The panel opens in instance mode and shows only the editable settings.
Change the value. Each field already shows the component's value, so you can adjust it instead of starting from scratch.
Save your page as usual.
Only this copy changes. To go back to the component's value, reset the setting with its reset icon or from the right-click menu.
Note: On a component copy, right-click actions such as Reset, Paste, and Extend Attributes only affect that copy, never the component.
Let each copy have its own items
Modules with a list of items, such as the Accordion and Tabs modules, have an extra option. In component editing mode, the item list has its own link icon. Its tooltip reads Make Editable on Instances.
Turn it on, save the component, and each copy gets its own item list. You can then add, remove, and reorder the items on each page separately, while the module's design stays shared.
Selective sync inside sections and rows
Selective sync works on every element inside a section or row component, not only on the top-level element. Each module, row, and column inside it can have its own editable settings.
Open the settings of the module inside the component that you want to change.
Click its name at the top of the settings panel and choose Edit Component. Divi puts the whole component into editing mode.
Click the link icon next to the settings you want to make editable.
Click Save, then Confirm.
Now, on every page, you can open that module's settings and change just those settings.
Detach a module inside a component
Sometimes one module inside a section or row component needs to be completely different on a particular page. Instead of making dozens of settings editable, you can detach that module.
Click on the component that contains the module you want to detach.
Click the Edit Component button in the component's settings panel.
Expand the Elements option Group.
Click the sync/unsync icon
for the module you want to detach.
You can also open the module's settings, click its name at the top of the settings panel, and choose Detach from Component.
A detached module:
Stays in the same place inside the component.
Shows all of its settings on this page, and every change you make applies to this page only.
No longer receives changes made to it in the component.
Can't be moved, duplicated, or deleted on its own, because its position is still part of the component.
Detaching only affects this one copy of the component. The same module on other pages stays linked.
Note: Detach from Component isn't available while you are in component editing mode. On the component's top-level element, the right-click option is Detach Component instead, and it detaches the whole copy. Check the How to Edit a Component in Divi 5 article for more information.
Attach a module again
Click on the component that contains the module you want to reattach.
Click the Edit Component button in the component's settings panel.
Expand the Elements option Group.
Click the sync/unsync icon
for the module you want to reattach.
The module takes the component's current settings again. Your page-only changes are kept only for settings that are editable on instances. Changes you made to any other setting while it was detached are discarded.
Pro Tip: You can undo detaching or attaching a module with CMD/CTRL + Z. It appears in your history as Changed Component Module Attachment.