[sowmedia_posttemplates_heading tag=’h1′ link_apply=” link=’manually,http://’ link_target=” style=” size=” subheading_active=” subheading_size=’15’ margin=” margin_sync=’true’ padding=’10’ color=” custom_font=” av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” custom_markup=” av_uid=’av-k7q1bh6w’ custom_class=” admin_preview_bg=”][/sowmedia_posttemplates_heading]
Last year, the American company Elegant Themes proudly introduced the newest version of their page builder for WordPress: Divi Builder 3.0 ($ 89,-). With this plugin you can drag and drop the elements of your website, building the layout of your WordPress website. Like building blocks for WordPress. In this article, we will test the Divi Builder 3.0 and find out how the plugin works when you want to build a WordPress website.
This article contains affiliate links.
So what is a page builder for WordPress?
A page builder – or content builder – for WordPress is an addition to the standard page editor for WordPress. But instead of using the standard text editor, you can build your page, using several blocks, often called ‘elements’. An element can be an image, a piece of text, but also a slideshow, a chart, a video, an icon, a price list, etc. Most page builders have a wide range of elements, and are also responsive, which means the blocks fit together on large screens, and slide underneath each other on more narrow screens (like smartphones). Plus there are page builders that also work on the front end of your website (check out our article on front-end editors voor WordPress). Divi Builder 3.0 offers a page builder for both the front and back end.
First impression of the Divi Builder
When you look at the demo for Divi Builder 3.0 you can’t help but notice the clean design of this WordPress website. The question is whether we can put together a WordPress website that looks as smoothly as this one, just by dragging and dropping. That is why we put the Divi Builder on a blank WordPress website and tried to make a nice demo. In order to get the best result, we installed the Divi Theme, which Elegant Themes advises we use in combination with the Divi Builder.
The Divi Builder interface
The Divi Builder essentially has two different interfaces: a front-end builder and back-end builder (for more information, check out the part under ‘So what is a page builder for WordPress?’). We’ll mostly talk about the front-end interface, because this is by far the most interesting of the two. Later we’ll talk about the back-end interface.
Visual Builder: the front-end editor of the Divi Builder
Elegant Themes called its front-end editor the Visual Builder. When opening an existing page in this Visual Builder, you’ll see your page almost exactly as it is visible to the public, only with a few additional buttons. The purpose of Elegant Themes is to continually give you an image of what your WordPress website is going to look like. And they did a very good job at this, by minimizing the presence of buttons and marks.
When moving your mouse over the elements (called modules), only the options that apply to that element appear. This way you can edit, move, copy or delete the element. You can also enlarge or reduce the element or add extra elements, etc. Because the options only
appear by moving your mouse over the element, the screen stays pretty empty and you keep seeing what the page is going to look like. This makes this Visual Builder especially suitable for people who are visually oriented – hence the name.
Allow yourself some time to get used to the Visual Builder. Because many buttons and marks are not visible until you move your mouse over a certain area, it may not immediately feel very intuitively. Still, this front-end editor is a very nice way to edit your page. Because you immediately see the result of the changes you make, it allows you to quickly build up your pages.
Also, you need to train yourself to always place the elements in a certain section. Sections are spaces of 100% screen width up to 25% content width. With several sections, you build up the skeleton of your website; next, you place your modules into these sections. This sounds time-consuming, but this way, your modules can scale to the width of your section. For example, when you place an image in a 25% section, the image will automatically be smaller than when placing it in a section of a 100% width.
At the bottom of the page, floats a purple dot. When you click on it, you get the general options for the entire page. This way, you can save or remove the page and look through the revisions you have made. You can also save the page as a template, which enables you to apply your block layout to other pages. With only a few clicks, you see what your page is going to look like on mobile devices (tablets and phones).
What elements are available?
The Divi Builder comes with quite a few elements. Of course there are the standard elements, such as text, images and sliders, but additionally the Divi Builder comes with over 40 other standard elements. For example counters, audio widgets, buttons, forms, portfolio’s, tabs, social media icons, etc. You find the complete list on the overview page of Builder 3.0 This can be further expanded with little elements that you can make yourself and save in the library.
Each element can be configured quite extensively. This may be overwhelming, but most default settings are usually correct. The element settings pop up in a new window. We think this a little crammed up; there are so many setting options, they could use a little more space.
The Divi Visual Builder with sidebar
Luckily Elegant Themes has taken this into account; by clicking on the sidebar icon in de popup, it unfolds to the left and becomes a sidebar, just like the WordPress Customizer. Then you have all element settings neatly in a row, and on the right side you still have the entire website the way it is seen by visitors. We think this should have been the standard setting of this page builder.
After placing a text element, writing becomes a pleasure. You just click on the text in your page and you start to write. This is a fantastic feature of this builder. It works so intuitively and logical, that you’d almost forget that an impressive piece of technology makes this all possible.
The back-end interface
The back-end interface of the Divi Builder is really a ‘folded’ summary of your page. Each block stands for a section or a module. Many buttons include an explanation and the various functions are marked with different colors. The back end is structured, in the same way the front-end editor is visually intuitive. Especially when pages are large and contain many elements, this can give a practical overview. We recommend you first get acquainted with the front-end editor, and that you use the back-end interface mostly as a handy administrative addition.
Choosing a WordPress theme for Divi Builder 3.0
Divi’s page-builder is a WordPress plugin; no theme. This allows you to choose an additional WordPress theme to use for the page builder. Still Elegant Themes recommends to choose at least one of their WordPress themes, so you’re using all the options the Divi Builder has to offer (fortunately their price includes the themes). One of
these options is the so-called ‘full-width’ element (e.g. an image covering your entire screen). If the theme you’ve chosen doesn’t support any elements at full-width, then the element is essentially useless. On the right side below, you see what a full-width element looks like in the standard WordPress theme Twenty Seventeen and at the left you see a theme recommended by Elegant Themes:
Technique
The page builder works surprisingly smooth, even with long pages. Well done, Elegant Themes! This is an important advantage of this page builder, as it allows you to make adjustments to your website fast and fluently. This block builder converts all sections and modules at the back-end into short codes, although this isn’t very visible. So if someone would want to copy the short codes to another website or page, they would have to make some effort to do so.
Conclusion
With the Divi Builder 3.0, Elegant Themes has given us a great front-end editor. Especially in combination with their own Divi theme, you can make beautiful pages very fast, as the elements come with a standard neat design. For people who are visually oriented, the Visual Builder is a great experience, although you need to allow yourself some time to get used to the minimalistic interface.