Select Page

DiviHvac Documentation

Support

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

Read this before you start

Some of the sections that are created will not be visible in the visual builder. These sections are:

  • Cutom Top Header
  • Menu
  • Footer
  • Triangles

You can change the content and color of these sections in Divi > Divi Library this will be explained further in the documentation

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 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.

Custom Top Header

The top header is a custom section and disabled in the visual builder.

For a better mobile experience, I have created 2 top headers. 1 is visible for desktop and the other for tablet and mobile.

Custom Header Desktop
To edit the desktop header bar go to Divi > Divi library and open the Custom Header Desktop. You can make your edits here.

Custom Header Tablet And Mobile
To edit the header for tablet and mobile go to Divi > Divi library and open the Custom Header Tablet/Mobile. You can make your edits here.

Create a Fixed top header

Go to Divi > Theme Options and enable Fixed Navigation Bar

Then go to Appearance > Theme editor

Around line 118 you will see this

Remove the /* and */ the code will now be active.
Depending on the height of your header, you might need to adjust the top margin value.

Edit slide-in

To edit the slide-in go to Divi > Divi library and open the Slide-in.

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

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.

Custom category header

To edit the content of the category header, you go to Divi > Divi Library.

Then you open the Category header. You can make your edits here.

Custom archive header

To edit the content of the archive header, you go to Divi > Divi Library.

Then you open the Archive header. You can make your edits here.

Custom search results header

To edit the content of the search results header, you go to Divi > Divi Library.

Then you open the Search results header. You can make your edits here.