You can add the HVAC layout to your Divi site using one of the following methods:
- Method 1: Using the DiviFlash layout importer (recommended).
- Method 2: Manually import the layout.
This guide will walk you through both methods step by step.
Method 1: Using the DiviFlash Layout Importer
Step 1: Install and activate the Divi theme.
Step 2: Install and activate the DiviFlash plugin.
Step 3: Go to WordPress Dashboard > DiviFlash > Layouts, and search for “HVAC”.
Step 4: Hover your mouse over the “HVAC” layout and click on “Import Layout”.
- A popup will appear, displaying layout settings and server requirements. If you see any red crosses, resolve them before clicking “Start Importing.”
- The import process may take a few minutes.
- Once the import is complete, click on “Menu Customize” to edit and customize the menu as needed. For better understanding, follow the Divi Layout Menu Customization doc.
Step 5: Set your homepage and blog page.
- Go to WordPress Dashboard > Settings > Reading.
- Below “Your homepage displays,” select “A static page.”
- Choose “Home” from the homepage dropdown menu.
- Choose “Blog” from the post page dropdown menu.
- Click on “Save Changes” to save it.
The HVAC layout has been successfully imported and is now live on your website.
Method 2: Manually Import the Layout
You can import the layout manually as well. Here’s how to do it:
Step 1: Install and activate the Divi theme.
Step 2: Install and activate the DiviFlash plugin.
Step 3: Download the HVAC layout from the DiviFlash website and unzip it.
Step 4: Import the “DiviFlash Dashboard” file into the DiviFlash Dashboard panel:
- Go to WordPress Dashboard > Settings > Import/Export.
- Click on the “Choose File” and select “DiviFlash Dashboard – HVAC Layout – DiviFlash.json”.
- Click on the “Import settings” button.
Step 5: Import the “Divi Theme Options” setting file into the Divi Theme options panel:
- Go to WordPress Dashboard > Divi > Theme Options.
- Click on the “Import & Export” icon on the right side of the screen.
- Select the Import tab and click “Choose Files” to upload the JSON file named “Divi Theme Options – HVAC Layout – DiviFlash.json”.
- Click “Import Divi Theme Options” and then click “Save Changes.”
Step 6: Import the “Divi Theme Builder Settings” file into the Divi Theme Builder panel:
- Go to WordPress Dashboard > Divi > Theme Builder.
- Click on the “Import & Export” icon on the right side of the screen.
- Select the Import tab and click “Choose Files” to upload the JSON file named “Divi Theme Builder Settings – HVAC Layout – DiviFlash.json”.
- Click on the “Import Divi Theme Builder Templates” and then “Save changes”.
Step 7: Import the “Divi Theme Customizer Settings” file into the Theme Customizer panel:
- Go to WordPress Dashboard > Divi > Theme Customizer.
- Click on the “Import & Export” icon on the left side.
- Select the Import tab and click “Choose Files” to upload the JSON file named “Divi Theme Customizer Settings – HVAC Layout – DiviFlash.json”.
- Click on the “Import Divi Customizer Settings”.
Step 8: Import the “Divi Library” file into the Divi Library panel:
- Go to WordPress Dashboard > Divi > Divi Library.
- Click on the “Import & Export” tab.
- Select the Import tab and click “Choose Files” to upload the JSON file named “All In One – HVAC Layout – DiviFlash.json”. (You can also import individual layout pages one by one by using their respective JSON files.)
- Click on the “Import Divi Builder Layouts”.
Your next step is to create new pages (Home, Blog, Service, and Service Details) using the layouts saved in your Divi Library. (Follow our doc How to Create Pages with Divi layouts from Library for better understanding.)
Step 9: Import the Media file for the HVAC layout
- Go to WordPress Dashboard > Tools > Import.
- Click on the “Run importer” under the “WordPress” (If you see “Install Now” instead of “Run Importer”, click install.). “Run Importer” will appear then.
- Click on the “Choose File” and select the XML file named “Media – HVAC Layout – DiviFlash.xml”, then click on the “Upload file and import”.
- Assign an author (or skip this step if not needed). Next, check the “Download and Import File Attachments” and click “submit”.
Follow the same steps to import the XML file for “Posts” as well.
Step 10: Link service details on “Book Now” Button
The HVAC layout displays services in multiple locations, such as the homepage and the service page. You need to manually link each “Book Now” button to its corresponding service details page.
Here is how to do it:
- Go to wordpress dashboard > Pages. Then hover over the “Home” page and click on “Edit with Divi.”
- Scroll down to find the “Our HVAC services” section. Hover over the Book Now button and click the Module Settings icon.
- Next you will see the Advanced Blurb Module will appear on the right side panel. Scroll down to the “Button” section and click on “Button URL” and select “Page Link.”
- Click under the “Page”.
- Then select the “Service Details Page” and click on “Apply” to save it.
- Before exiting the Visual Builder, click the “Save” button in the top-right corner of the page.
Note: Create your own service pages for all services, then link each page to its corresponding “Book Now” button.
Step 11: Set your homepage and blog page.
- Go to WordPress Dashboard > Settings > Reading.
- Below “Your homepage displays,” select “A static page.”
- Choose “Home” from the homepage dropdown menu.
- Choose “Blog” from the post page dropdown menu.
- Click on “Save Changes” to save it.
Step 12: Create the menu for the imported layout. For a better understanding, follow the Divi Layout Menu Customization doc
Now your website should look exactly the same as the HVAC layout!
Any Questions?
If you have any questions, please feel free to contact our support team at [email protected]
