Table of contents

Divi Library Reuse Elements

Divi Library: Save and reuse your design elements in Divi Builder.

Save and reuse: Divi Library, Import & Export Items and Selective Sync

Do you know this? You've been working on your Divi website for some time, e.g. on a text? The text is written and you are still working on the formatting. Everything looks good. You are satisfied with your work. Great! But then you realise that this is not the only text you want to add in the near future. There is still a new additional package to your offer. And all you can think is: Crap! Don't insert all the design elements again and format them from scratch.

Why isn't there a function that allows me to use everything I do on other sub-pages and not have to adapt it again and again??? Copy and paste, so to speak.

Import Divi Library and Import Shortcut

Good news. Something like this actually exists. And it is not at all difficult to implement.

In this tutorial, we will show you how you can easily copy your own elements, be it modules, lines, sections or even entire pages, or how you can save them as global elements only once and use them several times.

These are the issues at stake:

  • Divi Library: What is it and how do I use the Divi Library?
  • Save global elements in your Divi library
  • Selective Sync: what is it?
  • Duplicate full subpages in Divi Builder

What is the Divi Library?

In order to be able to use all the desired functions from the introduction (copy and paste), we will deal with the Divi librarytoday.

Divi Library in WordPress

The Divi library is a clever tool to save modules, lines and sections for later use. This is not only helpful, but saves a lot of time when creating sub-pages by accessing the same content and pasting it in a new place. In other words, "copy & paste" on a grand scale. How exactly you can benefit from the Divi Library is explained here.

Use Divi library correctly

To show you how to use the Divi library correctly, it is important that you are on a subpage in the Divi Visual Builder. As an example, we have created a section with a two-column row containing an image, a text module and a pre-formatted button. The whole thing looks like this in the Divi Visual Builder:

Divi Visual Builder Example

And like this in the wireframe view (green icon bottom right):

Wireframe view Divi Builder
Divi Builder View

Pretty simple so far.

Note: All this has been created and formatted for this tutorial. If you already have a website, you can use the Divi library with any section, row or module you have created for your website. For those who still need to install and set up Divi first, here we show you how to install the Divi theme in just 3 steps. Here we explain how to set up Divi for yourself.

The text continues merrily.

Everything has been created and is now waiting to be used in another place. To save a whole section (or a line or a single module) in the Divi library, we go to the settings of the respective section by clicking on the cogwheel in the blue frame.

Divi Builder Settings Section

A new window opens. Here we click on the three vertical dots at the top right and a menu opens. You guessed it. Simply click on "Save in library".

Save to the Divi Library
Add to Divi Library Window

Here you can now assign a name for your section. For example, we call this section "Textbox_right". Simply because it is a text box aligned to the right. If your website is very large and contains many different design elements, it is advisable to create a new category. Later you only need to search for the section in the right category.

In our example, we call the category "General Text Boxes" because it is used in the general part of our website and not in the blog or shop area. There are no limits for the layout name as well as the category name.

A tip for the Divi library: Try to choose a name/category title that is easy to find later and describes the element relatively well. This will save you a lot of search work in your Divi library later on.

We will come to what the tick in the field "Make this a global element" means later in this article. First things first.

To insert this text box in the same way in another place on your website, we recommend the following steps.

First, we go to the subpage where we want the previously saved section called Textbox_right to appear and open the page in Divi Visual Builder. We navigate to the desired location.

Click on the blue plus symbol to add a new section. A new window opens. Click on the tab "Divi library" to access your previously saved section.

Add section to Divi library
Add section from Divi library

Simply select and voilà the section has been successfully inserted from your Divi library.

Now you have learned how to simply copy an element and paste it elsewhere on your website.

If you want to know which saved Divi library elements are included in WordPress, you can find them as a list in the Divi menu.

To do this, simply go out of the Visual Builder and navigate to the WordPress Dashboard. In the right-hand menu under Divi you will find a tab called "Divi Library".

Divi Library in WordPress Menu

Here you will find all the library items that have ever been saved.

Library elements in Divi Library

Note: You can also use your saved library elements in other WordPress installations or import them from elsewhere. To do this, select them in the list and click on the "Import & Export" button at the top left to import or export them. When exporting, you will receive a so-called json file, which you can import into another WordPress installation and vice versa.

So far, so good, but how can an element not only be copied, but also changed across all pages in such a way that later, for example, you do not have to adjust it five times in five different places when making a small change, for example, to the font size? This is where the global elements come into play, which we will explain in the next section. By the way, the list of your Divi library in the Divi menu also shows you the global elements.

Global elements in the Divi library

What are global elements? Let's take a closer look at the Divi manual. Divi describes global elements as follows: "A global library element is a module, line or section that appears exactly the same on all pages where it is added. 

You can add a single global module to several pages. If you change the global module on one page, it will also be updated immediately on all other pages to which it has been added. If a single module is repeated on several pages, it makes sense to make this module global. This way you don't have to edit every single page every time you want to make a change to a global library element. 

You can recognise global elements relatively easily by the green frame, in contrast to saved library elements. In the following picture, for example, you can see the green frame on an element in the footer.

Global library elements

Here the complete footer is a global element. You can now give a library element the designation "global". Simply add a ready-formatted element of your choice as a library element to the Divi library and tick "Make this a global element". That was it.

Divi library global object save

Now all elements linked to this global element are absolutely identical.

Be careful with changes! If you change a global element, all other elements linked to it will also change.

But how is it possible not to copy certain options, e.g. within a designed text module, across all linked global elements? In other words, you have a text module in which you have pre-formatted the font colour, font size, background, etc. You now create a global library element from this text module and add it to the global element. You now create a global library element from this text module and insert it from the Divi library in several places on your website. But then you realise that you want everything to be identical, but not the content of your text. Everything should look the same, but the text should be individual.

Using Selective Sync with Global Elements

This is where Selective Sync comes into play. Selective Sync means "selective synchronisation". With Selective Sync you can multiply certain options within global elements uniformly. Where Selective Sync is not to be used, i.e. in our example within the text editor, the content remains individual and is not copied.

To do this, simply click on the synchronisation symbol until it appears in red. Red means that settings are not duplicated across all linked elements. In the following short video you can see where the icon for clicking is located in a global element.

This is what the synchronisation icon looks like:

Divi Builder synchronisation icon

In other words, when you edit a global module, you can easily see which options are being synchronised by looking at the green synchronisation icon to the left of each option. 

Options with the green synchronisation symbol are options that are currently synchronised within the global module. Options edited with green synchronisation symbols are shared by all instances of the global element. 

To cancel the synchronisation of an option, simply click on the green synchronisation symbol as described above and the symbol turns red. Options with the red synchronisation symbol are NOT copied.

Now you've learned how easy it is to cleverly mirror elements on different subpages using global elements from your Divi library. But Divi can do even more.

Duplicate complete subpages in Divi

It can be done. And it's not even that difficult. Divi offers a built-in import/export function for entire subpages. This allows you to duplicate Divi subpages not only within a website (as with the Divi library), but also into another WordPress website where the Divi theme is installed. Everything, including images, custom CSS and advanced theme settings, is combined into a single json file. We explain how this works here.

Exporting individual subpages

To duplicate or, more precisely, export individual subpages in Divi, navigate down to the desired subpage within the Divi Visual Builder until you see the icon with the two arrows.

Export Pages Divi Builder

Clicking on it opens a new window with the title "Portability" with two tabs. We are first interested in the first tab "Export". Here you can enter a name for your subpage that is to be copied. The subpage will be made available to you as a json file when you click on the button below. Download the file to your computer. That's it. You have now created a copy of your subpage.

To bring this copy back to life elsewhere, simply create a new page in WordPress via WordPress Dashboard - "Pages" - "Create" and open it with the Divi Visual Builder (here: "Use the Divi Builder").

Create WordPress page
Divi Builder use window

A new window opens. You now have the option of setting up a completely new page or, if sub-pages already exist, you can simply clone them. For our example, we click on "Rebuild".

Layout options Divi Builder

A new page opens and the first thing that appears is a window with the title "Insert row". We confidently close this window because we want to import your saved sub-page in json format and do not want to insert a new line in our example. You navigate downwards, click on the icon with the three dots and then on the familiar icon with the two arrows.

Divi Icon
Divi Builder menu bar
Divi Builder Layout Import

Yes, we have already seen that. Exactly. You get back to the "Portability" window. Only this time you click on the tab "Import" and upload your previously saved json file. Since this page is empty, you can safely check the box "Replace existing content". If you do not check the box, Divi copies the new subpage into an existing layout without deleting it, if one exists.

In our example, this does not matter, as we are working on an empty page. If you want to copy your layout into an already existing sub-page, it is recommended not to check the box "Replace existing content" and to download a backup before the import ("Download backup before import").

A small note about the presets

If you have worked with presets before, you can also import them here with "Import Presets", but be careful, these presets overwrite existing presets. So only tick this box if you know that importing presets will not have a major impact on other subpages. Presets are a separate topic and would go beyond the scope of this tutorial. However, if you would like to learn more about them, you can find more information on the Elegant Themes website.

Conclusion on the Divi Library

With the help of the Divi library, the export & import of design elements and Selective Sync, you can not only save time but also a lot of effort when creating and designing your WordPress website. True to the motto "Work Smart not Hard", we recommend that you use the functions described in the tutorial in the future.

You want to try Divi for free? Then register here for our free hosting including a premium Divi licence!

We hope that this tutorial has helped you? Feel free to write us in the comments how you use the tips on the Divi library for yourself. Or would you like to add something else? Just send it to us.

Share article:

Facebook
Twitter
LinkedIn
WhatsApp
Reddit
XING

About the guest author

Meriem Benois

What has developed over the years from curiosity and passion, Meriem Benois has made her profession. Since 2021, she has been a web designer with heart and soul, founder and head of the agency Raster & Pixel, which specialises in WordPress sites for coaches, trainers, consultants and service providers. She not only creates websites with the popular Divi theme but also offers support for Divi for her clients.

Similar articles

Write a comment

Your email address will not be published.