Divi builder plugin: Divi is one of the most popular WordPress themes these days. One of the elements that constitute the strength of this theme is its builder (Divi Builder), which reminds us a lot of that of Visual Composer.
The Divi Builder plugin comes in two forms: the standard “Back-end Builder” and the “Visual Builder”. Both interfaces allow you to build 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.
The all-new Visual Builder, on the other hand, lets you build your pages on the front end of your website! It’s an amazing experience and allows for a 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 watch whatever is happening in front of your eyes.
Divi builder plugin: How to activate the 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 visual builder.
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 plugin back-end interface (note that you must first activate the Divi Builder plugin before the visual builder button appears).
Visual Builder Basics
The power of Divi lies in Visual Builder, a page builder that works with “Drag And Drops” 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 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. Special sections allow for more advanced side layouts.
Rows are inside 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 the 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.
Building 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 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.
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, Galleries 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 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 control panel will appear. Using this control panel, you can start configuring your module.
That’s it for this tutorial. With what you learned today, you will be able to create a layout with Divi.
For website maintenance service contact us.