Looking for a visual content editor for WordPress by Drag & Drop? Divi Builder is a plugin designed by Elegant Themes, a company dedicated to developing premium WordPress plugins and themes. This company is known worldwide for its Divi theme. a multipurpose WordPress template.
Thanks to the launch of the Divi Builder plugin, you can now add this powerful visual content editor to any WordPress website. The Divi Builder plugin now also includes a visual version (Front end) apart from the traditional backend type. The new unified Divi builder lets you toggle between backend and visual modes instantly. In addition, the builder interface has been optimized to make it much faster.
In this post we are going to talk in depth and in detail about the Divi Builder plugin, what features it has, advantages, how it is installed, we will do a tutorial, give our opinion, explain the prices and much more.
Divi Builder plugin Step by Step Guide in 2022
In this guide of 2022 we will talk in depth and in detail about Divi Builder, it offers us millions of facilities to build your entire website.
Divi Builder plugin for WordPress Review: What Is Divi Builder?
Divi Builder is an Elegant Themes plugin to be able to integrate the Divi Builder on websites that are using the Divi template or another. Divi Builder is one of the best plugins in the field of visual editors for WordPress, competing with the prestigious Visual Composer and Thrive Content Builder.
Divi Builder offers us the ability to create multi-row and column layouts for your pages and posts. It also includes a selection of ready-made page layouts that you can use as is or customize.
Divi Builder was created to make the design and layout process as easy as possible without the need to know anything about code, in an intuitive and easy way. The Divi company has designed more than 80 themes and other products, among which we have to highlight:
- Monarch: Social Media plugin through which you can make them follow you on social networks and share your content.
- Bloom: a plugin to create Opt-In Forms, very important to attract subscribers.
Advantages offered by Divi Builder
- Divi Builder is a multi-pluign
- One of the best drag and drop page builders (Drag and Drop) with multiple modules, layouts and predesigned sections
- Does not require knowledge of HTML / CSS
- Excellent graphics and aesthetic design
- Divi Builder fits seamlessly with your Divi theme
- Compatible with Aweber, WooCommerce, Google Maps and MailChimp
Divi is For Everyone
- Website owners
General features of Divi Builder
Divi Builder have a lot of different features and options. Next we will talk about the most important ones to highlight:
Easy to use
Designing your website with Divi Builder is quite easy with just a few clicks. You will be able to copy, paste, duplicate, change the size of the fonts and much more in a totally visual and fast way. It also works with Drag & Drop, so we will move the elements wherever we want. You just have to click on the item, hold down the button and move it to a new place.
Variety of designs
Divi Builder is very versatile thanks to all the design elements such as rows, sections and modules. The plugin has 20 types of rows, with 3 types of sections, and more than 40 modules that, together with their advanced configuration options that it offers, you can create completely custom designs.
The modules are basic blocks of the design, each one of them will provide you with a different functionality: map, images, text, advertisements and much more.
Divi Builder allows us to customize and configure each section, row and module that is made up of a series of advanced, general and special settings via CSS.
The plugin offers you two ways to edit your content:
- Frontend: To design each entry and page of your blog in the visible part of your website and see how your website is going.
- Backend: it is the layout mode that has been used from the beginning. It is found in each entry and page of your WordPress administrator blog.
Customization via CSS
Each element of the Divi Builder has a section dedicated to CSS. If you have knowledge of CSS, you can customize your website in a modular way and without limits, without affecting other parts of the web. You can also give it identifiers and classes to style it through a child theme.
Divi Builder makes it very easy for you, so your project will be visible on tablets and mobile devices. It has many settings and configuration options, so you can set specific values in properties such as padding, margin, font size and much more.
Divi Library allows us to save the complete design of each page and each element of your website. With this we will save a lot of time, simply save each element that interests you, export it in a file and import it on another website where you have Divi Builder installed. So that your projects never start from scratch, Elegant Themes offers a wide variety of downloadable designs.
Divi Role Editor
Divi Builder includes the Divi Role function, it is a configuration panel to grant permissions based on the type of user, be it editor, administrator, author or collaborator. Having control over each of the elements of your website is essential when you need help. of more people who collaborate in your project.
Divi Leads allows us to have a system to evaluate the conversion potential of certain elements of your website.
How To Install Your Divi Builder WordPress Plugin
Installation is pretty straightforward with the WordPress dashboard plugin installer.
1. You must first upload it to your WordPress website through the WordPress control panel to update your new plugin.
2. When you download Divi Builder from the Elegant Themes Members Area, a file called divi-builder.zip will be downloaded.
3. Once you have located your divi-builder.zip file, you can upload it to your WordPress website.
4. Log in to your WordPress dashboard and click on the “Plugins” link and then “Add New”. It will take you directly to the WordPress plugins page.
5. Once you have the add-ons page loaded in your dashboard, click on the “Load add-on” button at the top of the screen. Click this button to proceed to the next step.
6. After clicking “Upload Plugin”, we will install the divi-builder.zip file that was downloaded earlier. Click the “Choose File” button to open a local browser window.
7. Once you have located the file, select it and click the “Open” button. Then click the “Install” button. Once the plug-in has loaded perfectly, you can click the “Activate” button.
Building Your First Page with Divi Builder
If you want to build your page with Divi Builder you will only have to use the three basic building blocks: Sections, Rows and Modules.
Adding Your First Section
You will need to add a section first before you can add anything to your page. 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 it. Clicking will add a new section below the section you are currently on. If you are starting a new page, you should know that your first section will be added automatically.
Adding Your First Row
Once you have added your first section, you can now add rows of columns within it. A section can and can mix and match rows of different types of columns to create different layouts. Click the green (+) button within any section that is empty, or click the green (+) button that appears when hovering over any row to add a new row below it. Once you’ve clicked the green (+) button, a list of the available column types will appear.
Adding Your First Module
Click the gray (+) button to add a new module that exists on the page when hovering over a module or click the gray (+) button to add a module that exists within any empty column. Once you have clicked the button, a list of modules will appear. Choose the module you want and it will be added to your page and the module configuration panel will appear.
Modules are the content elements of your page, and Divi comes with over 40 different elements that you can use to build. Modules can be added within rows, and each row can host different modules. You can use more advanced modules like Sliders, Portfolio Galleries and eCommerce Shops or more basic modules like Text, Images and Buttons.
Configuring And Customizing Sections, Rows And Module
Each section, row and module can be customized in different ways. You can access an item’s settings panel by clicking on the gear icon that appears when hovering over any item on the page.
When you open the configuration panel for the item, you will see that each configuration panel is divided into three tabs: Content, Design, and Advanced. Each tab is designed to make adjusting and accessing the variety of Divi Builder settings quick and easy.
- The Content tab: allows you to add content such as videos, images, links, and admin tags.
- The Design tab: allows us to control a wide variety of design settings with one click such as: spacing (padding / margin), typography, button styles and much more.
- The Advanced tab: allows you to adjust the visibility according to the device and where custom CSS can be applied.
The best plugins to use with Divi Builder
- Yoast: is a search engine optimization plugin for WordPress. The plugin has five million active installs All in one SEO: it is the original WordPress SEO plugin.
- Woocommerce: is an open source e-commerce plugin for WordPress.
- WPML: it is the plugin that converts more than a million WordPress sites in multilingual
- Aweber: allows you to grow your email list quickly and easily.
- Google Maps: Create custom Google Maps with high-quality markers containing descriptions, locations, images, categories, links, and directions.
- MailChimp: allows us to send commercial emails, notices of publication of a new post, content bulletins, welcome emails.
Divi Builder Tutorial
Divi Builder is one of the best plugins in the field of visual editors for WordPress, here you have a complete Divi Builder tutorial so you can see step by step how everything works.
Support and Documentation for Divi Builder
You have access to the forum if you purchase some Elegant Themes plans so that you can post problems and questions and be answered by the technical support staff. The team is available 24 hours a day, 7 days a week. They usually respond in less than an hour and we are often available for instant live chat.
Elegant Themes offers extensive documentation of all its products to quickly resolve questions or problems. Here are the direct links where you can find all the support information they offer:
- Documentation: https://www.elegantthemes.com/documentation/
- Support Forum: https://www.elegantthemes.com/forum/
- Support by Chat: https://www.elegantthemes.com/contact/support/
- 24/7 Support: https://www.elegantthemes.com/members-area/help/
- Blog: https://www.elegantthemes.com/blog/
- Contact: https://www.elegantthemes.com/contact/
- Product Updates: https://www.elegantthemes.com/blog/category/theme-releases
Frequent Asked Questions
Why choose Elegant Themes?
Elegant Themes is a leader in WordPress development for 12 years. They have creating WordPress themes and plugins. Divi has become the world’s most popular WordPress theme and includes the most advanced page builder on the market.
Can I use themes and plugins on multiple websites?
Yes, you can use all the themes on the websites you need. There is no restriction on the number of times you can download or use a theme.
What if I change my mind and want a refund?
Within 30 days of your purchase a refund can be made.
Plans and Pricing
You have two plans: Yearly Access and Lifetime Access
- Yearly Access: It costs $89 per year.
- Lifetime Access: You pay $249 one time.
Divi Builder is one of the best WordPress builders that currently exist on the market. It is quite easy to use, versatile and is constantly being updated thanks to the team behind Elegant Theme.
Divi Builder is a visual Drag & Drop builder that allows you to add any type of element, drag and drop it wherever you see fit on the page you are designing. Now it is compatible with WooCommerce.
What do you think of the Divi Builder plugin for WordPress? Have you used them for any of your website projects yet? Feel free to add a comment below.