Divi is definitely one of WordPress themes most popular nowadays. One of the elements that constitutes the strength of this theme is its builder (Divi Builder), which reminds us a lot of 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

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.

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.

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).

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.

sections

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.

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

Build your first page

The three basic building blocks (sections, lines, and modules) are used to build your 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.

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.

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, Images and Buttons, or more advanced modules such as Sliders, Portfolios Galleries 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 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.

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.

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expanded "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DOWNLOAD THE DIVI THEME [/ vcex_button] [/ width_column] [»vc_column] [» 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "center" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] DOWNLOAD TEMPLATES DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

2 Comments

massimiliano on 23 January 2021 to 9 h 55 min

Chiedo scusa se non à la sezione esatta ma non riesco a visualizzare le mie pagine create con visual builder divi attraverso il suo tema se non tengo attivato il visual builder divi, altrimenti non vedo la formatttazione delle pag. Uso local by flywheel oppure xammp per vedere il mio sito in locale. Grazie e buon lavoro.
Response,
zeni irawan on 21 August 2020 to 19 h 25 min

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
Response,

Answer zeni irawan Cancel reply

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

How to use the Divi Builder plugin on WordPress