Installing DiviSEO 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 Divi Engineering 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 DiviSEO child theme

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

Step 2: import demo content

Navigate to DiviSEO 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 DiviSEO child theme

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

Step 2: install the DiviSEO child theme

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

Locate the diviseo.zip file in the supplementary-product-files folder on your computer and then click Install Now.

When the install is complete click on ‘Activate’, you will then see the DiviSEO 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 DiviSEO Theme Options.json.
  • Go to Divi > Theme Builder. Click on the import/export options.
    Click on Import and upload DiviSEO Theme Builder Templates.json.
  • Go to Divi > Theme Customizer. Click on the import/export options (up/down arrow).
    Click on Import and upload DiviSEO Customizer Settings.json.
  • Go to Divi > Divi Library. Click on the import/export options.
    Click on Import and upload DiviSEO 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

Colors

Global colors

This design uses 3 global colors:

  • Dark blue #2a11a5
  • Green #a4c53a

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.

Go to Appearance > Theme File Editor.

1) at line 19 you can change the bottom border color.

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

Collapsing mobile menu icon

Go to Appearance > Theme File Editor.

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

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

Background image color

Go to Appearance > Theme File Editor.

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

Project overlay color

Go to Appearance > Theme File Editor.

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

2) at line 47 you can change the background color.

Blog

Go to Appearance > Theme File Editor.

1) at line 53 you can change the meta background color

1) at line 57 you can change the meta text color.

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

2) At line 62 you can change the button background color.

Job list marker

Go to Appearance > Theme File Editor.

1) at line 67 you can change the list marker color.

Contact check mark

Go to Appearance > Theme File Editor.

1) at line 72 you can change the check mark color.

Badge menu number

Go to Appearance > Theme File Editor.

1) at line 77 you can change the badge background color.

2) at line 78 you can change the badge text 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