Before I get straight into the Divi Page Builder, I’d encourage you to read the first part of this article. You can check it out by visiting the following title, How To Use The Divi Builder – A Beginners Guide Part 1!

How To Use The Divi Builder

The ‘Divi Page Builder‘ is such a great advancement in website page design. It’s brilliantly easy drag and drop modules allow you to customize web pages that you never thought possible. As a beginner in creating a website, you will not be familiar with HTML or CSS coding. Divi bypasses all that to help you create extremely professional looking webpages.

One thing to take note, is that the page builder is for pages only, not posts. There are websites out there that will give you coding to add to your ‘function.php’ file to active the page builder on posts. As a newbie, I’d stay clear of this. If you mess up this file you may have a hard time fixing your website. Advanced users may find this useful but make sure you run a backup first.

To begin using the page builder, add a new page and you will see a button titled ‘Use page Builder‘ like in the image below.

how to use the divi builder New page

If you ever want to change it back to normal mode, a button will appear in the same position titled ‘Use Default Editor’. You cannot flick between the two however. If you’ve set up lots of modules under the Page Builder, they will be deleted if you change back to this default editor.

Divi Predefined Layouts

Divi comes with a number of predefined layout options including:

  • 6 different types of Homepage
  • 4 different page layouts
  • 4 different portfolio layout options
  • Various other layout types  including Project/Blog/Shop/Maintenance/Coming Soon/Landing Page/About Me/Contact/Our Team/Sales/Case Study/Product Features

These layouts are a great way to learn from the beginning. If you load a homepage layout for instance, view a preview of the page and compare it to how the modules are set up. This will give you a great idea as to which modules show which features.

Create Your Own Divi Page Layout

Follow below if you’d like to create your own page layouts.

Once you’ve decided you’re using the Page Builder, you’ll see the following module appear to get you started.

how to use the divi builder module

 

The blue strip section relates to the full area of this new section. The 3 lines is your settings icon. For example, you can add a background color or image to this area. You can add a background video (although this will not show up on mobile devices, the background image will be shown in stead). You can choose for your image to have a parallax effect. This will make it remain static as you scroll. This is a cool feature and can make your website look quite professional.

The icon of two boxes below this, is to make an exact copy of the module including all sub modules inside it. A copy will be placed directly below this one.

There is a similar icon on the green strip where you can also make an exact copy. Obviously ‘X’ is delete.

Setting Up What’s In Your Module

Inside the Green strip module you will notice it says ‘Insert Columns‘. This is awesome as it allows for all types of media to be placed next to each other, which isn’t possible in a normal page editor. Have you ever tried placing 2 images next to each other in default mode? You need a plugin to do this or a special piece of code. Divi makes it so much easier. Here are the column options you be presented with.

how to use the divi builder modules

Let’s take an example. If you want to present part of your website like the following, simply choose the 4 column option:

how to use the divi builder blurbs

If you use the above example of 4 columns, you’ll be presented with the following:

how to use the divi builder columns

Each column will prompt you to insert a module. This is where the fun really begins. The options are extensive. For the above I’ve used blurb as my module to insert. Here’s a list of the options:

how to use the divi builder all modules

The icons in the example are chosen from within the blurb module, there’s many icons to choose from.

As you can see, so many choices to make your pages as unique and professional as possible. It’s really up to your imagination as to how your site is presented, but if you do chose this Divi Theme, you’re giving yourself the best chance to excel in your web design.

As a beginner, the most common modules you will use are image and text. Don’t limit yourself though. As you experiment with the various modules you’ll find yourself becoming more confident with this theme. You can’t really make too many errors. If you do find that your preview is not what you expected, change the modules around until you come up with the correct combinations.

More Sections

If you look back at the second image on this page, under the blue strip there is a + box with the text ‘Add Section/Add Fullwidth Section/Add Specialty Section.

Add Section‘ is exactly the same type of section as in image 2. It’s the more common type of section which allows for all the available modules.

‘Add Fullwidth Section’ uses the full width of your page and doesn’t allow for columns. It also has a limited amount of modules. These modules are shown below:

how to use the divi builder full width

These would generally be used on your homepage.

The ‘Add Specialty Section’, as shown below, gives you predefined column sections, where a certain column or columns (in orange) is full length compared to the other modules.

how to use the divi builder specialty section

The main idea behind this sort of design, is to use the orange full length modules to encompass your text. This is totally up to you however, there are no rules how you use these modules.

An Overview From The Guys At Elegant Themes

Thoughts and Conclusion

If you want to stand out from the crowd and use a theme that makes web design so easy, this is the one. I see so many new websites from beginners that all look similar because they all use the default WordPress themes. Unfortunately they look amateurish.

Beginners will love this theme as it is so easy to use, and it expands your knowledge by opening up the range of different module types.

Now this theme does come at a cost, but you can make the most of it. 

You can join Elegant themes and have access to all their themes for a single cost of $69. They do require this as an annual fee but that is only so you can use their support. You can cancel your subscription and keep using the themes you’ve downloaded forever.

So if you want to go ahead and check it out, click here

If you’ve used Divi or have a question, please add a comment below.

You're A Clever Cookie!

How About A Domain, Hosting, Training, Guidance & Support All In One Convenient Place
View My Top #1 Recommendation Right Here