Installing Renovate Pro 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 Renovate Pro 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 Renovate Pro divi child theme

  • Download the folder renovatepro-divi-child-theme.zip to your computer.
  • Go to Appearance > Themes and click on Add New. Locate the renovatepro-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 Renovate Pro Child Theme as the active theme in your theme panel.

Step 2: import demo content

Navigate to Renovate Pro 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 the supplementary files

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

Step 2: Install the Renovate Pro child theme

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

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

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

Note: Each of the JSON files need to be uploaded in a different location.

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

Header & menu explained

I will explain hearer V1, the other ones work the same.

When you go to Divi > Theme Builder > Global Header you will see this.

You will notice 2 logos, one is for desktop and one for mobile/tablet.

To change the logo for mobile/tablet, open the menu module and go to the logo tab.

Change the logo in the desktop tab.  (My child theme code will hide it for desktop).

But you have to change it from the desktop tab and not the tablet or mobile or the logo won’t be visible.

Change the content of the slide-in

Switch to wireframe view by clicking on the wireframe icon (left-bottom).

You will find a section named “Slide-in dropdown”. 

You can change the contents here.

Change the header and menu

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

Click on load from library

Click on Your Saved Layouts tab

Then choose your header & menu version

Link thank you page to contact form

Open the contact module and scroll down to the redirect tab.

Enable Redirect and place your Thank you page URL in here.

Remove or customize the slide-in

Go to Divi > Theme Builder and open the Global Header

Switch to wireframe view (left-bottom).

You can customize or remove the slide-in dropdown section.

Colors

Global colors

This design uses 4 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 19 you can change the bottom border color (light grey).

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

The dropdown top border color can be changed from the menu module.

Collapsing mobile menu icon

Go to Appearance > Theme File Editor.

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

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

Inset border color

This design comes with several inset borders either yellow or red.

All of them can be changed in the same place.

Yellow inset border

Red inset border

Go to Appearance > Theme File Editor.

1) at line 51 you can change the yellow border color.

2) at line 57 you can change the red border color.

Yellow button with arrow

Go to Appearance > Theme File Editor.

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

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

Discount ribbon color

Go to Appearance > Theme File Editor.

1) at line 71 you can change the text color

2) at line 72 you can change the fall back color

3) at line 73 you can change gradient background color

4) at line 77, 78, 82, and 83 you can change the border color

Read more text prroject section home page

Go to Appearance > Theme File Editor.

1) at line 89 you can change the Read More text

2) at line 90 you can change the background color

3) at line 91 you can change the text color

Home page bg title

Go to Appearance > Theme File Editor.

at line 98 you can change the background 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