Divi Theme Builder Tutorial to Create a WordPress Website

divi theme builder
divi theme builder

Visual Builder or visual development tool allows you to create a website page faster. One of the most frequently used development tools is the Divi Theme Builder from Elegant Themes which you can use to build a landing page website.


Using the Divi Builder, a website with two or three landing pages is completed in just a matter of hours.

Is it SEO Friendly? Yes.

Is it mobile responsive design? Yes.

Those are some of the advantages of Divi Builder.


What is Divi Builder?

Divi Builder is a WordPress plugin that works with almost any WordPress theme – even the ones that were not created by Elegant Themes.

Divi Theme Builder allows you to modify not only the content of your website, but also the design of the website itself, without having to change the theme.

By using the DIVI Builder, you can create web pages (layout, design, etc.) “live“.


Divi Builder lets you insert, delete, and edit content blocks. It offers endless layout possibilities, and a perfectly flowing content area for a responsive design approach.

Use the Divi Builder Module, to create such blocks of content, to create almost unlimited layout combinations.


Divi was created to simplify the design process, allowing anyone to create an elegant website. Divi Builder uses a simple drag and drop interface.

And for advanced users, there are contextual settings and right-click options that allow you to speed up your workflow, and fully customize every element of your website.


With Divi Theme Builder, you can also differentiate the appearance on the desktop from that on the mobile by taking advantage of the “Visibility” function.

For example, limit a row that can be seen only on the desktop or on the phone.

In addition, there are more than 600 layouts or website page design templates available.


You can start to create a page by calling the template, then just change the image and text. Therefore, creating web pages can now be faster, from days to hours.


Advantages of Divi Builder

Divi Builder as a visual development tool have the following advantages:

  • Easy to Use.

All elements consist of Containers, each container contains Rows, each row contains Columns and each column contains Modules.

  • Many Modules.

Divi provides modules such as text, images, sliders, contact forms, Call-to-Action buttons, toggles, accordions, and so on that are very supportive in creating a modern and responsive website page.

  • There is Animation.

Each row, column and module can be displayed with animations such as zoom, bounce, fade, slide in and so on, so as to improve the experience of website visitors.

  • Mobile Design.

Divi provides a mobile display, when finished working on the desktop version, we can switch to the mobile screen display to adjust what needs to be adjusted, so that the display on the mobile screen can be neat (nothing overlaps).

  • Can Create Themes.

This is very useful for creating a consistent website appearance. You can create Header, Body, and Footer for multiple pages, all pages or only specific pages. Of course this can speed up the process of creating a page or post.

  • Eliminate Dependencies.

Have you ever experienced a website that is difficult to update? Need special skills? Even though your website doesn’t need that kind of thing, then it’s time for you to use Divi Builder.


There are many other advantages of Divi Theme Builder, such as custom CSS, creating anchor text, making it easier to design menus and headers, and so on.


In addition, this visual development tool is also quite light, does not take up too much of the computational process, so that your website can always be accessed quickly. Moreover, if you add auto optimize and cache, the website can be loaded in about 2-3 seconds.


Benefits of Divi Builder for SEO and Digital Marketing

With a website that has an attractive appearance, is quickly opened, of course this will increase the SEO performance of the website. Just install the Yoast SEO plugin and follow all the required parameters until it’s all “green light“.


Most users today access websites with mobile phones. Websites built using Divi Builder will have a neat and attractive appearance, and are quickly accessed.


In digital marketing, you carry out a series of promotions, especially paid advertising such as placing ads on Google or on Facebook and Instagram. But what happens if your website is cluttered and unstructured? Of course people who were already interested become hesitant to deal with you, right?


Therefore, the appearance of the website is very important, and must be structured or can direct website visitors from knowing, interested and convinced, so that in the end website visitors can convert into your customers. This is indeed one way to get buyers online.


To control URL no follow and so on, Divi provides it in the advanced menu in several modules and lines. This will maintain the SEO performance of your website pages.


Creating Website Pages Using Divi Theme Builder

Make sure before reading this tutorial you have installed the Divi Theme with the latest updates.

Log in to the WordPress Admin dashboard, on the left side bar, hover the mouse cursor over Pages > Add New and click on the Add New menu.

If so, the following page will appear:


You will create a Home page for the landing page when a visitor visits the website page for the first time. Type ‘Home‘ in the “Add title” field.

If it has been done, now go to the builder page by clicking the “Use Divi Builder” button


If you click it, the builder page will appear below.

divi theme builder2
divi theme builder2

There are several options on the layout menu: Start Building, Browse Layouts, and Choose Page.

You can try to import the layout provided by Divi Builder. Please click the “Browser Layouts” button and many layout options will appear.

Select one of these Layouts and then click “Use This Layout”.


The Progress Bar will appear when the button has been clicked and wait for the process to complete.

If the import process is successful, the imported layout will appear in the editor. An example is in the image below.


Then click the Publish button so that the page can be published immediately.

After clicking the Publish button, the page layout for your website will appear on the Home page. However, there are still several more processes that must be done so that when visitors visit your website and for the first time go directly to the Home page that you created.


Defining the Home Page

On the left side bar, hover over Menu Settings > Reading and click on “Reading“.

Then it appears on the “Your Home Page Display” menu. This menu serves to direct which page to go to if a visitor enters your website. Since you have created a Home page, then select the Home page for the landing page.

divi theme builder3
divi theme builder3

Don’t forget to click on the bullet “A static Page” and select “Home” in the “Homepage” dropdown. Click “Save Changes” when you’re done.


Steps to Display the Menu on the Website

After that, let’s create a menu that will be displayed in the Header section of the website. The trick is to point the cursor to the side bar in Appearance > Menus.

If you have entered the menu page, let’s create a menu. A display like the one below will appear:


Enter the name of the menu you want to create. The name of the menu here means not like the Home, About, Gallery and so on buttons that are in the header, but Templates to set the menu structure.


For example, using the name “menu1“, you can use any name and if later there is a change in the menu structure, you can create it again with the name menu2, and so on. Once it done click on the “Create Menu” button.


Attributes will appear in the Pages section that you created. Because you have created a Home page, the Home page can be placed in the menu.

The trick is to check the Home page checklist and click the “Add to menu” button and when the Home menu appears on the right. If everything is done then click the “Save Menu” button.


If it will be like the following image:

divi theme builder4
divi theme builder4

Finished. Now the home page has appeared on your website. Repeat the steps for creating a layout page until several pages are formed. If so, enter the page in the Menu as in the “Display Menu on Website” step.


Create a Stunning WordPress Website

Creating a website can now be easier, faster and more fun by using Visual Builder. Divi Theme Builder provides more facilities and flexibility needed. Using visual builder, you don’t need any experience and coding skills, anyone can use it.

Editing or updating a web page can be easier and faster. Over time, you can eliminate dependence on website developers, namely by creating a design theme. Developers or other parties who will manage the website do not need to contact the previous developer, as long as they are able to use Divi Builder.

Leave a Comment

%d bloggers like this:
Available for Amazon Prime