Learning Divi: A tour of the Visual Builder

You are here:
Estimated reading time: 2 min

Learning how to use Divi takes a bit of time, but in this article I want to show you a few basic things that will help you get started creating wonderful page designs with the Divi Theme and Page Builder.

Open your document with the Divi builder

To start let’s edit a page with the Visual Builder. I have already imported a layout from the Divi Layout library into the page so we can work with that.

Open the visual builder
Hover over the screen

Viewing Sections, Rows and Modules

If we hover over the page now that we have the Divi builder enabled we can see different areas light up with colors. Blue, green, dark gray.

Sections, rows and modules

The blue rectangles indicate a section, the green a row and the dark grey a module. Pages are made of several sections which can contain one or more rows inside. The rows can have one or many modules inside them as well.

Sections, rows and modules

When you hover over each area a rectangle in the color of the area will appear. In this example we have a row highlighted. You can see the area the row takes.

The box shows the limits of the row

The bottom menu

The bottom menu contains three areas. At the middle we have several options to change page settings, view the edit history and manage layouts (import/export/load).

Menu visual builder

In the page settings you can change the title of the page/post, add an excerpt and include a featured image.

Page settings

In the editing history you can go back to a previous state.

Editing history

The portability button helps you export/import a Divi layout.

Portability

You can add the page layout to the Divi Library to use in another page.

Portability

At the right we have a way to save our draft or page and some helpful links (search to help you navigate through Divi, layers view so you can see how your document is laid out and the Divi helper with videos on how to do certain tasks.

At the left we have controls to view the page in different ways: wireframe mode, desktop, tablet, phone.

Create home page

The wireframe mode is leftover from the old days when there was no visual builder. The wireframe mode can be really helpful when an object in the visual builder is difficult to edit, you can switch to wireframe and select the element you want to edit.

Wireframe mode

The tabs available in a module

When you edit a module you will see three tabs: Content, Design and Advanced. Each of these tabs will help you with your work in Divi, but the most used is the middle “Design” tab. In that tab you can format all the text (font type, size, color), background, spacing, etc.

Tabs in a module

The content tab has the basic information of your module (text or image or slides for example) and the advanced tabs lets you play with CSS and other more complicated things like positioning and visibility (if you want your module to show in desktop, tablet or phone view).

You will notice that in the design tab a lot of the settings are similar in the various types of modules.

The design tab

Conclusion

The visual builder can be a little confusing at first, especially when you hover over things and they change so quickly. But with a little experimenting you will start to get the hang of it. I invite you to create a WordPress site in your computer (you can use Local WP) and start playing around with Divi.

Thank you for reading.

Was this article helpful?
Dislike 0
Views: 5