Buchungsseite Layout: Unterschied zwischen den Versionen

Aus Beds24 Wiki
Zur Navigation springen Zur Suche springen
(Der Seiteninhalt wurde durch einen anderen Text ersetzt: „Category:Buchungsseite Wählen sie das Layout, welches sie nutzen möchten.“)
Zeile 1: Zeile 1:
[[Category:Einstellungen]]
 
[[Category:Buchungsseite_und_Widgets]]
 
[[Category:Anleitungen]]
 
 
[[Category:Buchungsseite]]
 
[[Category:Buchungsseite]]
  
== '''Diese Funktion läuft momentan als Beta Test. Wenn sie testen möchten, senden sie uns bitte ein Support Ticket.''' ==
+
Wählen sie das Layout, welches sie nutzen möchten.
 
 
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. Aktivieren'''==
 
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>
 
Offerte:  Slider, Beschreibung 1 , Kalender,  Button/Selector, Beschreibung 2<br><br>
 
Unterkunft Unten: Beschreibung 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> Unterkunft Oben: Slider<br><br>
 
Offerte: Button/Selector, Preistabelle<br><br>
 
Unterkunft Unten: Beschreibung 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>
 
Offerte:  Preistabelle, Button/Selector,  Slider, Beschreibung 2<br><br>
 
Unterkunft Unten: Beschreibung 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>
 
Unterkunft Oben: Slider<br><br>
 
Offerte:  Bild, Beschreibung 1, Kalender,  Button/Selector, Beschreibung 2<br><br>
 
Unterkunft Unten: Beschreibung 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> Unterkunft Oben: Slider<br><br>
 
Offerte:  Kalender und Preistabelle,  Button/Selector<br><br>
 
Unterkunft Unten: Beschreibung 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> Unterkunft Oben: Beschreibung 1<br><br>
 
Offerte: Button/Selector, Preistabelle<br><br>
 
Eineheit Unten: Slider, Beschreibung]] </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: Jede Zeile hat 12 Spalten. Die Breite eines Moduls ist über die Spalten definiert.
 
[[Image:row.png|600px|link=]]
 
[[Media:row.png|view large]]
 
 
 
 
 
In alle "Beschreibung" Module kann Text oder HTLM eingefügt werden.
 
 
 
Klicken sie auf  "Manage" um die Einstellungen eines Moduls zu ändern. Für alle Module können sie einstellen, ob sie immer sichtbar sind oder sich über einen Link öffnen.
 
 
 
Wenn sie eines oder mehrere dieser Module aktiviert haben,:
 
*Einheit Beschreibung 1  ("Einheit mehr Details"  der adaptiven Buchungsseite)
 
*Offerte Beschreibung 1 ("Offerte Zusammenfassung" der adaptiven Buchungsseite)
 
*Offerte Beschreibung  2 ("Offerte mehr Details" der adaptiven Buchungsseite)
 
*Marketing Spalte
 
Gehen sie  KONFIGURATION->BUCHUNGSSEITE->EINHEIT INHALT um den Inhalt des Moduls anzulegen oder zu ändern.
 
 
 
Wenn sie eines oder mehrere dieser Module aktiviert haben,:
 
*Unterkunft Beschreibung 1 ("Header" der adaptiven Buchungsseite)
 
*Unterkunft Beschreibung  2 ("Footer"der adaptiven Buchungsseite)
 
*Unterkunft Beschreibung - Buchungsseite 1 ("Kurzbeschreibung Unterkunft " der adaptiven Buchungsseite)
 
*Unterkunft Beschreibung  - Buchungsseite 3 ("Preiskalender Header Header " der adaptiven Buchungsseite)
 
 
 
 
 
Gehen sie  KONFIGURATION->BUCHUNGSSEITE->DESIGN->INHALT um den Inhalt des Moduls anzulegen oder zu ändern.
 
 
 
== Bilder ==
 
In KONFIGURATION->BUCHUNGSSEITE->BILDER können sie Bilder hochladen und den Modulen zuordnen.
 
 
 
== Farben und Schriften==
 
Farben und Schriften  KONFIGURATION->BUCHUNGSSEITE->DESIGN->STYLE geändert werden.
 
 
 
== Verhalten ==
 
Änderungen zum Öffnen und Schließen der Buchungsseite können in  KONFIGURATION->BUCHUNGSSEITE->DESIGN->VERHALTEN vorgenommen werden
 
 
 
== Inhalt==
 
Zusätzliche Informationen können der Buchungsseite in KONFIGURATION->BUCHUNGSSEITE->DESIGN->INHALT hinzugefügt werden. Hier können sie auch die Warnhinweise ändern, die erscheinen, wenn eine Einheit nicht verfügbar ist.
 
 
 
== Developer ==
 
Funktionen für Entwickler sind in  KONFIGURATION->BUCHUNGSSEITE->DEVELOPER verfügbar.
 
 
 
*Wenn sie mit CSS arbeiten können, können sie ihre eigenen Styles anlegen
 
*Scripts z.B. für Google Analytics können eingefügt werden
 
*Alle fixen Texte auf der Buchungsseite können ausgetauscht werden
 
 
 
[https://wiki.beds24.com/index.php?title=Category:Developers Hier] finden sie weitere Optionen.
 
 
 
== Von adaptiver Version auf  responsive Version wechseln ==
 
Die meisten Einstellungen werden automatisch übernommen.
 

Version vom 27. Oktober 2015, 19:40 Uhr


Wählen sie das Layout, welches sie nutzen möchten.