Dieser Bildschirm bestimmt, was ein Gast sieht, wenn er auf Ihrer Direktbuchungsseite landet. Nichts hier verändert Ihre Preise, Ihre Verfügbarkeit oder Ihre Regeln: Es verändert lediglich das Layout, in dem dem Gast diese Informationen angezeigt werden, sowie die Farben, vor denen diese Zahlen erscheinen. Alle von Ihnen getroffenen Auswahlen werden in einer Vorschau Ihres eigenen Hotels dargestellt, bevor Sie sie bestätigen, sodass Sie die Auswirkungen auf echte Zimmernamen und echte Preise sehen können und nicht nur auf einem Beispielbild.
Aufbau des Bildschirms
- Die Live-Vorschau. Ihre Buchungsseite in ihrer aktuellen Form, die bei jedem Klick neu gezeichnet wird. Sie bleibt beim Scrollen oben in der Spalte stehen.
- Die Schrittleiste. „Hero“-Stil, Zimmerlayout, Branding. Klicken Sie auf einen der drei Punkte, um direkt dorthin zu springen.
- Der Schrittinhalt. Die Auswahlmöglichkeiten für den jeweils geöffneten Schritt.
- „Zurück“ und „Weiter“. Eine praktische Hilfe, um die drei Schritte der Reihe nach durchzuarbeiten. Im letzten Schritt wird „Weiter“ zu „Save changes“.
- Der Code und die Tracking-Karte. Benutzerdefinierter Code, Meta-Tags, „Google Analytics“ und das Facebook-Pixel. Diese Hälfte des Bildschirms ist Gegenstand eines eigenen Artikels: Einfügen Ihres eigenen Codes und Ihrer Meta-Tags.
Was Ihnen die Vorschau tatsächlich anzeigt
Die Vorschau ist kein Bild eines beliebigen Hotels. Das Hauptfoto ist Ihr Objekt-Kopfzeile, der Name und der Standort stammen aus Ihrem Objekt-Eintrag, und die Zimmerkarten zeigen Ihre Unterkunftstypen zu Ihren eigenen Übernachtungspreisen in Ihrer eigenen Währung. Das ist wichtiger, als es klingt: Es bedeutet, dass Sie eine Farbe anhand der tatsächlichen Preise beurteilen, die ein Gast sehen wird, und ein Zimmername, der länger ist, als auf die Karte passt, wird hier angezeigt und nicht erst in einer Gästebeschwerde.
Der angezeigte Aufenthalt ist ein Beispiel, keine Buchung. Es wird ein Aufenthalt von zwei Nächten eine Woche ab heute ausgewählt, damit die Daten plausibel bleiben, und der Gesamtbetrag wird anhand Ihrer Preise jedes Mal neu berechnet, wenn Sie das Layout wechseln. In der Adressleiste wird als Platzhalter „ yourhotel.prostay.app “ angezeigt; Ihre eigentliche Buchungsseite befindet sich unter der Adresse, die in Ihren Widget-Einstellungen angegeben ist .
Schritt 1: Der Hero
Der Hero-Bereich befindet sich ganz oben auf der Buchungsseite: das Foto, Ihr Hotelname und das Feld, in das ein Gast seine Reisedaten eingibt. Die fünf Layouts unterscheiden sich darin, wo dieses Feld platziert ist – es ist der einzige Teil des Hero-Bereichs, der Einnahmen generiert.
| Hero-Stil | Auswirkung auf die Seite |
|---|---|
| Cinematic | Ein Foto in voller Breite, über dessen unterem Rand die Suchleiste schwebt. Die sicherste Wahl und diejenige, bei der Sie bleiben sollten, wenn Ihre Fotos überzeugend sind und Ihr Hotelname kurz ist. |
| Glass console | Das Suchformular befindet sich innerhalb des Fotos auf einem mattierten Feld. Die Reisedaten werden dabei weiter oben auf der Seite platziert als beim „Cinematic“-Layout, allerdings auf Kosten eines Drittels der Bildfläche. |
| Spotlight pill | Eine zentrierte Überschrift, wobei die Suche in einer einzigen, abgerundeten Schaltfläche zusammengefasst ist. Das leichteste der fünf Layouts und dasjenige, das Ihrer Überschrift am meisten Platz einräumt. |
| Bento | Modulare Kacheln, die Ihren Standort und Ihren niedrigsten Preis neben dem Foto anzeigen. Verwenden Sie diese Variante, wenn der Preis das entscheidende Argument ist, da dies die einzige Variante ist, die eine Zahl anzeigt, bevor der Gast nach unten scrollt. |
| Diagonal | Ein schräg angeordnetes Feld in Ihrer Markenfarbe, das das Formular neben dem Foto enthält. Das markenstärkste der fünf Designs und dasjenige, bei dem es am meisten darauf ankommt, dass Ihre Markenfarbe richtig gewählt ist. |
Schritt 2: Wie die Zimmer aufgelistet werden
Dies ist der Teil der Seite, auf dem ein Gast seine Auswahl trifft; passen Sie die Darstellung daher an die Anzahl der von Ihnen angebotenen Unterkunftstypen an, anstatt danach zu entscheiden, welche Variante im leeren Zustand am besten aussieht.
| Zimmerlayout | Auswirkungen auf die Seite |
|---|---|
| Sidebar | Breite Karten, die sich über die gesamte Seite erstrecken, wobei die laufende Gesamtzahl rechts angezeigt wird. Bis zu etwa sechs Unterkatzugängen ist die Übersicht gut lesbar; bei mehr muss der Gast weit scrollen. |
| Gallery grid | Karten mit Bildern oben in einem Raster, die Gesamtzahl weiterhin rechts. Die fotolastigste der vier Varianten und diejenige, die am meisten darunter leidet, wenn ein Typ kein Foto hat. |
| Compact list | Dichte Reihen, die zum Überfliegen gedacht sind. Die richtige Wahl für ein Objekt mit einem Dutzend Zimmertypen, die falsche jedoch für ein Boutique-Hotel mit nur drei, da ein kleines Angebot dadurch dürftig wirkt. |
| Showcase | Karten in voller Breite, wobei die Gesamtsumme in einen Balken am unteren Bildschirmrand verlagert wurde. Das einzige Layout, das die gesamte Breite für den Raum selbst freigibt, weshalb es sich besonders für Suiten und Villen eignet. |
Bei drei der vier Layouts bleibt die Zusammenfassung in einem feststehenden Feld auf der rechten Seite, während das vierte Layout sie in eine feststehende Leiste am unteren Rand verlagert. In beiden Fällen kann der Gast sehen, was er ausgewählt hat und wie viel es kostet, ohne zurückscrollen zu müssen – und genau das verhindert, dass eine Buchung mit mehreren Zimmern auf halbem Weg abgebrochen wird.
Schritt 3: Ihre fünf Farben
Klicken Sie auf ein Hex-Feld, um eine Farbauswahl zu öffnen, oder geben Sie einen Hex-Wert direkt ein. Das Quadrat neben jedem Feld zeigt die von Ihnen gewählte Farbe an; die blaue Schaltfläche daneben setzt das Feld auf die Prostay-Standardeinstellung zurück, die nicht unbedingt dem Wert entspricht, mit dem Sie die Sitzung begonnen haben.
| Feld | Was es einfärbt und auf welche Standardeinstellung es zurückgesetzt wird |
|---|---|
| Brand color | Die Kopfzeile und alle Hauptschaltflächen, einschließlich „Check availability“ und „Continue to checkout“. Dies ist das Feld, auf dem weißer Text gut lesbar bleiben muss. Wird auf „#1643E0“ zurückgesetzt. |
| Background color | Die Seite, die hinter allen anderen Elementen liegt. Wird auf „#ffffff“ zurückgesetzt. Alles, was deutlich dunkler als ein helles Grau ist, wird mit den Raumfotos konkurrieren, deren Farbe Sie nicht ändern können. |
| Background Section Color | Die abwechselnden Streifen, die einen Abschnitt der Seite vom nächsten trennen, sowie die Füllfarbe hinter der Zusammenfassung. Wird auf „#F1F4FE“ zurückgesetzt. Wenn Sie diese Farbe an die Hintergrundfarbe anpassen, wirkt die Seite wie ein einziger langer Block. |
| Headline text | Abschnittsüberschriften und Seitentitel. Wird auf „#1643E0“ zurückgesetzt, sodass die Überschriften standardmäßig der Markenfarbe entsprechen. Wählen Sie stattdessen ein fast schwarzes Farbton, falls Ihre Markenfarbe hell ist. |
| General text & icons color | Lauftext, Feldbezeichnungen und Symbole. Wird auf „#606576“ zurückgesetzt. Dieses Feld entscheidet darüber, ob ein Gast Ihre Stornierungsbedingungen lesen kann; wählen Sie daher einen dunklen Farbton, der sich vom Hintergrund abhebt. |
Zimmerfotos deaktivieren
Dieses Optionsfeld befindet sich auf der Registerkarte „Custom Codes“ in der Karte unterhalb des Assistenten, was ein ungewöhnlicher Ort dafür ist, da es sich um eine gestalterische Entscheidung und nicht um eine programmtechnische handelt. Stellen Sie es auf „No“ ein, und die Zimmerkarten verzichten auf ihre Bilder und greifen stattdessen auf Text zurück: den Zimmernamen, die Beschreibung und den Preis. Das Hauptfoto bleibt in jedem Fall erhalten, da es aus Ihrer Objektüberschrift stammt und nicht aus Ihren Unterkunftstypen.
Es gibt einen guten Grund, diese Funktion zu deaktivieren. Wenn Ihre Unterkunftstypen keine Fotos enthalten oder nur einige davon, erzeugt ein fotobasiertes Layout eine Reihe von grauen Rechtecken neben den Einträgen, die Bilder enthalten, und ein Gast interpretiert dies als Zimmer, die Sie verbergen. Das Deaktivieren der Fotos, bis die Lücken gefüllt sind, wirkt absichtlich; sie aktiviert zu lassen, hingegen nicht.
Speichern und was ein Speichervorgang umfasst
Auf diesem Bildschirm befinden sich zwei Speichern-Schaltflächen, die beide dieselbe Funktion haben. „ Save changes “ am Ende des Assistenten und „Save “ unten rechts auf der Seite speichern beide den gesamten Bildschirm: den Hero-Stil, das Zimmerlayout, alle fünf Farben, das Foto-Auswahlfeld, jedes benutzerdefinierte Codefeld sowie die Analyse-IDs auf den beiden anderen Registerkarten. Sie müssen nicht beide Schaltflächen betätigen, und wenn Sie nur eine davon betätigen, bleibt die andere Hälfte nicht ungespeichert.
Ein erfolgreicher Speichervorgang zeigt „Successfully updated!“ an und lädt den gespeicherten Datensatz neu, sodass die Werte, die Sie anschließend sehen, diejenigen auf dem Server sind und nicht die in Ihrem Browser. Dieses Neuladen ist die Überprüfung, die es sich lohnt, durchzuführen: Wenn eine Speicherung den Server nicht erreichen kann, bleiben Ihre Änderungen ungespeichert auf dem Bildschirm, und Sie können die beiden Zustände daran unterscheiden, dass eine gespeicherte Seite vom Server zurückgeladen wird, anstatt dort zu bleiben, wo Sie sie verlassen haben.