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

  • Download the folder divi-engineering.zip to your computer.
  • Go to Appearance > Themes and click on Add New.

    Locate the divi-engineering.zip file on your computer and then click Install Now.

    When the install is complete click on ‘Activate’, you will then see the Divi Engineering Child Theme as the active theme in your theme panel.

Step 2: import demo content

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

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

Step 2: install the Divi Engineering child theme

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

Locate the divi-engineering.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 Divi Engineering 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 Divi Engineering Theme Options.json.
  • Go to Divi > Theme Builder. Click on the import/export options.
    Click on Import and upload Divi Engineering Theme Builder Templates.json.
  • Go to Divi > Theme Customizer. Click on the import/export options (up/down arrow).
    Click on Import and upload Divi Engineering Customizer Settings.json.
  • Go to Divi > Divi Library. Click on the import/export options.
    Click on Import and upload Divi Engineering 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

Customizations

Add video or image to hero header

Open the header section and scroll to Background.

If you want an image for the hero header then switch to the image tab (1). For video switch to the video tab (2)

Icon slider

Under the header on the home page you will find the icon slider.

To change the content of each slider switch to wireframe view (left-bottom)

As you can see in the image below the first icon correspondence to the content of the slide-in text 1 and slide-in image 1

The second icon with slide-in text 2 and slide-in image 2

etc.

Slide-in

Go to Divi > Theme Builder > Global Footer

Switch to wireframe view.

Under the footer, you will find the slide-in.

Colors

Global colors

This design uses 3 global colors:

  • Orange #ff5e14
  • Dark orange (hover buttons) #c65108
  • Blue #001954

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

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 button background tab that has the orange global color.

  1. Click on Global
  2. Make sure the orange color is selected
  3. Change the color
  4. Click on the coghwheel

Click on Finish Editing Global Colors. 

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

Most orange colors are now changed to my green ones. Some places still have the orange color and I will describe how to change those further.

Vertical line with dot

Go to Appearance > Theme File Editor.

1) at line 23 you can change the dot color

Icon color icon slider

Go to Appearance > Theme File Editor.

1) at line 48 you can change the icon background color.

2) at line 49 you can change the icon border color.

3) at line 50 you can change the icon color.

4) at line 55 you can change the icon hover color.

Services card overlay

Go to Appearance > Theme File Editor.

Go to Appearance > Theme File Editor

1) at line 60 you can change the triangle color

2) at line 64 you can change the overlay background color

3) at line 68 you can change the Read more text

4) at line 69 you can change the read more text color

Person module

Go to Appearance > Theme File Editor.

Go to Appearance > Theme File Editor

1) at line 74 you can change the social link background color.

2) at line 78 you can change the read more text

3) at line 79 you can change the overlay background color.

4) at line 80 you can change the read more text color.

Blog and widgets

Go to Appearance > Theme File Editor.

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

2) at line 89 you can change the widget bottom border color.

3) at line 90 you can change the widget background color.

4) At line 94 you can change the list icon color.

Slide-in scroll bar

Go to Appearance > Theme File Editor.

Go to Appearance > Theme File Editor

1) at line 117 you can change the scroll bar color.

2) at line 121 you can change the scroll bar handle color.

Collapsing mobile menu icon

Go to Appearance > Theme File Editor.

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

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

Go to Appearance > Theme File Editor.

Header V1

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

Header V2, V3, and V4

2) at line 34 you can change the line color.

Header V2 vertical line

Go to Appearance > Theme File Editor.

1) at line 99 you can change the vertical line color.

Header V4 current and hover

Go to Appearance > Theme File Editor.

1) at line 105 you can change the current and hover the background color.

2) at line 110 you can change the current and hover the text color.

Colors WooCommerce

Go to Appearance > Theme File Editor

1) at line 90 you can change the text color. At line 91 you can change the background color.

2) at line 96 you can change the text color. At line 97 you can change the background color.

Cart menu text color

Go to Appearance > Theme File Editor

1) at line 130 you can change the text color.

Shop hover title image “See Details”

Go to Appearance > Theme File Editor

1) at line 136 you can change the text “See Details”. And at line 137 you can change thee background color.

Go to Appearance > Theme File Editor

1) at line 142 you can change the border color. And at line 143 you can change the text color.

2) at line 148 you can change the background color and at line 149 the text color.

Sale badge

Go to Appearance > Theme File Editor

1) at line 200 you can change the background color. And at line 201 you can change the text color.

My account button

Go to Appearance > Theme File Editor

1) at line 206 you can change the background color. And at line 207 you can change the text color.

Need Help?

Email: info@markhendriksen.com