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.
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.
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.
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).
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]
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.
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.
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.
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]
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.
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.
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.
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.
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 underneath . Once you click on the button, you will be greeted by 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.
Other Divi tutorials
- 5 websites for restaurant use Divi theme
- How to add text on a Divi WooCommerce product
- How to change the menu color between Divi pages
- How to personalize the grids of a blog with Divi
- How to use the role Divi editor on WordPress
- How to create a full screen Divi slider
- How to change the color of menus between Divi pages
- Features you probably do not know about Divi
- How to use Divi Builder on WordPress
- How to use the Divi video scrolling module
- How to use the Divi Builder Flip module
- How to add a testimonial module on Divi Builder
- How to use the Divi text module
- How to create a slider on Divi
- How to edit a Divi user role
- How to use the Divi Social Media module
- How to use the shop module on the theme WordPress Divi
- How to use the Divi sidebar module
- How to use the Divi Price Table Module
- How to use the title module of Divi publications
- How to add a video module of Divi
- How to use the article navigation module
- How to use the Divi search module
- How to use the Divi wallet module
- How to use the person module on Divi Builder
- How to use the wallet module with Divi filter
- How to use the full width slider module
- How to use the Divi Builder Image Module
- How to use the full-width navigation module of Divi Builder
- How to use the image gallery module
- How to use the Divi Builder Full-Width Card Module
- How to use the Divi Full Width Portfolio Module
- How to use the Divi full-width header module
- How to use the Divi Counter Module
- How to use the articles slider on Divi Builder
- How to use the Divi Email Optin module