Divi Home Services Documentation

Support

Any questions? Send an email to info@markhendriksen.com

Images

The images are replace due to licensing. You can get the images here:

Installing Divi Home Services Child Theme

Requirements

When building the website I recommend not to use any caching plugins. When finished building the website you can install them.

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

Install Divi Home Services on a fresh WordPress installation. Installing this child theme will overwrite the existing website.

Step 1: install Divi and Divi Home Services

Install the Divi theme on a new WordPress installation.

After installing Divi, navigate to Appearance > Themes and click on Add New.

Locate the divi-home-services-import-pro.zip file on your computer and then click Install Now.

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

Step 2: import demo content

Navigate to Home Services Demo Import and click on Import Easy demo Import

Then click on the button Import Demo Content.

Your website is ready to use. 

Customize the header and logo

You need to replace the logo in 2 places, one for desktop and one for mobile view.

The reason for this is for the better mobile experience and outlining.

Go to Divi > Theme Builder and open the global header.

Change the desktop and mobile logo

For the desktop logo, you can open the image module and change the logo.

For the mobile logo, you can open the menu module and scroll to Logo. Switch to tablet view and change the logo.

Customize the footer and Slide-in

Go to Divi > Theme Builder > Global Footer

You will see quite some sections here. I use those on each page so I placed them in the footer.

This way if you want to make a change you do not need to do that on each page.

Customize the slide-in

Switch to wireframe view (left bottom)

Scroll to the bottom and you will find the slide-in

Add an arrow to the dropdown menu items

Go to Appearance > Menus

Add this before your menu item: 

<i class="fas fa-angle-right"></i>

Enable/disable fixed header

Go to Divi > Theme Builder and open the global header.

Open the section and go to the advanced tab.
Under scroll effects you can choose to stick or not to stick.

Change colors

Most colors can be changed in the sections, rows and modules. Some colors need to be changed through swapping out color codes in the stylesheet. This is easy to do and in this section I will describe how to do this.

Icon collapsing mobile menu

Go to Appearance > Theme Editor

Around line 20 you can change the icon and icon background color:

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after {
	color: #961a1d; /* Icon color */
	background: #f1f1f1; /* Icon background color */
}

Discount ribbon

Go to Appearance > Theme Editor

From lines 35 to 50 you can change all of the color codes #f1bc1e (this is yellow) to yours.

This one #002e62 is the text color.

/* #### DISCOUNT RIBBON #### */

.ribbon span {
  color: #002e62;
  background: #f1bc1e;
  background: linear-gradient(#f1bc1e 0%, #ef9b2d 100%);
}

.ribbon span::before {
  border-left: 3px solid #f1bc1e;
  border-top: 3px solid #f1bc1e;
}

.ribbon span::after {
  border-right: 3px solid #f1bc1e;
  border-top: 3px solid #f1bc1e;
}

Edit the post template

Go to Divi > Theme Builder

Here you will find the Post template.

To edit the post template open the custom body and make your edits.

If you are new to the Theme Builder you can find the documentation here:
https://www.elegantthemes.com/documentation/divi/the-divi-theme-builder/