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.

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

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.

WordPress - Appearance Add New Theme

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.

Elegant Themes Divi - Child Theme Activated WordPress

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.

Divi Lover - Girly Child 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.

Elegant Themes Divi - Child Theme Building Blocks

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

Elegant Themes Divi Theme Options Girly Preloader - WordPress Theme Customizer Girly Settings Elements

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)

Elegant Themes Divi - Theme Options Integration

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).

Elegant Themes Monarch

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).

Elegant Themes Bloom - Responsive Design

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.

Elegant Themes Divi - Visual Drag Drop Builder - Wireframe 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~

Elegant Themes Divi - Library Premade Layout Packs

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?

 

Copyright © 2017-2020
Nicole C. W. All Rights Reserved.

Want to receive updates?

Join My Newsletter Now

 

Be the first to know about hot new releases, tips from my blog and more.

Pin It on Pinterest

Share This