Divi is the flag-ship multipurpose theme from ElegantThemes which includes their Divi Builder and many pre-made layouts for you to choose from. It is designed like a framework so you can use it to build just about any layout you can think of.
Today they released a large update to the theme bringing it up to version 2.4 with a lot of new features, let's take a look at what was added.
Divi makes extensive use of the native WordPress Customizer, in this version there are over 100 new settings which you can apply to your site and see the changes live.
- General theme settings
- theme gutter widths
- website content width
- sidebar width
- control section and row padding
- Body text styles
- Header text styles
- Footer layouts
- Tablet and Phone Styles
- Global Button Styles
New Builder Interface
The whole builder interface has been redesigned giving it a clearer layout.
The Divi library has been added which allows you create and store specific layouts, section, rows, and modules and then access any library element from within the Page builder so you can keep things uniform throughout your site and wont have to keep recreating elements. A nice feature is also the ability to import/export library elements for use on other installs.
You can now make any Divi Library element global (applies to section, rows, and modules) which means you save one instance of a section/row/module and can then use it into any number of layouts. This is great as you can then update the element and it will updated wherever you use it on your site. Choose to update it from within the page or within the Divi library.
You can now use the Divi Builder on individual posts to create unique layouts for different posts. With extra options to show/hide page title/meta/featured image in addition to any page builder content you create. It has a New Post Title Module that places the page title/meta/featured image within a page builder layout and you can also choose between fullwidth or sidebar layouts.
New Fullscreen Headers
They have added support for full screen headers which fill the height and width of the browser window. You have 24 unique layouts to choose from with
layout elements which include: logo, title, subtitle, text content, header image, background image, background video, background color overlay, parallax background image, and up to 2 call to action buttons.
- New modules also include:
- fullwidth image module
- fullwidth code module
- regular code module
- fullwidth Post/Page title module
- regular post/page title module
Advanced Module Settings & Custom CSS
Every module has had advanced settings added to it which allow you to edit each one in detail to get it looking exactly how you want. Things like text options, custom colors, sizes, padding, margins and so on are all customizable using the visual interface or you can add your own CSS if you prefer to do it that way.
The grid which powers all Divi layouts has been completely recoded from scratch to a fluid, percentage based grid. All fixed widths have been removed so it the layouts you have created will function better on mobile devices and also allows for the Divi Builder to be used anywhere - allowing for custom post layouts and so on.
This is a huge update to an already great theme, moving to a fluid grid should allow for creative and better optimized layouts on mobile devices and I especially liked the new inclusion of the Divi Library and Global elements which should allow you to create your sites faster and more consistently - being able to export these elements is a great touch as well, allowing you to build up your library of custom elements and use throughout any site which uses Divi as the theme.