Create a custom layout of the Accommodation Page using the Block Editor

By following the steps below, you can learn how to create a custom layout for the accommodation type page by using the Block Editor (Gutenberg).

1. Create a custom template.

   You need to install the free add-on (if it is not installed yet), Hotel Booking Styles & Templates, which allows adding custom Templates. Now you can move to Accommodation > Templates and create a new Template, name it, and select one of the Hotel Booking templates to have a wide layout.
   
   
    

2. Edit template

   After the template is created, you can see the list of blocks nested in the Hotel Booking Wrapper block, which is used to define the width of the content.
   
   
   
   To form your custom layout, you can replace the blocks or add them to Columns, etc. By using the add-ons for Block Editor like Getwid, you can add accommodation type blocks into Section, Tabs, Toggle, or Accordion Blocks.
   Each block has an Accommodation Type selector. If you create a single Template that will be used for all of your Accommodation Types, you need to keep the value empty to let the block fetch the ID of the Accommodation Type automatically and display the related content. If you wish to create different Templates for each of your Accommodation types, you can select the proper Accommodation Type in the dropdown list.
   
   
    

3. Apply the Template to your Accommodation Types

   Navigate to Accommodation > Accommodation Types, select the Accommodation types you want to apply the template to, select Edit from the Bulk Action dropdown, and click Apply.
   
   

   Or you can edit each Accommodation Type individually, and change the page template within the editor interface.

   Now, you can view the page of the accommodation types with the new template applied. 
   
   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 adjust the blocks, spacing while editing the Template, and you will see the changes on the pages of the Accommodations Types where this template is selected.