[7-Step Guide] How To Set Up Elegant Themes Divi On Your WordPress Website

So you’ve finally decided on purchasing Divi theme for your WordPress website (probably after reading my Elegant Themes Divi Review 😉)?

That’s great. You won’t regret it. Just like how I’m still happy with Divi after buying it in 2017~

If you’re unsure, let me show you just how easy it is to set up Divi.

Disclosure: Some of the links below are affiliate links. I will earn a small commission, at no extra cost to you, if you purchase through these links. Your support encourages me to continue blogging and help with the costs of hosting this site. Thank you!

1. Install Divi On Your WordPress Website

After you log into Elegant Themes, you’ll have to download the Divi theme ZIP file.

Then, head over to WordPress and click on Themes under Appearance. Next, click on Add New followed by Upload Theme. You simply have to upload the Divi theme ZIP file that you downloaded. If it’s successful, you should see that the theme is Active.

You can also refer to my step-by-step guide on how to create a website~

2. Use Divi Child Theme (Highly Recommended)

By default, you’ll be using the parent theme (the Divi theme that you downloaded in Step 1).

However, I highly recommend that you use a Divi child theme instead.

A Divi child theme inherits the design and functionality of the parent theme, with the additional benefit of not erasing your changes during theme updates.

What do I mean by this?

When you add custom codes to the parent theme files, these changes will be wiped out during theme updates. For example, you spent a long time coding a custom header or footer. But your website will return to the default Divi appearance during the next theme update.

You won’t need a child theme if you only have minor modifications (eg. less than 100 lines of CSS) where you simply have to use the Additional CSS under Theme Customizer.

2a. Add A Divi Child Theme

There are 2 ways of adding a child theme to your WordPress website:

Buy A Premium Child Theme

I recommend that you do this if you’re a non-technical person like me. I bought a child theme from Divi Lover and just look at how beautiful my website is now~! Even if I’m a technical person, I might not have the artistic flair to design such an amazing website theme.

If you’re buying a paid child theme, make sure to keep this in mind:

• Style fits with your brand (eg. minimalist, feminine): Color and font aren’t important because you can customize them in WordPress and Divi settings.
• Includes all the functionality you need (eg. eCommerce, blog)
• Responsive web design where the site looks great on all screen sizes (this should be guaranteed since Divi is a theme with responsive web design)
• Check that you’re buying the right license (eg. only 1 site or multiple sites, commercial or personal)

Create A Child Theme Yourself

Okay, so this is very technical. I highly suggest that you check out this Elegant Themes blog article about the Ultimate Guide to Creating a Divi Child Theme.

Here’s a brief breakdown of what you need to do:

• Create a new folder for your child theme
• Create your child theme style.css file to add custom CSS
• Create your functions.php to enqueue your parent theme stylesheet
• Create a thumbnail (optional)
• Upload & activate your child theme
• Edit Divi’s functions.php & template files
• Migrate current custom CSS or code to your new child theme
• Update your child theme if it breaks

3. Check Through All Settings

Next, adjust your settings.

I’ve highlighted a few important WordPress settings in the step-by-step guide on how to create a website. Also, do remember to edit the widgets too.

Let’s hop right into Divi settings! You can find the settings in Divi Theme Options.

Under the General settings,

• Logo: Upload a brand logo if possible
• Minify and Combine Javascript Files, Minify and Combine CSS Files: Enable both of them to speed up your site’s page load time

Under the Builder settings,

• Post Type Integration: Choose to enable Divi Builder on post types you want (eg. I only enable Divi Builder for pages and projects, but not posts)
• Advanced: Enable Classic Editor if you prefer this over Gutenburg editor (WordPress latest editor)

I have an additional Girly settings tab from my premium child theme where I can tweak things like

• General: Show previous/next post, Show related articles
• Preloader: Preloader image, Preloader effect

4. Add Codes With Divi

Whether you have Google Analytics code, Google Ads (previously known as AdWords) code, Facebook Pixel or LinkedIn Insight Tag, you can simply add these into your Divi theme. You won’t have to install an additional WordPress plugin to add codes to your site.

Just go to the Integration tab under Divi Theme Options. You will then have the options to add codes in the

• <head>
• <body>
• top of posts
• bottom of posts (before the comments)

However, I highly recommend that you use Google Tag Manager instead. With Google Tag Manager, you can manage all your codes in one place. You simply have to install one code: Google Tag Manager code.

This will make it easier for you to manage the various codes. You can also specify the exact pages that you want the different codes to fire.

For instance, you might want to fire Facebook’s Purchase event code only on the payment page while Facebook’s View Content event code only on the product pages. Rather than spending so much effort manually adding the codes on the various pages, you simply create a trigger in Google Tag Manager. Moreover, Divi only allows adding codes to the entire website (and not specific pages).

5. Edit Monarch (Social Media Plugin)

Monarch, a social sharing plugin for WordPress, is designed to get you more shares and followers.

Do look through Monarch settings.

Determine the social network accounts that you want your audience to follow as well as the social networks that you want readers to share your blog posts on.

Also, adjust the social sharing locations (eg. floating sidebar, inline below content).

6. Edit Bloom (Email Opt-In Plugin)

The same applies to Bloom, a WordPress plugin that helps you to gain more email subscribers.

Remember to add your email account so the plugin can pull in your subscriber lists and add people to the correct list.

Choose a display type (eg. pop-up, fly-in, widget in the sidebar or footer) as well as triggers (eg. timed delay, after scrolling, after inactivity).

7. Design Your Website With Divi’s Drag & Drop Builder

Finally, you can start editing your website design.

There are many ways to go about this. You can use the wireframe layout or edit directly on the desktop/tablet/phone view.

Whatever way you choose, bear in mind to utilize the Divi Library.

Divi Library allows you to save sections, rows, modules and even layouts so you can reuse them again on another page. And of course, you can choose to delete those layouts that you’re not using anymore.

Divi library also includes free premade layouts that the team at Elegant Themes created.

Check out my article on the little-known features of Elegant Themes Divi to see how you can use the Divi Library~

Now It’s Your Turn

So setting up Divi on your WordPress website is super easy, right?

Most of my time was spent on designing the site :/ Although the premium child theme helped a lot, I spent a long time redesigning the pages (just so the information is presented the way I like it to be).

What other steps have you taken when setting up Elegant Themes Divi?