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.
Download and unzip the ‘Contractor_Child_Theme_UNPACKME.zip’ file to your computer.
In your WordPress dashboard navigate to Appearance > Themes and click on Add New.
Locate the contractor-div-child-theme.zip 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.
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.
Now you need to activate all the plugins.
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.
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.
Change header colors
To edit the top header go to Divi > Theme Builder and open the Global Header. You can make your edits here.
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.
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.
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
Creating a blog post
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
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.