Divi theme builder – introduction

Are you currently using a WordPress theme and are unhappy with the look of it? Do you want to change the styling and/or some functionalities of the site but don’t necessarily have the knowledge to do the changes through the code? Or are you simply trying to speed up and simplify the website development process?

Why not try using a theme builder for it? You’ve got a handful of options for the theme builder solution (Elementor, Divi, Gutenberg, Visual composer, Beaver builder…). No matter what you choose, the builder will help you out with the mentioned questions. For our company, we decided to use the Divi builder.

What is a theme builder?

Before speaking about the Divi builder, first in order is the definition of a theme builder and why should anyone be considering using one.

A theme builder allows you to create a responsive website with a drag-and-drop interface. They enable you to create entirely unique website designs in WordPress without having to write a single line of code. It’s also an excellent option if you can’t find a theme you like off the shelf, or if you just want more flexibility when building your or your clients’ sites.

What are the advantages of using a theme builder?

#1 The visual editor

WordPress themes are limited to customization. Customization possibilities in a WordPress theme are typically limited. You can only make changes based on the customization options provided by the theme you’re using. Furthermore, most themes do not allow you to include items such as a button, form, or even social media icons.

Each theme builder plugin has its visual editor included, which you use to create custom templates. Everything is a matter of drag and drop. There is no need to deal with a single line of code. If you want to add a specific element, such as a navigation menu, simply drag it onto the editor area. You can style the element to your taste in correspondence with your design concept and customize almost everything. Color, font, and sizing are only a few examples.

#2 You can reduce the usage of plugins

WordPress plugins enable you to add features and functionalities that are not accessible by default. On the other hand, the installation of too many plugins is not suggested because it slows down your site. Most theme builders include elements such as a form, a map, a slider, and so on, eliminating the need to install a separate plugin to add those elements.

#3 Using different templates for different site components

Most theme builder plugins, such as Divi Builder and Elementor, feature display conditions, which allow you to apply a certain custom template to specific portions of your website. You can, for example, design a custom header template and apply it to articles in various categories. Then, for different portions of your website, you can develop another custom header template. On a single website, you can have several header templates (as well as various footer templates).

The Divi builder

The Divi builder works perfectly for our company needs when we’re developing small website projects (be that a simple landing or a simple company website with a couple of pages) that need to be done fast. Its visual builder, a full setup responsive, the premade template library, and the fast drag and drop way of working allows us to do these projects much faster than developing from scratch and within the given timeframe.

Builder setup and basic feature overview

The setup of the Divi theme and builder is pretty straightforward. Once the newest Divi theme zip file is downloaded, you upload it via the WordPress theme setting area activate it as any other theme, and activate your Divi license inside the Divi settings area. That’s it, you’ve successfully set up a WordPress theme builder!

The builder starts working right away. When you create a new page and click on the “Use the Divi builder” button, the Divi starts out with a screen where you select one of three options:

• Build a page from scratch
• Choose a premade layout from the extensive Divi layout library
• Clone an existing Divi layout

The most used options are the first two. The first is when you want to make a page and/or a whole website design on your own, while the second option links you to the Divi premade layout page.

This option in particular is excellent for the before mentioned case when developing a quick and simple client website. The client/designer can pick from one of the 800+ pre-made Divi website layouts (and new ones are constantly being added by the theme development team) and apply it to the whole website. Of course, once you load up the premade layout, you can change it up completely if you need to. Theoretically, you can have your website finished in a couple of hours.

No matter what you choose, the theme loads up a Divi visual editor for that page, a blank one if the first option is selected and on the other hand, a fully set up page if you select a premade layout.

Visual editor views

The visual editor is available in two flavors: the traditional “Back-end Builder” and the front-end “Visual Builder.” Both interfaces enable you to create the same types of websites using the same content elements and design choices. The UI is the only difference.

The Back-end Builder

The Back-end Builder is located in the WordPress Dashboard and is accessible with all of the other regular WordPress options. It replaces the normal WordPress post editor and is useful for making quick adjustments while inside the WordPress dashboard. The main negative is the dashboard limitation and it renders your website as a block-based depiction.

The Front-end Builder

The Front-end builder renders out right on the website and is visible only to the logged-in admin. You add content or modify design settings in the visual builder, and you can see the changes immediately on the screen. Just simply click on the page and begin typing or change the font and style of text by highlighting it. Basically, develop your page visually, and watch it all happen right in front of your eyes.

Starting out with the Divi visual builder

The Divi visual builder drag and drop editor is set up with three major components:

• Sections
• Rows
• Modules

Sections

Sections are the most fundamental and largest construction pieces used in Divi layout creation. You import them first on the page and they “hold” all of the website content. Regular, Specialty, and Full-Width sections are available. Regular sections contain rows and columns, whereas Full-Width Sections contain full-width modules that span the entire width of the screen. Specialty sections enable more complex sidebar layouts.

Rows

A single section contains one or more rows (the number of rows is unlimited). Each row has its columns. There are numerous column types to choose from. The row + column combination is the main part where you create your page layout/structure. You can have a row with one to up to 6 columns, keep in mind that the Divi grid structure is modeled after the Bootstrap grid principle.

After you’ve defined a column structure for your row, you can insert modules into any column you want. You can place an unlimited number of modules within a single column.

Modules

Modules are the content components of your website which you place inside the columns. They’re all fully responsive and each one of them has a big list of setting options.

Each of these modules has its own settings (accessed by clicking on the gear icon for a particular element) and you can rearrange them, scale the size, change the content, all on the fly without using any code. Using these three modules in tandem allows you to develop an infinite number of page layouts, and every Divi website has this structure.

The Divi theme builder

Besides the visual builder, the Divi theme builder is another big feature of the whole system. It’s located under the main Divi settings inside the “Theme builder” tab. Here you define global elements/templates that will be used across the whole website, which saves up development time.

The “Default website template” applies to all of the website pages. It’s a good practice to create a global header and footer layout on it by clicking the “Add global header/add global footer” buttons. The button click will lead you to the visual editor screen where you design the mentioned elements by using the components mentioned before. Your saved header and footer layouts apply to each of the website pages.

Along with a global header and footer, you can create a page-specific layout. Let’s say your post/product pages have a very specific layout with a completely different header and footer. You can add a new page template by clicking the “Add new template” button and binding it to a specific page type, the WordPress template file, even WooCommerce template files. This new layout works only for the selected page type and its custom header, body, and footer layout display only on that selected page type.

Wrapping it up

Theme builders generally make website development simpler by using a visual drag-and-drop interface. The options are many but the Divi theme builder works perfectly for our needs. It may or may not be a perfect solution, but its feature set and ease of using its drag-and-drop interface and component segmentation are excellent for the development of simple websites.

The described features are just the tip of the Divi iceberg, the possibilities are endless! Will you try it out?