Any questions? Send an email to email@example.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
You can change the content and color of these sections in Divi > Divi Library this will be explained further in the documentation
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 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
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
Then go to Appearance > Theme editor
Around line 118 you will see this
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
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
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.