Kategorie:Buchungsseite: Unterschied zwischen den Versionen

Aus Beds24 Wiki
Zur Navigation springen Zur Suche springen
Zeile 4: Zeile 4:
 
[[Category:Buchungsseite_und_Widgets]]
 
[[Category:Buchungsseite_und_Widgets]]
 
[[Category:Anleitungen]]
 
[[Category:Anleitungen]]
  Diese Seite ist über das Menue KONFIGURATION -> BUCHUNGSSEITE  
+
  ''Diese Seite ist über das Menue KONFIGURATION -> BUCHUNGSSEITE  
 +
''
  
'''Buchungsseite einbetten:'''
+
Sie können das Erscheinungsbild an den Look ihrer Website anpassen.
  
Sie können das Erscheinungsbild an den Look ihrer Website anpassen. Klicken sie auf "Speichern" um zu sehen, wie die das geänderte Widget aussieht. Wenn sie mit dem Ergebnis zufrieden sind, clicken sie auf "Code generieren" kopieren den Code und fügen ihn im Quellcode Ihrer Website dort ein, wo sie das Widget anzeigen möchten.
 
  
 +
Nutzen sie die Auswahl um die Unterkunft auszuwählen. Wenn sie mehrere Unterkünfte haben wähl "Alle" alle Unterkünfte aus
  
 +
Es stehen zwei Versionen zur Verfügung:
  
Sie können Ihre Buchungsseite komplett individualisieren:
+
== Adaptive Buchungsseite ==
 
+
Beispiele:  
*Mehrere Sprachen aktivieren -  KONFIGURATION -> BENUTZERKONTO -> SPRACHEN
 
*Header (2) (Bereich oben)  oder Footer (3) (unten)  einfügen  - KONFIGURATION -> BUCHUNGSSEITE -> DESIGN -> INHALT
 
*Farben und Schriften an Ihre Website anpassen -  KONFIGURATION -> BUCHUNGSSEITE -> DESIGN -> STYLE
 
*Bilder  und Beschreibungen für Einheiten (5) einfügen - KONFIGURATION -> BUCHUNGSSEITE -> BILDER zum hochladen, KONFIGURATION -> BUCHUNGSSEITE -> EINHEITEN INHALT  zum Einfügen
 
*Zusätzliche Preiszeilen (5) einfügen um z.B. Pakete anzubieten - KONFIGURATION -> BUCHUNGSSEITE -> EINHEITEN  INHALT-> OFFERTEN
 
*Beschreibungen einfügen -  KONFIGURATION -> BUCHUNGSSEITE -> EINHEITEN INHALT
 
*Festlegen, welche Informationen Gäste eingeben -KONFIGURATION -> UNTERKÜNFTE->BUCHUNGSFRAGEN
 
*Text der Buchungsbestätigungen individualisieren - KONFIGURATION ->UNTERKÜNFTE->-> BUCHUNGSBESTÄTIGUNGEN
 
*Rabatte über eine Marketingspalte (4) anzeigen  - KONFIGURATION -> BUCHUNGSSEITE -> DESIGN -> LAYOUT zum Aktivieren,  - KONFIGURATION -> BUCHUNGSSEITE -> EINHEITEN  INHALTum Inhalte einzufügen
 
*
 
  
 
[[File:Secure-Online-Booking.png]]
 
[[File:Secure-Online-Booking.png]]
  
 +
[[Adaptive Buchungsseite|Hier]] finden sie eine Anleitung für die adaptive Buchungsseite
 +
== Responsive Buchungsseite ==
 +
Beispiele:
  
 +
<div><ul>
 +
<li style="display: inline-block; vertical-align: top;"> [[File:layout1.png|thumb|none|160px]] </li>
 +
<li style="display: inline-block; vertical-align: top;"> [[File:layout2.png|thumb|none|160p|]] </li>
 +
<li style="display: inline-block; vertical-align: top;"> [[File:layout3.png|thumb|none|160px]] </li>
 +
<li style="display: inline-block; vertical-align: top;"> [[File:layout4.png|thumb|none|160px]] </li>
 +
<li style="display: inline-block;vertical-align: top;"> [[File:layout5.png|thumb|none|160px]] </li>
 +
<li style="display: inline-block; vertical-align: top;"> [[File:layout6.png|thumb|none|160px]] </li>
 +
</ul></div>
  
== '''Weitere Einstellungen und Optionen''' ==
+
[[Responsive Buchungsseite|Hier]] finden sie eine Anleitung für die responsive Buchungsseite
 
 
== Fixen Text austauschen==
 
 
 
Über KONFIGURATION->BUCHUNGSSEITE->DEVELOPER"Individueller Text ".
 
 
 
== "Mehrere Buchen" ==
 
 
 
Nutzen sie den Selektor in  KONFIGURATION->BUCHUNGSSEITE->DESIGN->LAYOUT
 
 
 
== Hover Text deaktivieren ==
 
Fügen sie dieses Script in KONFIGURATION->BUCHUNGSSEITE->DEVELOPER "HTML " ein.
 
 
 
<pre>
 
<script>
 
$(document).ready(function() {
 
  var $title = $("td,div,span");
 
  $.each($title, function(index, value) {
 
    $(this).tooltip({
 
      disabled:true
 
    }); 
 
  });
 
});
 
</script>
 
</pre>
 
 
 
 
 
== '''CSS'''==
 
Webdesigner und Nutzer CSS-Kenntnissen können individuelles CSS benutzen, um den Look der Buchungsmaske zu verändern. CSS kann in KONFIGURATION->BUCHUNGSSEITE->DESIGN->DEVELOPER "Individuelles CSS " eingefügt werden.
 
 
 
== Name Einheit größer==
 
/*code for bigger room name*/
 
 
 
.at_roomnametext{
 
 
 
font-size: 14px /*für größeren Text nehmen sie eine größere Zahl*/
 
 
 
}
 
 
 
== Hintergrundbild  ==
 
Laden sie das Hintergrundbild in KONFIGURATION->BUCHUNGSSEITE->BILDER hoch. Ersetzen sie  https://www.beds24.com/pic/p0000/2049/04.jpg mit der URL des hochgeladenen Hintergrundbildes.
 
 
 
/*code fo use an image as background*/
 
 
 
body {
 
background-image:url(https://www.beds24.com/pic/p0000/2049/04.jpg);
 
}
 
 
 
== Schatten um die Buchungsseite ==
 
 
 
/*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;
 
}
 
 
 
== Buchungsseite mit abgerundeten Ecken ==
 
 
 
/*code for rounded corners*/
 
<nowiki>#</nowiki>bookingpage {
 
 
 
border-radius: 7px;
 
 
 
-webkit-border-radius: 7px;
 
 
 
-moz-border-radius: 7px;
 
}
 

Version vom 27. Oktober 2015, 19:41 Uhr

Diese Seite ist über das Menue KONFIGURATION -> BUCHUNGSSEITE 

Sie können das Erscheinungsbild an den Look ihrer Website anpassen.


Nutzen sie die Auswahl um die Unterkunft auszuwählen. Wenn sie mehrere Unterkünfte haben wähl "Alle" alle Unterkünfte aus

Es stehen zwei Versionen zur Verfügung:

1 Adaptive Buchungsseite

Beispiele:

Secure-Online-Booking.png

Hier finden sie eine Anleitung für die adaptive Buchungsseite

2 Responsive Buchungsseite

Beispiele:

  • Layout1.png
  • Layout2.png
  • Layout3.png
  • Layout4.png
  • Layout5.png
  • Layout6.png

Hier finden sie eine Anleitung für die responsive Buchungsseite