If this is your first time learning how to build a web page using Divi, you are in the right place. In this article, I will explain what the Divi Builder is, how to use the ‘Back-End Builder’ as well as the front-end “Visual Builder”. Together, we will build a page using Sections, Rows and Modules.
Below are the topics of discussion in this article. Feel free to click on any one of the following links to skip to that section.
- Why We Need The Divi Builder
- Divi Building Blocks
- The Divi Back-End Builder
- The Divi Visual Builder
- Building Your First Page Using the Divi Visual Builder
- Saving And Accessing Page Settings
Why We Need The Divi Builder
WordPress was initial released 15 years ago on May 27, 2003. Today (2018), WordPress accounts for 31% of all websites on the internet today. That is a staggering figure. Why did WordPress become so popular and grow so fast? Why did it blow other content management systems like Joomla and Drupal out of the water? In three words, ease . . . of . . . use.
I have spent 7 years developing websites in Joomla, and trust me, it has a very high learning curve. Drupal also has a high learning curve, and is really designed for very large organizations. WordPress started out as purely a blogging platform, and grew quickly because it was easy. Heck, even my Mom could use it. If you could use Microsoft Word, you could use WordPress. Its genius was in its simplicity
Though WordPress is admittedly easy, Divi makes building websites even easier. It offers ridiculous flexibility and offers a WYSIWYG (What You See Is What You Get), editor. With the Divi back-end builder, you can simply drag and drop elements on a page from one location to another. Incredibly easy, and yes, even my Mom could use the Divi Builder.
Elegant Themes made using WordPress even easier with the release of Divi on December 11, 2013. It was a huge success, and grew in popularity. On September 7, 2016, Elegant Themes released Divi 3.0, which introduced “The Visual Builder”. Today, Divi is arguably the most widely used WordPress “Theme” available today, and it only continues to grow in popularity. Why? Because it’s easy to use, and you can pretty much build anything with it.
The core foundation to Divi is the Divi Builder. It comes in two forms: The “Back-end Builder” and the “Front-end Builder”, which is also known as “The Visual Builder”. Regardless of whether or not you choose to use the Back-end Builder or the Front-end Builder, you can adjust the same content elements and design settings. In short, they do the same thing, but simply offer a different interface.
Divi Building Blocks
The Back-end Builder resides within the WordPress Dashboard and is easily accessible just like every other WordPress settings. The only difference between the Back-end Builder and the Front-end Builder (Visual Builder), is the look and feel of the interface that you are comfortable in using.
Elegant Themes has easily clarified the relationship between Sections, Rows and Modules by stating the following:
The builder uses three main building blocks: Sections, Rows and Modules. Using these in unison allows you to create a countless array of page layouts. Sections are the largest building blocks, and they house groups of rows. Rows sit inside of sections and are used to house modules. Modules are placed inside of rows. This is the structure of every Divi website.
I like the fact that the Back-end Builder allows you to see a block-based representation of the layout of the page in question. One final note, it is important to note that when editing a page, you have the option of choosing the Divi Builder or the standard WordPress editor. Now, let’s take a look at the interface of each, and build our first page together.
The Divi Back-End Builder
Let’s start by offering an overview of the Divi Back-end Builder, (known as “The Divi Builder”. Let’s take a look at what it looks like by default, and then what it looks like once we have all the page building blocks in place for this specific page demonstration.
The below image is what the Back-End Builder looks like when you fist launch the Divi Builder. What you see below is a Section, (marked in BLUE, but the Row has not been defined, (marked in GREEN), and we have not applied any modules either.
Below is the layout we will build together. This is what the Divi Builder looks like after I have defined the Row (GREEN), in the Section and applied the CALL TO ACTION module within that Row (the gray bar). Below that, I have applied a new Section (identified by the lower blue part). Within that, you will see a Row that I have created that has 4 columns. Within each column, I added a BLURB Module.
If this is your first time seeing this, no doubt, it may seem overwhelming, but rest assured, we will build this entire page layout step-by-step together, (under the section “Building Your First Page” later in this article), and you will see just how easy it is. Once you understand the layout, you will be able to create the below page in a matter of seconds, (maybe 45 seconds . . . tops?).
Don’t quit now, there is way too much to gain, and this is only your first Divi page! Work with me, and again, I’ll walk you through the entire process. It’s really pretty simple. Now, let’s move on, and take a look at the Divi Visual Builder.
The Divi Visual Builder
Again, both the Divi Builder and Divi Visual Builder do the same thing, but simply offer a different interface. In practice, if I have a pretty good idea of the page layout ahead of time, I will put it together in the Divi Builder (Back-End Builder), and then customize it using the Divi Visual Builder (the Front-end Builder).
I like to see the overall picture, and then fine-tune each module from there. But of course, if I find that I need to add another module, or add another column within a row, I can so easily do that in the Visual Builder as well, once I’m in there.
Before we move on, we need to bring even more clarification regarding Sections, Rows and Modules. If the only thing that you understand from this article is the remaining part fo this section heading, then invest your time here and let it sink in. The are the building blocks of every Divi website and it is imperative that you get this concept.
The largest building blocks used in designing Divi layouts are what we call Sections. Think of them as the mother of all containers. Sections contain Rows, and Rows contain Modules. So, when building a page using Divi, the first thing you need to do is to apply a Section to your page.
Now, not to complicate things, but there are three types of sections: a STANDARD SECTION, a FULLWIDTH SECTION and a SPECIALTY SECTION. The STANDARD SECTION contains rows and columns. The FULLWIDTH SECTION allows for full width modules that expand the entire width of your screen. SPECIALTY SECTIONS allow to create advanced sidebar layouts. In this tutorial, however, we are just covering the STANDARD SECTION in our Divi page layout.
As I have previously mentioned, Rows reside within a Section. You can have just one row, or 10 rows, it does not matter because you can have as many rows within a Section as you like. When you create a row, you are presented with a pop-up window that lets you define how many columns you want to have in your Row.
The screenshot below shows what the INSERT COLUMNS pop-up looks like. You only see 12 in this image, but there are 20 options from which you can choose from, (you only see 12 here because my screen is not large enough to show you them all in one screenshot).
After you choose a column structure for your row, you can then place modules into any one of the columns that you have created. Additionally, you can place as many modules as you want into any one of the column structures you have chosen.
Modules are the content elements that make up your website. For example, a “Blurb” is a module that displays an image with some text. Every Divi module can fit into any column width, and they even make is so that every module is fully responsive so that it will display just fine on any device, be it a desktop, tablet, or cell phone.
Building Your First Page Using the Divi Visual Builder
To begin, in WordPress, hover over PAGES and click ADD NEW to create a new page. Don’t worry, you can do this on an existing site and delete it when you are finished. No biggie. Once you do this, you should see the below image.
Now, because we are going to explore building this page using the Divi Visual Builder, let’s now click on the blue USE VISUAL BUILDER button at the top. Again, the only difference between the Back-end Builder and the Front-end Builder (Visual Builder), is the look and feel of the interface that you are comfortable in using.
You should now see the following screen:
From here, you will need to click on the left option, START BUILDING. You will then be presented with the following screen, where you will need to choose how many columns you wish to have in the Row. For our purposes, we are going to choose the first option in the second row (the one that has 4 equal blocks equivalent to 1/4, 1/4, 1/4, 1/4).
As soon as you select the 4 columns to be displayed in your Row, you will see the following screen. Note that you have 1 Section, (indicated in blue), and 1 row, (outlined in green), with 4 columns in that Row. By default, it will ask you what module you would like to insert. For our purposes, simply type the word, “Blurb” and it will display on your screen as shown below.
Once you click the word, “Blurb” in the INSERT MODULE dialog box, it will display in the first column and you can immediately modify all the settings related to the Blurb module. Customizing these settings is beyond the scope of this article, but I encourage you to play around a bit and explore these settings. You are not going to break your website. I’m confident that you will find it both fun and exciting . . . even inspirational :-). To add the three other Blurbs, simply click on each (+) icon in each column and scroll down and select the BLURB Module. For practice, you can modify each Blurb differently, exploring all the different settings found in the Blurb Module.
Saving And Accessing Page Settings
- Builder Settings – View numerous Builder options settings by clicking this icon.
- Wireframe View – See what this page looks like in the Divi Builder view.
- Zoom Out – This allows you to zoom out and see the entire page at a glance.
- Desktop View – In pressing this icon, you can see what the page will look like on the Desktop.
- Tablet View – In pressing this icon, you can see what the page will look like on the tablet.
- Phone View – In pressing this icon, you can see what the page will look like on the phone.
In the center of the Settings Bar, you will find the following icons from left to right.
- Load from Library – If you have saved a page layout to your “library”, you can apply that library item from here.
- Save to Library – If your wish to save this page layout to your “library”, you can do so by clicking this icon.
- Clear Layout – If you want to completely remove everything and start afresh on this page, click this icon.
- X Button – This icon expands and minimizes the Settings Bar.
- Page Settings – If you wish to view and modify the settings on this page, click this icon.
- Editing History – If you messed up, and want to go to a prior saved state, click here to do so.
- Portability – This icon allows you to import / export the settings for this page. You would want to use this option if you if you wanted to use wanted to use these settings on another Divi website.
- Save Draft – This will display until you “Publish” the page. You can SAVE DRAFT as many times as you wish.
- Publish – Once you have modified the page to your liking, you can make the page Public by clicking PUBLISH.