Yoga layout, designed by the DiviFlash team, is perfect for yoga studios, instructors, and wellness centers. You can add this layout to your website using two simple import methods:
- Method 1: Using the DiviFlash layout importer (Easy Import)
- Method 2: Manually importing the layout
In this article, we will provide detailed and step-by-step guidance for both methods.
Method 1: Using DiviFlash Layout Importer
DiviFlash includes a built-in layout importer, allowing you to import any of DiviFlash’s layouts with just a click.
Here is how to import the Yoga layout using the layout importer:
Step 1: Install and activate the Divi Theme.
Step 2: Install and activate the DiviFlash Plugin.
Step 3: Go to your WordPress dashboard > DiviFlash > Layouts, and search for “Yoga”.
Step 4: Hover over the “Yoga” layout and click on the “Import Layout” button.
- A popup window will appear, displaying a list of layout settings and server requirements.
Note: Make sure all requirements show green checkmarks for a smooth import. If there are red crosses, adjust the server settings and refresh the page to verify they are resolved.
- After verifying all requirements, click “Start Importing” to initiate the layout import.
- The import process may take a few minutes to complete.
- Once the import is complete, click on “Menu Customize” to customize the menu of the newly imported layout. Follow Divi Layout Menu Customization guide.
Note: Yoga layout has a mega menu in the menu’s “Classes” item that you have to activate manually. For that follow these steps:
- Go to Appearance > Menus and enable DiviFlash menu settings.
- Select Classes> Edit Menu, and under “Layout Settings” make these changes:
- Submenu Type: Divi Layout
- Library Item: Class Mega Menu
- Click Save & Exit.
Step 5: After customizing the menu, set your site’s homepage by following these steps:
- Go 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.
Now that your Yoga layout has been successfully imported, it is live and ready to view on your website.
Method 2: Manually Import the Layout
In addition to using DiviFlash’s Layout Importer, you can also import the “Yoga” 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 Yoga layout file from the DiviFlash website and unzip it.
Step 4: Make sure the following DiviFlash modules are activated, as they are necessary for the layout to work seamlessly:
- Advanced Menu
- Marquee Text
- Advanced Divider
- Advanced List
- CPT grid
- Flip Box
- Advanced Person
- Star Rating
- Advanced Blurb
- Packery Gallery
- Advanced Heading
- FAQ
- Post List
- Advanced Tab
- Timeline
- Image Reveal
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 – Yoga Layout – DiviFlsh.json”
- Finally, click on “Import Divi Theme Options”
Step 6: Import the “Theme Builder Settings” file into the Divi Theme Builder panel:
- Navigate to WordPress dashboard > 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-Yoga Layout-DiviFlash.json”
- Finally, click on “Import Divi Theme Builder Templates”.
Step 7: Import the “Divi Library” file into Divi Library panel
- Navigate to WordPress dashboard > Divi > Divi Library
- Click on the “Import & Export” button on the upper left
- Select the “Import” tab and choose the JSON file named “All in one Divi Library – Yoga 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” button.
- Next, create new pages corresponding to the imported Divi Library items. Follow this guide on how to create pages with Divi Layouts from the Library.
Step 8: 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 Settings – Yoga Layout – DiviFlash.json”
- Finally, click on the “Import Settings” button
Step 9: Import the “Theme Customizer Settings” file into the Theme Customizer panel
- Navigate to WordPress dashboard > Divi > Theme Customizer
- Click on the “Import & Export” icon on the top left corner.
- Select the “Import” tab and choose the JSON file named “Divi Theme Customizer Settings – Yoga Layout – DiviFlash.json”
- Finally, click on “Import Divi Customizer Settings”.
Step 10: Import the Media file for the layout
- Navigate to WordPress dashboard > Tool > Import
- Click on Run Importer under the WordPress (If you see, “Install Now” instead of “Run Importer,” click on install. Then you will get the “Run Importer” option.)
- Click on “Choose File” and import the “Media – Yoga 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 > Tool > Import > Run Importer under the WordPress), you have to import Post, and Project .xml files.
Step 11: Set your site’s homepage by following these steps:
- Go 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 12: Create a menu for the imported layout. Follow Divi Layout Menu Customization guide for guidance.
Note: Yoga layout has a mega menu in the menu’s “Classes” item that you have to activate manually. For that follow these steps:
- Go to Appearance > Menus and enable DiviFlash menu settings.
- Select Classes> Edit Menu, and under “Layout Settings” make these changes:
- Submenu Type: Divi Layout
- Library Item: Class Mega Menu
- Click Save & Exit.
Now your website should match the appearance of the Yoga layout. If you still have questions about using the Yoga layout, feel free to reach out to our support team at [email protected].
