If you are completely new to building websites with WordPress check out my free how to make a website course First!

In this Divi Theme tutorial I’m going to introduce you to the Divi theme Page builder. Show you how it works and how to get started with it. It’s a great tool, but might not be immediately obvious if you’re new to building websites or building websites with the Divi theme.

If you don’t have the Divi theme yet you can use one of the links to Divi provided in this article. These links cost you nothing extra and provide me with a commission that helps me to keep creating free tutorials and content like this! So thanks for your support!

Get the Divi Theme.

If you are starting, running or working for a small business chances are you know you need a website. You might be a bit overwhelmed at where to start. I’m here to help! I want you and your website to be successful, easy to manage and easy to build.

If you find this article helpful and if you would like more help building your website, be sure to check out my complete online course where I will guide you thru the entire process of building your very own high quality website.

Let’s get started!

The Divi Theme Page Builder

The Divi theme is an extremely powerful WordPress theme that allows you to easily build and design pages. With the release of Divi 3.0  the creators of Divi also added a fantastic front end page builder. This allows you to see the design as you are building it. Previous versions of the Divi theme, and most WordPress page builder themes available today only offer a back end page builder. This is changing at a rapid pace, but I think right now Divi has the best mix of features and ease of use available in a WordPress theme.

Some people who use the Divi front end builder for the first time find it a little bit confusing. I think that the best way to get an understanding of the Divi builder is to start by looking at and understanding the original back end page builder.

The back end page builder shows a graphical representation of the design of your page. You start out with a section. You can choose a standard section, a full width section, or a specialty section. Each section can have it’s own separate background. You can have a colored background, image background or even a video background. By using sections with different background you can divide up a page into different topics.

The basic structure of pages is built by adding sections placing rows with in sections, then columns within rows and finally adding content modules inside of the columns.

Now a little bit about the sections.

divi-backend-page-builder

The Standard Section

The standard section is the section that you will use most often. You can add rows to section and then columns to rows. Each row can be divided up any where from full with down to 1/4 with columns or any combination in between. I find that you in web design you don’t need and will rarely see pages divided into more then 1/4’s. If you find that you need some other combination of rows and columns you can use a specialty section.

The Specialty Section

Specialty sections allow you to mix and match columns and rows. For example you could have a 1/2 with column all along a section and then on there other side alternate between 1/2 and 1/4 with columns. This allows you to create more complex page layouts then the standard section.

The Fullwidth Section

With the fullwidth section you get some specialty modules. Two of the most useful modules that can be added with the fullwidth specialty section are the menu module and the header module. The menu module allows you to add a full width menu anywhere on the page. The full width header module allows you to create a full window section. So that you can have a background image that takes up the entire browser window. This can be a power full technique to get your viewers to look at one clear message.

That is a basis of how the Divi Builder is structured now let’s take a quick look at the front end builder.

Divi Theme Front End builder

The way that you build pages with the Divi front end builder is very much the same way that you do it with the back end builder. That’s why it’s so important to have an understanding of how the back end page builder works.

divi-front-end-page-builder

When you first start out by click on the “enable visual builder button” on the back end of a new page. The front end page builder will load. You will see what the front end of this page currently looks like. When you start building a new page with the front end builder you will see your header section and then a blank section with a green circle with a plus icon in the middle.

If you mouse over the plus icon you will see that a larger blue boarder will appear with controls at the top left of the box.

This Blue boarder represents the section. The green plus is were you can add rows to your section. To add your first row click on the green circle with the plus icon. You can then select how many columns you would like in that row.

The Insert module dialogue box will automatically show up allowing you to select the type of content that you would like to add to that row and column.

You can see that the structure of how you build a page is the same as we saw on the back end. The major advantage is that we can now see the content as we add it.

A great thing about the insert module dialogue box on the front end is that you can start typing in the search box and quickly narrow down the exact content module that you would like to add.

divi-content-module-front-end-builder

To add an additional module below the first module you created click on the grey circle with a plus. To add a new row click on the green circle with the plus. To add a new section click on the blue circle with the plus.

Watch the full video above where I walk you thru the Divi Page Builder and show you how to create a coming soon page.

Here is a link to the image used in this tutorial Truck Image:  https://unsplash.com/search/surf-truck?photo=YKQawNUINXA

Conclusion

I hope that you found that introduction to the Divi theme page builder helpful! If you’d like more guidance building your site with the Divi theme be sure to check out my complete web design and website building course.

For more tips trick and reviews to help you make building website easier be sure to subscribe to my youtube channel!

Get more real website hints in your email!

Sign up for our email list and get more hints and tips right in your email!

You have Successfully Subscribed!