Last updated - June 20, 2022
Divi is one of the most widely used premium WordPress themes. One of its best offerings is the Divi Page Builder, a visual builder that lets you design beautiful websites without ever touching a single line of code.
In our review, we found that the page builder is cost-effective, customizable, and flexible, and offers great features like intuitive visual editing, drag-and-drop functionality, custom CSS support, mobile friendly, and a wide range of design elements.
In this beginner’s guide, you’ll learn how you can take advantage of these features to create professional pages for your website effortlessly.
Divi Page Builder Layout and Modules
The Divi Page Builder can be purchased from the Elegant Themes website for either a yearly access fee of $89 or a lifetime access price of $249. After installing the theme, you can access the minimalist layout of the Divi Page Builder, which can be expanded by clicking the 3 horizontal buttons at the bottom.
- Builder Settings: The three vertical dots lets us change builder settings like toolbar options, default actions, and other features.
- Wireframe View: The next button shows the page in the wireframe view. It displays the entire page in terms of its the builder’s basic elements — sections, rows, columns, and modules.
- Zoom Out: You can zoom out using the magnifying glass button to get a look at more of the page while editing.
- Device View: Using the next 3 buttons, you can view the page in desktop, tablet, and mobile modes to make sure your website looks exactly how you want to users on every device.
- Load from Library: The plus button allows you to download premade layouts from the Divi library. You can find layout packs for everything from educational websites to online stores. Each layout pack is completely editable and comes with essential pages like Home, Blog, and Contact.
- Save to Library: With this button, you can also save your own layouts to the library.
- Clear Layout: You can clear the entire layout using this button and start over if you need to.
- Page Settings: This button gives you access to page settings like page title and featured image. You can change the page’s background, format its text, change color palette, and add custom CSS if you want too.
- Editing History: If you ever make a mistake, you can simply access the editing history and reverse any change.
- Portability: If you want to use a layout you created in another website that uses the Divi Page Builder, you can export entire layouts to other websites using the Portability button.
- Search: You can use this feature to quickly search for and locate elements, module settings, page settings, and more.
- Layers: You can easily manage the layers and the order of elements on the page using the layers setting.
- Divi Builder Helper: The Divi Builder Helper is a helpful tool to access video tutorials on various topics and displays the keyboard shortcuts as well.
- Save: When you’re done building a page, you can save the page using the green button.
Building a Page with the Divi Page Builder
Let’s build a simple page containing an image, a text block, and a button. But before we begin, it’s worth knowing that a typical page in Divi Page Builder is made of several rows arranged vertically. These rows are made up of columns, and each column can have multiple modules inside it. But what’s a module? A module is a basic content element that’s used to build pages like images, buttons, forms, and reviews. The Divi Page Builder has more than 40 modules, each with its own set of customizations.
Adding an Image
To start building a page with the Divi page builder, add a row by clicking the plus button. Then, choose a row format from the pop-up. Next, choose a module to be inserted into the column. Clicking the image module will add it to the column.
Each module comes with its own settings, separated into three tabs: Content, Design, and Advanced. Inside the Content tab, you can modify the module content elements like images and text. You can head over to the Design tab if you need more control over the appearance of the module. The Advanced tab enables advanced modifications using custom CSS and HTML attributes.
To upload your image, click on the preset image. Then, select an image from your library. Below, you can add a link to the image and set a background color, gradient, image, or video.
In the design tab, you can align the image according to your preferences. The sizing, spacing, and border options let you control parameters like height and width of image, the margin and padding of the image, and the border styles and widths.
You can apply hue, saturation, brightness, and other filters to the image using the Filters option. The transform tab allows you to create advanced design effects without using a separate graphic design program using a combination of scale, translation, rotation, and skew.
Finally, you can also add basic animations to each module to give it a professional look. Though the advanced tab is mainly used for custom CSS and HTML attributes, you can also control device visibility, transitions, layer position, and scroll effects.
When you’re done, save the changes using the green button. You can access these settings later by hovering over the module and clicking the settings button.
You’ll also notice that when you hover over a section, row, or module, their respective action buttons will appear.
Every section, row, column, and module has its own set of options that can be used to adjust its appearance and functionality. Other action buttons can be used to move, duplicate, and delete the items.
Moreover, three plus icons will also appear when you want to add new items. The grey icon lets you add new modules within the row, the green icon adds a new row within the section, and the blue icon adds a new section to your page.
Adding a Text Block and Button
Let’s add a new section below the image by clicking the blue button. You can choose from three types of sections: Regular sections conform to the standard width of your page layout, Specialty sections can be used to create advanced sidebar layouts, and Fullwidth sections extend the full width of your page and can be used with fullwidth modules.
We’ll go with a regular section and add a row with two columns. Next, add the text module inside the section. You can edit the text module’s body in the Content tab to say whatever you want. You can also format the text’s alignment, font, weight, style, and color in the Design tab. Save the changes when you’re done.
We’ll add a button in the adjacent column. In the Content tab, you can change the button text and add a link to wherever you want the button to lead to. In the Design tab, you can align the button inside the column and change its appearance by changing the text color and adding a background color.
After creating the modules, you can rearrange them using the drag-and-drop action buttons that appear upon hovering over them. Note that you can also save your section, row, column, and module designs for future re-use by right clicking the item and selecting “Save to library”. Moreover, if you don’t want to create pages from scratch, you can import a premade layout and simply edit it according to your needs.
This is how you can easily build your page one module at a time with the Divi Page Builder. Explore the wide range of modules and templates offered by the page builder and customize them to your website’s design. If you need any help, leave a comment below and we’ll get back to you.
If you prefer a video version, here is a simple video:
