Skip to Main Content

How to use the Divi Builder plugin on WordPress

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 600.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Divi is definitely one of the most popular WordPress themes nowadays. One of the elements that constitutes the strength of this theme is its builder (Divi Builder), which reminds us enormously that of Visual Composer.

The Divi Builder comes in two forms: the standard "Back-end Builder" and the "Visual Builder". Both interfaces allow you to build exactly the same types of websites with the same content elements and design parameters. The only difference is the interface. The back-end Builder lives inside the WordPress dashboard and is accessible with all other standard WordPress settings.

It is inside the WordPress user interface and replaces the standard WordPress message editor. It's great for making quick changes while you're inside the dashboard, but it's also confined by the dashboard and is rendered as a representation of your block website. This tutorial will focus only on the visual constructor.

Download DIVI WordPress Theme

divi builder.jpeg

The all-new Visual Builder, on the other hand, allows you to build your pages on the front-end of your website! It is an amazing experience and allows a much faster design. When you add content or adjust the design parameters inside the visual builder, your changes appear instantly.

You can click on the page and start typing. You can highlight the text and adjust its font and style. You can add new content, build your page and see everything that's happening before your eyes.

use of-visual-builder.jpg

How to enable Visual Builder

When connected to your WordPress dashboard, you can navigate to any page on the front of your website and click the "Enable Visual Builder" button in the WordPress admin bar to launch the builder visual.

how to enable visual builder.jpeg

If you edit your page on the dashboard, you can switch to the visual builder by clicking the "Enable Visual Builder" button at the top of the Divi Builder backend interface (note that you must first activate the Divi Builder before the Visual Builder button appears).

Start promoting your blog

Download dozens of Logos, banners, website templates and many other marketing tools to market your WordPress Blog. [Recommended]

use the visual builder Divi.jpeg

The basics of Visual Builder

The power of Divi lies in Visual Builder, a page builder that works with Drag and Drop, which lets you build just about any type of website by combining and arranging content elements.

The builder uses three main building blocks: sections, rows, and modules. Using them in unison allows you to create countless layouts. The sections are the largest building blocks and they house groups of rows. The rows are inside the sections and are used to house the modules. The modules are placed inside the rows. This is the structure of each Divi website.

sections

The most basic and largest building blocks used in designing layouts with Divi are the sections. They are used to create large groups of content, and this is the first thing you add to your page. There are three types of sections: Regular, Specialty, and Full Width.

The regular sections are composed of rows of columns while the full width sections are composed of full width modules that widen the entire width of the screen. Special sections allow for more advanced side layouts.

Row

The rows are inside the sections and you can place any number of rows inside a section. There are many different types of columns to choose from. Once you have defined a column structure for your row, you can then place modules in a desired column. There is no limit to the number of modules you can place in a column.

Modules

Modules are the content elements that make up your website. Each Divi module can adapt to any column width and they are all totally responsive.

Build your first page

The three basic building blocks (sections, lines, and modules) are used to build your page.

construction of a Divi.jpg page

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

Adding your first section

Before you can add anything to your page, you will need to add a section first. Sections can be added by clicking the blue (+) button. When you hover over a section that already exists on the page, a blue (+) button will appear below. When you click, a new section will be added under the section on which you are currently flying.

If you start a new page, your first section will be added automatically.

list of divi.jpg sections

Adding your first line

After adding your first section, you can start adding rows of columns inside. A section can contain any number of lines, and you can mix and match rows of different types of columns to create a variety of layouts.

To add a row, click the green (+) button inside an empty section, or click the green (+) button that appears when hovering over a current row to add a new row underneath. Once you click on the green (+) button, you will be greeted by a list of column types. Choose the column of your choice and you are ready to add your first module.

how to insert the Divi.jpeg row

Adding your first module

The modules can be added inside the rows, and each row can contain any number of modules. Modules are the content elements of your page, and Divi comes with more than 40 different elements that you can use to build.

You can use basic modules such as Texts, Pictures, and Buttons, or more advanced modules such as Sliders, Gallery Portfolios, and eCommerce Shops.

To add a module, click the gray (+) button that exists inside an empty column or click the gray (+) button that exists when you hover over a module on the page to add a new module underneath . Once you click on the button, you will be greeted by a list of modules.

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

Choose the module of your choice and it will be added to your page and the module's control panel will appear. Using this control panel, you can start configuring your module.

insert a DIVI.jpeg module

That's it for this tutorial. With what you have learned today, you will be able to create a layout with Divi. We will come back with advanced tutorials on the subject. You can already download the Divi theme.

Other Divi tutorials

This article features 0 comments

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
7 shares
Share
tweet2
Save5