You can easily use the SaaS Layout to your Divi website through either of these methods:
- Method 1: Using the DiviFlash layout importer (recommended).
- Method 2: Manually importing the layout.
In this guide, we will explain how to use 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: In your WordPress dashboard, go to DiviFlash > Layouts, then search for “SaaS.”
Step 4: Hover over the SaaS layout and select “Import Layout.”
- A popup will appear showing the layout settings and server requirements. Make sure all items have green checkmarks. If you see any red crosses, update your server settings and refresh the page. Once everything is ready, click Start Importing.
- The import process may take a few minutes.
- Afterward, click “Menu Customize” to adjust the menu for the layout. While creating the menu, be sure to include CSS class to the “Download App” menu. You can follow Divi Layout Menu Customization guide.
Step 5: With the menu customized, follow these steps to set up your homepage:
- 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.
The SaaS layout has been successfully imported and is now live on your website.
Method 2: Manually Import the Layout
While using the layout importer is the simplest way to go, manually importing the SaaS layout is also an option. Follow these steps:
Step 1: Install and activate the Divi theme.
Step 2: Install and activate the DiviFlash plugin.
Step 3: Download the SaaS 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 properly.
- Advanced Heading
- Advanced Blurb
- Advanced Tabs
- Advanced Person
- Testimonial Carousel
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 – SaaS 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 ThemeBuilderTemplates-SaaSLayout-Diviflash.json”
- Finally, click on “Import Divi Theme Builder Templates”.
Step 7: Import SaaS 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 left
- Select the Import tab and click “Choose Files” to upload the JSON file named “All In One – SaaS Layout – Diviflash.json” (You can import each layout page separately by selecting their respective JSON files.)
- Click on the “Import Divi Builder Layouts” button.
Now 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 “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 Customizer Settings – SaaS 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. (Make sure to add CSS class to the ‘Download-app’ menu item.) You can follow the Divi Layout Menu Customization guide.
Now your website should look exactly the same as the SaaS layout!
Any Questions?
If you have any questions, please feel free to contact our support team at [email protected]
