|
|
| Line 1: |
Line 1: |
|
| | #REDIRECT [[Responsive_Booking_Page]] |
| == '''Coming Soon!''' ==
| |
| | |
| This page explains how to use and customise the responsive version (beta) of the booking page.
| |
| | |
| The design of the responsive booking page is fully modular. This allows you to fully control the layout. We provide a set of default layouts which can be used as they are.
| |
| == '''1. Use Responsive Booking Page'''==
| |
| Go to SETTINGS->BOOKING PAGE and select "Booking Page Version" = Responsive. This setting will activate Layout 1.
| |
| | |
| == '''2. Choose a different Layout'''==
| |
| | |
| Go to SETTINGS->BOOKING PAGE->PAGE DESIGN->LAYOUT and set the selector to the layout you want to use as your standard layout.
| |
| | |
| | |
| <div><ul>
| |
| <li style="display: inline-block; vertical-align: top;"> [[File:layout1.png|thumb|none|200px|<p style="font-weight: bold; text-align: center">Layout 1</p> <p style="font-weight: bold;">Modules:</p> Property Top: Desctiption1<br><br>
| |
| Offer: Picture Slider, Description 1 , Calendar, Booking Button/Selector, Description 2<br><br>
| |
| Property Bottom: Description 2]] </li>
| |
| | |
| <li style="display: inline-block; vertical-align: top;"> [[File:layout2.png|thumb|none|200px|<p style="font-weight: bold; text-align: center">Layout 2</p> <p style="font-weight: bold;">Modules:</p> Property Top: Picture Slider<br><br>
| |
| Offer: Booking Button/Selector, Price Table<br><br>
| |
| Property Bottom: Description 2]] </li>
| |
| | |
| <li style="display: inline-block; vertical-align: top;"> [[File:layout3.png|thumb|none|200px|<p style="font-weight: bold; text-align: center">Layout 3</p> <p style="font-weight: bold;">Modules:</p> Property Top: Desctiption1<br><br>
| |
| Offer: Price Table, Booking Button/Selector<br><br>
| |
| Property Bottom: Description 2]] </li>
| |
| </ul></div>
| |
| | |
| | |
| <div><ul>
| |
| <li style="display: inline-block; vertical-align: top;"> [[File:layout4.png|thumb|none|200px|<p style="font-weight: bold; text-align: center">Layout 4</p> <p style="font-weight: bold;">Modules:</p> Property Top: Picture Slider<br><br>
| |
| Room Top: Picture Slider, Description1<br><br>
| |
| Offer: Picture Slider, Description 1 , Calendar, Booking Button/Selector, Description 2<br><br>
| |
| Property Bottom: Description 2]] </li>
| |
| | |
| <li style="display: inline-block;"> [[File:layout5.png|thumb|none|200px|<p style="font-weight: bold; text-align: center">Layout 5</p> <p style="font-weight: bold;">Modules:</p> Property Top: Picture Slider<br><br>
| |
| Offer: Price Calendar, Booking Button/Selector<br><br>
| |
| Property Bottom: Description 2]] </li>
| |
| </ul></div>
| |
| == '''3. Customise Layouts''' ==
| |
| Go to SETTINGS->BOOKING PAGE->PAGE DESIGN->LAYOUT. Choose the layout you want to use and click on "Customise".
| |
| | |
| == Choose what you want to show ==
| |
| The responsive booking page consists of sections:
| |
| "Offer" contains the standard offer for a room or unit.
| |
| *One offer will always be shown
| |
| *Additional offers (for example for alternative non refundable prices or packages) are optional
| |
| *All other sections are optional.
| |
| [[Image:sections.jpg|200px|link=]]
| |
| [[Media:sections.jpg|view large]]
| |
| | |
| | |
| For each section you can choose from a set of modules.
| |
| | |
| '''Property modules'''
| |
| <gallery>
| |
| File:Property_slider.png|<p style=" text-align: center"><strong>Property Slider</strong><br>[[Media:Property_slider.png|view large]]</p>
| |
| File:Property_description.png|<p style=" text-align: center"><strong>Property Description</strong><br>[[Media:Property_description.png|view large]]</p>
| |
| </gallery>
| |
| | |
| '''Room modules'''
| |
| <gallery>
| |
| File:Room_slider.png|<p style=" text-align: center"><strong>Room Slider</strong><br>[[Media:Room_slider.png|view large]]</p>
| |
| File:Room_picture.png|<p style=" text-align: center"><strong>Room Picture</strong><br>[[Media:Room_picture.png|view large]]</p>
| |
| File:Room_calendar.png<p style=" text-align: center"><strong>Room Calendar</strong><br>[[Media:Room_calendar.png|view large]]</p>
| |
| File:Room_description.png|<p style=" text-align: center"><strong>Room Description</strong><br>[[Media:Room_description.png|view large]]</p>
| |
| </gallery>
| |
| | |
| | |
| '''Offer modules'''
| |
| <gallery>
| |
| File:Offer_slider.png|<p style=" text-align: center"><strong>Offer Slider</strong><br>[[Media:Offer_slider.png|view large]]</p>
| |
| File:Offer_picture.png|<p style=" text-align: center"><strong>Offer Picture</strong><br>[[Media:Offer_picture.png|view large]]</p>
| |
| File:Room_calendar.png|<p style=" text-align: center"><strong>Room Calendar</strong><br>[[Media:Room_calendar.png|view large]]</p>
| |
| File:Pricetable.png|<p style=" text-align: center"><strong>Price Table</strong><br>[[Media:Pricetable.png|view large]]</p>
| |
| File:Pricecalendar.png|<p style=" text-align: center"><strong>Price Calendar</strong><br>[[Media:Pricecalendar.png|view large]]</p>
| |
| File:Button.png|<p style=" text-align: center"><strong>Button</strong><br>[[Media:Button.png|view large]]</p>
| |
| File:Select.png|<p style=" text-align: center"><strong>Select</strong><br> (multi room booking)<br>[[Media:Select.png|view large]]</p>
| |
| File:Offer_description.png|<p style=" text-align: center"><strong>Offer Description</strong><br>[[Media:Offer_description.png|view large]]</p>
| |
| </gallery>
| |
| | |
| Position: Modules are placed in rows. Each section can have one or more rows.
| |
| | |
| | |
| Width on desktop and mobile: Each row which consists of 12 columns. The number of columns defines the width of the module.
| |
| [[Image:row.png|600px|link=]]
| |
| [[Media:row.png|view large]]
| |
| | |
| | |
| All "Description" Modules allow to enter text or html content.
| |
| | |
| Click on "Manage" to customise the settings of a module. All modules can be set to always display or to be available via a link.
| |
| | |
| If you have activated one or more of these modules:
| |
| *Room Description 1 ("Room more Details" on the adaptive booking page)
| |
| *Offer Description 1 ("Offer Summary" on the adaptive booking page)
| |
| *Offer Description 2 ("Offer more Details" on the adaptive booking page)
| |
| *Marketing Column
| |
| Go to SETTINGS->BOOKING PAGE->ROOM CONTENT to enter the content for the modules.
| |
| | |
| | |
| If you have activated one or more of these modules:
| |
| *Property Description 1 ("Header" on the adaptive booking page)
| |
| *Property Description 3 ("Footer" on the adaptive booking page)
| |
| Go to SETTINGS->BOOKING PAGE->PAGE DESIGN->CONTENT and enter a "Header" and/or "Footer"
| |
| | |
| | |
| If you have activated one or more of these modules:
| |
| *Property Description 1
| |
| Go to SETTINGS->AGENCY->PROPERTIES and add a "Property Summary Description"
| |
| | |
| NOTE: Some of these settings might be moved. This help page will always have the current location for each setting.
| |
| == Pictures ==
| |
| To upload pictures and assign them to modules go to SETTINGS->BOOKING PAGE->PICTURES
| |
| | |
| == Colors and Fonts ==
| |
| To customise colors and fonts go to SETTINGS->BOOKING PAGE->PAGE DESIGN->STYLE
| |
| | |
| == Behaviour ==
| |
| Changes on how the booking page opens and closes can be made in SETTINGS->BOOKING PAGE->PAGE DESIGN->BEHAVIOUR
| |
| | |
| == Content ==
| |
| Additional messages can be added to the booking page in SETTINGS->BOOKING PAGE->PAGE DESIGN->CONTENT. This is also where you can change the default warning messages which show when a room is not available.
| |
| | |
| == Developers ==
| |
| Advanced functions are available in SETTINGS->BOOKING PAGE->DEVELOPER
| |
| | |
| *If you are comfortable working with CSS you can apply your own styles
| |
| *Add scripts e.g. for Google Analytics
| |
| *Exchange any fixed text on the booking page
| |
| | |
| [[:category:Developers |Here]] you can find more developer options.
| |
| | |
| == Switching from Adaptive Booking Page to Responsive Booking Page ==
| |
| If you are switching from the adaptive version of the booking page to the responsive version most customisations will be automatically applied.
| |