You can add the Mobile App Layout to your Divi website using either of these two methods:
- Method 1: Using the DiviFlash layout importer (recommended).
- Method 2: Manually importing the layout.
In this guide, we will provide detailed instructions for both methods.
Method 1: Using DiviFlash Layout Importer
Step 1: Install and activate the Divi theme.
Step 2: Install and activate the DiviFlash plugin.
Step 3: In your WordPress dashboard, go to DiviFlash > Layouts, then search for “Mobile App.”
Step 4: Hover over the layout and click Import Layout.
- A popup will show layout settings and server requirements. Ensure all items display green checkmarks. If you see red crosses, fix your server settings, then click “Start Importing.”
- This importing process may take a few minutes.
- Once import is done, next click “Menu Customize” to customize the menu. And also don’t forget to add a CSS class for the “Download” menu. You can follow our Divi Layout Menu Customization guide.
Step 5: Set your website’s homepage by following the steps below:
- 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.”
The Mobile App layout has been successfully imported and is now live on your website.
Method 2: Manually Import the Layout
If you want to import the Mobile App layout manually, here is a quick step-by-step guide:
Step 1: Install and activate the Divi theme.
Step 2: Install and activate the DiviFlash plugin.
Step 3: Download the Mobile App Layout file from the DiviFlash website and unzip it.
Step 4: 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 – Appecho Layout – DiviFlash.json”
- Finally, click on the “Import Settings” button
Step 5: Import the “Divi Theme Options” file into the Theme Options panel:
- Navigate to WordPress Dashboard > Divi > Theme Options
- Click on the “Import & Export” icon in the top right corner
- Select the Import tab and click “Choose Files” to upload the JSON file named “Divi Theme Options – Appecho Layout – 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 top right corner
- Select the Import tab and click “Choose Files” to upload the JSON file named “Divi Theme Builder – Appecho Layout – DiviFlash.json”
- Finally, click on “Import Divi Theme Builder Templates”.
Step 7: Import Mobile App layout’s Page File into Divi Library:
- Navigate to your WordPress dashboard and go to Divi > Divi Library
- Click on the “Import & Export” button on the upper lef
- Select the Import tab and click “Choose Files” to upload the JSON file named “All In One – Appecho Layout – DiviFlash.json” (Or, import specific pages separately using their individual JSON files.)
- Click on the “Import Divi Builder Layouts” button.
- Now, create new pages using the layout items you imported into the Divi Library. Follow our guide on how to create pages with items from the Divi 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 click “Choose Files” to upload the JSON file named “Divi Theme Customizer Settings – Appecho Layout – DiviFlash.json”
- Finally, click on “Import Divi Customizer Settings”.
Step 9: 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 10: Create a menu for the imported layout and add CSS class for the “Download” menu item. You can follow the Divi Layout Menu Customization guide.
Now your website should look exactly the same as the Mobile App layout!
Any Questions?
If you have any questions, please feel free to contact our support team at [email protected]