Divi Builder Review: A Modern WordPress Page Builder

Divi Builder is rightfully regarded as one of the best drag-and-drop page builders on the market. This popular WordPress plugin allows you to create complex responsive website layouts in minutes without using any code.

Therefore, even if you have no experience designing websites, you can build beautiful websites with Divi Builder and introduce rich media into your content, such as images, stylish text, videos, forms, tables, and more.

In this article, I would like to show you how you can use Divi Builder to create professional website layouts and pages.

This will give you a better understanding as to why so many website owners use this WordPress plugin.

What Does Divi Builder Offer?

At the end of 2018, WordPress released version 5.0 of their software. This was a significant release as it replaced the old WYSIWYG (What You See Is What You Get) editor with a new drag and drop block editor called Gutenberg.

Now that WordPress comes packaged with a drag and drop page builder, you may be wondering why anyone wants to purchase an alternative page building solution such as Divi Builder.

I do like the simplicity of the new WordPress block editor, however if you have used it, you will be aware that it is a basic solution that has many restrictions and few customization options.

In contrast, the possibilities with Divi are limitless. It can be used to create everything from simple blog designs to complex online shops and company websites. It really does take page building to a whole new level.

Divi Builder was launched in 2015 as a standalone page building solution that works with any WordPress theme. Previously, this functionality could only be used within the Divi WordPress theme, which was released by Elegant Themes two years earlier.

The plugin has been continually expanded and refined over the years. Elegant Themes are consistently publishing updates on their blog that detail bug fixes, tweaks, and major new functionality.

A good example of Divi Builder evolving is the visual builder. In the earlier versions of Divi Builder, custom layouts were created within the WordPress editor. A user-friendly “Visual Builder” was later added to help you create layouts on the frontend of your website.

The visual builder has taken center stage as the main user interface of Divi Builder, however you can still create layouts in the backend using the legacy builder if you wish (more on this later).

Divi Builder has a library system that allows you to save any layout you create. You can then load layouts from your library when you need them and adjust them to suit the page you are using it on.

The plugin comes with over 1,000 stunning premade layouts and more are being released through the official Divi Marketplace and third-party marketplaces.

These designs make fantastic starting points for your own custom layouts and website designs. I am a big fan of them as they drastically reduce the time you need to spend creating a unique layout.

The real selling point of Divi Builder is customization.

After spending some time learning how Divi Builder works, you begin to appreciate how versatile the plugin is. Every element on your page can be adjusted, whether it be styling, modules, rows, columns, or anything else.

Put simply, if it’s on the page, you can change it.

Divi Builder has great support for WooCommerce; Elegant Themes call this integration “WooBuilder”.

Using Divi Builder, you can create custom layouts for product pages and add WooCommerce-specific content modules. Premade layouts for online shops are available too.

Let’s take a closer look at how Divi Builder works…

Launching the Visual Builder

Once the Divi Builder WordPress plugin has been activated on your website, you will see a “Use the Divi Builder” button at the top of your posts, pages, and custom post types.

A small settings area can also be accessed from the WordPress editor that allows you to modify the width of your content.

If you go into a blog post or page and click on the Divi Builder button, you will see a message that states that “This Layout Is Built With Divi”.

You need to click on this button to launch Divi Builder on the frontend of your website.

Be aware, however, that if you disable the visual editor setting in your WordPress profile screen, Divi Builder will not work.

If you are creating a brand new blog post or page, you are given the option of using Divi Builder or the default WordPress editor.

Alternatively, you can launch Divi Builder directly from the frontend of your website, from the WordPress admin bar. The “Enable Visual Builder” link will be displayed on your website if you are logged in.

Although Divi Builder is generally used by WordPress users as a replacement for the default WordPress editor, it can work in harmony with the Gutenberg editor using the Divi Layout Block.

The Divi Layout Block can be inserted into any area of your page and be placed alongside regular WordPress editor blocks.

Multiple Divi Layout Blocks can be inserted into your content. You can create whole new layouts within the block or load previously saved layouts from your Divi Library.

As you can see, Divi Builder complements WordPress incredibly well by not taking over your whole website. You only have to use Divi Builder when you need it.

Divi’s Beautiful Layouts

When Divi Builder is launched, you are presented with three options.

You can choose to create a new layout from scratch, choose a premade layout, or clone an existing page.

If you choose a premade layout, the Divi Library will load and show all premade designs. Don’t worry if you close this accidentally as it can be loaded from the main Divi Builder menu at any time.

At the time of writing, there are over 1,100 layouts available and 149 layout packs. The designs are divided into 13 categories: Art & Design, Business, Community & Non-Profit, Education, Events, Fashion & Beauty, Food & Drink, Health & Fitness, Lifestyle, Online Store, Services, Simple, and Technology.

If you prefer, you can simply search through the premade layout library. You can also view your saved layouts and existing pages from this area.

A layout pack is a collection of layouts that has designs for several areas of your website. For example, it can include a layout for your home page, one for your blog, one for your about page, and another for your shop.

Clicking on the demo button will load a live preview of the design. You can view demos of all layouts in the Divi Layout Packs page.

If you click on “Use This Layout”, Divi Builder will start importing the layout or layout pack in question.

Like all WordPress page building solutions, Divi Builder inserts layouts directly into the main content area of posts, pages, and custom post types.

Therefore, if you import a layout into a blog post, a sidebar will be displayed unless you manually remove it. On pages, this process is more straightforward as most WordPress themes feature a full-width page template or landing page template that removes the sidebar.

Once you have imported a layout, you can start customizing the design to make it your own. Any changes you make can be saved and reused whenever you want.

Layouts can also be categorized, which is something you will find useful as your library of layouts grows.

The main Divi admin menu has links to the Divi Theme Builder and Divi Library.

Divi Theme Builder allows you to create unique page templates that have a defined header, body, and footer.

You can assign any layout to your templates and define exactly which areas of your website should be displayed.

For example, you could create one template for your home page and blog, one for your online shop, one for 404 error pages, and another for a series of blog posts you published.

Every layout you save will be displayed in the main Divi Library page.

From this area, you can access all layouts, modify layout categories, and import and export layouts.

When you choose to edit a layout from the main layout page, your layout will be shown in “Wireframe View”.

This mode resembles the look and feel of the legacy builder. You can switch back to the frontend visual builder if you wish, but you should find that this is a great way of viewing the structure of your layout and making some quick changes.

Divi Builder’s large collection of premade layouts will help you create fantastic designs in minutes. They are a great starting point for your own custom layouts and by browsing through the available layouts, you can learn more about how Divi Builder works.

Without a doubt, the Divi Library and Divi Theme Builder templating system are the backbone of Divi Builder and one of the reasons why Divi is so versatile and why professional designs can be created so quickly. It’s a feature that is still missing in alternative solutions such as the default WordPress block editor.

The Visual Builder Interface

Every WordPress page builder works differently, therefore you need to spend time familiarizing yourself with how Divi Builder’s visual builder works.

The main interface for Divi Builder is displayed at the bottom of each page. When the menu has been minimized, only a button with three dots is displayed.

Clicking on the button with three dots loads up the main interface.

You will see many options being displayed in the left, middle, and right-hand side of the page.

On the left-hand side, there are six buttons. The button with the three vertical dots loads up the visual builder settings menu.

This menu allows you to add three additional buttons to the menu for hover mode, click mode, and grid mode. Hover mode will show options for different parts of your page when you hover over them, whilst click mode requires you to click on that particular part of the page. The grid menu shows everything at once.

There are several other options here for changing the default viewing modes and enabling/disabling key features.

The other buttons on the left-hand side of the visual builder are for wireframe view, zooming in and out of your design, and viewing your page in desktop, tablet, and mobile devices.

All of these features can help you see how your page is constructed and how it looks in many different situations.

I am a big fan of the wireframe view mode as it strips away all design elements and shows how the page is structured. This is particularly helpful when moving things around and changing how things are positioned.

There are seven buttons in the middle of the visual builder interface: three on the left, three on the right, and a big X in the middle that closes the menu.

The first button on the left loads the Divi Library, the second saves layouts to your library, and the third clears the page layout.

On the other side, you will see buttons for page settings, editing history, and portability.

The page settings box allows you to change the page title, excerpt, featured image, background colors, styling, split testing, visibility, and much more.

Being able to undo and redo changes means that you never have to worry about making mistakes. You can revert changes at any time and go back to previous states of the current layout and for global layouts.

The portability button is also useful as it allows you to export and import your page layout.

At the right of the Divi Builder interface, you will see a search button, help button, and a button to save your layout.

Divi allows you to search through viewing modes, settings, documentation, and more. Clicking on a search result will immediately load the feature.

The Divi Builder Helper box is incredibly useful too. It shows several video tutorials and displays a reference to keyboard shortcuts.

These shortcuts can be used to speed up the process of creating layouts. There are shortcuts for undoing and redoing changes, saving your layout, changing viewing modes, copying modules, and more.

Elegant Themes have a detailed guide on the Visual Builder that explains how it all works.

It’s a fantastic reference, but when you are using Divi for the first time, I recommend loading up a premade layout so that you can mess around with everything. It will help you see how it all ties together.

Rows, Columns, Modules & More

The beauty of page builders is that you can populate each part of your page with many different types of content. This includes maps, tables, images, videos, widgets, and more.

In some WordPress page builders, these various content types are called blocks. In others, they are called elements.

Divi calls them Modules.

Unfortunately, Elegant Themes are a little inconsistent in their naming. Within Divi Builder, they are called modules, but in their marketing material and documentation, you will see many references to blocks instead of modules.

There are over 40 content modules in Divi Builder and each one contains dozens of customization options to help you shape what the module displays.

Modules have to be placed inside columns and rows.

If you are starting a page layout with a blank canvas, you will see a green button with a plus symbol displayed on the page.

When you hover over this, you will see an option to add a new row. The blue outline that is displayed around the row is called a section. You can add as many rows and columns as you wish to sections.

To put it another way, modules are placed inside columns, columns are contained within rows, and rows are placed inside sections.

When you hover over the section, you will see buttons to move the section, access section settings, duplicate the section, save the section to library, and delete the section.

You will see these same buttons at the top left of rows and columns too. Be sure to explore all of the options here, as it will give you a better understanding of how you control where content is placed and how content is styled.

If you click on the three dots at the end of the menu, a dozen or so additional settings are revealed.

When you add a new row in Divi Builder, you also need to select what column structure you want for the row.

You can easily change how many columns are displayed later if you decide to structure things differently. You can also drag and drop columns in the main canvas area until you find the structure you want.

Once you have selected a row and column structure, the “Insert Module” box will appear and you can select a content module for your layout.

When a module has been selected, its settings box will appear.

The level of customization available for each content module is staggering. You can define every aspect of its design, including colors, spacing, transitions, custom CSS, position, effects, and more.

The options that are displayed in the settings box will change according to the module that is selected.

Premade layouts can save you time, but if you want to get the most from Divi Builder and make your layouts unique, you will need to explore the settings box for modules, columns, rows, and sections. This gives you full control over the styling and position of everything on your page.

If you add a ton of modules, columns, rows, and sections to a page, there may be some areas of the page that feel a little crowded. For example, there are times when you hover over a module to load its settings and the settings for the row and section are also displayed.

When this happens, I recommend switching to wireframe view as everything is displayed in a cleaner format.

It is difficult to show exactly how flexible Divi Builder is using text and images.

Therefore, I encourage you to spend some time on the official Divi demo page to see for yourself what this WordPress plugin can do.

Using the Legacy Builder

Elegant Themes have made the visual builder the default method of using Divi Builder, however you can still create layouts directly within the WordPress editor if you wish.

Divi now calls the backend editor “Legacy Builder”.

In order to use it, you need to go into the advanced section of the Divi Builder plugin options page, disable the latest Divi Builder experience, and enable the classic editor.

Above the legacy builder are buttons to revert back to the standard WordPress editor and build on the frontend.

Those of you who have used Divi for years will be familiar with the legacy builder that is displayed underneath. New users will notice that it looks similar to the visual builder’s wireframe view mode.

At the top of the interface is an import and export option that lets you backup and restore Divi Builder layouts. Next to that is a settings menu that features split testing and a host of styling options and CSS settings.

Below that are links to save to library, load from library, and clear layout. On the other side, you will find buttons to undo changes, redo changes, and view a history of changes.

New rows and columns can easily be inserted into your page.

You can also add full-width sections and specialty sections where columns span multiple rows.

Since the legacy builder is displayed directly in the WordPress editor, you cannot preview changes to your layout in real-time, but this means that there is more space to create layouts and add modules.

I prefer this setup when structuring the page, as it feels less cramped than the visual builder.

The legacy builder remains an efficient way of creating custom layouts, as you can move any part of the page around using drag-and-drop functionality.

For some Divi users, this continues to be their preferred way of creating content and styling pages. I can see why many still use this mode, as once you understand how it works, creating new layouts is quick and has few distractions.

Divi Builder Plugin Settings

The vast majority of customization settings can be found within the main Divi Builder interface, however some additional settings can be found in the main Divi admin menu.

In addition to the Divi Theme Builder and Divi Library, you will see the main Divi Builder plugin options page, a role editor, and the support center.

The plugin options page is divided into four sections: Updates, API Settings, Post Type Integration, and Advanced.

You will need to enter your Elegant Themes username and API key to receive automatic updates for Divi Builder.

To use the Google Maps content block, you will need to enter your Google API Key in the API settings section. Google Fonts can also be disabled from this section.

Divi Builder allows you to select exactly which post types you use the page builder with. For example, you could disable Divi Builder on your gallery post type.

A host of other settings can be found in the advanced section, such as Javascript and CSS minification and disabling the Divi Builder product tour.

As noted earlier, this is also where you enable the legacy builder interface and replace the WordPress block editor (Gutenberg) with the Classic Editor.

The Divi Role Editor allows you to specify exactly what different user roles can and cannot do.

You can define whether users can access the options page, theme builder, the main Divi Builder interface, the layout library, and more.

For example, you could allow contributors to access Divi Builder and layouts when writing blog posts, but restrict them from accessing the plugin options page.

The last page in the Divi admin menu is the “Divi Builder Help & Support Center”.

A system report is displayed at the top of the page that highlights whether you have the right hosting setup for Divi Builder. I recommend referring to this page if you are having some problems with Divi. For example, layout imports could be stalling because resources are limited.

Since I had activated Divi Builder in my test WordPress website, I received a few warnings about my hosting setup not being optimal.

There are also options here to give remote access to Elegant Themes and chat directly with support.

A variety of Divi Builder tutorials are linked from this page too.

In addition to written tutorials, there are video tutorials to help you get started, using premade layouts, and using the Divi library.

The support page also has a safe mode option and a list of errors generated by WP_DEBUG_LOG .

Divi Builder is a user-friendly solution, but if you are new to the plugin, I recommend going through some of the provided tutorials after messing around with the Divi Builder interface. It will give you a good understanding of what Divi Builder can do and show you some cool features and tricks you may have missed.

How Much Does Divi Builder Cost?

Elegant Themes have one of the simplest and fairest pricing policies in the WordPress world.

You can purchase an Elegant Themes membership on a yearly basis or as a one-off fee. Both plans give you access to all Elegant Themes products and allow you to use them on as many websites as you like.

It costs $89 per year to purchase a yearly license and $249 to purchase the lifetime access license.

If you choose the yearly license, you can continue to use Elegant Themes products after your license has expired. You will not, however, receive any support or updates once your membership has expired.

The lifetime access license makes sense if you plan on using Elegant Themes products for more than two years.

All licenses come with a no questions asked 30-day money-back guarantee and you can cancel your membership at any time.

Divi Builder is just one part of the Elegant Themes membership package.

A membership also gives you access to the versatile Divi Theme. This is a great WordPress theme to use if you are a fan of Divi Builder, as the page building functionality is built directly into the theme.

The Elegant Themes membership includes the beautiful magazine WordPress theme Extra too — a design that is powered by Divi Builder.

Also included in the membership is the email marketing and lead generation WordPress plugin Bloom and the social media sharing WordPress plugin Monarch.

Elegant Themes have one of the best support areas in the WordPress world. Their vast documentation area has in-depth written and video tutorials for all of their products, but if you are still unsure about something, you can open up a support ticket for help.

Final Thoughts

I hope you have all enjoyed this detailed look at Divi Builder.

This WordPress plugin remains one of the best drag-and-drop page building solutions on the market, striking a great balance between usability, features, and advanced settings. The inclusion of thousands of high-quality professional layouts is the icing on the cake.

An Elegant Themes membership continues to give fantastic value for money as well. Therefore, those of you who want to use Divi Builder will gain access to four more advanced WordPress themes and plugins.

If you want to see Divi Builder in action, check out the Divi Builder preview area and Elegant Themes demo page.

Thanks for reading.

Kevin