Yesterday we introduced Divi 2.4, the biggest upgrade in Divi history and a giant leap forward for our most popular WordPress theme. There are so many great features to explore in this update that it was hard to describe them all on the release post, which is why we have decided to do a 2-week series of informational blog posts that will aim to teach you how to take full advantage of Divi 2.4 and its new options. In part one of this series, we will exploring Divi’s all new Global Library Items.
- 1 The Most Powerful Part Of The Divi Library?
- 2 Saving A Global Item To The Divi Library
- 3 Managing Your Global Library Items
- 4 Adding Global Items To Your Page
- 5 Standard Global Module Applications
- 6 Entire Sections Can Be Made Global As Well
- 7 Global Modules Can Be Combined With Selective Sync
- 8 We’ve Only Scratched The Surface
The Most Powerful Part Of The Divi Library?
If you haven’t explored Divi 2.4 yet, you are probably asking yourself: “Wait, what is the Divi Library?” Put simply, it’s a new place for you to save individual Modules, Rows, Sections or even entire layouts that you have built using the Divi Builder. Once an item has been saved to the library, it can be quickly accessed from within the builder. These library items are like tools in your new web design toolkit, and can be used when creating new pages on your website or when creating new websites for your clients.
As you begin to build and expand your library, you will find that having access to these pre-made/customized items will save you countless hours of development time. But that’s just the beginning, because we have added something even more special to the Divi Library called Global Library Items, and that’s where this story really begins. When an item is made “Global” within the library, it is mirrored across all of the pages you add it to. Whenever this global element is updated, the updates are automatically pushed to each instance of the global module! If you have a repeated module or section on your site, simply make it global.
If you ever want to make a change to that area of your website, you only have to update the global module once, instead of having to update a standard module in dozens of different locations.
It’s easy to see how using this new feature can save you loads of time.
Saving A Global Item To The Divi Library
When creating or editing a new module, row or section within the Divi Builder, you will notice a brand new save button on the bottom of the settings windows called “Save & Add To Library.” This is accompanied by the standard “Save & Exit” button on the right. When you click the “Save & Exit” button, your module settings are saved on the current page and the settings popup is closed. When you click “Save & Add To Library,” the module is still saved on your page, but it is also added to your Divi Library.
Any module that is added to the Divi Library can be turned into a Global Library Item by selecting the “Make this a global item” option while saving.
Once an item has been saved as a global item, the module assumes a new green appearances within the builder. It’s easy to know which modules on your page are global by their unique color. The settings boxes for global items are also green, so it’s always clear when you are modifying a global item.
Managing Your Global Library Items
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.
All of your library items can be managed from within the Divi > Divi Library page inside of your WordPress Dashboard. You can filter by type, such as Module, Row, Section & Layout, as well as by Global/Not Global. Select “Global” from the list of filters to get a list of all of your global items. Click the “edit” button next to any global edit to begin editing. Any changes made will be pushed to all pages using the global item. As stated previously, you can also edit global items right from within the page builder like you would a standard module.
Adding Global Items To Your Page
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.
Standard Global Module Applications
There are so many different applications for using global items on your page. Any element that is repeated on different pages can be turned into a global item to make them infinitely easier to manage.
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!
Synchronize Your CTA’s
Do all of the pages on your website contain a Call To Action Module? It’s quite common to have such modules on multiple pages to ensure your visitor always have a clear path towards conversion. If this is the case, why not use a single global Call To Action module? If one day you decide that you want your button to be a little bigger, simply adjust the font size within the global module and have your entire website update instantly!
Have you utilized our Fullwidth Menu module to create a custom navigation menu for your entire website? If one day you decide to change your website’s color scheme, it would be incredibly time consuming to have to adjust the background color of your custom menu when it has been added to every page on your site. Global modules are here to save the day.
Global library items have transformed the way the Divi Builder can be used. Divi isn’t just a page builder anymore, it’s a complete website builder.
Entire Sections Can Be Made Global As Well
Not only can individual modules be made global, so can entire sections. Using a global section, combined with the rows and modules within them, you can build and manage entire areas of your website more easily than ever before. For example, you could use the Divi Builder to create your own customized footer to be used on the bottom of all pages on your site. If you want more control over your footer, this new global section could entirely replace the standard widgetized footer and footer menu.
In the above example, the footer area at the bottom of the page was created completely using the Divi Builder! This is not the Theme’s footer.php layout. This is an example of how the Divi Builder can be used to create your own customer footer, but you can do much more than that. Turn the layout into a set of global sections and then add them to the bottom of all the pages on your site. If you ever want to edit your website’s custom footer, simply update the global section and your entire website gets updated! Using the Divi Builder in this way gives you complete control over your footer layout. You are now free create something entirely different that the standard Divi footer, which is just one of many ways that that global sections can be used to take control over your website’s layout.
Global Modules Can Be Combined With Selective Sync
Global modules get even more interesting when combined with Selective Sync. When saving a new module to the Divi Library, you can select which types of options you would like to save for the current module. You can choose to save any or all of your General Settings, Advanced Design Settings or Custom CSS.
So what does this mean exactly? Let’s say you create a new Fullwidth Slider module and save it to the library as a global module. When saving, you choose to selectively sync only the Custom CSS and Advanced Design Settings. In this case, the General Settings (which include your slider’s content, such as the title, text, and images) are not made global. When adding a new instance of this global slider to a new page, only the settings within the Custom CSS and Advanced Design Settings tab will be shared between each instance of the global module.
You can tell which settings are being shared by a global module by their tab’s color in the settings window. In the example below, only the Advanced Design Settings and Custom CSS tabs are green. The Global Settings tab is not being synced and therefore remains gray.
You can now add this Fullwidth Slider to the top of several of your pages throughout your website and all of your custom styling within the Advanced Design Settings and Custom CSS will be shared. If one day you want to adjust the size of your header text, or change the color of your slider buttons, you only have to do it once and all instances of the global module will be updated! If you want to create a truly unique set of sliders using Custom CSS, you can do that too.
At the same time, the General Settings for each of these global modules remain unique (since they were selectively un-synced while saving). Each slider at the top of each page has its own unique text and images, but the styles for each have been unified using a global module with selective sync.
This combination opens up some amazing opportunities. The same technique could be applied to just about any module on your website. If you ever want to adjust the look at feel of your entire site, you only need to adjust the styles of a few global modules, instead of having to edit hundreds of standard modules spread out across dozens of pages.
We’ve Only Scratched The Surface
Hopefully this post gives you some basic ideas about how global library items can be used. There is so much that can be done with this new functionality, and the more you use and explore the Divi Library, the more creative ways to use it you will discover. The Divi Library and the introduction of global library items are one of my favorite new features of Divi 2.4, and I think you are going to absolutely love how much time they save you!
What other implementations of global library items can you come up with? I would love to hear your thoughts in the comments. I am sure there are quite a few things I haven’t thought of myself!