How to Build a Website Using Divi (Part 1)

There’s no shortage of WordPress themes to choose from, regardless of what type of website you want to design. You’ll find options for virtual academies, online stores, digital magazines, and much more. However, few themes are versatile enough to function well for multiple use cases.

Divi is one prominent exception. This multipurpose theme is a popular choice for WordPress users who want to take advantage of pre-designed templates and visual page builders. Divi includes both, which makes it a strong option for those with little experience in web design.

However, this is a premium theme, so it’s important you know what to expect before purchasing a license. With that in mind, in this two-part series, we’re going to introduce you to Divi and show you how it works in action. Let’s get right to it!

An Introduction to Divi

The Divi homepage.

Divi combines a multipurpose WordPress theme with one of the most powerful site-builder tools on the market. It aims to be a one-size-fits-all solution for almost any type of website you can imagine.

If you don’t have web design experience, Divi enables you to set up a professional-looking site with ease. It achieves that by providing you with a massive library of pre-built page and website designs, which you can import with just a few clicks:

Some of Divi's available layouts.

Every Divi design is fully customizable, and the theme enables you to approach page editing in two distinct ways. The first involves using a unique page builder that replaces WordPress’ Classic Editor:

Divi's wireframe view.

These days, however, you’re probably using the WordPress Block Editor to create content. If that’s the case, Divi enables you to switch to a visual page-building experience instead. This option makes it easy to build and preview your website at the same time:

Divi's visual editor.

Divi’s visual editor is a powerful tool, which takes the base WordPress website-building experience and transforms it from top to bottom. If you’ve ever used a page builder such as Squarespace or Wix, the Divi Builder should feel familiar. If not, it should be quick and easy to pick up.

In order to offer all of these features, Divi is a premium-only theme. A yearly license will cost you $89, and supports unlimited websites. You’ll also gain access to some additional themes and plugins from the developer.

How to Build a Website Using Divi (2 Approaches for New Users)

At this point, it’s time to dive in and see what it’s like to use Divi. First, we’re going to focus on the two main options you have for creating content: building a new page from scratch and importing a pre-made layout.

1. Building a Page From Scratch

If you want to learn the ins and outs of the Divi theme, the best way to do it is to design a page starting with a blank slate. To begin, go ahead and open the WordPress editor for a new page. If the Divi theme is active, you should see an option to edit the page using its custom builder:

Accessing Divi's visual editor.

Click on the button labeled Edit With the Divi Builder, and wait a second for it to launch. Then you’ll be able to choose from three options:

Building a website from scratch using Divi.

Select the choice that says Build From Scratch, and you can start creating your content. The first thing the Divi Builder will ask you do to is select a layout for the page’s initial row:

Adding an initial row.

Once you have that first row in place, you can place additional ones below it by clicking on the green plus sign. If you select the gray plus sign within any of your rows, Divi lets you choose which ‘module’ (a pre-built element such as a button, video player, or even a simple paragraph) you want to add to that location:

Inserting a Divi module.

In a nutshell, Divi works by building upon this basic row, column, and module system to create complex layouts. In Part 2 of this tutorial, we’ll show you how to build an entire page from scratch. 

2. Choose a Premade Layout

However, before we move on, let’s go over how to import pre-made layouts and use them as the foundation for your website. This requires selecting option two from the following menu (Choose a Premade Layout):

Importing a premade layout.

On the next screen, you can browse Divi’s massive collection of ready-to-go designs. There are over 1,200 layouts to choose from, so it should be simple to find one that suits your needs:

Loading one of Divi's premade layouts.

Once you select a layout, Divi shows you if there are any related designs within its library, and you can import whichever option(s) you want to use:

Selecting which Divi layout to use.

After you click on Use This Layout, the theme will begin the process of importing it into the editor. This should only take a minute or two. When it’s done, you’ll have a gorgeous design that you can edit using Divi’s powerful visual builder:

Editing a pre-built Divi layout.

Most Divi modules are a breeze to customize. For elements such as text, you can simply click on and edit them. For more complex features, you can open up and customize their module settings (as in the example above).

Then, Divi lets you save any changes you make to your pages with a single click of the Save button at the bottom of the screen:

Saving changes you've made using Divi.

Although it’s easy to get started, there’s a lot to dig into if you want to learn how to use Divi for maximum effect. So keep an eye out for the second part of this tutorial, where we’ll show you how to add and edit modules.

Conclusion

Divi is one of the few themes that actually lives up to its ‘multipurpose’ reputation. Not only does this theme offer one of the broadest collections of pre-built page designs we’ve seen, but it also includes an intuitive visual editor.

If you’re new to Divi, it’s important to understand that there are two basic ways you can use it. Those are:

  1. Building new pages from scratch.
  2. Importing and customizing pre-made layouts.

Do you have any questions about how to get started with Divi? Leave them in the comments section below!

Disclosure: This page may contain external affiliate links that may result in LyraThemes.com receiving a commission if you make a purchase using the links. The opinions and reviews on this page are completely our own.

Leave a Reply