5 Ways The Divi Library Can Make Your Life Easier

10 of the Best Divi Child Themes for Businesses
July 2, 2016
WPBeginner is 7 – Reflections and Updates
July 4, 2016
Show all

Welcome to Day 34 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!


Simply put, the Divi Library is designed to make your life easier. If you’re not currently using it (or only using it to import the Divi 100 Layout Packs we’ve been giving away) then chances are you’re wasting precious time and energy throughout your web design process. Creating or re-creating modules, rows, sections, or even full pages that could be pre-loaded in just a few clicks–ready to use as they are or needing just a few simple edits to adapt them to your needs. That’s why in this post, I’m going to show you five ways in which the Divi Library can make your life easier as a web designer.

What is the Divi Library?

For those unfamiliar with the Divi Library, allow me to provide a brief overview: when you use the Divi Builder to create posts or pages, you are given the option of loading layouts from (or saving layouts to) the Divi Library:

Divi Builder Layout options

Once you have saved an item to the Library, you can access it from the window that pops up when you add a layout, section, row, or module to the page:

Divi Builder adding modules

It’s that simple, and that powerful.

Now that you understand how the Divi Library works, let’s get into how to use it to simplify your website workflow!

5 Ways The Divi Library Can Make Your Life Easier

Subscribe To Our Youtube Channel

1. Save Time With Custom Layouts

After spending time creating a layout that works for you or customizing one of the pre-built layouts, you may want to find a way to reuse it for another page or post. The Divi Library can help you save hours of time by enabling you to create a collection of your custom layouts with your favorite combinations of sections, rows, and modules.

Saving a layout is easy. At any point while working on a layout, you can click the Save to Library button in the Divi Builder. This will give you a popup to enter a name for the layout:

Divi layout save window

Saving any section or row with its contained modules can be done from the settings window. At the bottom left, there is a Save & Add to Library button:

Divi section save button

Clicking this opens a window for you to enter the name and category for the section or row:

Divi section save settings

Once you’ve added items to your Divi Library, you can manage and edit them from the WordPress dashboard by going to Divi > Divi Library. The page that you will see contains a list of all your library items:

Divi Library menu

New items can be added to the Divi Library from the WordPress dashboard as well. Click the Add New button at the top of the page – this will popup a window that will collect the name, type of item (e.g. layout, section, row), settings to use, and the category:

Divi Library Add New

Once an item has been added to the Divi Library – whether through the Divi Builder or from the Divi Library page – it can be easily added to any post or page. While using the Divi Builder, simply click the Add From Library tab that is available when adding new layouts, sections, or rows. You will be shown the items in your library, and can click the one you want to add to your page.

2. Speed Up the Design Process With Custom Modules

Saving layouts, sections, or rows with their combination of modules is definitely a neat trick, but you might be wondering why we skipped modules. Surely you can save individual modules? Of course you can! And this is where some real time savings come in, too – you can save modules with all of your customized settings and re-use them.

We have covered in many posts how you can create some pretty creative looks for Divi’s modules using Advanced Design Settings and Custom CSS. This is a great way to set your site apart from others using Divi. As a quick reminder, all modules (and rows for that matter) have tabs for Advanced Design Settings and Custom CSS:

Divi module settings

From those tabs you can tweak and customize the appearance of the module until it looks just the way you imagine. Once you are satisfied, you can click the Save & Add to Library button at the bottom left of the settings window:

Divi module save

In the window that pops up, you can enter a name and a category for the module before clicking the Save & Add to Library button:

Divi module save settings

Once you have saved your customized module to the Library, you can use it elsewhere on your site, or even the same page, without having to recreate it. You can load it from the Library, with all its settings, by clicking Add From Library in the Add Module window. You will see your customized modules listed, and can click the one you wish to add to your post or page:

Divi add module from library

3. Build Websites Faster With Global Modules

You may have noticed a little checkbox when saving your section, row, or module earlier, that said “Make this a global item.” A global item is synced and mirrored wherever it appears on your site. This means that it will be updated automatically on all pages whenever a change is made to its settings.

Now we’re moving into real time savings, as you can use Divi to create website elements that will be the same across all pages. For example, you could create a footer section that is added to all your pages. By making that section global, you won’t have to worry about forgetting to make changes to some of your pages when you need to update them.

To add a global item, just add the section, row, or module to your page as usual, and customize as needed. When you are ready, hit the Save & Add to Library button, and make sure to check the Save As Global checkbox in the settings:

Divi global item

Editing global items is no different to editing regular items. You click on the settings button for the section, row, or module, and make your changes. Once you click the Save & Exit button, your changes will be reflected wherever the item is used. It’s that easy!

4. Provide Consistent Design With Selective Settings Sync

When you were saving your customized modules, you would have seen some other checkboxes we skipped over. There was one for each of the settings tabs: General Settings, Advanced Design Settings, and Custom CSS. The description for these tabs was “Selective Sync.”

This is an incredibly powerful feature that enables you to decide which of the settings will be saved. So, you can customize your module, but choose to only save the Advanced Design Settings with the module when you save it to the Library. This would leave you free to customize the General Settings (for example) from the defaults, instead of your customized settings.

Selective Sync is even more powerful when combined with global modules. Only the synced settings would be globally updated, leaving the other settings to be customized as needed on a per page basis.

Using Selective Sync is simple. Just check the boxes for the tabs you wish to save for the current item when you are saving it to the library as described previously. Only the settings on those tabs will be saved with the module.

Divi module selective sync

5. Reuse Your Work By Exporting And Importing

Now that you have learned how to use the Divi Library to make your website design work easier, you may be wondering about reusing your work on other websites. Don’t worry – we’ve got you covered! Everything in Divi can be exported from one website and imported into another. This includes the Divi Library, so you can export and import all your customized layouts, sections, rows and modules.

To export all your library items, or a selection of them, go to the Divi > Divi Library page in your WordPress dashboard, then click the Import & Export button at the top of the screen:

Divi Library import and export

Clicking this button launches the portability popup. After making sure the Export tab is selected, you will be able to enter a name for your export file. If you had selected specific items to export, you can select the checkbox to only export those items:

Divi Library export settings

Once the export has finished, your browser will download a .JSON file containing the data about your library items.

To import your library items to a new site, go to the Divi > Divi Library page as before, and click the Import & Export button. This time, click the Import tab and upload your .JSON file from your previous export. Once the import is completed, you will see your library items now added to the Divi Library page.

Divi Library import settings

Conclusion

If you are using Divi to built several sites for yourself or for clients, you may want to find ways to work smarter and faster. The Divi Library is designed to help you create shortcuts for yourself that you can use to make creating websites even easier.

In this article, we’ve shown you several ways the Divi Library can be used to streamline your work and simplify your workflow. As a reminder, they were:

  1. Save time with Custom Layouts
  2. Speed up the design process with Custom Modules
  3. Build websites faster with Global Modules
  4. Provide consistent design with selective settings sync
  5. Reuse your work by exporting and importing

We’ve shared our tips and tricks so you can incorporate them into your workflow with your next project.

Have you fully explored the Divi Library and made use of its powerful features? Share your tips and tricks in the comments section below.

Also, be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

Article thumbnail image by Oxy_gen / shutterstock.com

.divi_cta{background-color: #8f43ee; color: #fff; font-size: 20px; font-weight: bold; padding: 20px; text-align: center; display: block; text-decoration: none; border-radius: 4px;}.divi_cta:hover{text-decoration:none;background-color:#7d37d6;}.divi_cta_red{background-color:#db1c1c;}.divi_cta_red:hover{background-color:#c51a1a;}

divi-2-6-logo

Divi 100 Day 34

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

jQuery(document).ready(function(){jQuery(“#DIV_TO_PLACE_COUNTDOWN”).jCountdown({timeText:”2016/9/7 7:00:00″,timeZone:-8,style:”slide”,color:”black”,width:0,textGroupSpace:15,textSpace:0,reflection:false,reflectionOpacity:10,reflectionBlur:0,dayTextNumber:1,displayDay:true,displayHour:true,displayMinute:true,displaySecond:true,displayLabel:true});});Learn More About Divi 3.0

.section-header{width: 520px; padding: 50px 40px 20px; margin: 100px 0; text-align: center; color: #fff !important; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #6c2eb9; background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2016/04/divi-100.jpg); background-repeat: no-repeat;}.section-header h2{margin-top: 0 !important; color: #fff;}.section-header strong{color:#fff;}.section-header img{margin-bottom: 10px;}.section-header:after{position: absolute; bottom: -16px; left: 50%; margin-left: -16px; width: 32px; height: 32px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); content:”; background: #6c2eb9;}.divi-demo-link{border-bottom: 4px solid #00d5b5; margin-top: 15px; border-radius: 4px; transition: all.5s ease-in-out; display: block; width: 100%; padding: 10px 0; text-transform: uppercase; font-weight: bold; text-align: center; color: #1C695D; background-color: #00efcb;}.divi-demo-link:hover{text-decoration: none; background-color: #2CFFDF;}.divi-download-link{text-align: center; font-size: 18px; border-radius: 4px; padding: 20px; color: #fff; display: block; margin: 10px 0 10px; background-color: #7e3bd0; transition: background .5s; text-decoration: none; font-weight: bold;}.divi-download-link:hover{background-color: #C04BDE;}hr{border-style: solid; margin: 0 0 40px 0; border: 1px solid #EAEBEB;}

The post 5 Ways The Divi Library Can Make Your Life Easier appeared first on Elegant Themes Blog.

View @ ElegantThemes

Skip to toolbar