Exploring Divi 2.4: A FREE Library Pack Built With Divi’s New Advanced Design Settings

Two days ago 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 two of this series, we will exploring some creative ways you can use advanced settings and how to import/export saved items into your Divi Library. We are even throwing in a Divi Library Pack that includes all of the elements from this post so that you can use them on your own site!

Learn All About Divi 2.4 Here

How the Divi Library Can Shave Hours Off of Building Your Site

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.

If you were a Divi user before the update, you might be familiar with Divi’s ‘Save Layout’ feature, which was and still is an amazing feature, but with the power to save out just bits and pieces of your layouts makes page building just that much faster.

Now that sections, rows, and modules have their own sets of advanced design settings, you can spend a lot more time configuring the elements on your page. This can also make highly customized elements a pain to build over and over again. But thanks to the Divi Library, you can save those complex pieces to the library, which can then be used on another page or even on another website.

Exploring the Advanced Design Settings in Divi 2.4

Although each element’s advanced design settings are unique on a per item basis, there are a lot of settings that they share and that you should become familiar with. Not only will this speed things up, but more importantly, it will let you get more creative when dreaming up the design of your website when you know what the possibilities are.

Custom Padding and Margin

Give the contents of your module a little more breathing room by adding custom padding or margin. You can define padding/margin for the top, right, left, and/or bottom side of your module.

Custom Border

Adding a border around your module is as easy as choosing a border weight, style and color.

Custom Buttons

In addition to site-wide button settings, you can also define custom button settings on a per module basis.

Background Color / Image

Now you can add a background to individual modules. Combining this with custom padding, you can create some really creative modules.

Text Options

If your module includes text elements, you will find all kinds of settings for typography in the Advanced Settings, such as font, color, style, size, line-height, and letter spacing.

These are just the basics! Below I will go through a few modules that have more unique settings to show you how to make your website truly unique.

Create A Testimonial Slider

This is actually a fullwidth slider module that is taking advantage of the new custom padding option for sliders. In the advanced settings of a slider module, you can define the top and bottom padding of any slider. To achieve this affect, I have used the slide title as the testimonial content, the slide body content for the attribute, and reduced the slider padding quite a bit since testimonial sliders are usually shorter in height than a regular page header slider. Another reason to reduce padding is so that you can get creative and add more elements around the slider such as a blurb like in the screenshot below.

Give Your Pricing Tables a New Look

Divi’s Pricing Table module might take the win for the the most advanced settings. Configuring your tables can take a while, making this module a perfect example of something you can use the Divi Library for. The pricing table module above, is a nice modern styling of Divi’s pricing tables, and the split background color is simply to show you that you can import this module into your own page and add it over any background color that supports white text.

I’ve edited quite a bit here, but the gist is that I’ve removed the default borders, customized all text to be white, modified the buttons to be white, and given transparency to the table background colors. You can also see that I have given the featured pricing table a more opaque background with the module’s featured-table design settings.

Individual Table Control

One last thing to note about the advanced settings in the pricing table module is that you can customize the tables across the whole module, but also on a per table basis. For example, you could give each table its own background color to make each product really stand out.

Gutterless Rows

Gutterless rows are one of the coolest things you can create in Divi 2.4. We will go more into the new Row options in an upcoming post, but I wanted to include this for the sake of creating a Divi Library Pack for our readers. What you are seeing here is a two column row that has been made fullwidth with no space between its columns. The settings below illustrate this configuration

The coffee image is actually a column background image, and the columns will always remain the exact same height with Divi’s new Equal Column Height setting. Also included in the library pack is this same row but with the image on the left. Combining the two results in a nice alternating layout.

If you download the library pack and place these rows into your own layouts, the call-to-action module will inherit your theme’s typography and button styles. Stay tuned for more in-depth posts on Divi’s all new theme customizer options.

Boxed Blurb Module

Adjacent blurb modules can sometimes clash with each other. Adding a border around them can be a really nice solution if you are feeling they need a little more separation. Before Divi 2.4, you would have to do this with custom CSS, but now you can do it by simply using the module border options. When adding a border, you will want to add a bit of custom padding so that your content doesn’t crash into the border. In the example above, I used 40px padding, which is a good value across all breakpoints so your boxed modules will still look great on mobile.

Taking this same idea of a bordered module and adding it to a section with custom padding, you are able to achieve a whole new look by using an almost identical module as the ones above. This is a great example of how these new advanced settings open up the world of design opportunities.

Transparent Contact Form

The new contact form settings let you control things like, form background color, border style, text color, and form field rounded corners. In the module above, I have chosen a transparent background color, white border, and rounded corners. All of these settings are fully customizable. You can choose a semi-transparent background color, choose your border thickness, and even define a custom rounded corner radius.

Fullscreen Header

Divi’s Fullwidth Header module can now me made ‘Fullscreen’. This makes it so that no matter what size your browser is, it will fill the screen and vertically center its content. In the example above I’ve uploaded the Divi logo into the new Logo field, and added two call to action buttons. The fullwidth header module also gives you the ability to add a “scroll” icon that, if clicked, will smoothly scroll down to the next section. There are 11 pre-made icons you can choose from along with being able to define its size and color. Another one of my favorite features of this module is the background color overlay. The background you see here is actually a very bright and saturated image with a semi-transparent dark overlay to help the text stand off of the busy image.

Saving Your Own Items 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.

Adding Library Items to Your Page

Once an 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.

Download The Library Items Described in this Post

Click the link below to download the items described in this post. To import them into your library, navigate to Tools > Import. Select the WordPress link at the bottom of import type list, and you will be prompted to upload the file. You will then have access to these modules for you very own use. Before uploading, be sure to unzip the zip file! Only XML files can be imported.

I hope that this brief look into advanced settings will help you with creating your own modules and possibly even motivate you to share them with the community 🙂

Download the Library Pack