New technology is always kind of intriguing yet can be overwhelming as well. A visual page builder for WordPress is nothing entirely new. They existed already a good while before “Divi” from Elegant Themes even came out. But it always felt like ( to me ) that “Divi” kicked off a new generation of visual page builders. Elegant Themes really put something out there. In this post, I want to give a quick overview of how the Divi Builder works and how it is structured. (Or go one step back and read Where to start with Divi?)
Frontend vs Backend Builder
The Divi Builder ships included in the Divi Theme itself or as a standalone Divi Builder plugin. Once installed the Builder can be activated within a page or a post. And from here on you can choose whether you’d like to use the backend builder or the more visual frontend builder. What’s the difference? While using the backend builder the only thing you see are the building blocks, sections, rows, and modules.
On the other hand, when using the frontend builder you already “see what you will get”. Well, theoretically speaking you still see the blocks but already in a sort of preview. You edit the content of your page on-the-fly so to speak. With this being said, I guess you already see the picture forming: while the backend builder is suited for structuring the layout of a page, the visual frontend builder is probably better used for filling and editing the content. But you can use it however you see fit.
Bits and pieces of the builder
Whatever mode of the builder you use, frontend or backend – the construction of the Divi Builder is always the same, going from the outside to the inside: Sections > Rows > Columns > Modules.
(1) You create single Sections, going from top to bottom.
(2) The Sections will be filled with Rows.
(3) For every Row, you can define Columns.
(4) The Columns can be filled with Modules ( Content ).
The first thing you add to every page using the Divi Builder is a Section. Sections are the biggest building blocks available in the Builder. You can see them as an easy way to group the content of a page. There are 3 variations of Sections available: Regular, Specialty and Full-Width. The regular sections are filled with rows, columns and single modules while the full-width sections are filled only with full-width modules that expand the entire width of the screen. For more advanced sidebar layouts you have the specialty sections available to use.
Inside sections, you will find rows. You can place any number of rows inside you sections. Before filling a row with content you first need to specify a column structure for it. It’s up to you: 1 column, 2 columns, 4 columns, 1 small on the left & 1 big on the right or 2 smalls on the right & 1 big on the left and so on. Inside one column you then can place modules.
The Modules are the content blocks of Divi. You use them to put in your pictures, your text pieces, forms, buttons and even custom code. As of now, there exist 36 different modules for you ready to use.
This is just a very simple and quick overview of the concept of the Divi Builder. In another post, we will cover a more in-depth explanation of the single pieces and look at how each of them works.