The Divi Builder

Class overview

In this class you’ll learn all you need to know about the Divi Builder:

 

  1. The basic elements – sections, rows & modules
  2. Getting to know the Divi Builder
  3. Editing an existing page with the Divi Builder
  4. Creating a new page and the Backend Builder
  5. Special Sections:  Fullwidth and Specialty

1. The basic elements – sections, rows & modules

Sections, rows & modules are the basic building elements of your website.  With them you can build any kind of layout you can dream of!

Quick reference: Screenshots about Sections, Rows and Modules

So the basic building elements are;

Sections:

section

Within sections there are one or more rows, here you can see two rows:

2-rows

Within the top row we see three columns and there’s a Blurb Module in each column:

top-row-with-3-columns-and-3-blurb-modules

The second row has a 2/3 – 1/3 column structure, with a text module on the left and an image module on the right:

bottom-row-with-2-columns

2. Getting to know the Divi Builder

A tour around the Divi Builder interface – showing you the different controls and what they are for:

3. Editing an existing page with the Divi Builder

Follow along as we edit an existing page with the Divi Builder

4. Creating a new page and the Backend Builder

Now we’ll create a new page and show you the Backend Divi Builder:

2. Special sections – Full-width and Speciality

Next to Regular sections,  there are also Full Width Sections and Speciality sections.

When you insert a new section, you see the 3 options in the dialogue, Regular, Fullwidth and Speciality:

 

Full Width Sections are there to use in combination with special Full Width modules; modules that stretch from one side of the screen to the other.

In the image below you can see a full width slider highlighted in the pink box,  an example of a full width item on a page:

This is what a full width section looks like in the backend Divi Builder – it’s purple:

full-width-section-screenshot

A fullwidth column is always full width, consisting of one column, so you don’t need to insert a row and choose a column structure. You go straight to inserting modules. And these are special Full Width Modules that can only be used for the full width sections. So you see only these full width modules when you click “Insert Modules”.

In the module library, you can find the 4 full width modules that require a Fullwidth section. They are the Fullwidth Header, Fullwidth Image, Fullwidth Slider and Fullwidth Menu.

Speciality Sections are there to help you create sidebars next to your page content. We cover these in our class Sidebars & Footers.