Select Page

Looking For Something Specific...

View Categories

How to Use Roofing Layout?

You can add the Roofing Layout to your site using one of the following import methods:

We will provide a step by step guide on how to use this layout with either method.

Method 1: Using DiviFlash Layout Importer

Step 1: Install and activate the Divi theme. 

Step 2: Install and activate the DiviFlash plugin. 

Step 3: Navigate to WordPress Dashboard > DiviFlash > Layouts and search for “Roofing”

Step 4: Hover over the Roofing layout and click on Import Layout button 

  • A popup will display the layout settings and server requirements. Make sure all checkmarks are green; if you see red crosses, fix your server settings and then click “Start Importing.”
  • The import process may take a few minutes to complete. 
  • After completing the import, click “Menu Customize” to customize the menu for your imported layout. Follow Divi Layout Menu Customization guide.

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 Roofing layout has been successfully imported and is now live on your website.

Method 2: Manually Import the Layout

Even though the layout importer is the easiest way to go, you can manually import the Roofing layout as well.

Follow these steps:

Step 1: Install and activate the Divi theme. 

Step 2: Install and activate the DiviFlash plugin. 

Step 3: Download the Roofing Layout file from the DiviFlash website and unzip it.

Step 4: Ensure that the following DiviFlash modules are activated, as they are essential for the layout to function smoothly:

  • Advanced Heading
  • Advanced List
  • Advanced Person
  • Advanced Blurb
  • Advanced Tabs
  • CPT Grid
  • CPT Carousel
  • Dual Button
  • Before After Slider
  • Contact Form 7 Styler
  • Logo Carousel
  • Post Grid
  • Star Rating
  • Testimonial Carousel

Step 5: Install and activate the Contact Form 7 plugin.

Step 6: After installing the plugin, import the “Contact Form 7” xml file 

  • Navigate to WordPress Dashboard > Tools > Import
  • Click on Run Importer under the WordPress  (If you see, “Install Now” instead of “Run Importer,” click on install Now. Then you will get the “Run Importer” option.)
  • Click on “Choose File” and import the “Contact Form 7 – Roofing Layout – DiviFlash.xml” file and click “Upload file and import”.
  • Assign the author (or skip this step), then check the “Import Attachment” option and click “Submit” to save your changes.

Note: By following the same steps (WordPress Dashboard > Tools > Import > Run Importer under the WordPress), you have to import Media and Project .xml files.

Step 7: Import the “Divi Theme Options” file into the Divi Theme Options panel:

  • Navigate to WordPress Dashboard > Divi > Theme Options
  • Click on the “Import & Export” icon in the right side corner
  • Select the Import tab and click “Choose Files” to upload the JSON file named “Divi Theme Options Settings – Roofing Layout – DiviFlash.json”
  • Finally, click on “Import Divi Theme Options”

Step 8: Import the “Theme Builder” file into the Divi Theme Builder panel:

  • Navigate to your WordPress dashboard and go to Divi > Theme Builder
  • Click on the “Import & Export” icon in the right side corner
  • Select the Import tab and click “Choose Files” to upload the JSON file named “Divi Theme Builder Settings – Roofing Layout – DiviFlash.json”
  • Finally, click on “Import Divi Theme Builder Templates”.

Step 9:  Import the Roofing layout pages into the Divi Library

  • Navigate to your WordPress dashboard and go to Divi > Divi Library
  • Click on the “Import & Export” button on the upper left
  • Select the Import tab and click “Choose Files” to upload the JSON file named “All In One page – Roofing Layout – DiviFlash.json” (You can also import layout pages individually, one at a time, by using their designated JSON files.)
  • Click on the “Import Divi Builder Layouts” button.

Now, proceed to create new pages corresponding to the items you imported into the Divi Library. Follow this guide on how to create pages using Divi Layouts from the Library.

Step 10: Import the “Theme Customizer Settings” file into the Theme Customizer

  • Navigate to WordPress Dashboard > Divi > Theme Customizer
  • Click on the “Import & Export” icon on the top left corner.
  • Select the Import tab and click “Choose Files” to upload the JSON file named “Divi Theme Customizer Settings – Roofing Layout – DiviFlash.json”
  • Finally, click on “Import Divi Customizer Settings”.

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 a menu for the layout you imported. You can follow the Divi Layout Menu Customization guide.

Now your website should look exactly the same as the Roofing layout! 

Any Questions?

If you have any questions, please feel free to contact our support team at [email protected]

Help us improve! Let us know if this article was helpful.

Introducing DiviFlash 5.0 — Fully Rebuilt for Divi 5 & Backward Compatible with Divi 4

Learn More →