How To Use Hotel Layout?

To add the Hotel Layout to your site, you can follow either of the methods below:

• Method 1: Using the DiviFlash layout importer (recommended).
• Method 2: Manually importing the layout.

In this doc, we will walk you through both of these methods step-by-step.

Method 1: Using DiviFlash Layout Importer

Step 1: Install and activate the Divi theme. 

Step 2: Install and activate the DiviFlash plugin. 

Step 3: Navigate to the WordPress Dashboard > DiviFlash > Layouts, and search for “Hotel”. 

Step 4: Hover your mouse over layout and click the “Import Layout” butto

• A popup will appear, displaying layout settings and server requirements. If you see any red crosses, adjust them before clicking “Start Importing”.

• The import process may take a few minutes.

• Once the import is finished, click on the “Menu Customize” to customize the menu according to your preferences. (Need any guidance? Follow our Divi Layout Menu Customization doc.)

Step 5: In the final steps, 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 “Save Changes” to apply your updates.

The Hotel layout has been successfully imported and is now live on your website.

Method 2: Manually Import the Layout

You can also manually import the layout. Here’s the step-by-step process: 

Step 1: Install and activate the Divi theme. 

Step 2: Install and activate the DiviFlash plugin. 

Step 3: Download the Hotel layout from the DiviFlash website and unzip it. 

Step 4: Install and Activate the “Contact Form 7” plugin.

Step 5: Install and activate the “Custom Post Type UI” plugin.

Step 6: Import the CPT UI file:

• Open the “Post Types – CPT UI – Hotel Layout – DiviFlash.txt” file, and copy its content. 
• Go to WordPress Dashboard > CPT UI  > Tools > Post Types.
• Paste the copied text into the “Import Post Types” field and press “Import”.

Step 7: Install and Activate the “Advanced Custom Fields” plugin. 

Step 8: Import the “ACF – Hotel Layout – DiviFlash.json” file into the ACF plugin. 

• Go to the WordPress Dashboard > ACF > Tools

Under the “Import” section, click on “Choose File” and select “ACF – Hotel Layout – DiviFlash.json” file.

• Now, click on the “Import JSON”.

Step 9: Import the “DiviFlash Dashboard” file into the DiviFlash dashboard panel: 

• Go to WordPress Dashboard > DiviFlash > Settings > Import/Export

• Click on the “Choose File” and select “DiviFlash Dashboard – Hotel Layout – DiviFlash.json”.

• Now, click on the “Import Settings” button. 

Step 10: Import the “Divi Theme Options” setting file into the Divi Theme Options panel:

• Go to WordPress Dashboard > Divi > Theme Options
• Select the “Import & Export” icon located right side of your screen. 

• Select the Import tab and click “Choose Files” to upload the JSON file named “Divi Theme Options Settings – Hotel Layout – DiviFlash.json”. 

• Now, click on the “Import Divi Theme Options” and then press on the “Save Changes” to save it. 

Step 11: Import the “Divi Theme Builder Settings” file into the Divi Theme Builder panel:

• Go to WordPress Dashboard > Divi > Theme Builder
• Click on the “Import & Export” icon on the right side of the screen. 

• Select the Import tab and click “Choose Files” to upload the JSON file named “Divi Theme Builder Settings – Hotel Layout – DiviFlash.json”.

• Finally, click on the “Import Divi Theme Builder Templates” and then press the “Save Changes” button. 

Step 12: Import the “Theme Customizer Settings” file into the Theme Customizer panel: 

• Go to the WordPress Dashboard > Divi > Theme Customizer
• Click on the “Import & Export” on the left side of your screen. 

• Select the Import tab and click “Choose Files” to upload the JSON file named “Divi Theme Customizer settings – Hotel Layout – DiviFlash.json”.

• Lastly, click on the “Import Divi Customizer Settings” button. 

Step 13: Import the “Divi Library” file into the Divi Library panel: 

• Go to WordPress Dashboard > Divi > Divi Library.
• Click on the “Import & Export” icon on the right side of the corner.

• Select the Import tab and click “Choose Files” to upload the JSON file named “All In One – Hotel Layout – DiviFlash.json”. (You can also import individual layout pages one by one by using their respective JSON files.)

• Now, click on the “Import Divi Builder Layouts”. 

Your next step is to create new pages using the layouts you’ve saved in your Divi Library. (Follow our doc How to Create Pages with Divi layouts from Library for better understanding.)

Step 14: Import the Media file for the layout:

• Go to WordPress Dashboard > Tools > Import
• Click on the “Run importer” under the “WordPress” (If you see “Install Now” instead of “Run Importer”, click install.). “Run Importer” will appear then.

• Click on the “Choose File” and import the file named “Media – Hotel Layout – DiviFlash.xml”, click on the “Upload file and import”. 

• Assign the author (or you can skip the step). Next, check the “Download and Import File Attachments” and click “submit”.

By following the same steps, import the xml files for “Posts”, “Rooms”, “Packages” and “Contact Form 7”. 

Step 15: Set the “Home” page and “Blog” page for your site by following the steps below:

• Go to WordPress Dashboard > Settings > Reading.
• Below the “Your homepage displays” select “A static page.” 
• Select “Home” from the homepage dropdown menu. 
• Select “Blog” from the “Post Page” dropdown menu.

• Now, click the “Save Changes” to save it. 

Step 16: Add the “Booking Details” in the home page. 

• Go to the “Homepage” and enable the visual builder. 
• Hover your mouse on the “Booking Details” area and click on the settings icon. 

• Under the “Contact Forms” select the “Booking Request Form”.

• Your booking request form should be visible now. Save the page.

Step 17: Create the menu for the imported layout. For a better understanding, follow the Divi Layout Menu Customization doc.

Now your website should look exactly the same as the Hotel layout!

Any Questions?

If you have any questions, please feel free to contact our support team at [email protected]