Create a custom layout of the Accommodation Page using Elementor

By following the steps below, you can learn how to use Elementor to create a custom layout for the accommodation type page where visitors of your website can view all the information about specific properties. You may watch the video or read the text version of the guide:

Make sure Hotel Booking & Elementor Integration is installed and activated on your site.

1. Create a custom template.
   If you use Elementor Pro you can use Theme Builder to create a template for Post > Singular > Accommodation Type. Once you create it you may go to the next step.
   If you use free Elementor, you need to install the free add-on Hotel Booking Styles & Templates. After this, you need to enable Elementor for editing Templates post type at Elementor >Settings
   
   
   
   Now you can move to Accommodation > Templates and create a new Template
   
   
   
   You need to name it, remove default blocks, select one of the Hotel Booking templates to have a wide layout, publish it, and launch the Elementor editor.
   

   If you have an issue while loading Elementor you need to navigate to Settings > Permalinks and save the changes to refresh the permalinks. Then try to edit the template again.

   
2. Add Widgets to Custom Template.
   Now, when the template is created you may add the following widgets to create a custom layout:
   
   - Accommodation Type Featured Image
   - Accommodation Type Title
   - Accommodation Type Content
   - Accommodation Type Gallery
   - Accommodation Type Price
   - Accommodation Type Attributes
   - Accommodation Type Attribute
   - Booking Form
   - Availability Calendar
   
   You do not need to select a specific accommodation type while adding those widgets to the stage if you build a single template for all the accommodation types. It will display the related content after you assign the template to all your accommodation types.
   
   
   
   
3. Apply Custom Template for Accommodation Types.
   If you used Elementor Pro and Theme Builder then you are done you may go and view your accommodation type pages.
   For those who created a custom Template using Elementor free + Hotel Booking Styles & Templates Integration, you need to go to Accommodation > Accommodation Types, select all the Accommodations Types to edit them in bulk and apply your Custom template
   
   
   
   Now you can preview the pages of your accommodation types, to view the updated layout.
   
   Note: You can change the design of the Availability Calendar by selecting a predefined style from the dropdown option called Calendar Theme at Accommodation > Settings.
   
   
   
   You can add changes to your template and they will be displayed automatically on all the pages of accommodation types where this template is applied.