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.
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.
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.
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 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).
In the page settings you can change the title of the page/post, add an excerpt and include a featured image.
In the editing history you can go back to a previous state.
The portability button helps you export/import a Divi layout.
You can add the page layout to the Divi Library to use in another page.
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.
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.
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.
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.
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.