What is Divi Builder? is presented in two forms: a standard “Divi Builder” of the WordPress control panel and an external “Visual Builder” that works directly on the website page opened in the browser.
Both of these builders allow you to create the same types of websites with the same content, elements, and design settings. The only difference is the interface.
Visual Divi Builder lives inside the WordPress dashboard and can be accessed along with all other standard WordPress settings. It is hardcoded inside the WordPress user interface and can replace the standard WordPress editor.
This is great for making quick changes while you’re in the WordPress panel. It displays the structure of your page or post as blocks.
The new visual builder, on the other hand, lets you create and edit pages right on your site! This allows you to work much faster. When you add new content or change design settings using the visual designer, the changes are displayed instantly and very clearly.
You can just click on the page and start typing. You can select the text, customize the font and style. You can add new content, structure your page and watch all the changes take place right in front of your eyes.
Enabling Visual Divi Builder
If you are in your WordPress dashboard, you can go to Page View and click on the “Enable Visual Builder” button in the top bar of WordPress.
Alternatively, you can switch to the visual editor by clicking the Use Visual Builder button in the WordPress editor (note that you must first click the Use Visual Divi Builder button, then the Use Visual Builder button will appear).
Visual Divi Builder Basics
All the power of Divi is concentrated in Visual Divi Builder, an intuitive page builder that lets you create almost any type of website by combining and organizing content elements.
The constructor uses three main types of building blocks: Sections (or sections), rows (lines), and modules. Combining them allows you to create countless page layouts. Sections are the largest building blocks, and they include row groups. Rows are located within sections and are used to accommodate various modules. Modules are placed inside lines. This is the structure of any Divi site.
Sections
The most basic and largest building blocks used in designing layouts. They are used to create large groups of content, and they are added to the page first. There are three types of sections: Standard Section, Fullwidth Section, and Special Section.
A standard section consists of one or more columns and uses standard modules. The fullwidth section uses its own fullwidth modules that span the entire width of the screen. Special sections allow you to create more advanced layouts including sidebars.
Rows
Rows are inside sections, and you can place any number of them within a section. A row can contain a certain number of columns (columns) of different widths. After you decide on the column structure for the row, you can place the modules. There is no limit to the number of modules you can place inside a column.
Modules
Modules are the content elements that build your site. Each Divi module can be placed in a column of any width. All modules are fully responsive.
Creating the first page
Three main building blocks (section, rows, and modules) will be used to build your page.
Before you can add anything to your page, you first need to add a section (section). 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 at the bottom of that section. When you click on it, a new section will be added below the section in which you are at the moment. If you create a new page, then your first section will be added automatically.
Add the first row
After adding the first section, you can start adding column rows to it. Any number of rows can be placed in a section, and you can mix and match rows with different columns (s) to get different layouts.
To add a row, click the green (+) button inside any empty section, or click the green (+) button that appears when you hover over any current row to add a new row below. After you clicked the green (+) button, a list of column types appears. Select the option you want. You are now ready to add your first module.
Add the first module
Modules can be added within lines, and each line can accommodate 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 your site. You can use basic modules like text, images, and buttons, or more advanced modules like Sliders, portfolios, galleries, and e-commerce stores.
To add a module, click on the gray (+) button inside any empty column, or click on the gray (+) button that appears when you hover over an existing module on the page, to add a new module below.
After clicking on the button, a list of modules will open. Select the required module, it will be added to your page, and the module settings panel will appear. Using this panel, you can customize the installed module.
Configuring and customizing sections, strings, and modules.
Any section, line, or module can be customized in various ways. You can access the item settings panel by clicking on the gear icon that appears when you hover over an item on the page.
This will open the settings panel for the specified item. Each settings panel is divided into three tabs: General, Design, and CSS. Typically, everything you need to build a website can be found under the General tab.
Here you can adjust the content of the module and change some basic parameters such as font size and color or background colors. If you need advanced editing, you can head to the Design section.
Here you can configure absolutely all parameters of the element. Finally, if you want, even more, you can head to the CSS tab and apply custom stylesheets to any part of the module.
Saving a page and accessing parameters
To open the General Page Settings, click on the purple three-dot icon at the bottom of the screen. This will open the options bar and give you various options. Click on the gear icon to open the page settings.
Here you can customize the page background color and text color, as well as save the page. A panel will appear in the lower-left corner to enable viewing of the page on mobile devices.
Start building your website with ready-made layouts
A great way to create a new page is to use ready-made layouts. Divi comes with over 20 pre-made layouts containing various common page types such as Home, About, Contact, Blog, Portfolio, and more.
You can download them and then swap out the demo content for your own. That’s it, your new page is ready!
Saving layouts to the library
In addition to using Divi ready-made layouts, you can also save your own creations to the Divi library. When a page is saved as a layout in the library, it can be loaded into new pages. The larger your library is, the faster you can create new sites.
To save the page layout to the library, click the “Save to Library” icon that appears when you hover over any element or in the bottom bar of the options bar. Once an item has been added to the library, it will appear in the Add From Library tab when adding new Divi layouts, sections, rows, or modules.
Friends, I hope this article helped you to know about Divi builder? If help does post then I recommend sharing the post and following my Youtube channel, Facebook page, LinkedIn page, and more. And don’t forget to discuss your Divi builder overall experience in below comment box here.
