How to Build a Website with Divi Theme – Tutorial

You’ve probably already heard me talking about the Divi theme by Elegant Themes, but I wanted to actually create a complete tutorial on how to use it. Why should you be using Divi Theme? Well, there are in fact several reasons. When WordPress first came out, it was pretty groundbreaking. People were absolutely amazed at how quickly you were able to get up a pretty nice looking website and have it be fully functional in a snap. The Divi Theme is a WordPress theme which takes this idea, and takes it a step further. It allows you to build much better-looking, much more advanced websites in less time than you ever thought possible.

In brief, you will need to do the following:

1. Get Web Hosting
2. Get an Elegant Themes License
3. Install WordPress
4. Download the Divi Theme
5. Upload the Divi Theme to your WP Install
6. Activate it
7. Build your website with the Divi Builder

Before we start, if you are new to Divi theme and the Divi Builder, you can have a quick look at my other article that explains what is Divi. I mention it here just in case you are a total newbie.

The entire theme is also extremely easy for just about anyone to use, and if you already know WordPress, then learning how to use the Divi Theme is extremely fast and simple. That’s what makes it such a wonderful theme; its customizability, its user-friendliness, and the speed to which you can design a truly wonderful site.

And before I go into how to build a website with the Divi Theme, let me first mention that if for any reason you don’t have hosting yet, then I highly recommend you get an account with SiteGround. In my opinion, they are by far the best host for any site you’re launching. It is a web hosting company recommended by wordpress.org and it is also very popular in the Divi Theme Users communities. All SiteGround plans offer all what you need to run WordPress and Divi – PHP, MySQL, Apache, 1-click WordPress install and specific features like e.g. SSD drives to speed up your website’s loading time to the maximum.

All SiteGround plans offer the features that I’ve mentioned above. The higher plans Grow Big and Go Geek offer some additional premium and geeky features, like SuperCacher for great speed, priority technical support, Staging, etc. The cheapest Start Up plan is ideal if you need hosting for just one website and if you are on a low budget.

Also, in order to use the Divi Theme you need to have a subscription with ElegantThemes. I highly recommend you take advantage of their Yearly Access for only $89 per year. That’s less than $7 per month (though you’re billed annually) and for that reasonable sum, you’ll be given access to ALL of ElegantThemes’ many themes (including the Divi theme) as well as their two Premium plugins, the Monarch plugin (to enhance your social media sharing) and the Bloom plugin (to enhance your site’s opt-in box and to increase your overall number of opt-ins). Both social sharing and opt-ins are extremely important for any blogger, so I can’t recommend this package enough… it’s completely crammed with value.

Uploading and Activating The Divi Theme

First, before we can begin designing our site with Divi, we have to install it onto our WordPress site (if you have not installed WordPress yet, follow my tutorial on how to install it properly). Of course, if you already have it installed on your site, then you can skip this step, but otherwise, if you don’t have it installed and don’t know how to do it, then you’ll definitely want to pay attention.

The first thing you’ll want to do is download the Divi theme file from your ElegantThemes backend. It doesn’t really matter where on your computer you decide to save it, but make sure to save it some place where you’ll remember it. You can save it on your desktop for example, and then simply delete it afterwards if you want (or you can save it some place else on your computer for future uploads, if necessary).

Once that’s done, you can go to the “Appearance” tab in your WordPress dashboard, and then click on “Themes”. After you’ve clicked on “Themes”, at the top, you’re going to see a button that says “Add New”, so you’re going to want to click on that. After that, in roughly the same place, you’ll now see a button which says “Upload Theme”. Click on that, and then click “Choose File”. You’re going to upload the theme then from your computer by double-clicking it. Once it’s there, you’re just going to want to click “Install Theme”. After that, the theme should be installed, and you’ll then be good to go. I have also written a quick guide on how to install Divi, so you can check it out, too.

So, go back to your list of Themes in the Themes sub-tab (under Appearance). Now that you’re looking at your themes, you should see the Divi theme listed there, however, it won’t be activated just yet. All you’re going to want to do is click on the theme when you find it, and click “Activate”, and you’re all done. After that, the Divi theme should be active, and you’ll be ready to start building your new site!

Building Your Website With The Divi Theme

UPDATE: Since the Divi version 3.0 was released in September 2016, it now comes with the Visual Builder, as well. You can see on the screenshot below how it looks like. Actually, you are able see all the changes that you make to a WordPress page (or a post) live. This makes Divi a perfect tool. If you have not tried the Visual Builder yet, you should. It is quite addictive. :)

Within the Divi theme page builder, everything is comprised of sections, rows, and modules. Sections are the largest of these 3 organizational elements, then rows being the second, then finally, the individual elements, which are called modules. A section runs across your site, and contains rows nested within it (there can be multiple rows per sections). Within the rows, you put the modules. Modules can be things like images, text, and the like. Please note that you can also name your various modules and sections to make them easier to identify on the fly. Please also note that the sections are blue, rows are green, and the modules, gray. For the rows and sections, you’ll see this color on the left-hand side of each.

So, before you can do anything else, you have to start with your first section, and then determine, for your first row, how many columns you want, and of course, how big the columns will be. When you add a section, you see that there’s already a row put in there by default, but you still have to configure it. The first thing you’re going to want to do is click on “Insert Columns” so you can choose how many columns you want inside. Once that’s done, you’ll see a whole bunch of different options pop up for which columns you want to use.

There are several different column layouts to choose from for each and every row. For example, you can have one big section, or two half sections. You could divide it into four separate quarter sections if you wanted, or you could make the section the left be 1/3rd size and on the right be 2/3rds size and vice versa. Really, any combination of halves, thirds, quarters, or one whole section is available to you. So, just scroll through and click on the column sizes which you want for your first row. So, for example, you can click on the two half size columns, and then, within that row, you’ll see two gray-bordered rectangular boxes pop up which say “Insert Module”.

So, now let’s talk about modules. Click on any of the sections, and click the insert modules button, and a window will pop up which will show you all of the different modules that you can add… and the list is REALLY extensive. I love how many options they give us here to be honest. There are some very basic things which you can add, such as text, images, blurbs, or a sidebar, but, there are also many more “advanced” modules which you can add as well. Examples include things like a blog post, call to action, tabs, animated counter, a contact form, a testimonial, or even an entire pricing table.

So once you click on a module, all the settings for that module will pop up immediately. So for example, if I click on the image module, settings will pop up such as “image URL/upload”, “image alternative text”, “Link URL”, and “Animation”. Not every field is mandatory to fill in, for example, you don’t need to link your image to a destination URL if you don’t want. What I love about Divi is that filling in the necessary information to create each module is very simple to do. What’s handy about Divi too, is that whenever a module is created, you can drag and drop it to literally any other row, and wherever you want in that row as well with ease… making moving sections around your site very simple to do. This functionality is really what makes Divi a killer theme.

Below each section, there’s a button to insert a new section, below each row there’s a button to insert a new row, and lastly, below each individual module, there’s a button to insert a new module, making the theme extremely easy to add to. So, just add whatever sections, tabs, and modules you want, wherever you want, and then simply move them around wherever you want, and before you know it, you’ll have a gorgeous website which looks like it was made by an expensive, professional, boutique web-design firm.

If you want some inspiration on what is possible with Divi, you can check out these 7 Divi theme examples, that I have selected for you.

I hope this helps, and good luck with building out your first functional website using the Divi theme!

This guide is also available in Spanish, Portuguese and Italian.