11.907
Bearbeitungen
Änderungen
Zur Navigation springen
Zur Suche springen
Die Seite wurde neu angelegt: „Category:Einstellungen Category:Buchungsseite_und_Widgets Category:Anleitungen Category:Buchungsseite == '''Diese Funktion läuft momentan als…“
[[Category:Einstellungen]]
[[Category:Buchungsseite_und_Widgets]]
[[Category:Anleitungen]]
[[Category:Buchungsseite]]
== '''Diese Funktion läuft momentan als Beta Test. Wenn sie testen möchten, senden sie uns bitte ein Support Ticket.''' ==
Diese Seite erklärt, wie sie die responsive Version der Buchungsseite einrichten.
Durch das modulare Design haben sie volle Kontrolle über das Layout. Es stehen ihnen einige Standardlayouts zur Verfügung die sie aktiveren könen.
== '''1. Ativieren'''==
Gehen sie zu KONFIGURATION->BUCHUNGSSEITE und wählen sie "Version Buchungsseite"= Responsive. Damit aktivieren sie Layout 1.
Wenn sie von der adaptiven auf die responsive Version wechseln müssen sie die Bilder erneut zuordnen. Gehen sie zu KONFIGURATION->BUCHUNGSSEITE ->BILDER. Wählen die die Einheit, dann "Offerte 1" und ordnen das/die Bilder zu, die sie zeigen möchten. Wenn sie mehr als eine Offerte aktiviert haben, wiederholen sie das für jede Offerte.
HINWEIS: Wenn sie Version Buchungsseite"= Responsive auswählen ändert sich die Buchungsseite auf ihrer Website. Wenn sie nur testen wollen, können sie dies tun, in dem sie &version=3 zur URL ihrer Buchungsseite hinzufügen. Um die verschiedenen Layouts zu sehen fügen sie zu Nummer hinzu. z.B. &version=3&layout=2 zeigt Layout 2. Alternativ können sie ihre Unterkunft zum Testen kopieren. Wenn sie das tun stellen sie sicher, dass alle Channel Manager Verbindungen in der kopierten Unterkunft deaktiviert sind. Für die zusätzlichen Einheiten fällt die normale Gebühr an.
== '''2. Anderes Layou auswählen'''==
Gehen sie zu KONFIGURATION->BUCHUNGSSEITE-> DESIGN->LAYOUT und wählen sie das Layout, welches sie nutzen möchten.
<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;">Module:</p>
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;">Module:</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;">Module:</p>
Offer: Price Table, Booking Button/Selector, Picture Slider, Description 2<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;">Module:</p>vertical-align: top;
Room Top: Picture Slider<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:layout5.png|thumb|none|200px|<p style="font-weight: bold; text-align: center">Layout 5</p> <p style="font-weight: bold;">Module:</p> Property Top: Picture Slider<br><br>
Offer: Price Calendar, Booking Button/Selector<br><br>
Property Bottom: Description 2]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:layout6.png|thumb|none|200px|<p style="font-weight: bold; text-align: center">Layout 6</p> <p style="font-weight: bold;">Module:</p> Property Top: Description 1<br><br>
Offer: Price Booking Button/Selector, Price Table<br><br>
Room Bottom: Picture Slider, Description]] </li>
</ul></div>
== '''3. Layout individualisieren''' ==
Gehen sie zu KONFIGURATION->BUCHUNGSSEITE -> DESIGN->LAYOUT. Wählen sie das Layout und klicken sie auf "Anpassen".
== Wählen sie, was sie anzeigen möchten ==
Die responsive Buchungsseite besteht aus Abschnitten:
"Offerte" enthält die Standardofferte einer Einheit
*Eine Offerte wird immer angezeigt
*Zusätzliche Offerten (z.B. für nicht erstattbare Preise oder Pakete) sind optional
*Alle anderen Abschnitte sind optional.
[[Image:sections.jpg|200px|link=]]
[[Media:sections.jpg|view large]]
Für jeden Abschnitt können sie aus verschiedenen Module wählen.
'''Module Unterkunft'''
<gallery>
File:Property_slider.png|<p style=" text-align: center"><strong>Unterkunft Slider</strong><br>[[Media:Property_slider.png|view large]]</p>
File:Property_description.png|<p style=" text-align: center"><strong>Unterkunft Beschreibung</strong><br>[[Media:Property_description.png|view large]]</p>
</gallery>
'''Module Einheit'''
<gallery>
File:Room_slider.png|<p style=" text-align: center"><strong>Einheit Slider</strong><br>[[Media:Room_slider.png|view large]]</p>
File:Room_picture.png|<p style=" text-align: center"><strong>Einheit Bild </strong><br>[[Media:Room_picture.png|view large]]</p>
File:Room_calendar.png<p style=" text-align: center"><strong>Einheit Kalender</strong><br>[[Media:Room_calendar.png|view large]]</p>
File:Room_description.png|<p style=" text-align: center"><strong>Einheit Beschreibung</strong><br>[[Media:Room_description.png|view large]]</p>
</gallery>
'''Module Offerten'''
<gallery>
File:Offer_slider.png|<p style=" text-align: center"><strong>Offerte Slider</strong><br>[[Media:Offer_slider.png|view large]]</p>
File:Offer_picture.png|<p style=" text-align: center"><strong>Offerte Bild</strong><br>[[Media:Offer_picture.png|view large]]</p>
File:Room_calendar.png|<p style=" text-align: center"><strong>Offerte Kalender</strong><br>[[Media:Room_calendar.png|view large]]</p>
File:Pricetable.png|<p style=" text-align: center"><strong>Preistabelle </strong><br>prices will only display if booking of multiple rooms is not allowed<br>[[Media:Pricetable.png|view large]]</p>
File:Pricecalendar.png|<p style=" text-align: center"><strong>Preistabelle und Kalender </strong><br>prices will only display if booking of multiple rooms is not allowed<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> (Buchung mehrerer Einehiten)<br>[[Media:Select.png|view large]]</p>
File:Offer_description.png|<p style=" text-align: center"><strong>Offerte Beschreibung</strong><br>[[Media:Offer_description.png|view large]]</p>
</gallery>
HINWEIS: Für Offerten können die Module Kalender und Preistabelle und Kalender nicht gleichzeitig genutzt werden.
Platzierung: Module sind in Zeilen angeordnet. Jeder Abschnitt kann mehrere Zeilen haben.
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 2 ("Footer" on the adaptive booking page)
*Property Description - Booking Page 1 ("Property Summary Description " on the adaptive booking page)
*Property Description - Booking Page 3 ("Price Calendar Header " on the adaptive booking page)
Go to SETTINGS->BOOKING PAGE->PAGE DESIGN->CONTENT and enter the content of the module
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.
[[Category:Buchungsseite_und_Widgets]]
[[Category:Anleitungen]]
[[Category:Buchungsseite]]
== '''Diese Funktion läuft momentan als Beta Test. Wenn sie testen möchten, senden sie uns bitte ein Support Ticket.''' ==
Diese Seite erklärt, wie sie die responsive Version der Buchungsseite einrichten.
Durch das modulare Design haben sie volle Kontrolle über das Layout. Es stehen ihnen einige Standardlayouts zur Verfügung die sie aktiveren könen.
== '''1. Ativieren'''==
Gehen sie zu KONFIGURATION->BUCHUNGSSEITE und wählen sie "Version Buchungsseite"= Responsive. Damit aktivieren sie Layout 1.
Wenn sie von der adaptiven auf die responsive Version wechseln müssen sie die Bilder erneut zuordnen. Gehen sie zu KONFIGURATION->BUCHUNGSSEITE ->BILDER. Wählen die die Einheit, dann "Offerte 1" und ordnen das/die Bilder zu, die sie zeigen möchten. Wenn sie mehr als eine Offerte aktiviert haben, wiederholen sie das für jede Offerte.
HINWEIS: Wenn sie Version Buchungsseite"= Responsive auswählen ändert sich die Buchungsseite auf ihrer Website. Wenn sie nur testen wollen, können sie dies tun, in dem sie &version=3 zur URL ihrer Buchungsseite hinzufügen. Um die verschiedenen Layouts zu sehen fügen sie zu Nummer hinzu. z.B. &version=3&layout=2 zeigt Layout 2. Alternativ können sie ihre Unterkunft zum Testen kopieren. Wenn sie das tun stellen sie sicher, dass alle Channel Manager Verbindungen in der kopierten Unterkunft deaktiviert sind. Für die zusätzlichen Einheiten fällt die normale Gebühr an.
== '''2. Anderes Layou auswählen'''==
Gehen sie zu KONFIGURATION->BUCHUNGSSEITE-> DESIGN->LAYOUT und wählen sie das Layout, welches sie nutzen möchten.
<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;">Module:</p>
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;">Module:</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;">Module:</p>
Offer: Price Table, Booking Button/Selector, Picture Slider, Description 2<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;">Module:</p>vertical-align: top;
Room Top: Picture Slider<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:layout5.png|thumb|none|200px|<p style="font-weight: bold; text-align: center">Layout 5</p> <p style="font-weight: bold;">Module:</p> Property Top: Picture Slider<br><br>
Offer: Price Calendar, Booking Button/Selector<br><br>
Property Bottom: Description 2]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:layout6.png|thumb|none|200px|<p style="font-weight: bold; text-align: center">Layout 6</p> <p style="font-weight: bold;">Module:</p> Property Top: Description 1<br><br>
Offer: Price Booking Button/Selector, Price Table<br><br>
Room Bottom: Picture Slider, Description]] </li>
</ul></div>
== '''3. Layout individualisieren''' ==
Gehen sie zu KONFIGURATION->BUCHUNGSSEITE -> DESIGN->LAYOUT. Wählen sie das Layout und klicken sie auf "Anpassen".
== Wählen sie, was sie anzeigen möchten ==
Die responsive Buchungsseite besteht aus Abschnitten:
"Offerte" enthält die Standardofferte einer Einheit
*Eine Offerte wird immer angezeigt
*Zusätzliche Offerten (z.B. für nicht erstattbare Preise oder Pakete) sind optional
*Alle anderen Abschnitte sind optional.
[[Image:sections.jpg|200px|link=]]
[[Media:sections.jpg|view large]]
Für jeden Abschnitt können sie aus verschiedenen Module wählen.
'''Module Unterkunft'''
<gallery>
File:Property_slider.png|<p style=" text-align: center"><strong>Unterkunft Slider</strong><br>[[Media:Property_slider.png|view large]]</p>
File:Property_description.png|<p style=" text-align: center"><strong>Unterkunft Beschreibung</strong><br>[[Media:Property_description.png|view large]]</p>
</gallery>
'''Module Einheit'''
<gallery>
File:Room_slider.png|<p style=" text-align: center"><strong>Einheit Slider</strong><br>[[Media:Room_slider.png|view large]]</p>
File:Room_picture.png|<p style=" text-align: center"><strong>Einheit Bild </strong><br>[[Media:Room_picture.png|view large]]</p>
File:Room_calendar.png<p style=" text-align: center"><strong>Einheit Kalender</strong><br>[[Media:Room_calendar.png|view large]]</p>
File:Room_description.png|<p style=" text-align: center"><strong>Einheit Beschreibung</strong><br>[[Media:Room_description.png|view large]]</p>
</gallery>
'''Module Offerten'''
<gallery>
File:Offer_slider.png|<p style=" text-align: center"><strong>Offerte Slider</strong><br>[[Media:Offer_slider.png|view large]]</p>
File:Offer_picture.png|<p style=" text-align: center"><strong>Offerte Bild</strong><br>[[Media:Offer_picture.png|view large]]</p>
File:Room_calendar.png|<p style=" text-align: center"><strong>Offerte Kalender</strong><br>[[Media:Room_calendar.png|view large]]</p>
File:Pricetable.png|<p style=" text-align: center"><strong>Preistabelle </strong><br>prices will only display if booking of multiple rooms is not allowed<br>[[Media:Pricetable.png|view large]]</p>
File:Pricecalendar.png|<p style=" text-align: center"><strong>Preistabelle und Kalender </strong><br>prices will only display if booking of multiple rooms is not allowed<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> (Buchung mehrerer Einehiten)<br>[[Media:Select.png|view large]]</p>
File:Offer_description.png|<p style=" text-align: center"><strong>Offerte Beschreibung</strong><br>[[Media:Offer_description.png|view large]]</p>
</gallery>
HINWEIS: Für Offerten können die Module Kalender und Preistabelle und Kalender nicht gleichzeitig genutzt werden.
Platzierung: Module sind in Zeilen angeordnet. Jeder Abschnitt kann mehrere Zeilen haben.
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 2 ("Footer" on the adaptive booking page)
*Property Description - Booking Page 1 ("Property Summary Description " on the adaptive booking page)
*Property Description - Booking Page 3 ("Price Calendar Header " on the adaptive booking page)
Go to SETTINGS->BOOKING PAGE->PAGE DESIGN->CONTENT and enter the content of the module
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.
