Installing Kali Child Theme

Before installing this child theme

  • Install the latest version of Divi on a fresh WordPress installation
  • Check if you met all of the hosting requirements settings under Divi > Support Center

Installing this child theme will overwrite the existing website.

You can install Kali with the one-click demo import tool (this will install all the pages and settings in one go). Or you can choose to install it manually (in very rare cases the one-click demo import doesn’t work in that case, you can use the manual method).

One-click demo import

Step 1: download and import Kali divi child theme

  • Download the folder kali-divi-child-theme.zip to your computer.
  • Go to Appearance > Themes and click on Add New. Locate the kali-divi-child-theme.zip file on your computer and then click Install Now. When the installation is complete click on ‘Activate’, you will see the Kali Child Theme as the active theme in your theme panel.

Step 2: import demo content

Navigate to Kali Demo Import and click on Easy demo Import

Then click on the button Import Demo Content.

After the import you can click on Remove Demo Content and Import Functions.

That’s it all the demo content is imported now.

Manual Installation

Use the Manual Installation method in case the one-click demo import does not work for you.

Step 1: download Kali child theme

  • Download the folder supplementary-product-files.zip to your computer.
  • Unpack this folder.

Step 2: install the Kali child theme

In your WordPress dashboard navigate to Appearance > Themes and click on Add New.

Locate the kali-divi-child-theme.zip file in the supplementary-product-files folder on your computer and then click Install Now.

When the installation is complete click on ‘Activate’, you will see the Kali Child Theme as the active theme in your theme panel.

Step 3: upload the JSON files

  • Go to Divi > Theme Options. Click on the import/export options (up/down arrow).
    Click on Import and upload Kali Theme Options.json.
  • Go to Divi > Theme Builder. Click on the import/export options.
    Click on Import and upload Kali Theme Builder Templates.json.
  • Go to Divi > Theme Customizer. Click on the import/export options (up/down arrow).
    Click on Import and upload Kali Customizer Settings.json.
  • Go to Divi > Divi Library. Click on the import/export options.
    Click on Import and upload Kali Builder Layouts.json.

Step 4: add the pages

  • Go to Pages > Add New. Give your page a name for example Home.
  • Click on Use Divi Builder
  • Click on choose a premade layout
  • Go to the tab Your Saved Layouts
  • Here you will find all the pages from the demo. Load the Home page and publish it.
  • To add the other pages as in the demo you do the same steps.

Step 5: add a menu

  • Go to Appearance > Menus and create a menu and add your page(s) to it.
  • Go to Settings > Reading. Check A static page
  • Set Homepage: to your home page
  • Leave the post page unset

How to

Change the header and menu

Go to Divi > Theme Builder and open the Global Header.

  1. Click on load from library
  2. Check Kali header & menu
  3. Click on Your Saved Layouts tab

Then choose your header & menu version

Change the hero section

Open a page in the visual builder where you want to change the hero or sub header.

Click on the blue + symbol to add a new section.

Change to the Add From Library tab.

Choose your hero header version.

Remove or customize the slide-in

Go to Divi > Theme Builder and open the Global Header

Switch to wireframe view (left-bottom).

In the row with Slide-in you can change the content.

If you want to remove the entire slide-in then you can remove that entire row.

Edit content pricing table with toggle

One row is for the content of the month view and one is for the year view.

Note: the year view is only visible in the wireframe view (to access the wireframe view click on the wireframe button left-bottom or from the layer navigation).

Featured post blog page

The featured post is manually created. The idea of this is that it functions as a sticky post.

There is no option for that so I created it as a column with some content and linked it to the post manually.

The list of post on the right side is created with the blog module so those posts will change automatically.

Colors

Global colors

This design uses 3 global colors:

If you change the global color it will change for the entire site.

I will use an example below with different colors but the principle is the same.

For example, I will change the orange color to green.

Open any module, row, or section that has this color.

In the image below I do this with the button module. I go to the icon tab that has the orange global color.

  1. Click on Global
  2. Make sure the dark blue color is selected
  3. Change the color
  4. Click on the cogwheel

Click on Finish Editing Global Colors. 

You should get a warning if you are sure to change this. Clickon Yes.

Dropdown menu line color

Go to Appearance > Theme File Editor.

1) at line 18 you can change the bottom border color (light grey).

2) at line 24 you can change the arrow color.

Collapsing mobile menu icon

Go to Appearance > Theme File Editor.

1) at line 30 you can change the icon color.

2) at line 31 you can change the icon background color.

Line before text

Go to Appearance > Theme File Editor.

1) at line 36 you can change the line color.

Title gradient

Go to Appearance > Theme File Editor.

1) at line 43 you can change the background color.

2) at line 44 you can change the title gradient color.

Team members social bg

Go to Appearance > Theme File Editor.

1) at line 49 you can change the background color

Services V2 blurbs

Go to Appearance > Theme File Editor.

1) at line 59 you can change the background gradientr color.

Slide-in scroll bar

Go to Appearance > Theme File Editor.

Blog grid button

Go to Appearance > Theme File Editor.

1) at line 87 you can change the button background color.

2) at line 88 you can change the button text color.

Project list marker color

Go to Appearance > Theme File Editor.

1) at line 93 you can change the marker color.

Need Help?

Email: info@markhendriksen.com

Free Layout Packs

Join my free membership and get access to 17 free Divi layout packs.

Join Free Membership