Contractor Documentation


Any questions? Send an email to

Installing Contractor Child Theme


Before we begin, make sure you have Divi installed on WordPress before installing this child theme. We recommend doing this on a fresh WordPress installation.

The Divi theme is not included in this package. To download Divi, you must have an Elegant Themes Membership.

Some images have been replaced due to licensing.

The page links from buttons and logo are removed, so you need to relink those to the right pages.

Step 1

Download and unzip the ‘’ file to your computer.

Step 2

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

Locate the file in the Contractor_Child_Theme_UNPACKME folder on your computer and then click Install Now.

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

Step 3

After activating Contractor, you will see at the top:

This theme recommends the following plugins: Widget CSS Classes and Widget Importer & Exporter.

Begin installing these plugins by clicking on Begin installing plugins.

On the next screen, you need to check all the plugins and choose to install in the dropdown. Hit apply, and the progress will begin.
When the progress has finished click on “Return to Required Plugins Installer.”

Now you need to activate all the plugins.

Step 4

Go to Divi > Theme Options. Click on the import/export options (up/down arrow).
Click on Import and upload Contractor Theme Options.json.

Go to Divi > Theme Builder. Click on the import/export options.
Click on Import and upload Contractor Theme Builder Templates.json.

Go to Divi > Theme Customisation. Click on the import/export options (up/down arrow).
Click on Import and upload Contractor Customizer Settings.json.

Go to Divi > Divi Library. Click on the import/export options.
Click on Import and upload Contractor Builder Layouts.json.

Go to Appearance > Widgets. If there are widgets in the Sidebar, then remove them all. Create a new Sidebar. You can give it any name that you want.

Go to Tools > Widget Importer & Exporter.
Choose the file Contractor-widgets.wie. Click on Import Widgets.

Step 5

Go to Pages > Add New. Give your page a name for example Home.

In the Divi Builder Click on Load Layout then click on Your Saved Layouts.

Here you will find all the pages from the demo. Load the Home page Contractor and publish it.

Don’t forget to add a menu and set the Home page as static.

Some images I used on the demo website are paid versions, so I have those replaced with free ones.

Add the CTA button in the navigation

Go to Appearance > Menus and add the CSS class cta_menu to the menu item that you want to appear as a button.

Note: in case you don’t see the class field then go to the right top corner and expand screen options. Then check CSS classes.

Sidebar menu (Services)

Follow the steps below to create the services menu for your services pages

Go to Appearance > Menus and create a new menu. Under Menu Settings don’t check anything. In this menu you need to add the pages you want to show up in the sidebar.


Note: If you imported the widgets with the widget import function as described in step 4 of installing contractor child theme then you don’t have to do the steps below. You still need to assign the menu in the Navigation widget.

Go to Appearance > Widgets add a new sidebar (You need to refresh the page in order to see the new sidebar)

Add the Navigation widget to this sidebar and assign the services menu to it

When you create a page with the Service Page Contractor layout you can add this sidebar to it.

Change header colors

Top header
To edit the top header go to Divi > Theme Builder and open the Global Header. You can make your edits here.

Main header
To change the background color of the main header navigate to appearance > editor 

Click on top-header-bg.svg on the right side.

Here you will find 2 color codes.

.st0 is the blue background behind the logo
.st1 is the green line

Change these color codes and hit update file.

The white background color (behind the menu) you can change in Divi > Theme customizer > Header & Navigation > Primary Menu Bar > Background color

Call to Action button in the navigation
The colors of the Call to action button (Request a service) you can change in appearance > editor (switch back to style.css on the right side). At line 29 you can change the color code.

Customize slide-in

You can change the slide-in in Divi > Theme Builder > Global Footer

To edit the slide-in you need to switch over to wireframe mode

On the image below you can see how the various modules are linked.

Use these dimensions to replace the image on place 1
67×67 pixels

Creating a blog post

To create a blog post with the same layout as Contractor you do the following:

Go to Posts > Add New
Go to Load From Library > Add From Library and choose Single post.

In the right upper right corner, you find the Divi Post Settings. Make the following adjustments:

Page Layout: Full Width
Post Title: Hide

Post settings

Place in the excerpt box the text that you want to show on the blog page or blog grid page.

You find this box under the Divi page builder in the post page.

Excerpt box