The Divi Builder plugin is a premium page builder plugin by Elegant Themes. The plugin allows you to build beautiful page designs without ever touching a single line of code. The Divi Builder was originally tied to Elegant Themes’ Divi theme, but the development company separated the tool and made it a standalone plugin following multiple requests from ET customers.
The Divi Builder is compatible with any theme from any developer. Your theme essentially acts as a framework for the Divi Builder. I also want to note that you can use the plugin in the post editor if you wish to create custom layouts for blog posts.
Let’s go over this plugin’s key features before diving right into everything it can do.
Divi Builder Features
- Drag-and-Drop Design: Build beautiful pages with ease with this plugin’s drag-and-drop design.
- 45+ Content Modules: Coming up with designs can be a pain or downright impossible, especially for those lacking design skills. This plugin comes with over 45 content modules you can drag and drop throughout the builder to design stunning pages filled with sliders, blurbs, call to actions and more.
- Simple Design Configuration Options: Each module comes with a set of options you can configure to change its design, all without having to touch a single line of code.
- Custom CSS Available for Each Module: Experienced developers and designers can add their own custom code if they feel limited by a module’s settings.
- The Divi Library: If you plan to use a particular module on a regular basis and only wish to change its content every time, you can save it in the Divi Library and select the Load from Library option the next time you wish to use it rather than having to recreate it and adjust its settings every time.
- Lockable Items & the Divi Role Editor: Administrators can control who has access to what in regards to the Divi Builder. You can lock individual modules so your clients can’t touch them, and you can even block certain users from accessing the entire plugin.
- Split Testing with Divi Leads: This plugin comes with a split testing feature online businesses will love. You can split test different versions of the same module against one another to see which versions are more effective than others.
01. The Divi Builder
The image above depicts what you can expect when you enable the Divi Builder in the editor of a page or post. The builder in the image above is using one of the plugin’s many predefined layouts.
The Divi Builder comes with a number of predefined layouts you can use to streamline the building process. These layouts are completed pages the team over at Elegant Themes have designed themselves. They feature dummy content and basic styles, so all you need to do is load the layout from the library, add your own content, and edit the styles.
This streamlines the building process for you by ensuring you don’t need to spend extra time coming up with your own page designs yourself, allowing you to get more done. This feature will most likely be useful to inexperienced designers and inexperienced WordPress users.
Enabling the Divi Builder
The image above is what you’ll be greeted with whenever you create a new page or post with the plugin activated. Once you click the Use The Divi Builder button, your editor will be replaced with the Divi Builder:
How the Divi Builder Works in a Nutshell
Before we start talking about sections, rows and modules, let’s go over how this plugin works. It starts with a section. You then place a row inside of that section, place columns inside of that row, and place modules inside of those columns.
Here’s a visual example of how this works:
Here’s what the Case Study predefined layout looks like in the Divi Builder:
This is how it looks on the frontend. You can see the bottom of the text module at the top of the image, the side-by-side text modules in the middle and the top of the slider module on the bottom:
Sections, Rows & Columns
Sections are the first things you’ll add to your page. There are three section types:
The settings for each section type are more or less the same with a few differences here and there. They involve being able to upload background images and videos to your sections and changing the dimensions and effects of those backgrounds.
The Standard section is the Divi Builder’s default section type. It’s the section type you’ll see when you click the Use The Divi Builder button on a new page or post for the first time. A standard section can have as many rows as you want it to have, but it can only have as many as four columns.
Here are the available column types for Standard sections:
All you need to do is click the Change Structure button to select a new column type if you change your mind after choosing one for your row:
If you need to use a particular row or section twice, click the Clone button:
Fullwidth sections do not use columns at all. There are also a limited amount of modules you can use as this section type only uses fullwidth modules, which are:
Specialty sections don’t use uniform columns and rows in the same way Standard sections do, and they also don’t use fullwidth modules. They use unique, or “specialty”, structures for rows and columns:
02. Divi Builder Modules
Sections, rows and columns provide the structure of your page. Modules are what you’ll use to add content to it. Modules can be dragged, dropped and arranged in nearly any way to create pages like these:
View the full demos at Elegant Themes:
You’ll need to use your own images, but the Divi Builder does come with a great selection of icons. Here’s a peek at a few of them:
The settings are different for each module, but each module has a General Settings section, an Advanced Design Settings section, and a Custom CSS section.
The General Settings section is where you’ll edit a module’s content. The Blurb module is a popular module to use. Its General Settings include the ability to change what text appears in the module, what image (or icon) appears in it and the color of the text.
The Advanced Design Settings section is where you’ll configure the more technical styles for your module, including such things as specific colors for specific elements, specific widths and heights for specific elements, custom margins/padding and more.
The Custom CSS section is where experienced developers can get their hands dirty and take the Divi Builder outside of its limits.
03. The Divi Library
The Divi Library allows you to save individual modules, rows, sections and even entire page layouts. This lets you re-use module designs and layouts you create as many times as you want without needing to reconfigure your settings every time. All you need to do is click the Load from Library button whenever you want to re-use a previous module, row, section or page layout you used in the past.
You will, however, have to save any module, row, section or page layout you’d like to use later on, and there are a few different ways you can save them in the Divi Library.
When you save an element to the library, you can selectively sync which settings you save to the library. For example, if you use the same Blurb module on several pages but change its content every time, you can use the Selective Sync setting to only save the module’s Advanced Design and Custom CSS settings.
You also have the option of saving a module as a Global Module with the Divi Library. When you make a module a Global Module, you can adjust its settings in the Divi Library and have its style change wherever you placed that module on your site. This makes it easy for you to change colors and other styles on the fly.
Import & Export Feature
Experienced developers and web designers who build their own styles and layouts with the Divi Builder will love the Import & Export feature. This feature lets you export your current Divi Library and import it in a different site. This lets you use your styles anywhere without having to re-create in every new site you build.
You can also use the Import & Export button within the Divi Builder itself.
Split Testing with Divi Leads
The Divi Builder plugin comes with Divi Leads, a split testing system the team over at Elegant Themes has integrated into this plugin. If you use the Divi Builder to create a sales page and wish to know if your header is compelling enough or if your call to action is effective, you can enable split testing to test different versions of modules against one another.
When you edit a page with the Divi Builder, you can enable split testing by opening the Divi Builder’s settings on that page. When you do, you’ll be able to select which module you want to split test. It’ll duplicate your module, and you’ll have the chance to change the content of the second module.
Divi Leads will then show the different versions of that module to different users of your site and tell you which module is more effective at capturing leads.
The options for this plugin are fairly limited. The main Plugin Options screen only has two tabs, one where you can input your API keys for MailChimp or Aweber and one where you can input your Elegant Themes API key to ensure you receive the latest updates for the Divi Builder.
The Divi Role Editor
The Divi Role Editor is where you’ll control who has access to what in regards to the Divi Builder. For example, if you have guest authors who post on your site, you can disable their access to the Plugin Options screen or the Divi Library. You can even block their access to the builder altogether.
This is also where developers can control what parts of the Divi Builder their clients have access to. It’s great that your clients can design their own pages with the Divi Builder, but if you’ve set up specific styles that you know they shouldn’t mess with, you can use the Divi Role Editor to block their access to the Advanced Design and Custom CSS settings.
You can also lock specific modules in the Divi Builder. Just right-click on the module you want to lock, and click Lock.
Price: $89/Year Minimum.
The Divi Builder is an Elegant Themes plugin, and all of Elegant Themes’ premium plugins are available with an annual Developer account or a one-time purchase Lifetime Access account.
You can, however, use the Divi Builder with the Divi theme, which comes with Personal accounts.
The Divi Builder plugin is a great tool to use to build beautiful page layouts in a quick manner without needing to know how to code. The ability to export modules or your entire library is a plus for developers who want to get more done in shorter periods of time.
I tested my site’s page speed scores and times with various tools before I installed the plugin, after I installed and activated the plugin as well as on pages built with the Divi Builder. I found no significant differences in the way my site ran and loaded with this plugin, even on pages that used animated styles.
The only thing I would advise against is making a habit out of using this plugin to build blog posts. A few blog posts here and there is fine, but this plugin leaves a mess of shortcodes when you deactivate it. This is the nature of page building plugins and isn’t specific to the Divi Builder, but it can create a sizeable mess for you or your developer if you ever decide to stop using this plugin and have created tons of posts with it. Just something to keep in mind.
Other than that, this is a powerful plugin that inexperienced and experienced WordPress users alike will love, not to mention the fact that Elegant Themes keeps their blog updated with plenty of tips and tricks on how to get more use out of this plugin.
Don’t forget to use our ElegantThemes Coupon to get 20% discount on