Introduction

If you are reading this it means you are interested in installing, setting up and customizing one of our all-time favorite WordPress theme: Divi. We will start by understanding the Divi theme’s functionalities and using its unique drag and drop tool to build our very own Divi website, explaining each step in detail as we go. So, as promised, we are going to start from the very beginning.

The Divi Theme

Divi theme is a drag and drop builder released in late 2013 by Elegant Themes now at its version 3.2. It was a big hit among novice and expert website builders alike and Divi is used by over 500k customers today to create websites for themselves and their clients. Divi was introduced as a WordPress theme, but it owes its popularity to an incredibly powerful page builder which gives the theme its name. The Divi page builder empowers users with endless possibilities with its drag and drop editor that takes WYSIWYG (what you see is what you get) to a whole other level.

Although the Divi builder was first introduced with the theme back in 2013, the drag and drop editor is now available as the Divi builder plugin that can be integrated with any theme. That makes this tutorial important for not just those with the Divi theme but also those who wish to use the Divi builder plugin.

Installing the Divi Theme

There are three things we need to have in place before we begin the installation process:

1. A hosted domain with cPanel or any other web hosting control panel in place. In this case, I am using the AMPPS self-hosting platform but others hosts such as GoDaddy and Bluehost will have a similar interface.

2. An installed version of WordPress on your cPanel as this is where we will install our theme file. You will have an admin control panel such as the one below if you have WordPress installed.

3. A Divi theme file in a compressed .zip format. You will be given the link to one if you purchased it from the Elegant Themes website.

Are we all ready? Alright, let’s go.

Step 1 – Uploading our Divi theme file.

From the WordPress control panel pictured above, navigate to the Appearance option at the lower left-hand side of the screen and click on it.

You will be taken to a page with a list of your installed themes. If you are installing WordPress for the first time you will be given some default pre-installed themes including the Twenty Seventy theme.

Look for the Add New button that is usually located above the currently active theme and click on it.

You will be taken to a page where you can add themes to your website. WordPress currently boasts of about 3257 free themes but Divi isn’t one of them. Divi is a proprietary theme that can only be installed manually.

To do this, we have to locate the Upload Theme button located above the list of themes and select that.

You will be given the option to upload and install your theme in a .zip format. Select the Choose File button.

You will be presented with a pop-up where you can upload the theme file. Navigate to the location of the Divi theme .zip file in your computer system, in the image below my theme file is in my Downloads folder. Select the file and click on Open.

Then, with the right file selected, you can go ahead and install your Divi theme.

From here on everything is handled by the WordPress control panel and you will be notified when the installation process is complete. The installation process should end with a “Theme installed successfully” message and on the notification screen (below), click on Activate.

Step 2 – Importing Demo Data.

Congratulations! You have successfully uploaded and activated your Divi theme. If everything was done right, you should be presented with the screen below whenever you visit your website’s frontend.

Your website may look a bit bare now but we can begin by populating it with demo data. Demo data can be helpful as they show how the theme works and speed up the time necessary for developing a website.

Divi theme comes with several elegant premade layouts that you can use to start designing your website. Each layout comes with options that allow you to start from a blank page, a default layout, or by replacing the demo content with your own.

At the WordPress control panel, navigate to the Pages menu option located on the left-hand side of the screen and click on it.

If this is a new Divi theme installation, you should have two pages added already, the Private Policy page and a Sample Page. If you have other pages already on your website, then only the Private Policy page will be added.

In this case, I will be installing a premade layout on the Sample page. To begin, click on Sample Page.

On the next page, you will see several customization and layout options for that website page. You may immediately notice that the Divi theme has changed our website’s backend page editor as we now have two additional customization options. Starting from Divi version 3.0, the Divi Builder can now be used in two different ways, the Divi backend builder and the Visual Builder (frontend). We are still given the option to use our default page editor, but that’s not why we are here.

To populate our website with a premade layout we have to select the Load Layout option on the Divi builder tab.

You will be presented with a pop-up screen of several elegant layout packs for any niche that you can choose from to begin customizing your website. The Divi layout page has 373 total layout packs for designing different types of websites including art & design, business, community & non-profit, education, events and much more.

For this tutorial, I will be using a Yoga Studio Home Page layout pack to customize our home page.

And install it by putting in the username and API key I was given after purchasing the theme.

The selected layout pack is then installed onto our Sample page Divi Builder. You will notice that our backend Divi builder is now populated with several elements split into sections. These elements make up our default layout and they are what we will use to edit and customize our website.

A visit to out frontend (by visiting our web address) will show that our website now has a structure.

The ability to load different demo layouts is a very useful feature of the Divi theme as it helps cut down the time you would need to design and set up your website while embedding your website with several standard functionalities for your industry. For example, our Yoga homepage comes with several sections including the header, services, testimonials, and call to action. All of which you are likely to see on a yoga website. There are loads of different page layouts that you can choose from, including home, about us, contact, services, FAQ and portfolio pages and you can have a website up and running within minutes.

Step 3 – Customizing your Website

Now that we have uploaded our demo data it is time to begin editing and customizing the different elements to suit our needs. This can be done in two different ways using the Divi Builder, the frontend or the backend and we will be showing how it is done in both ways.

Backend Website Editing Using the Divi Builder

To begin customizing your Divi theme from the WordPress control panel, navigate to the Pages menu option located on the left-hand side of the screen and click on it.

Then navigate to the page you want to customize. In this example, I will be editing the Sample page.

On the Sample page, you will see the Default Editor tab, the Visual Editor tab, and the Divi Builder tab. We will be working on the Divi Builder tab.

The Divi Builder

The Divi Builder is designed to be an easy to use drag and drop builder with various useful elements that can be combined in any number of ways to create stunning websites. The Divi builder is divided into different sections which are the builder’s largest building blocks as shown in the image below.

Each section is a stacking block that can be used to group your website content into distinguishable areas. Every design project in Divi starts with a section. There are three different section types that one can choose according to the contents expected in each section. Using the image below, they are:

1. Standard section: Great for accessing various kinds of content and modules including audio, video, gallery, image, text, contact forms, dividers etc. When building a website, the standard section contains all the modules you will need to get started.

2. Fullwidth section: This section gives you access to a set of Fullwidth Modules that take advantage of your browser’s full width. Fullwidth sections can only contain fullwidth modules.

3. Specialty section: This type of section is great for creating advanced column structures without adding unwanted breaks to the page. They help create layouts that are not possible using normal sections.

4. Library section: When done with any section, you can save it in your Divi Library and load it again anytime you want.

Each section is further divided into:

A. Section: These are the biggest content wrappers that contain different rows. They are used for structuring the website. For example, the section highlighted above is our website’s header section.

B. Rows: These are the various column layouts that can be placed inside of sections. Each row can be customized with various settings that can be accessed by clicking the settings icon.

C. Modules: These are global elements that house your website content and they help you add virtually any design elements to your layout. The Divi Builder includes several modules to help you get started.

Module Settings

Each section, row, and the module has its own settings which can be accessed with the triple line ( ) that can be found on the top or left of each element. The settings page for each module is divided into three;

1. Content: This includes all of the section’s content elements including elements like text, images, links and background images, and videos.

2. Design: Here you will find all of the section’s styling options to help you change how each section looks. You can change just about anything by using a list of design settings such as sizing and spacing.

3. Advanced: This tab contains options for adding custom CSS and HTML attributes to your sections. This is usually reserved for more experienced web designers.

Adding a Section

To add a new section you just need to select the (+) button located at the bottom of any existing section (there must be at least one section in every page). You can choose to add a standard, fullwidth or specialty section or to load one from the library.

Each time you add a new section you will need to define its properties. For this example, we will be choosing the Standard Section option. After clicking on that, a pop-up will request for your preferred layout for that section. You can choose between fullwidth, double section, triple section and so on. This will help the Divi Builder organize your content accordingly.

In this case, we selected the Double section option as shown below.

A new section will be created with a full-width row inside of it. By using the Module options, you can customize your section in many creative ways. In the Section module options, you can change the background image, color, video, width, height and even add parallax effects and CSS ID and Classes.

Our new row also comes with the option to insert a new module into that role. To insert a new module you will need to click the Insert Module option and select one from Divi’s module list.

The Divi module list contains dozens of modules that can be mixed and combined any way you want. When you select a module, you will be presented with that module’s specific customization options.

In this case, we are selecting the Image module.

Every module performs a different purpose and comes with a different set of options but the settings page for all modules is divided into three: content, design, and advanced. In the Image module we chose, we are prompted to upload or type in the link to our image.

After adding our content and carrying out the necessary styling it is time to save and preview our website by clicking on the Update button.

I have added an Image and a Text module to our row and updated our website so it’s time to see if any changes have taken effect. As you can see, there is a new section added to our website that wasn’t present before.

You have successfully created a section and a two column row with their respective modules. You can take it a step further by editing the element’s options by selecting its menu icon ( ) or deleting it by clicking the close ( ) icon. You can choose to add several sections to your website page or add any number of rows to an existing section, or modules to an existing row.

Divi Theme Options

The Divi theme comes with its own custom theme options where you can control many customization and styling elements of your website. The options menu allows you to control things like your logo, navigation, layout, menus, navigation settings, and so much more. You can also add HTML code to the head or body of your website as well as CSS styling to various elements.

To access the Divi theme options from the WordPress dashboard, just click on the Divi options on the lower left corner of the screen.

You will be presented with the General setting page where you can change and update your logo, favicon, date format and even your website’s Google API key. You can also find options to activate or deactivate the fixed navigation bar, Divi gallery, and social media icons. This is where you can include any custom CSS styling to customize your site.

By flipping through the various tabs you can gain access to multiple menu options that allow you to carry website-wide edits and even to add HTML codes and update your theme when necessary. Whenever you make a change to the options, you can save your progress by clicking on the Save Changes button located on the top and bottom of the page. You can also restore the default settings for the Divi Theme Options by clicking on the Restore to Defaults icon (pictured in yellow)

Conclusion

When most people talk about Divi, they may not realize that they are referring to 2 different things that work as one. The Divi Builder and the Divi Theme. Even though the Divi Theme only works with the Divi Builder, it is possible to integrate the advanced Divi Builder with any WordPress theme. The Divi Theme offers users more options and flexibility than any other theme by allowing them create incredibly versatile WordPress themes with it intuitive drag & drop page builder. This makes it easier than ever to build elegant WordPress websites, even for those who do not know how to code.