Customise the responsive booking page layout

Customise the layout of your responsive booking page in Settings > Booking Engine > Property Booking Page > Layout: start from a template, then add, remove and arrange modules, and decide how each one shows on desktops and mobiles.

Quick Guide

1. Go to Settings > Booking Engine > Property Booking Page > Layout.
2. Choose a template and click Restore default.
3. Add, remove and position modules, and click Manage for each module's settings.
4. Save the layout.
5. Set colours and fonts in Settings > Booking Engine > Property Booking Page > Style.

Table of Contents

1. Modules, templates and layouts
2. Choose a template
3. Customise modules
4. Arrange modules in rows
5. Set how modules show on mobiles
6. Use multiple layouts
7. Style colours and fonts

Modules, templates and layouts

• Modules are the building blocks of the page. You can add and remove them, and their advanced settings let you tailor the display exactly. Most modules need content before they display.
• Templates are sets of preset modules. Use them as they are, or customise them.
• Layouts are your saved designs. You can use up to six layouts at the same time, for example to show different looks on different websites or blogs.

Available modules:

• Picture slider or gallery for the property, rooms and offers. Use the same picture format throughout: don't mix landscape and portrait.
• Picture for the property, rooms and offers
• Features for the property and rooms
• Availability calendar (one or several months) for the property, rooms and offers
• Price table for offers
• Descriptions for the property, rooms and offers
• Policies
• Map

This demo booking page gives an overview of the main modules.

Choose a template

The current default template is 7.

Template	Modules	Demo
Template 7 (default)	Property Top: Picture Slider. Room: Features. Offer: Offer Select (Button/Selector), Availability Calendar.	Template 7 demo
Template 1	Offer: Picture Slider, Description 1, Calendar, Booking Offer Select (Button/Selector). Property Bottom: Description 2.	Template 1 demo
Template 2	Property Top: Picture Slider. Offer: Offer Select (Button/Selector), Price Table. Property Bottom: Description 2.	Template 2 demo
Template 3	Room: Picture Slider, Description. Offer: Price Table, Offer Select (Button/Selector), Picture Slider, Description 2. Property Bottom: Description 2.	Template 3 demo
Template 4	Room Top: Picture Slider. Offer: Picture, Description 1, Calendar, Offer Select (Button/Selector), Description 2. Property Bottom: Description 2.	Template 4 demo
Template 5	Property Top: Picture Slider. Offer: Price Calendar, Offer Select (Button/Selector). Property Bottom: Description 2.	Template 5 demo
Template 6	Property Top: Description 1. Offer: Offer Select (Button/Selector), Price Table. Room Bottom: Picture Slider, Description.	Template 6 demo

Steps:

1. Go to Settings > Booking Engine > Property Booking Page > Layout.
2. Choose the template you want to use.
3. Click Restore default.

Expected result: the layout uses the template's preset modules.

Note: if you don't use multiple layouts, leave the Layout selector here and the Default Layout selector in Settings > Booking Engine set to 1.

Customise modules

The page is made of sections. The Offer section holds the standard offer for a room or unit:

• One offer always shows.
• Additional offers, for example non-refundable prices or packages, are optional.
• All other sections are optional.

For each section, choose from a set of modules. Most modules need content before they display: click the context help (? icon) to see where to enter it. Click Manage on a module for its additional settings. To remove a module, click Position and select not used.

Property modules

Module	Notes
Property Slider	With Style set to Full width, place the slider in row 1, position 1, with desktop full width and mobile full width, and no other module in row 1. Deactivate all modules you don't use.
Property Description	Shows your descriptive text.
Policies	Shows the policies you entered. See Terms and Conditions.
Map	Needs a Google Maps API key in Settings > Booking Engine > Property Booking Page > Developer. Get a key from Google Maps Platform. A free key is usually enough. Activate all required settings for the key.
Features	Shows the property features.

The same full-width rule applies to the property picture module.

Room modules

Room Slider, Room Picture, Room Calendar, Room Description and Features.

Offer modules

Module	Notes
Offer Slider	Picture slider for the offer.
Offer Picture	Single picture for the offer.
Offer Calendar	Availability calendar. With several offers, it shows the same availability for all of them.
Price Table	Prices only display if booking multiple rooms isn't allowed.
Price Calendar	Prices only display if booking multiple rooms isn't allowed.
Offer Select	A button for one room, or a selector for multiple room bookings.
Offer Description	Shows the offer text.

• The Marketing Column only displays in the Price Table and Price Calendar modules, and only if you activate it in Settings > Booking Engine > Property Booking Page. Enter the content in Settings > Properties > Offers.
• You can't use Offer Calendars and Price Calendars in the same layout.

Arrange modules in rows

Modules are placed in rows, and each section can have one or more rows. Each row has 12 columns: the number of columns you give a module sets its width, separately for desktop and mobile.

Save your changes to this layout or as a different layout. Restore Default removes all your changes.

Set how modules show on mobiles

In Settings > Booking Engine > Property Booking Page > Layout, click Manage on a module to set whether it shows on mobile devices:

• directly
• via a link
• not at all (desktop only)

Use multiple layouts

You can use up to six layouts at the same time.

Steps:

1. In Settings > Booking Engine > Property Booking Page > Layout, set the layout number you want to save to before you save.
2. To open a layout other than the default, add the layout parameter to the booking page URL. For example, https://beds24.com/booking2.php?propid=13437&layout=2 shows layout 2.

• The default layout is set in Settings > Booking Engine > Property Booking Page > Layout.
• With WordPress, add a layout parameter to the shortcode, as explained in the plugin settings.
• The Facebook app uses the default layout.

Style colours and fonts

Set colours and fonts in Settings > Booking Engine > Property Booking Page > Style. The current default settings are:

Setting	Default value
Body Background	#f4f4f4
Content Background	#f4f4f4
Content Text	#424242
Link Color	#008acc
Border Color	#dfdfdf
Highlight Background From	#ffffff
Highlight Background To	#ffffff
Highlight Text	#424242
Form Background	#ffffff
Form Text	#424242
Selected Dates Background	none
Selected Dates Text	#222222
Available Dates Background	#f2f2f2
Available Dates Text	#424242
Request Dates Background	#dddddd
Request Dates Text	#777777
Not Available Dates Background	#f2dede
Not Available Dates Text	#a94442
Button Style	flat
Button Background	#008acc
Button Text	#ffffff
Font	Arial (Helvetica)
Font Size	14px

To change how the booking page opens and closes, go to Settings > Booking Engine > Property Booking Page > Behaviour.

Related Articles

• Responsive Booking Page
• Make your booking page accessible
• Pictures
• Offers