Using Selective Sync In Divi

Select which part of the global library item you would like to sync.

Sync Only Parts Of A Global Library Item

Selective Sync allows you to save individual settings when saving a new global library item. You can choose to selectively sync any or all of the Content, Design, or Advanced tabs. For example, if you save a new module to the library as a global item, you can edit the settings to only sync the Design Settings, then only these settings will be added to the library. This is especially useful if you are delving into the Design or Advanced Tabs, and would like to use your unique styles for multiple modules on your website while at the same time adding unique content in the Content tab for each.

A simple example would be to create a uniquely-styled Header Module that is added to every page on your website. In this example you may want to have a unique combination of Design Settings shared across your entire website, but at the same time you need to be able to add unique title text to each module to represent the current page. In this example, choosing to selectively sync only the Design Settings makes the most sense.

Using Selective Sync

Using the Visual Builder, save a new item to your library and check the box to make it a global item. Then click to edit the settings of your module. You will see a small sync icon to the left of all the options within the Content, Design, and Advanced tabs. Click this icon to enable or disable the option to selectively sync any or all of the settings for the current global library item and click save. Only the options that you have selected will be editable within the library. When you add the global library item to your page, only the settings you have checked to be synced will be present.

Whenever you edit a global module, you can easily identify which options are currently being synced by the green color of the sync icon. Icons that are green are options that are currently being synced within the global module. Red means the item isn’t synced. Options edited with the green (enabled) sync icons are shared by all instances of the global item.

The Power of Selectively Sync

Using Selective Sync in combination with global modules can be extremely powerful. Let’s dig a little deeper. Let’s say you have a Fullwidth Header module at the top of all of your pages. This is quite common. Each header module has a different title in the “Content” settings to represent the current page. You have also used the “Design” settings to give your header a unique look by adjusting the title font style to Bold & All Caps, and you have increase the Custom Padding on the top and bottom of the header to make the header module larger. You want all of you header modules on each page to use this unique style, but you need each page to have unique titles. In this case, you can create a Global Fullwidth Header module and choose to selectively sync only the options in the “Design” tab. Now whenever you add this global module to a new page, the “Design” settings will be synced, but your “Content” settings will remain unique for the current module.

If you ever want to change the style of the headers on all your page, you can modify the synced “Design” settings shared by these global modules and the changes will be reflected on every single page that global header has been used! Wow, that saves you an incredible amount of time!

This same theory could be applied to the “Advanced” tab as well. Let’s say that you have created a Slider Module and used the “Advanced” tab to apply a unique animation to the slider’s button. You want to use this new unique animation on all of the Slider Modules on your website. In this case, you can create a new Global Slider Module and selectively sync the “Advanced” settings which include your custom CSS animation. Add this slider to your page and adjust the “Content” and “Design” settings freely, while keeping your unique Custom CSS synced across the entire series of modules. If you ever want to adjust the “Advanced” settings for this series of global modules, you only have to do it once. Editing the “Advanced” settings in one module updates for all implementations of this Global Slider Module.