The Construction Layout for Divi is a layout created by team Diviflash. In this article, we will provide you with a comprehensive guide on how to use this layout. Let’s begin:
Step 1: Download the layout’s zip file and unzip it.
Step 2: Install and activate the Divi Theme.
Step 3: Install and activate the DiviFlash Plugin.
Step 4: Before proceeding please make sure you have the following DiviFlash modules active. Require modules for this Layout:
- Advanced List
- Post Grid
- Filterable CPT
- Advanced Blurb
- Content Toggle
- Advanced Person
- Timeline
- Advanced Carousel
- Testimonial Carousel
- Post Carousel
- Advanced menu
Note: These modules must have been activated before importing the layout.
To enable DiviFlash’s modules, please follow these steps:
- Navigate to DiviFlash in your WordPress dashboard.
- Select ‘Modules’ from the menu.
- Enable DiviFlash’s modules by clicking on the corresponding option.
Step 5: Once all modules are activated, proceed to import the Divi theme options settings. Follow these steps to import the theme option’s JSON file successfully:
- Go to Divi => Theme Options.
- Click on the “Import & Export” icon.
- Select the “Import” tab.
- Choose the JSON file named ‘Divi Theme Options – Construction Layout – DiviFlash’.
- Finally, click on ‘Import Divi Theme Options’.
Step 6: Now import the Theme Builder settings. To import the Theme Builder Settings, navigate to the following steps:
- Go to Divi => Theme Builder.
- Click on the “Import & Export” icon.
- Select the “Import” tab.
- Choose the JSON file named ‘DiviTheme Builder Templates-ConstructionLayout-DiviFlash’.
- Click on ‘Import Divi Builder Templates’.
Step 7: Another setting you need to import is Theme Customizer Settings. To import the Divi Theme Customizer settings follow the following steps:
- Navigate to Divi => Theme Customizer.
- Click on the “Import & Export” icon.
- Select the “Import” tab.
- Choose the JSON file named ‘Divi Customizer Settings – Construction Layout – DiviFlash’.
- Finally, click on ‘Import Divi Customizer Settings’.
Step 8: Next, we will need to import the ‘Media – Construction Layout – DiviFlash’ JSON file into WordPress. Follow these steps:
- Go to Tools => Import.
- Click on “Install Now (WordPress)” and then select “Run Importer”.
- Choose the “Media – Construction Layout – DiviFlash” .xml file for import.
- Select “Current User” as the assignee.
- Check the box that says “Download and import file attachments”.
- Finally, click the “Submit” button.
Step 9: Now we will import the “Project – Construction Layout – DiviFlash” file by following the same procedure as above.
Step 10: In this stage, we will proceed to import all the page layouts to the Divi library. You will find individual page JSON files to import. Now import all the page JSON files one by one to the Divi library.
To import this file into the Divi library, please follow the steps below:
- Navigate to Divi => Divi Library.
- Locate and click on the “Import & Export” button.
- Within the options that appear, select the “Import” tab.
- Choose the All in one- Construction Layout’s JSON file.
- Click on the “Import Divi Builder Layouts” button.
For further guidance, you can follow this: How to import Divi Layout Pages.
Step 11: Page Creation: How to create pages with Divi Layouts From Library.
Step 12: Now we import the “DF-Popup – Construction Layout – DiviFlash” file. To import this popup file proceed to the following steps:
- Navigate to DF Popups.
- Import & Export
- Choose the “DF-Popup – Construction Layout – DiviFlash” file.
- Click the “Import” button.
Step 13: After importing the DF-Popup layout, we need to publish the layout. To do so:
- Go to All Popups.
- Then click the ‘Edit’ from the ‘ Get a quote’ popup.
- Enable the Popup status toggle button.
- Select the “Tigger Type” as “Click”.
- Then click the ‘Publish’ button.
Step 14: After that, create a menu. We have a guide on Divi layout menu customization.
Step 15: We will add the library layout to the menu within the WP Dashboard. To do so follow the following steps.
- Go to Appearance.
- Click on the menus.
- Enable the ‘Enable/Disable DiviFlash menu settings’ toggle. Then Save the changes.
- Click on the ‘Edit Menu’ button beside the ‘Our Services’.
- A popup will appear. From there select the Submenu Type ‘Divi Layout’.
- Select the Library layout “Mega Menu”.
- Select “Content Width Type” as “Custom width”.
- Select Custom Width (px) as “506”.
- Select Menu Position as “Bottom Center”.
Thats it. Now the layout looks exactly the same as our demo layout. If you don’t see anything on your blog section or page and in the filterable project section. It’s because you don’t have anything here. You need to add projects and blog posts to show in those sections.
