Contractor Documentation
Getting Started
Blog
Custom pages
Support
Any questions? Send an email to info@markhendriksen.com
Read this before you start
Some of the sections that are created will not work in the visual builder. These sections are:
- The top header
- The fixed CTA on the right side
- Footer
You can change the content and color of these sections in Divi > Divi Library this will be explained in this documentation
Installing Contractor Child Theme
Requirements
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 ‘Contractor_Child_Theme_UNPACKME.zip’ file to your computer.
Step 2
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.
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 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
The top header is a custom section and disabled in the visual builder.
To edit the top header go to Divi > Divi library and open the Top 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.
Change colors and content of the Fixed CTA (right side)
Go to Divi > Divi Library and open Call To Action Fixed.
On the image below you can see how the various modules are linked.
Use these dimensions to replace the image on place 1
67x67 pixels
Create a dropdown menu with an image
To create the same dropdown menu with an image as in the demo (under Services) you need to add some classes to the menu items.
The first class is mega-menu this needs to be added to the parent menu (level 1) item (see image). In my case this is called Services
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.
The second class is mega_menu_first and need to be added to the first child (level 2). In my case this one is also called services. Menu items that fall under this don’t need a CSS class.
The class for the image is mega_menu_image. You need to add a custom link and upload an image to your media library and copy the image link. Then use this code and replace the image link with yours and place it on the navigation label (see image). The correct size of your image depends on the number of dropdown menu items you will be using. The image I used in the demo has a size of 140x160 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
Important
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.
404 Page
To edit the content of the 404 page, you go to Divi > Divi Library.
Then you open the 404 page. You can make your edits here.