The Divi theme is Elegant Themes’ most popular, most powerful and arguably most beautiful theme to date. This theme is powered by the Divi Builder (our review), a page builder plugin that allows anyone to build well-designed websites using drag-and-drop elements. Let’s go over everything this theme has to offer.
Key Features of the Divi Theme
These theme is jam-packed with features, but there are a few that are more noteworthy than others. They are:
- The Divi Builder: The Divi Builder is what makes this theme so powerful. This page builder plugin allows you to create unique page designs using drag-and-drop modules.
- Responsive Design: This theme is fully responsive to ensure you never need to worry about your site displaying poorly on certain devices.
- Fullwidth Modules: Web design is moving toward simpler styles, and the Divi Builder comes with fullwidth modules to help you create simple yet well-designed web pages.
- Versatile: The Divi Builder’s customizable modules give this theme enough versatility to produce several different site designs.
- Secure: Elegant Themes partners with Sucuri to ensure their code and files contain 0 security flaws and vulnerabilities.
- Split Testing Capabilities: The Divi Builder comes with Divi Leads, an “integrated split testing and conversion rate optimization system” that lets you test different styles of the same module against one another to see which one converts better.
Installation & Documentation
This theme is simple to install and set up. All you need to do is upload the ZIP folder you downloaded from Elegant Themes through the WordPress admin, install the theme, and activate it to get everything up and running.
If you extract the ZIP folder and open the inner Divi folders, you’ll find a readme.html file that leads to the theme’s full documentation. The team over at Elegant Themes have done a wonderful job with this documentation. It’s very extensive and features both video and written instructions.
You’ll find these sections in the documentation:
- The Divi Basics
- The Divi Modules
- The Divi Library
- The Divi Theme & Module Customizer
- Additional Features
- Elegant Themes Basics
These sections contain detailed descriptions on how to use this theme, and it does a fantastic job of showing what it’s capable of producing. This includes detailed descriptions on how to use each individual module in the Divi Builder as well as explanations on how to perform incredibly specific tasks, such as how to use mega menus and how to perform split testing with Divi.
The Divi Theme Menu
The Divi theme menu is filled with links to a number of different pages where you can customize this theme and control how it looks sitewide and per module. I’m going to go inside the different areas of this menu so you know what to expect if you purchase this theme.
This theme comes with an unbelievable amount of customizable features, as you can see in the image above. These features are separated into seven tabs. The General tab lets you customize various style options, such as your logo/favicon, whether or not your navigation bar is fixed, and more. The rest include the following:
- Email marketing options.
- Social media marketing buttons/links.
- How many posts display on specific pages.
- Which UI buttons display:
- Smooth scrolling
- Scroll to top
- Disable translations
The image above tells you which navigation options you can edit in the Navigation tab. It includes which default WordPress pages you wish to display in your site’s navigation menu as well as whether or not you’d like dropdown menus to display and how you would like certain things to be organized. This tab comes with three sub-tabs – Pages, Categories and General Settings – allowing you to change navigation settings for all three.
The Layout tab allows you to select which items you want featured in your posts’ meta info sections. You can also set these options for single page layouts.
The Ads tab allows you to enable a banner image, insert URLs for banner images and input your AdSense code.
The SEO tab allows you to adjust and assign a number of different SEO-related settings. You would normally need outside plugins or add custom code to your site’s files to take advantage of these settings, but Elegant Themes has gone ahead and included them with this theme.
The Integration tab makes it simple for you to add custom or third-party code to your theme’s header and body as well as the tops of your posts and bottoms of your posts.
The Updates section is where you can enter your Elegant Themes username and API key to ensure you get the latest updates for Divi.
The Theme Customizer item in the Divi menu links to the WordPress frontend theme customizer. You’ll find the general items here, such as:
- Static Front Page
However, Divi adds a few things, such as a separate section for buttons where you can change the styles of the buttons you place on your site using slider buttons, clicks and simple selections to change styles rather than raw code.
The Blog and Mobile Styles sections allow you to adjust the widths and heights of various elements on your site, such as the meta and header text sizes and line heights for posts as well as how tall sections, rows and text sizes are for mobile devices.
The Theme Customizer lets you see your changes in real-time just as any theme customizer does. However, the preview will switch to the size of a smartphone while you’re editing your site’s Phone styles, as depicted in the image above.
The Role Editor lets you control who has access to what in the Divi theme. You can control which features different WordPress users have access to, which Divi Builder interfaces they can use, which Divi Builder modules they can use and more.
The Divi Library menu item is linked to the Divi Builder, so we’re going to go over the Divi Builder first.
The Divi Builder
The Divi Builder is the crème de la crème of this theme and the sole reason why most of you will wind up using it. The Divi Builder is Elegant Themes’ page builder plugin, which they have built specifically for use with the Divi theme. You can, however, use it as a standalone plugin if you have an Elegant Themes Developer or Lifetime Access account.
You’ll see a Use the Divi Builder button above the editor of every post or page you create. The editor will be replaced with the Divi Builder once you click the button:
The page building elements of the Divi Builder work in a hierarchy format. It uses Modules inside of Rows inside of Sections. You can place several Modules inside of a Row and several Rows inside of a Section.
There are three different types of sections, 11 different types of rows depending on the type of section you’re building and over 45 different modules.
Sections, Rows & Columns
The Divi Builder has three different types of sections:
Standard and Specialty sections use columns that dictate where rows can be placed. Here’s a screenshot showing which column layouts are available for Standard sections:
Here’s a screenshot showing which column layouts are available for Specialty sections:
Fullwidth sections cannot have rows or columns, only modules.
Modules are what you’ll use to add content to your pages using the Divi Builder. There are over 45 different modules available with the Divi Builder, which you can see in the image above. Each module has three different sets of settings you can edit, which are General Settings, Advanced Design Settings and Custom CSS.
The General Settings and Advanced Design Settings are geared toward user-friendliness, which is why this theme and page builder plugins in general are so popular among novice web designers who don’t know how to code. The Custom CSS section is where experienced web designers can stretch their legs and get creative.
The Divi Library
When you edit a module in the Divi Builder, you’ll notice there are two different ways to save it:
- Save & Add to Library
- Save & Exit
Using the Save & Exit button saves the module to that specific post or page. Using the Save & Add to Library button saves the module to the Divi Library, which is where this plugin truly shines.
The Divi Library allows you to reuse modules you’ve already made so you don’t need to go through the trouble of re-adjusting the module’s settings every time you wish to use it. You can even save entire page layouts as templates. When you create a new post or page and wish to use a module or template you’ve already built, click Load from Library, and select it. It’s that simple.
The Divi Library has two key settings you can adjust for each module that make it powerful:
- The ability to selectively sync which settings you’d like to save for that module.
- The ability to make modules global.
The General Settings is where you’ll enter such things as text and links. The Advanced Design Settings is where you’ll configure various design settings for your module. If you want to use the same style of a module but change its text/links every time, you can use Selective Sync to only save the module’s design settings.
It can be a hassle to go to every different page and post to change a few styles of the same module you added to each of those pages and posts. That’s where the Global Module feature comes in. For example, if you save a Slider module as a global module and use the module on a number of different pages, all you’ll need to do is go into the Divi Library and adjust the module’s settings to change its style sitewide.
Split Testing with the Divi Theme
Divi is a great theme option for entrepreneurs or companies looking to sell their products or services through their sites. If you have a landing page with a call to action, such as a sales page with a Purchase button, you can use the Divi Leads feature to test different versions of the same module to see which ones are more effective.
For instance, if you have a landing page with a fullwidth header, you can use Divi Leads to split test different versions of that header to see which one leads to more sales. Divi will display the different versions of that header to different visitors, and it’ll track leads and bounces to let you know which header is more effective.
Single Page & Post Settings in the Divi Theme
The last thing I’m going to mention are a few minor settings you can adjust for single pages and posts. You’ll find them toward the upper, right-hand corner.
Here are the settings you can configure for single pages and posts:
- Page Layout:
- Right Sidebar
- Left Sidebar
- Hide Nav Before Scroll:
You cannot purchase Divi by itself. You have to purchase an annual or lifetime Elegant Themes account in order to gain access to this theme. Elegant Themes has three different plans you can subscribe to or purchase:
- Personal: Includes all of Elegant Themes’ premium themes.
- Developer: Includes all of Elegant Themes’ premium themes and plugins.
- Lifetime Access: Includes everything the Developer plan offers but for a one-time cost.
Click the links below to purchase one of these plans or view demos of the Divi theme:
The Divi theme is one of the most versatile themes available in the WordPress industry, and it’s most definitely Elegant Themes’ most popular theme. The theme’s ease of use makes it a practical choice for novice WordPress users, and its versatile and open-source nature make it a great option for experienced developers with plenty of clients to please.
The Divi Builder plugin combined with the theme’s rock-solid security, responsive design and Divi Leads feature are what make this theme a smart choice for online businesses.
Don’t forget to use our ElegantThemes Coupon to get 20% off on Developer’s license.