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 701.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 these days. One of the elements that constitutes the strength of this theme is its builder (Divi Builder), which reminds us a lot 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 pieces of content and the same 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 sits inside the WordPress user interface and replaces the standard WordPress post 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 blocky representation of your website. This tutorial will focus only on the visual builder.

Download DIVI WordPress Theme

divi builder.jpeg

The all new Visual Builder, on the other hand, lets you build your pages on the front end of your website! It is an amazing experience and allows for much faster design. When you add content or adjust design settings 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 you are logged into your WordPress dashboard, you can navigate to any page on the front end of your website and click on the "Activate Visual Builder" button in the WordPress admin bar to launch the builder. visual.

how to enable visual builder.jpeg

If you are editing your page on the dashboard, you can switch to the visual builder by clicking on the “Enable Visual Builder” button which is at the top of the Divi Builder back-end interface (note that you must first activate the Divi Builder before the visual builder button appears).

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]

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" that allows you to build just about any type of website by combining and arranging the pieces of content.

The builder uses three main building blocks: sections, rows, and modules. Using them in unison allows you to create countless number of layouts. 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.


The most basic and largest building blocks used in designing layouts with Divi are 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.

Regular sections are made up of rows of columns while full width sections are made up of full width modules that widen the entire width of the screen. The special sections allow for more advanced side layouts.


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 are the pieces of content that make up your website. Each Divi module can adapt to any column width and they are all fully responsive.

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]

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

Adding your first section

Before you can add anything to your page, you'll need to add a section first. Sections can be added by clicking on 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 below the section you are currently hovering over.

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 rows, and you can mix and match rows from 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 below. Once you've clicked the green (+) button, you'll be greeted with 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

Modules can be added inside rows, and each row can contain any number of modules. Modules are the content elements of your page, and Divi comes with over 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.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

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 below . Once you click on the button, you will be greeted with a list of modules.

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 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 1 comment

  1. permission to ask admin for issues i am facing regarding divi theme, how to fix divi theme that cannot be changed (divi generator cannot be clicked, only mutually) it all started when i edited the .htaccess file to redirect the url from http to https, as a result an error occurred, I could not enter the administration area and I did not have the backup, in short, I was able enter the admin area of ​​WordPress, and the look of the website had changed slightly, then I entered the divi (page) builder and this is where the problem only goes around in circles if you want, I really hope BlogPascher admin provides a solution. Thank you

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