Changes

Jump to navigation Jump to search

Customise Booking Page

3,669 bytes removed, 18:46, 26 October 2015
no edit summary
[[Category:How to]]
[[Category:Booking Page]]
''This page explains how to customise the booking page''
*Page Content - You can choose to display either a Room Availability Calendar or define a number of Price Columns.
 [[File:example.jpg]] *Design - Customise Design, Colours and fonts SETTINGS -> BOOKING PAGE -> PAGE DESIGN [[File:ic_video.gif|link=]] '''[[http://youtu.be/lZvcUEajxjk Show Video]]'''' [[File:bookingpage1.png]]   * Offer multiple languages (1) SETTINGS -> ACCOUNT -> LANGUAGES  *Add a custom top (2) (eg. for your logo) and/or bottom (3) (eg. for contact info, directions, link to your terms and conditions) / SETTINGS -> BOOKING PAGE -> PAGE DESIGN [[File:ic_video.gif|link=]] '''[[http://youtu.be/A8G9QvZJBcM Show Video]]''''  *Show [[Discounts]] adding a #REDIRECT [[Discounts|Marketing Column]] (4)   *Add pictures and information for rooms (5) in SETTINGS -> BOOKING PAGE -> ROOMS Upload and setting (size, responsive behaviour) in SETTINGS -> BOOKING PAGE -> PICTURES [[File:ic_video.gif|link=]] '''[[httpCategory://youtu.be/d6NH1UGXoeI Show Video]]''''  *Set different prices or packages for a room (5) in SETTINGS -> BOOKING PAGE -> ROOMS -> OFFER 2 (you can display up to four different offers) [[File:bookingpage.png]]  *[[Let Guests View and Cancel BookingsBooking_Page]] *Customise Information your guest enters when booking / SETTINGS -> PROPERTIES -> BOOKING QUESTIONS *Customise Confirmation Messages / SETTINGS -> PROPERTIES -> CONFIRMATION MESSAGES *Order in which rooms appear on your booking page / SETTINGS-> ROOMS -> SETUP -> "Availabitlity" and set the ''Sell Priority'' for each room.  There is contextual help with each setting to assist you with the setup. == '''Advanced Options''' == == Change Default Text== You can exchange any of the default text on the booking page in SETTINGS -> BOOKING PAGE -> ADVANCED -> CUSTOM TEXT == 'Change CSS' == Webdesigners use CSS to define the look and formatting of a website. Here a list of common adjustmens which can be done pasting the code provided below into SETTINGS -> BOOKING PAGE -> ADVANCED. Examples: == Bigger Room Name ==/*code for bigger room name*/ .at_roomnametext{ font-size: 14px /*if you want the text even bigger use a higher number*/ } == Background Image ==To use a background image upload it to SETTINGS -> BOOKING PAGE -> PICTURES. Replace https://www.beds24.com/pic/p0000/2049/04.jpg with the url of your uploaded picture. /*code fo use an image as background*/ body {background-image:url(https://www.beds24.com/pic/p0000/2049/04.jpg);} == Hide "Book Multiple" == Use the selector in SETTINGS-> BOOKING PAGE-> ADVANCED == Exchange default texts == Go to SETTINGS-> BOOKING PAGE-> ADVANCED "Custom Text" == Shadow Arround your Booking Page == Add code in SETTINGS-> BOOKING PAGE -> ADVANCED "Custom CSS" /*code for a shadow arround your booking page*/ <nowiki>#</nowiki>bookingpage { -webkit-box-shadow:0 1px 2px rgba(0, 10, 10, 0.38); -moz-box-shadow:0 1px 2px rgba(0, 10, 10, 0.38); box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 10, 10, 0.38); margin-bottom: 20px; } == Booking Page with Rounded Corners ==Add code in SETTINGS-> BOOKING PAGE -> ADVANCED "Custom CSS" /*code for rounded corners*/<nowiki>#</nowiki>bookingpage { border-radius: 7px; -webkit-border-radius: 7px;  -moz-border-radius: 7px; } == Disable Hover Text ==Place the following script in SETTINGS->BOOKING PAGE-> ADVANCED "Advanced HTML Settings" setting. <pre><script>$(document).ready(function() { var $title = $("td,div,span"); $.each($title, function(index, value) { $(this).tooltip({ disabled:true }); });});</script></pre>

Navigation menu