Divi 4.0+ fixes
Any questions? Send an email to firstname.lastname@example.org
The images are replaced due to licensing. You can get the images here:
Installing DiviHvac Child Theme
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.
Download and unzip the ‘DiviHvac_Child_Theme_UNPACKME.zip’ file to your computer.
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.
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.
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.
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
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
To change all the colors of the triangles at once see the change colors section of this documentation.
Most colors you can change in the modules and customizer.
The colors that can’t be modified from the modules are:
- 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.
At line 19 you can change the text color
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
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
At line 60 you can change the icon color
At line 66 you can change the background color
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
At line 88 you can change the background color
At line 94 you can change the background color
At line 95 you can change the text color
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