You can add the Hosting Layout to your Divi website using one of these two methods:
- Method 1: Using the DiviFlash layout importer (recommended).
- Method 2: Manually importing the layout.
In this doc, we will provide detailed steps for each method to help you get started with ease.
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 the WordPress Dashboard, go to DiviFlash > Layouts and search for the “Hosting” layout.
Step 4: Hover over the Hosting layout and select “Import Layout”.
- A popup will appear showing the layout settings and server requirements. Make sure all requirements show green checkmarks. If you see any red crosses, fix your server settings, then click “Start Importing.”
- The import might take a few minutes.
- After the import, click “Menu Customize” to set up your site menu. Assign the ‘menu_button’ class to the ‘Login’ menu item. See our Divi layout menu customization doc.
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 on “Save Changes” to save it.
The Hosting layout has been successfully imported and is now live on your website.
Method 2: Manually Import the Layout
If you would like to manually import the Hosting layout, follow these detailed instructions:
Step 1: Install and activate the Divi theme.
Step 2: Install and activate the DiviFlash plugin.
Step 3: Download the Hosting Layout file from the DiviFlash website and unzip it.
Step 4: Activate all required DiviFlash modules before proceeding with the import. You can follow our doc on how active DiviFlash modules.
- Advanced Heading
- Advanced Blurb
- Advanced Tabs
- Table
- Advanced Person
- Content Toggle
- Advanced List
- Image Hotspot
- Logo Carousel
- Advanced Carousel
- Testimonial Carousel
- Post Grid
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 – Hosting 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 “DiviThemeBuilderTemplates-HostingLayout-DiviFlash.json”
- Finally, click on “Import Divi Theme Builder Templates”.
Step 7: Import Hosting 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 – Hosting 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 doc 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 Customizer Settings – Hosting Layout – DiviFlash.json”
- inally, click on “Import Divi Customizer Settings”.
Step 9: 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 on “Save Changes” to save it.
Step 10: Set up a menu for your imported layout. Once the menu is created, be sure to assign the ‘menu_button’ class to the ‘Login’ button. You can find more details in our doc on Divi layout menu customization.
Now your website should look exactly the same as the Hosting layout!
Any Questions?
If you have any questions, please feel free to contact our support team at [email protected]
