Documentation: How to install Divi Child Themes

Here is the video tutorial which you can easily follow. Continue reading if you prefer to read than watch. 🙂

How to install your child theme

* Important:

* You should have update WordPress to the latest version

* You should have installed the Divi theme from and updated it to the latest version.

Step One: Upload the Child Theme

Unzip the files package you just downloaded from Divi* Go to the Dashboard > Appearance > Themes > Add New > Upload New and upload the file which you can find inside the downloaded files package.

Upload it and activate the child theme.(As I mentioned before you have already installed the latest Divi theme to activate the child theme)

Step Two: Install necessary plugins

Once you installed the child theme, you will see a message saying to install some plugins. Just go ahead and click install. They will be automatically downloaded and installed. We need those to work the child theme as you can see on the demo setup. This depends on the child theme you purchased.

Step Two: Import the Demo Content

To import the demo content, go to Tools > Import. You will see the WordPress Importer at the bottom. Install it and run the installer.

Go to the files folder > Demo Data and select the ‘theme_name-content.xml‘ file from the downloaded folder and upload it.

Assing the user and select ‘Download and import file attachments‘. This will import all the content you can see on the child theme demo installation.

Step Three: Import WP Customizer Settings

Let’s import customizer settings. Now go to Appearance > Customizer and click on the Customizer Settings Import/Export button on the top.

Upload your ‘theme_name-customizer-settings.json‘ file here and click the Import Divi Customizer Settings button at the bottom.

Step Four: Import Theme Builder Layouts

Go to Divi > Theme Builder and click on the Portability button on the top right corner.

Upload the file called ‘theme_name-theme-builder.json’ inside the ‘Demo data’ folder.

Heights 3.0 (for Heights theme)

In this child theme, I have used an inverted version of the logo in the fixed header. This is great if you have a monochrome or white logo set as the site logo. But if you want to remove this functionality, please go to the Dashboard > Appearance > Theme Editor and select the style.css file to edit.

Then remove the below CSS snippet and update it.

.et-fixed-header #logo {
	-webkit-filter: invert(100%);
	filter: invert(100%);

That’s it. Contact me anytime you need help installing your child theme.