Contractor Documentation
Getting Started
Blog
Support
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.
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.
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
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)
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.
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.
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
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.
