This week we’re going to get started with the Divi Builder. In last week’s post, we covered Divi Theme Options and the Customizer settings. These are the first steps as you set up your Divi website.

Now we’ll get into the Divi Builder and how to use it to craft web pages that fit your needs and help get your message across.

Front-end and Back-end Divi Builder

Before we dive in, there are two ways to build pages in Divi. The Visual (front end) Builder and the back-end builder. The Visual Builder allows you to see your changes as you make them on your live page.

To use the back-end builder, you’ll have to go to Divi Theme Options > Builder > Advanced and toggle on Enable Classic Builder. However, you can get the same view by using the wireframe view in the Visual Builder, so that’s where I’ll focus for this post.

Three Ways to Build a New Page in the Divi Builder

Now you’re ready to start designing. There are three ways to build a new page. The first thing you’ll have to do is add a section. If you’re importing or cloning a page, Divi will do this for you automatically.

1. Build a New Page From Scratch

If you know what you want and have some experience building web pages, this might be the direction you want to go. You’ll start with a blank page and go on from there. Go to Pages > Add New. This will take you to a new window in the Gutenberg (text editor) interface. I like to add my page title and featured image here.

Then click Edit with Divi. You’ll see a screen with three options: 1) Build from Scratch, 2) Choose a Premade Layout, and 3) Clone Existing Page.

Click Build from Scratch. Divi will automatically insert a section and prompt you to add a row. Choose the column layout you want. After you add the row, you’ll see a dialog that asks you to add a module.

Choose the module you want to add from the list. Here I’ve added a text module.

Divi has a wide variety of modules and I’ll try to go over those in more detail in a later post.

2. Choose a Premade Layout

This is the fastest way to build a page. Click Choose a Premade Layout. You’ll see a page with numerous templates, categorized by industry. Here I’ve chosen a layout for a coffee shop.

You’ll find templates for various pages, such as Home, About, and Contact. You can also click View Live Demo for a look at an actual demo of the layout.

If you like what you see, click Use this Layout and it will import the layout into your site. You can then substitute your own content and edit your pages.

3. Clone Existing Page

This might be my favorite feature. It’s a tremendous time saver. Once you get one page designed to your specifications, you can create other new pages based on the one you’ve already designed.

Not only does this save you time, it helps keep your site layout consistent across pages.

Divi Builder Structure

Pages are built using containers called sections. Sections contain rows and modules. You can add multiple rows to each section. For example if you want a certain background, make it the background for the entire section and add rows and modules that you want to appear over the background.

Hover over the section (blue bar) and click the gear icon to access the settings for that section. On the settings you’ll see three tabs: Content, Design, and Advanced.

Section, Row, and Module Settings

These settings work the same way for sections, rows, and modules. You can apply them at whatever level you like. You may want one row to have a certain background color, or you may want to set the background for the entire section. These tabs are the same at every level.

Content

The Content tab is where you’ll add a background for your section, if you like. You can add a background color — select one of the preset colors or click the plus icon to add a hex code. You can also add a background gradient, image, or video.

Design

Next, you’ll go to the Design tab. Click the Dividers section and there you can add shape dividers if you like. You can customize the color and characteristics of your dividers there.

For the New Roots site, I’ve used top and bottom dividers to create the curves.

Next is Sizing, where you’ll set width, height, and alignment for your section. If you want your content to be full width, be sure you section width is set to 100%.

Spacing gives you margin and padding settings for your section.

Border not only allows you to set border color, type of line, and width, it also controls border radius.

Box Shadow is exactly as it indicates. Click on the shadow style you prefer and controls will pop up that let you customize your shadow.

Filters let you apply effects to your module. Here I’ve maxed out the inverse settings, so instead of our snowy tree you see a reversed-out white-on-black image. You can play with these effects to get all kinds of colors.

With the Transform controls, you can change the shape of your object, its perspective, or scale.

Animation lets you apply your choice of effects and gives you the ability to change the timing and duration of your animation.

On the Advanced tab, you can add custom CSS or CSS classes or IDs, control the item’s visibility on phones, tablets, and desktop, and control, transitions, position, and scroll effects.

The Front-end Builder

Also called the Visual Builder, this feature allows you to see your changes in real time as you make them.

You can enable or disable the Visual Builder at the top of the page. While the Builder is active, your links won’t work, so don’t panic when you notice this.

Hover over your element and the section, row, and module controls will pop up. Then complete your edits and click Save in the bottom right corner.

In the bottom left corner of your screen, you’ll see a black box with a strip of icons.

On the far left are your Builder settings. You can choose whether your default view is desktop or mobile and various other settings that affect the way you work with the Builder.

The next icon is the wireframe view. This can be helpful when you need to drag to move a section, row, or module.

The magnifying glass allows you to zoom in or out on your page and the next three icons are desktop, tablet, and mobile phone views.

Divi Library

The Divi library can be a real time saver. Hover over the element you want to add to your library, then click the icon just to the left of the trash can. The library is helpful if you have an element you want to repeat throughout the site.

Let’s say I want to add this snowy tree image as a library item. I give it a name, save it as a global item, which makes it available site wide, then save it. When I save it as a library item, it turns bright green. Any changes I make to this image now will change each instance of it. Be sure you take into account that the library items must be identical.

Now I can add a new module, and on the right of the dialog, click “snowy tree” to add it from the library. It’s a great solution if you want, for example, a button on each page. Create the button once, then add it as a library item on the other pages. Another use for the library is if you’d like to create a custom footer which will appear on every page.

Next week we’ll cover some common things you may want to do with Divi, and go a little deeper with the Builder.

---