- Editor Rating
- Rated 4.5 stars
- Divi Builder
- Reviewed by:
- Published on:
- Last modified:
Drag and drop page builders have become hugely popular over the last couple of years. They allow anyone, regardless of their technical experience, to create beautiful pages in minutes.
One of the reasons they have become so popular is their user-friendly interfaces. By simply dragging and dropping blocks into the canvas area, you can create stylish designs that are as stylish, or as simple, as you like.
Over the last year, we have covered many drag and drop page building solutions on aThemes. This includes our review of MotoPress Content Editor, our comparison of Visual Composer and Beaver Builder, and our large collection of the best drag and drop page builders available for WordPress.
In this article, I would like to take a closer look at Divi Builder. Sourced from Elegant Themes' fantastic Divi theme (review), Divi builder is a feature packed content building solution that was released near the start of October 2015.
I hope you enjoy the review. 🙂
What Does Divi Builder Offer?
When a new WordPress product is released, it is inevitably rough around the edges. There will be bugs in the software and great features that the developers had not even considered adding. I see this occur every single time I review a new product. It is annoying for me as a reviewer and frustrating for customers who purchase the product at launch.
This tends to happen because the developers are keen to start selling their product and rush it out for release. It also happens because developers do not do enough bug testing during the development of the product.
Since Divi Builder was only released a week or so ago, you should expect some teething problems with it. Well, shouldn't you?
The reason you don't have to worry about bugs in Divi Builder is because it is not technically a new product. The functionality of Divi Builder has been part of Elegant Themes' flagship Divi theme since it was released at the end of 2013.
Over the last two years Elegant Themes have refined what was already a good product into a great product by adding additional features and functionality (those of you who have read my comparisons of Divi theme with the Genesis Framework and X Theme will know what to expect).
Divi Builder boasts an easy to use interface, a great selection of content modules, many preconfigured layouts, and an endless list of options to help you tweak things and customise your content in the way you want.
Perhaps the best thing about Divi Builder is that it can be used with any WordPress theme. You do not need to use Elegant Themes' Divi theme in order to create beautiful pages anymore.
Please note that Elegant Themes former page building solution ElegantBuilder has been replaced by Divi Builder (which is a good thing as ElegantBuilder was starting to look very dated).
The Divi Builder Interface
Once the Divi Builder plugin has been activated on your website, you will see an option to “Use the Divi Builder” on your editor page.
You will see this button on your posts, pages, and the projects custom post type that is added when you activate Divi Builder (you can find out more about the projects custom post type here).
When the Divi Builder has been opened, the Divi Builder button will be replaced with an option to reactivate the default WordPress editor. More importantly, the content area will be replaced with the Divi Builder interface.
A big part of using a drag and drop page builder is being familiar with its interface. When you first start using the plugin, it can take 15 minutes or so to become accustomed to where everything is and how it all works.
Divi Builder is no different in this regard, but it does not take long to appreciate the way Elegant Themes has set it all up.
To help you appreciate how Divi Builder works, let's take a walk through the interface. This will give you a better understanding of how Divi can help you create beautiful pages on your website.
At the top of the Divi Builder interface is the navigation panel.
On the left-hand side of this navigation panel are options to save to library, load from library, and clear your layout. This allows you to save any layout you create and then load it at a later time. A number of predefined layouts are available for selection too (but more on that later).
On the right-hand side there is an undo button, a redo button, and a history dropdown menu that lets you see all the changes you made. You can use the undo and redo buttons as many times as you need. The history dropdown menu works in a similar way to the WordPress revision system i.e. it allows you to revert back to a previous state at any time.
The area underneath the navigation panel is where you add content.
The blue panel at the left hand side of the interface is a section. Within each section you will see multiple green panels. Those green panels represent rows. Inside these rows you will see grey content modules contained within columns.
In other words, your content modules are placed inside columns, which themselves are placed inside rows, which in turn are placed inside sections.
You will see a list of icons inside each panel. The icon that has three horizontal lines opens up a settings box. If you open the settings box within the section panel, the settings for sections will appear. Likewise, if you open the settings box for rows or modules, the corresponding settings boxes will appear (more on these settings later).
The rectangle icon allows you to clone sections, rows, and modules. Selecting this option will automatically add a copy of the item you selected. It is a quick and effective way of building a page with common items.
Within the row panel you will see an additional icon with three columns. Selecting this icon will open up the “Insert Columns” box.
There are eleven different column structures available through this pop up. All of which have a variation of halves, thirds, and quarters.
At the bottom of each panel is an option to delete the section, row, or content module, in question. Underneath this area are links to add additional sections, rows, and content modules.
If you would like a section without any rows and columns, choose the option to add a fullwidth section.
Eight fullwidth content modules are available for your fullwidth section.
Another cool feature is the speciality section. Selecting this option will bring up nine different layouts.
These row and column structures present further options for you to present your content to visitors and brings the total number of column and row layouts to twenty.
As you can see, once you break down the Divi Builder interface, it is very easy to understand. What is perhaps not apparent from the above screenshots is just how quick the interface is to use. Everything happens in an instant, whether it is adding new content modules, deleting rows, or cloning sections. As soon as you select something, it will appear (and disappear on deletion).
Divi Builder gives you a great amount of control over the way your content is displayed; whether it be the design of your layout of the look of your content modules.
If you recall the settings icon I mentioned earlier that has three horizontal lines. Clicking on this icon in the sections panel brings up a lot of interesting options. This includes an option to display an image or video in the background, custom padding, and renaming the label from section to something else.
You can link the section to a unique CSS ID or class. You can also define CSS directly for the area before the element, in the element, and after the element.
These options are also available in the row settings box. What's really cool is that you can define a background colour or image for each column in a row. You can also adjust the padding for each column.
Thankfully, Divi Builder does not overwhelm you with options.
I have no doubt that the majority of users will be happy with the default settings for sections, rows, columns, and content modules. You will therefore never need to modify the settings available unless you want to.
This, in my humble opinion, is how all WordPress plugins should be set up. They should work out of the box, but have options for those that like to tweak things.
Divi Builder Content Modules
Divi Builder has been built with a responsive design. This means that your page layout and content will look great on any device, whether it be a smartphone, tablet, or desktop browser.
The plugin launched with forty content modules. Eight of these content modules are restricted to fullwidth sections.
There is a great variety of modules on offer. This includes pricing tables, post accordions, email opt-in forms, video sliders, and image galleries.
It only takes a second to add a content module to your page.
All you have to do is click on the “Insert Module” link. A list of all content modules will appear in a pop up box. You can also load items from your library.
You will then be asked to configure your content module.
There are many common options available, however many options will also depend on the content module you have selected. For example, with the video module you need to define your video URL and with the gallery module you need to select suitable images from the WordPress media gallery (images can, of course, be uploaded directly through the WordPress media gallery).
In the advanced design settings tab you can select the hover icon and define your caption and title settings. Custom CSS code can be added to a number of places via the custom CSS tab.
Three options are displayed at the bottom of the settings box. Clicking on the eye icon in the middle will let you see what your content will look like on smartphones and tablets.
The other options are “Save & Add to Library” and “Save to Exit”. Exiting will take you right back to the Divi Builder interface.
Saving to library will allow you to save the module and use it at a later date. You can name the template and choose a category for it.
There are two interesting options available when you choose to save a module to library: Global items and selective sync.
Global items allows an item to appear on multiple pages on your website. A good example of how this can be used is a content box in your footer area that describes what your company does. If the item is marked as a global item then any changes you make to this module will be duplicated across your website. You therefore do not need to update the module on every single page the about box appears.
Selective sync can be used to share common settings on other areas of your website. For example, you could save the design settings of a particular module for use on other parts of your website, however the content itself would not be synced.
A Selection of Pre-Made Layouts
A quick tour of the Divi Builder preview page showcases the kind of layouts that can be designed using Divi Builder.
These designs are inspiring, but they do not help people like myself who do not have a great eye for design. I know what I like when I see it, but I can find it difficult to think of good designs, even with so many content modules and layout structures available.
Thankfully, Divi Builder provides a solution for poor designers like myself.
Selecting the “Load from Library” option in the main navigation panel of Divi Builder pops up a box that lets you load items you have saved from library. You can also choose from many predefined layouts.
The current version of Divi Builder offers thirty-two predefined layouts. This will help you quickly create common pages. There are layouts to create case studies, sales pages, about us pages, landing pages, and shopping pages. Multiple home pages are also available.
Selecting a layout will automatically populate your interface with the corresponding content modules and structure.
The example below shows you what is added when you select the “About Us” layout.
This will add the following content to your page.
The library system that Divi Builder uses should not be underestimated. It really can save you a lot of time when building your website.
For example, when you want to create a contact page, simply select the contact page layout from the library. This saves you from having to create the layout from scratch.
The library system really comes into its own once you start building your own library of layouts. It really changes the way you create pages on your website.
A good example of this would be an email opt-in form for your newsletter. You could add this to multiple pages and blog posts on your website and define it as a global item so that any changes you make to the sign up box is implemented across your website.
Likewise, you could easily save common items to your library such as contact forms, pricing tables, galleries, frequently asked questions, and more.
Divi Builder Plugin Settings
Three different settings pages can be found in the main Divi menu.
The sign up content module in Divi Builder has support for MailChimp, Aweber, and Feedburner. This page is listed as Plugin Options in the admin menu.
If you want to integrate MailChimp, you need to enter the appropriate API key. An authorisation code is necessary if you want to integrate Aweber into your website.
The next settings page is Divi Library. This page lists all of the layouts you have saved in Divi Builder.
Items can be filtered by their layout type: Modules, rows, sections, and layouts. You can also filter items by whether they are a global item or not and by the category the item was assigned.
You can visit this page at any time and edit your library items.
What is perhaps not apparent initially is that there is an option to manage your library items from this page. It is displayed above the Layouts header.
You will also see a drop down menu to “Export Divi Layouts”. Selecting this option will drop down an option to backup all of your layouts. If you prefer, you can backup individual layout types.
I would prefer to see both of these options placed on a separate page as they could easily be missed.
The last settings page is the Divi Role Editor.
Divi Builder lets you control exactly what each user group can and cannot do. You can enable and disable plugin options, the Divi Library, elements of the Divi Builder interface, library settings, settings tabs, and settings types.
You can also enable and disable each content module for a particular user group. For example, you could remove the option to add pricing tables for authors.
Divi Builder has a small options area at the moment because most settings are built directly into the interface. I like this approach, but I have no doubt that as Divi Builder is developed over the next year we will see many more options added to the settings area.
The Cost of Divi Builder
Div Builder is included with the Elegant Themes developer and lifetime plans.
Both of these plans grant access to all eighty-seven Elegant Themes WordPress themes and six high quality plugins. You will be able to download products such as their flagship theme Divi, their social media sharing plugin Monarch, and their email opt-in plugin Bloom.
Layered photoshop files are provided with all Elegant Themes designs.
Elegant Themes has a fantastic documentation area for customers and an active discussion forum for support. Support and updates are provided for the duration of your membership.
The developer plan is available for $89 per year while the lifetime access plan is available for a one off fee of $249. The products and features provided with these plans are identical so it really comes down to how long you believe you will stick with Elegant Themes.
If you see yourself renewing your membership more than twice, the lifetime access plan will save you money. Of course, you will need to spend more money up front in order to make a saving in the long run.
A thirty day money back guarantee for anyone who is not happy with their membership, however I have no doubt that most WordPress users will be happy with what they receive for their investment.
Divi Builder is undoubtedly one of the best drag and drop page building solutions available to WordPress users. It will rightfully be compared with the market leader Visual Composer.
Every drag and drop page builder has a different system for creating pages. I do not believe the systems available in other solutions are bad as once you get used to how any system works, you will be able to create professional pages easily.
However, I do believe that one of the main strengths of Divi Builder is its user-friendly interface. The system of dividing content into sections, rows, columns, and modules, works really well. It is very easy to understand and makes customisations a pleasure to administrate.
I briefly spoke about the history of Divi at the beginning of this article. One reason Divi Builder is such a great solution is because it was ported from the Divi theme. Despite Divi Builder only being released as a plugin recently, its interface and features have been enhanced and refined over the last two years. All of this is apparent when you use the plugin.
If you are looking for a way to create beautiful content and build pages on your website, I recommend checking out Divi Builder. You won't be disappointed.
Thanks for reading.
Has a user-friendly interface
The system for creating layouts works really well
A good variety of content-modules are available
Predefined layouts are very useful
The library system opens up many possibilities with Divi Builder
An Elegant Themes membership offers tremendous value for money
Is not available on its own – An Elegant Themes membership has to be purchased
Lacks some content modules that are available in other solutions (though criticism can be levied at every drag and drop page builder)
The functionality of the plugin cannot be extended in the same way as other solutions such as Visual Composer and MotoPress Content Editor
Summary: A user-friendly solution that helps you create professional layouts in minutes. Not as extendable as other WordPress page builders, though this shouldn't be an issue for non-developers.
Rated 4.5 stars