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:
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:
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:
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:
Clicking this opens a window for you to enter the name and category for the section or row:
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:
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:
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:
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:
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:
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:
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:
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.
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:
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:
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.
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:
Save time with Custom Layouts
Speed up the design process with Custom Modules
Build websites faster with Global Modules
Provide consistent design with selective settings sync
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 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