In this video I’m going to go through Global Items.
A Global library item is a module, row or section that appears exactly the same on whatever pages it is added to. You can add a single global module to multiple pages. If you change the item on one page, it gets updated instantly on all of the other pages it has been added to as well.
To get to the Library, click on Divi, then Library.
Within the library, you can see what items are global and not under the Global Layout column.
Once a global item has been added to your library, it can be modified by editing the module within the Divi Builder, or by editing the item from within the Divi Library. Click on the name of the item that you’d like to edit.
Global items within the page builder are easily identified by their green color. If you are editing a module, row or section that is green, or if the current module settings window that you have open is green, then you know that you are currently editing a global item. It’s important to know when a global item is being edited, because any change you make will be mirrored across every page that item has been placed on. Click on the Edit button to edit a global item.
Entire sections can also be made into global sections. This is a perfect way to create a custom footer for your entire site without having to edit the footer.php file, and have that footer section mirrored across all of your pages. This also allows you to have multiple footers that are each used on multiple pages. If you ever want to change your global footer section, you only have to edit it once and the changes get applied everywhere the section has been used.
Do you want to add a double sidebar layout to your entire site? Turn both sidebar modules into a global module. If you ever decide to change your sidebar format or widget-ready area, just do it once and have your layout adjusted across every page on your site!
Making a library item global is simple. When saving your library item, check the “Save As Global” option. Any item that is saved with this option selected becomes a global item.
A simple use-case for this would be a Call To Action Module that appears at the bottom of many or all of the pages on your website. If a single module is repeated on multiple pages, it’s very useful to make this module Global. This way, you don’t have to edit every single page when you want to make a change to it.
Global elements open up so many possibilities, especially when you consider that you can selectively sync individual settings for each module. For example, you could create a global Header Module that appears at the top of all of your pages, and choose to only sync the Advanced Design and Custom CSS Tabs. This will allow you to apply custom styling to the entire series of pages using this global header module, but still allow you to add unique title text content to each module within the modules “General Settings” tab (which has not been synced). If you ever want to adjust the look and feel of these global header modules, you only have to edit the Advanced Design or Custom CSS settings once. An example would be with the full width Header module at the top of all of your pages. This is quite common. Each header module has a different title in the General Settings to represent the current page. You have also used the “Advanced Design Settings” to give your header a unique look by adjusting the title font style to Bold & All Caps, and you have also increase the Custom Padding on the top and bottom of the header to make the header module larger. You want all of your 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 full width Header module and choose to selectively sync only the “Advanced Design Settings” tab. Now whenever you add this global module to a new page, the “Advanced Design Settings” will be synced, but your “General 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 “Advanced Design Settings” shared by these global modules and the changes will be reflected on every single page that global header has been used! That can save you a lot of time.
This same theory could be applied to the “Custom CSS” tab as well. Let’s say that you have created a Slider Module and used the Custom CSS 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 Custom CSS settings (which include your custom CSS animation). Add this slider to your page and adjust the “General Settings” and “Advanced Design Settings” freely, while keeping your unique Custom CSS synced across the entire series of modules. If you ever want to adjust the Custom CSS for this series of global modules, you only have to do it once. Editing the Custom CSS settings in one module updates for all implementations of this Global Slider Module.
Once a global item has been saved to the library, it can be added to any new page from within the Divi Builder by clicking “Add From Library” button when adding a new module, row or section to the page. I go into more detail about adding items in the Loading from Library video.
All the global library items will appear in green. Click on the item you want, and it will be added to your layout.
That’s it for this video. I’ll see you in the next one.