Welcome to the biggest upgrade in Divi’s history. In no product has our team put more time, effort and love than Divi, and never has a Divi update been more expansive than 2.4.

This is a monumental update, including over 1,000 new module design settings and theme customizer controls, as well as an all-new fluid grid and a re-imagined set of flexible modules that are more versatile and easy-to-customize than ever. These ultra-customizable layouts are also easier than ever to use thanks to the Divi Library, an all new way to save, use and organize your own collection of Divi Builder layouts. Say hello to your new web design toolkit.

All of the amazing things we have added to the Divi Builder are even more wonderful when you consider that the Divi Builder has now been extended to all post types. The builder is no longer limited to pages, meaning you are free to use the builder to create beautiful blog posts too!

Of course, these few things only scratch the surface of what Divi 2.4 has to offer. There is so much to talk about, and I can’t wait to share with you all the great things we have been working on over the past year. So get comfy, grab a drink, and get ready for a monstrous post about a truly epic update!

Here is a little appetizer before the main course. To kick things off, we have created 4 brand new Divi Demos to show you just how versatile this theme has become. All of these demos were constructed by our lead designer Kenny Sing using only standard theme settings. No custom code or Child Themes! It’s truly impressive the variety of layouts that can now be built with a single theme. Without further adieu, let’s take a detailed look at the new features that made these beautiful designs possible.

New Global Settings & 100% Fluid Grid The backbone of Divi 2.4 is its all new fluid grid and a re-imagined set of modules that are more flexible than ever. This new grid has allowed us to add some great new settings to the Divi Theme Customizer, such as the ability to define custom content widths, column spacing, menu heights, menu widths and so much more.

Choose Your Content Width

Divi’s website width can now be customized to any max-width of your choosing, making it fully prepared for the future of super high resolution displays.

Choose Your Sidebar Width

Set the width of your sidebar for pages using a sidebar page template, archive pages, category pages, and all other post types.

Adjust the Height of Your Logo

Different logos require different header heights for optimum legibility. This new option lets you adjust the height of your header so that your logo can live up to its full potential.

Define Your Navigation Fonts, Text Sizes, and Text Styles

We’ve made modifying text styles within your navigation extremely easy in 2.4. Right from inside the Divi Theme Customizer you can choose your primary and secondary navigation fonts, font sizes, and text colors.

Give Your Fixed Header Unique Styling

If fixed-navigation is enabled, you now have full control over what your navigation looks like after the user has begun scrolling. These styles can be adjusted independently of your navigation’s primary styles, all of which will be automatically transitioned as the users scrolls.

Hide Navigation Until User Scrolls

When this setting is enabled, your navigation bar will remain hidden until your visitor begins scrolling down the page. This is a great way to give full prominence to the first section on your page, such as a Fullwidth Slider or Call To Action.

Make Your Logo Centered AND Inline

Divi comes with a new Centered Inline Logo header style. This setting will automatically calculate how many menu items you have and center your logo between your navigation links.

Add Full or Semi-Transparency to Your Navigation

The Theme Customizer now supports alpha transparency, giving you the option to make your navigation bars semi-transparent. Divi automatically calculates the height of your navigation bar and adds the appropriate padding to the first element on your page so that it can overlay your page content without obstructing your text. You can even make your navigation background color completely transparent for a new unique look.

Give Your Website a Unique Touch of Creativity by Combining all of the Great New Navigation Features

There are limitless ways to combine menu colors, fonts, text styles, and layout options to create unique looking headers that were never possible before. If you are looking for a way to make each of your Divi websites stand out, you should definitely explore the Theme Customizer’s expansive set of new Header & Navigation settings.

Typography Settings

Divi 2.4 introduces new controls for the typography that can be used to adjust every part of your website, including headers, body, footer titles, footer text, navigation links, body text, and even default text styling for individual modules. You have controls for things such as Size, Color, Letter-Spacing, Line-Height, Font-Weight, All Caps, and Italics.

Define Your Column Spacing

You may want to have your column spacing be wider, more narrow, or even gutter-less based on the type of content you are displaying. Now you can set your global column spacing with the click of your mouse.







This setting also effects grid-based modules, which include Galleries, Portfolios, and Masonry Blogs.

Increase or Decrease Section and Row Height.

Along with Divi’s horizontal column spacing controls, you can also define the vertical spacing of rows and sections. If you want to tighten things up, or give your content more room to breath, simply drag your section/row height slider up or down.

New Footer Layouts & Widget Styling

Now you have 8 column layouts to choose from for your footer area, as well as full control over footer widget header and body text styling.

Button Styling

Divi now gives you full control over all of the buttons on your website. You can set global base styles, or even adjust buttons styles for individual modules. You now have full control over font, text size, text color, background color, stroke styles, icon selection as well as a unique set of controls for button hover styles.

Live Website Demo

Click the link below to see a live demo that illustrates how you can take advantage of some of Divi’s new Theme Customizer features to help make your website stand out from the crowd.



View The Live Demo

Divi Module Customizer In addition to the Divi Theme Customizer, the Divi Module Customizer lets you set basic defaults for individual modules. You can adjust font styles and module sizes for each individual module, and have those adjustments reflected throughout your entire website. Do you want to make all of your Sliders a little smaller? Such a change is only one click away in the Module Customizer.

Without creating a child theme or writing custom CSS you now have over 200 settings in the Divi Module Customizer, such as default slider heights, default gallery hover overlay color, or default image lazy loading animation. These options are here to give you more ways to fully customize your website and save you a ton of time doing it.

Use The Divi Builder On Posts! The long-awaited and highly-desired ability to use the Divi Builder on posts is now a reality. Because of Divi’s new fluid grid, layouts built with the Divi Builder can now be used anywhere while still retaining their design integrity. There are now so many great opportunities to use the Divi Builder to create beautiful story-driven posts on your blog.

Using the Divi Builder on posts still allows you to retain your left, right, or fullwidth post layouts. You also have the option to display your post’s title, meta, and featured image in addition to the builder content. Continue reading to find out how you can add your post’s title, meta, and featured image in more creative ways.

Fullwidth

Left Sidebar

Right Sidebar

Live Post Demos

Blog Posts built with the Divi Builder can be absolutely beautiful and captivating. Just take a look at some of the amazing posts we have been able to build, and imagine how wonderful it will be for your readers to experience such a rich and intriguing piece of content. This is the perfect way to make your online publication stand out from the crowd.

All New Row Options Before Divi 2.4, Rows did not come with any options. Now that Rows and their column structures are fluid, Rows have been beefed up with a new set of options, making them hands-down the most versatile element in the Divi Builder. The new Row options in Divi 2.4 pave the way to a whole new generation of unique layouts that were never possible before. Take a look below to see how you can edit a row’s existing column structure, adjust its gutter widths, and even how to make a fullwidth row!

Change a Row’s Existing Column Structure

Now you can easily change the column structure of any existing Row in your layout. These Rows have their columns adjusted instantly, and the Modules within them adapt along with it, placing them into the available columns or removing them from the columns that no longer exist. Gone are the days of creating an entirely new Row and draging over all of your modules just to change its column structure!



Increase Columns…



or decrease columns in seconds.



Custom Column Spacing

Not only can you adjust column widths globally within the Theme Customizer, but you can also adjust them on a per-column basis. You can even achieve a gutter-less effect by setting your column spacing to 0.

Fullwidth Rows

Divi’s new Row options also include the ability to make Rows Fullwidth. Combining Fullwidth Rows with Divi’s numerous column structures and column spacing options opens up a whole new realm of layout possibilities.

Column Background Colors

In addition to Section and Row background options, you can now give each individual column inside of a Row its own background color, background image or background video. This can be combined with Fullwidth Rows to achieve some really cool effects.

Equal Column Height Option

It is nearly impossible to add just the right amount of content into adjacent columns so that all column heights within a Row are equal. This can look tacky when adding background colors to columns. With Divi’s new column height standardization option, you can tell a row to equalize its columns heights and every column will appear the same in height automatically. This is an especially useful option when used in combination with gutter-less column spacing.

Live Website Demo

Click the link below to see a live demo that illustrates how you can take advantage of fullwidth rows and equal column heights.

View The Live Demo

Advanced Module Design Settings It’s now possible to customize absolutely everything about the design of each individual module you add to your page. If it can be done with CSS, then it can be done with the hundreds of new design controls added to the Divi Builder. We have added countless design options across the board that let you control things like typography, spacing, backgrounds, borders, colors and so much more.

New Tabbed Settings

Section, Row, and Module Settings now have a new tabbed layout for General Settings, Advanced Design Settings, and Custom CSS. Advanced Design Settings is where you will find more detailed styling controls for each module. Check out the examples below to see just how powerful these new design options can be.

Typography Options

You now have complete control over the appearance of text in your modules. For every piece of text in a module you can adjust the font, text size, text color, font-weight, line-height, letter spacing, all-caps, italics, and underline.







i.e. Completely customize the typography of a Blurb or Slider module.

Custom Padding and Margin

Divi’s grid foundation is an amazing base for a structured website, but having control over the sizing and spacing of elements on your page is vital for achieving highly refined layouts. Sections and Rows now have adjustable padding controls, as do each of the Divi Modules.







i.e. Reduce or increase the top and bottom padding of any Slider





i.e. Control the padding and typography of Bar Counters





i.e. Increase the padding of a Call To Action to increase its height





Or Add surrounding margin to give it more breathing room

Background & Border Options

Modifying module background colors and border styles is now available right inside the Module’s Advanced Design Settings. You can even choose transparent or semi-transparent colors!

i.e. Customize the background colors of individual Pricing Tables





i.e. Give your Contact Form semi-transparent fields and/or add a border





i.e. Add a background color to text to make it legible when placed over background images.

Live Website Demo

Click the link below to see a live demo that illustrates how you can take advantage of advanced section, row, and module settings.



View The Live Demo

Custom CSS Options If our Advanced Design Settings are not enough, you will notice that each Module, Section and Row in the Divi Builder now has a new Custom CSS tab that can be used by CSS-Savvy designers to directly control particular elements on the page. If the Advanced Design Settings tab doesn’t have what you are looking for, add the CSS for it here. For each module, we have broken down the structural HTML elements and given CSS input fields for each. If you want to make a customization, just add it here. No need to go through the trouble of making a whole new Child Theme.

For example, you can give an image module custom styles to make it overlap the section below it a tiny bit. This is just a single example of the infinite CSS possibilities at your fingertips!

Introducing The Divi Library! The Divi Library is something we are extremely excited to announce, knowing that it’s going to revolutionize the way people use Divi (and build websites in general). The Divi Library is a place for you to save your customized Modules, Sections, Rows or even entire Layouts. These items can then be added directly into the builder on new pages, or when starting to build new websites for your clients. When combined with our new Advanced Design Settings and Custom CSS inputs, these saved library items take on a whole new meaning. Imagine having a folder of Divi Modules and Sections that have each been customized by you for a specific type of website. The next time you start a similar project, load up the Library and start building. In many ways this forgoes the need for a Child Theme, since your custom CSS and design tweaks can be saved directly into the Library items and accessed instantly wherever you take your Library.

Save Sections, Rows & Modules The moment we’ve all been waiting for—Divi now lets you save not only layouts, but also individual Sections, Rows, and Modules. Just like layouts, you can export these for use on other sites as well.

Save & Add to Library

You can now choose to save any Section, Row, or Module for later use. Library items can also be made Global, allowing a single module to be mirrored across multiple pages. You can even Selectively Sync certain settings when saving to the Library.

Selective Sync

As you can see in the image below, settings can be selectively synced when saved to the Library. This means you can save any combination of the General Settings, Advanced Design Settings, and Custom CSS tabs into individual Library items. Any tab that is not selected will receive default theme values when you add it to a layout.

i.e. Only save the Advanced Design Settings tab of a fullwidth header module so you don’t have to remember the exact height, text styles, button styles, or background overlay, every time you add a header to your layout. This saves a ton of time and makes consistency a breeze.

Global Library Elements Yes, this is as amazing as it sounds. The option to have a single module in multiple locations throughout your website is finally here! When you save a Global item to your Divi Library, that item (whether it be a Section, Row or Module) will be mirrored on each page that exists. When you update the item in one location, it gets updated everywhere else instantly. If you repeat any elements through your website, such as a Call To Action Module in your footer, turn it into a Global library item. If you every want to update the module, do it once instead of dozens or even hundreds of times.

Multiple Elements All In Sync

Global elements can be added in multiple spots within a layout or on completely separate pages. This can be great for something like an “About Us” text block that exists on multiple pages. If you need to update your info, just do it once!

Saving Global Elements

In addition to being able to save a Section, Row, or Module, you can also save it as a global element from the ‘Save & Add To Library’ button.

Global Modules

Global library items are the perfect way to handle elements that are repeated across your website. You can create a single Module, save it as a Global Library Item, and then add it anywhere on your site. If you wish to update this module, it’s simply a matter of changing it on one page and the rest will update automatically.

i.e. Use a global Call To Action on multiple pages. Updating the title, text, link, or styling is now a one time task.

Global Rows & Sections

If you have a grouping of modules or rows that you want to use throughout your site, you can even save Global Rows and Sections.

i.e. Create a Global Section, add it to the bottom of every page of your site, and use it as a custom built footer.

Global Items + Selective Sync

As mentioned before, when saving an element you can choose which settings you want to save. This is especially useful with combined with Global elements. For example, only saving a Global items’s Advanced Design Settings will allow each instance to have different content, while at the same time sharing the Global / Selectively-Synced design settings.

For example, you could create a Global Fullwidth Header Module and selectively sync only the Advanced Design Settings. This Global Module can now be added to the top of all of the pages on your site, and only the Advanced Design Settings will be shared in each instances of the Module, while the General Settings will remain unique (un-synced). You can add unique header titles to each page, but have all pages share the same custom font controls and colors. If you ever want to adjust the font used for all of the global headers on your site, simply edit the Global Fullwidth Header Module’s Advanced Design Settings once and all of your pages will be synced!

New Divi Modules Divi 2.4 introduces 6 new members to the module family: Fullwidth Image Module, Fullwidth Code Module, and Fullscreen Header Module, Fullwidth Post Title Module, Regular Code Module, and Regular Post Title Module.

Fullwidth Image Module

The fullwidth image module allows you to add images to your site that span the entire width of the browser while retaining their aspect ratio with no cropping.

i.e. Use Fullwidth Images as page headers, creative ways to break up the page, or in combination with Divi’s new Fullwidth Rows.

Live Website Demo

Click the link below to see a live demo that illustrates how you can take advantage of fullwidth images to create impactful layouts.



View The Live Demo

Code Module (Regular and Fullwidth Modules)

The Code Module essentially gives you a blank slate for adding code to your website. You can add code into any column with the Regular Code Module or use the Fullwidth Code Module that is not bound by column or row widths.

i.e. Place third party shortcodes from plugins such as Revolution Slider and Essential Grid into a Fullwidth Code Module.

FULLSCREEN Header

Divi’s Fullwidth Header Module can now be made fullscreen with additional options for adding images, logos, call to action buttons and more!

24 Layout Possibilities

With different combinations of content orientation and image placement, there are over 20 different layouts you can create that are all completely responsive. You can also choose not to enable fullscreen mode and the header will take on the natural height of its content.







Live Website Demo

Click the link below to see a live demo that illustrates how you can take advantage of the Fullscreen Header Module to give your visitors a stunning greeting to your page.



View The Live Demo

Post Title Module (Regular and Fullwidth Modules)

When using the Divi Builder, you are presented with a blank canvas. This is a great feature of Divi, but it also makes it difficult to add dynamic elements onto the page such as the page or post title, meta data, and featured images. Now that you can use the Divi Builder on posts, it is crucial to be able to easily add that kind of info into your layouts. This module lets you do all of those things with as much control as you have with any other module.

9 Layout Possibilities

Combining the Post Title Module’s options for text placement, featured image placement, and text orientation, there are 9 different layouts that can be used to display your title, meta, and/or featured image.

Enter To Win A Free Membership! We are so excited about Divi 2.4 that we feel like celebrating with an Elegant Themes Giveaway! Enter below for a chance to win a free Elegant Themes membership or account upgrade.

What could be better than Divi 2.4? How about getting Divi 2.4 for free! We are giving away 10 free memberships and accounts upgrades to 10 lucky winners. You can enter the content below for a chance to win! The more tickets you enter into the raffle, the better your chances of landing the prize.

a Rafflecopter giveaway

