To import the Fitness layout into your website, you can choose between two methods:
- Method 1: Using DiviFlash layout importer (Recommended)
- Method 2: Manually import the layout
In this guide, we will explain how to apply both methods step by step.
Method 1: Using DiviFlash Layout Importer
Follow these steps to import the DiviFlash Fitness layout with layout importer:
Step 1: Install and activate the Divi Theme.
Step 2: Install and activate the DiviFlash Plugin.
Step 3: In the WordPress Dashboard, go to DiviFlash > Layouts and search for “Fitness.”
Step 4: Hover over the Fitness layout and click “Import Layout.”
- A popup will appear, showing you the layout settings along with the server requirements.
Note: Ensure all requirements are marked with green checkmarks. If any items display red crosses, adjust your server settings and refresh.
- When requirements are met, select “Start Importing.”
- Allow a few moments for the import to complete.
- Once imported, select “Menu Customize” to configure your menu. You can follow Divi Layout Menu Customization guide.
Step 5: After customizing the menu, set your site’s homepage by following these steps:
- Navigate to the WordPress Dashboard > Settings > Reading.
- Under “Your homepage display,” select “A static page.”
- Choose “Home” from the homepage dropdown.
- Click on “Save Changes” to save the changes.
Step 6: Fitness Layout includes a popup in the hero section of the homepage. To display the popup to your visitors, you need to manually update the popup ID in the location where it’s triggered.
Here is how to do it,
- From the WordPress dashboard, go to the DF Popups > All Popups.
- Copy the Popup Target ID.
- Paste the ID into the module (for example, a Button Module) where the popup should be triggered.
- Your popup should now work as expected.
The Fitness layout has been successfully imported, and your website should now display the design and structure of the layout.
Method 2: Manually Import the Layout
You can choose the manual method to use the “Fitness” layout on your Divi website. 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 Fitness layout file from the DiviFlash website and unzip it.
Step 4: Ensure that the following DiviFlash modules are activated, as these are crucial for the layout to work properly:
- Advanced Menu
- Advanced Heading
- Advanced List
- Advanced Blurb
- Advanced Person
- Table
- FAQ
- Post Grid
Step 5: Import the “Divi Theme Options” settings 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 choose the JSON file named “Divi Theme Options Settings – Fitness Layout Packs – DiviFlash.json”
- Finally, click on “Import Divi Theme Options”
Step 6: 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 choose the JSON file named “Divi Theme Builder Settings – Fitness Layout Packs – DiviFlash.json”
- Finally, click on “Import Divi Theme Builder Templates”.
Step 7: Import layout pages file into 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 choose “All In One – Fitness Layout Packs – 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” button.
- Now create new pages based on the items you imported from the Divi Library. Follow this guide on how to create pages with Divi Layouts from the Library.
Step 8: 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 choose “Divi Theme Customizer Settings – Fitness Layout Packs – DiviFlash.json”
- Finally, click on “Import Divi Customizer Settings”.
Step 9: Import the “DiviFlash’s Dashboard” settings file into DiviFlash’s dashboard panel:
- Navigate to WordPress Dashboard > DiviFlash > Settings > Import/Export.
- Click on “Choose File” and select “DiviFlash Dashboard – Fitness Layout Packs – DiviFlash.json”
- Finally, click on the “Import Settings” button
Step 10: Import the Media file for the layout
- Navigate to WordPress Dashboard > Tool > Import
- Click on Run Importer under the WordPress
- Click on “Choose File” and import the “Media – Fitness Layout Packs – 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 > Tool > Import > Run Importer under the WordPress), you have to import Posts .xml files.
Step 11: Import the popup file into popup import and export panel
- Navigate to WordPress Dashboard > DF Popups > Import & Export
- Under the Import section, click on “Choose File” and select “Df-Popup – Fitness Layout Packs – DiviFlash.json” JSON file.
- Click the “Import” button.
Step 12: After importing the Popup file, you have to publish it by following these steps:
- Go to WordPress Dashboard > DF Popups > All Popups
- Click Edit below the popup name.
- Click the Publish button.
- Repeat these steps to publish the second popup.
Step 13: Set your site’s homepage by following these steps:
- Navigate to the WordPress Dashboard > Settings > Reading.
- Under “Your homepage display,” select “A static page.”
- Choose “Home” from the homepage dropdown.
- Click on “Save Changes” to save the changes.
Step 14: Create a menu for the imported layout. You can follow Divi Layout Menu Customization guide.
And that’s it! Your site should now mirror our demo layout. If you need more clarification on setting up the Fitness layout, don’t hesitate to reach out to our support team at support@diviflash.com.
