Select Page

DiviHvac Documentation

Divi 4.0+ fixes

Support

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

Images

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

https://www.shutterstock.7eer.net/5GVXn

Installing DiviHvac Child Theme

Requirements

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

Important: Only install the Divi theme, not the Divi builder (the Divi theme includes the Divi builder if you install both then this can cause conflicts).

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.

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 ‘DiviHvac_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 div-hvac-child-theme.zip file in the DiviHvac_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 DiviHvac Child Theme as the active theme in your theme panel.

Step 3

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

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

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

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

Step 4

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

Click on Use Divi Builder

Click on choose a premade layout

Go to the tab Your Saved Layouts

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

To add the other pages as in the demo you do the same steps as above. 

 

Step 5

Go to Appearance > Menus and create a menu and add your page(s) to it.

Go to Settings > Reading. Check A static page
Set Homepage: to your home page
Leave the post page unset

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.

Customize the header and slide-in

I have created 2 custom headers, one for desktop and one for mobile/tablet.

Here you can also change the slide-in.

The Divi Builder doesn’t render these sections very wel but they will look good on the front end.

If you have trouble changing the content then switch over to wireframe mode. 

H2 and H3 font-size

To change the font-size of the h2 and h3 go to Appearance > Theme editor and at line 18 and 23 you can change them

Edit triangles

The triangles are disabled in the visual builder. To edit them you can enable wire mode to see them.

To change all the colors of the triangles at once see the change colors section of this documentation.

Changing colors

Most colors you can change in the modules and customizer.

The colors that can’t be modified from the modules are:

  • H2
  • H3
  • CTA in menu
  • Menu dropdown line
  • Mobile menu
  • Mobile hamburger
  • Triangle left
  • Triangle right
  • Blog background
  • Blog button
  • Project overlay
  • Sidebar widgets

To change these colors go to appearance > editor.

H2
At line 19 you can change the text color

H3
At line 23 you can change the text color

CTA in menu
At line 30 you can change the background color
At line 31 you can change the text color

Menu dropdown line
At line 37 you can change the line color

Mobile menu
At line 44 you can change the background color
At line 48 you can change the top border color
At line 52 you can change the text color

Hamburger icon
At line 60 you can change the icon color

Triangle left
At line 66 you can change the background color

Triangle right
At line 72 you can change the background color

Triangle left map bottom
At line 78 you can change the background color

Triangle right map bottom
At line 82 you can change the background color

Blog background
At line 88 you can change the background color

Blog button
At line 94 you can change the background color
At line 95 you can change the text color

Project overlay
At line 101 you can change the overlay color

Side bar widgets

At line 107 you can change the title background color
At line 108 you can change the title color
At line 113 you can change the widget background color

 

Creating a blog post

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

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

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