Divi 2.4 Has Arrived! Welcome To The Biggest Upgrade In Divi’s History
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.
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.
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.
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.
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.
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!
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.
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.
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.
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.
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.
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!
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.
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
Divi Is More Than Just A Theme
As we release Divi 2.4 into the wild, I couldn’t be more happy of the product we created, nor could I be more happy with the amazing Elegant Themes team that created it! What’s most rewarding, however, is watching the Divi community thrive and knowing that we are able to help web design agencies, freelancers and website owners build even better websites for themselves and their clients.
This is just the beginning for Divi. We have come a long way, but every day we are overflowing with ideas on how to make it even better. I can’t wait to get back to work! Stay tuned 🙂