In the first part of this tutorial, we showed you the basics of using Divi to build a website. By now, you should have a big-picture understanding of how the theme and its visual builder work.
For this tutorial, we’re going to take things a step further. We’ll show you how to use Divi’s row, column, and module system to create complex elements, and then combine them to build a full website.
By the time we’re done, you’ll be able to generate your own pages or even an entire project using Divi. Let’s get right to it!
How to Build a Website Using Divi (4 Key Components)
In the following four sections, we’ll show you how to use Divi’s most important elements. Understanding how each of these pieces work together will enable you to start taking advantage of the builder’s innate flexibility.
1. Rows and Columns
When you decide to design a page from scratch using Divi, the first thing you’ll be asked is which layout you want to use for your first row:
As you can see, Divi gives you plenty of options. If at any point you want to alter the current configuration for a row, you can click on Change Column Structure:
Each column can house a different module, and rows can include as many as six unique columns. This gives you a lot of control over your page’s structure:
One of Divi’s handy features is if that if you resize your screen, the visual builder will show you how the change affects your website’s column structure. Here is that same six-column row from the last screenshot, but on a smaller screen:
At any point, you can take existing rows and rearrange them using Divi’s drag-and-drop mechanics. That option enables you quickly visualize different layouts and test new designs.
If you want to undo your changes, Divi offers a lot of options to help you reverse course quickly. Before we examine those in depth, however, let’s talk about modules.
2. Modules
Once your initial rows and columns are set up, you can begin to add modules. Divi ‘modules’ are individual pre-built elements that can contain text, images, buttons, counters, custom code, and a lot more.
What’s more, each module includes its own unique configuration options:
To show you what kinds of elements you have at your disposal, let’s take a look at the Image module:
Right away, Divi will open the settings screen for the module you choose. In this case, that settings window includes three tabs: one for content, another for design, and a final one for advanced options:
Instead of uploading an image, we opted to use a color gradient as the background for our Image module. This is another setting that Divi offers out of the box:
Once you set the background color, Divi lets you modify the size of the module by clicking and dragging its borders:
For each module, you also have access to a Design tab. This enables you to tweak every aspect of its style, from alignment to borders:
As if that weren’t enough, every module also comes with ‘advanced’ settings. Let’s check out precisely what those include.
3. Advanced Module Options
Each Divi module includes an Advanced settings tab, which gives you several alternatives such as adding custom CSS to your elements:
Even if you’re not interested in using CSS, this settings screen is critical because it also includes visibility options. For example, you can disable specific modules for users on certain types of devices:
You can also control what happens to large elements when viewed at smaller resolutions. By default, Divi will try to adjust multi-column designs and arrange them vertically, but you have full control over the behavior of every module.
Finally, the Advanced tab also includes transition and scrolling effects. With Divi, you have access to multiple built-in animations that you can apply to any element:
If you use Divi long enough, you may settle on a combination of settings you love for your most commonly-used modules. Fortunately, the theme lets you save those options as presets that you can re-use at any time.
To do this, open a module’s settings screen and click on the Preset selections under its title:
Presets are a lifesaver if you intend to use Divi for the long term. They can save you a lot of time, and ensure that your content appears consistent across posts and pages.
4. Page Settings
Any time you edit a piece of content using Divi, you’ll get access to a row of settings that affects the entire page. You can find these options at the bottom of the screen:
The buttons in gray to the left enable you to zoom in and out within the builder, as well as preview your designs in multiple resolutions. There’s also a Wireframe View setting that lets you see your entire design in a way that focuses on structure rather than style:
You can use Wireframe View to make broad changes to your page’s layout, without getting distracted by individual elements.
Moving on to the center menu, here you can load designs from the Divi library or save any pages you create. This menu also enables you to access a full edit history for any page you’re working on:
Divi’s history settings let you jump back and forth among all the changes you’ve made so far. That way, if you don’t like a new addition to your page, you can easily roll back the clock to a previous state.
Finally, the page menu lets you save your draft at any time, or go ahead and publish your design. Of course, even after you’ve made the page live, you can always come back to make updates and changes as needed.
Conclusion
The most compelling reason to use Divi is to take advantage of its powerful visual builder. Once you get used to how this editor works, it becomes simple to design professional-looking websites. Plus, you don’t have to touch a single line of code (unless you want to!).
At the core of the Divi builder, you’ll find a straightforward row, column, and module system. These elements are all you need to construct unique and complex designs. Even better, you can also preview your pages in multiple resolutions, revert to previous designs, save presets, and much more.
Do you have any questions about how to build a website using Divi? Let’s talk about them in the comments section below!
