How to Use Divi Themes in WordPress

WordPress is the most popular content management system (CMS) in the world for a good reason. It has a nice layout, it’s easy-to-use, and it’s open-source.

Open-source means that everyone has access to the code and can make themes, plugins, and other resources to improve the overall WordPress experience.

When it comes to picking a theme and other web-building tools for WordPress, you have a wealth of possibilities. But, let’s cut right to the chase.

You’re going to want to check out Divi first.

Divi is unmatched in terms of offering impressive features, a wide range of templates, and custom solutions without having to code.

This guide will offer everything you need to know to get started with your own Divi theme, including:

  • How to import a Divi theme
  • How to add a Divi child theme
  • How to change the logo on a Divi theme

How to import a Divi theme

As a quick review, the Divi WordPress theme gives you access to the full Divi theme and the Divi page builder. This means you have access to:

  • A drag and drop builder that allows you to customize the look of website without needing to know any code
  • Visual and responsive editing tools
  • Robust page elements and design options
  • Custom CSS options

If you’ve already purchased web hosting and have installed WordPress, you’re ready to import the Divi theme. Here’s how:

  1. Login to your Divi account, and find the Downloads tab. Click the 'Divi' theme download button.
  2. As soon as you click on the download button, a zipped Divi Theme folder will start to download. Save this .zip folder to your desktop.
  3. Once you’ve saved the .zip file to your desktop, login to your WordPress account with your login credentials. Hint: when you installed WordPress, WordPress sent you an email with your login details.
  4. Once you’re in your WordPress account, you’ll see your WordPress dashboard.
  5. Check out the menu on the left side of the screen and find the menu item, 'Appearance.' Hover your cursor over 'Appearance,' wait for the secondary menu to load, and then click on 'Themes.'
  6. From here, you’ll see the main 'Themes' heading on the top of the screen. Next to the 'Themes' heading, there will be a box that says 'Add New.' Click on it.
  7. WordPress will then direct you to the 'Add New' page and you’ll see a button that says 'Upload Theme.' Click on 'Upload Theme.'
  8. Now you’re ready to drag and drop the Divi .zip file from your desktop to the 'Choose File' box. 
  9. As soon as the file has fully loaded, press the 'Install Now' button.
  10. WordPress will install your new Divi theme. Once the installation is complete, activate the theme and start customizing.

Not bad, right?

How to create and add a Divi child theme

As you know, Divi is one of many WordPress themes. As with any WordPress theme you can install and activate it easily and make customizations without a problem.

Here’s the thing, though. Any time you update a WordPress theme, WordPress won’t save your customizations without you jumping through some hoops to save your changes beforehand.

A workaround this issue is to add a Divi child theme. When you create a child theme, it becomes part of the parent theme and inherits it’s design and functionality. As such, when you create a child theme, you can customize your theme as you like and it will preserve the modifications you make whenever you update WordPress. In other words, when you update WordPress, your child theme customizations won’t get erased. It will help you keep your CSS code in one place.

If you plan on making advanced customizations to your parent theme (e.g., changes to the code on theme files, adding over 100 lines of CSS code, collaborating with others, etc.), you need a child theme.

Here’s what you need to create a Divi child theme

  • Make sure your Divi theme is installed and activated
  • Keep your code Text Editor accessible (Note: you can use the text editor on your computer, or you can use something like Atom or Notepad++)
  • Get an FTP Client if you plan on accessing theme files for a live side (Note: You don’t need this if you are uploading a child theme via a .zip file)

Here’s how to create the child theme

  1. Create your child theme directory (folder) – You can add the child theme folder to the WordPress theme files directory. Do this with the FTP Client.Do this by accessing your theme files in (wp-content/themes/), add a new folder here, and name it 'divi-child). Alternatively, you can create a .zip file and upload it as a WordPress theme later.
  1. Create your child theme style.css to add to custom CSS – Once you have your new theme folder, use your text editor to make a file named 'style.css). WordPress will prompt you to fill out the following info:
  • Theme name: Divi Child (write these exact words)
  • Theme URI: 
  • Description:
  • Author:
  • Author URI:
  • Template: Divi (make sure this says Divi)
  • Version:
  1. Create Your functions.php – Next, you’re ready to enqueue Divi’s style sheet before you add the child theme stylesheet. To do this, add Divi’s main style.css to the queue by using the text editor to create a file within the child theme folder. Save the file Name as: functions.php (exactly), and add this code into the file:

<?php

function my_theme_enqueue_styles() {

    wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );

}

add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );

Finally, save the file. If you want, you can also create a thumbnail for your file, but that’s completely optional.

How to upload and activate your child Divi theme

Once you’ve followed the steps above, you can upload and activate the theme. You can do this by navigating to 'Appearance,' finding 'Theme,' hovering over your new child theme, and clicking 'Activate.'

How to update the logo on your Divi theme

When Divi launched version 4.0, it made it possible to create your own custom header and add your own logo.

The good news is it’s easy to take advantage of this additional branding opportunity. Here’s how.

When you’re in WordPress, find 'Divi' and then click on 'Theme Options.' From here, you can find 'General Settings' and select 'Divi Theme Options.' Once you’re in the Divi Theme Options section, you’ll see a place where you can upload your logo image.

That’s it!

Start Your Website With HostGator Today!

Divi truly is an excellent WordPress theme and builder. But, to get started with any website, it’s integral to invest in a reliable hosting company. 

HostGator offers affordable, reliable, and secure hosting. Check out our managed WordPress, VPS, and dedicated hosting plans today!