To use this layout, you can follow any of the methods below:
- Method 1: Using the DiviFlash layout importer (recommended).
- Method 2: Manually importing the layout.
In this doc, we will show you how to use Wind & Solar Energy layout using both methods. Let’s get started.
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 “Wind & Solar Energy”.
Step 4: Hover over the Wind & Solar Energy layout, then click “Import Layout”.
- A popup will appear, displaying layout settings and server requirements. If you see any red crosses, adjust before clicking the “start Importing”.
- The import process may take a few minutes.
- When the import is done, click on the “Menu Customize” to customize the menu as per your choices. For better understanding, follow the 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 “Save Changes” to apply your updates.
Step 6: Wind & Solar Energy Layout comes with a popup that you will find by going to WordPress Dashboard > DF Popups > All Popups.
The Wind & Solar Energ layout has been successfully imported and is now live on your website.
Method 2: Manually Import the Layout
You can also import the Wind & Solar Energy layout manually. Here is how to do it:
Step 1: Install and activate the Divi theme.
Step 2: Install and activate the DiviFlash plugin.
Step 3: Download the Wind & Solar Energy layout from the DiviFlash website and unzip it.
Step 4: Install and activate the “Advanced Custom Fields” plugin.
Step 5: Import the “ACF – Wind Solar Energy Layout – DiviFlash.json” file into the ACF plugin.
- Go to the WordPress Dashboard > ACF > Tools
- Under the “Import” section, click on “Choose File” and select “ACF – Wind Solar Energy Layout – DiviFlash.json” file.
- Now, click on the “Import JSON”.
Step 6: Import the “DiviFlash Dashboard” file into the DiviFlash dashboard panel:
- Go to WordPress Dashboard > DiviFlash > Settings > Import/Export.
- Click on the “Choose File” and select “DiviFlash Dashboard – Wind Solar Energy Layout – DiviFlash.json”.
- Now, click on the “Import Settings” button.
Step 7: Import the “Divi Theme Options” setting file into the Divi Theme Options panel:
- Go to WordPress Dashboard > Divi > Theme Options.
- Select the “Import & Export” icon on the right side of your screen.
- Select the Import tab and click “Choose Files” to upload the JSON file named “Divi Theme Options Settings – Wind Solar Energy Layout – DiviFlash.json”.
- Now, click on the “Import Divi Theme Options” and then click on the “Save Changes” to save it.
Step 8: 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 -Wind Solar Energy Layout – DiviFlash.json”.
- Now, click on the “Import Divi Theme Builder Templates” and then click on the “Save Changes” button.
Step 9: Import the “Theme Customizer settings” file into the Theme Customizer panel:
- Go to the WordPress Dashboard > Divi > Theme Customizer.
- Click on the “Import & Export” on the left side of your screen.
- Select the Import tab and click “Choose Files” to upload the JSON file named “Divi Theme Customizer Settings – Wind Solar Energy Layout – DiviFlash.json”.
- Now, click on the “Import Divi Customizer Settings” button.
Step 10: Import the “Divi Library” file into the Divi Library panel:
- Go to WordPress Dashboard > Divi > Divi Library.
- Click on the “Import & Export” icon on the right side of the corner.
- Select the Import tab and click “Choose Files” to upload the JSON file named “All In One – Wind Solar Energy Layout – DiviFlash.json”. (You can also import individual layout pages one by one by using their respective JSON files.)
- Now, click on the “Import Divi Builder Layouts”.
- Your next step is to create new pages using the layouts you’ve saved in your Divi Library. (Follow our guide How to Create Pages with Divi layouts from Library for better understanding.)
Step 11: Import the Media file for the 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 import the file named “Media – Wind Solar Energy Layout – DiviFlash.xml”, click on the “Upload file and import”.
- Assign the author (or you can skip the step). Next, check the “Download and Import File Attachments” and click “submit”.
- By following the same steps, import the xml file for the “Posts”.
Step 12: Create Project and Service Detail Pages
Project and service pages list multiple items, each with a “View Details” button. To make these buttons work, you need to create a detailed page for each project or service.
To create a detail page:
- Go to WordPress Dashboard > Projects > Add new project.
- Add a title for your project and publish the page. Then click Use Divi Builder
- Now choose the “Build From Scratch.”
- Click the Blue Plus icon to add a new section.
- Click on the “Add From Library”.
- Now, select the “Project – Post Info”.
- Then click on the “Use This Section”.
- Next add images and edit content based on your needs. Once you are done, click “Save” to make the changes live.
By following the same steps, create all other project and service detail pages. And make sure to add relevant images and content for each page.
Step 13: Link Project and Service Buttons to Their Pages
Once your detail pages are ready, link each “View Details” button to the correct page.
Here is how to do it:
- Open your main Service or Project page in Visual Builder.
- Click a button to open its settings.
- Go to Link > Project Link from the settings panel
- After that, again click on “Project Link”
- Next, click on “Project” dropdown menu
- From there, select the project detail page you created earlier for that specific project and click on “Apply”
Continue to use the same process for all other project and service buttons to link them to their respective detail pages.
Step 14: Import the popup file
- Go to WordPress Dashboard > DF Popups > Import & Export.
- Under the “Import” section, click on “choose File” and select “Popup – Wind Solar Energy Layout – DiviFlash.json” file.
- Click on the “Import” button.
Step 15: Publish the Popup
After importing the popup, you need to publish it. Here’s how to do it:
- Go to WordPress Dashboard > DF Popups > All Popups.
- Click “Edit” under the popup name.
- Click on “Publish” button.
Step 16: Set the “Home” page and “Blog” page for your site by following the steps below:
- Go to WordPress Dashboard > Settings > Reading.
- Below “Your homepage displays” select “A static page.”
- Select “Home” from the homepage dropdown menu.
- Select “Blog” from the “Post Page” dropdown menu.
Click the “Save Changes” to save it.
Step 17: 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 Wind & Solar Energy layout!
Any Questions?
If you have any questions, please feel free to contact our support team at [email protected]