BuchungsmaschineMotorkonfiguration

Anpassung des Erscheinungsbilds Ihrer Buchungsmaschine

Der dreistufige Stil-Assistent hinter Ihrer Direktbuchungsseite: fünf Hero-Layouts, vier Möglichkeiten zur Darstellung der Zimmer, fünf Farben und eine Live-Vorschau, die Ihre eigenen Zimmerpreise anzeigt, während Sie sich entscheiden.

Wo Sie es finden können
Booking EngineCustomizations
Genehmigung erforderlich
booking-engine.customization.edit
Zuletzt überprüft
15. August 2026

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

Der Bildschirm „Anpassungen“. Eine Live-Vorschau der Buchungsseite füllt die linke Spalte aus und zeigt das Hero-Foto des The Marlowe Hotel, eine Suchleiste sowie die Karten „room“. Auf der rechten Seite befindet sich eine Karte mit der Überschrift „Create: Your Own Style“, die eine dreiteilige Leiste mit den Bezeichnungen „Hero-Stil“, „Zimmerlayout“ und „Branding“, die fünf Auswahlmöglichkeiten für den Hero-Stil sowie die Schaltflächen „Zurück“ und „Weiter“ enthält. Eine zweite Karte darunter enthält die Registerkarten „Custom Codes“, „Google Analytics“ und „Facebook Pixel“.
Zwei Spalten. Jede Änderung auf der rechten Seite aktualisiert die Vorschau auf der linken Seite, noch bevor etwas gespeichert wird.
  1. 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.
  2. Die Schrittleiste. „Hero“-Stil, Zimmerlayout, Branding. Klicken Sie auf einen der drei Punkte, um direkt dorthin zu springen.
  3. Der Schrittinhalt. Die Auswahlmöglichkeiten für den jeweils geöffneten Schritt.
  4. „Zurück“ und „Weiter“. Eine praktische Hilfe, um die drei Schritte der Reihe nach durchzuarbeiten. Im letzten Schritt wird „Weiter“ zu „Save changes“.
  5. 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

Das Live-Vorschau-Fenster, dargestellt als kleines Browserfenster mit der Überschrift „yourhotel.prostay.app“. Es zeigt das Titelbild mit dem Slogan „Direct booking – Bestpreisgarantie“, die Überschrift „The Marlowe Hotel“, eine Check-in- und Check-outleiste mit den Angaben „Sa, 22. Aug.“ und „Mo, 24. Aug.“ für 2 Erwachsene sowie eine Schaltfläche „Check availability“. Darunter befinden sich drei „rooms available“-Felder: ein Standard Double für 240 $ pro Nacht, ein Deluxe King für 310 $ pro Nacht sowie ein Feld „Your stay“ mit einem Gesamtpreis von 480 $ für zwei Nächte.
Die Vorschau zeigt Ihre eigenen Zimmer zu Ihren eigenen Preisen in Ihrer eigenen Währung an.

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

Die dreistufige Leiste am oberen Rand der Karte „Create: Ihr eigener Stil“, wobei Schritt 1 „Hero-Stil“ blau ausgefüllt ist und „active“ sowie die Schritte 2 „Raumlayout“ und 3 „Branding“ noch grau sind.
Drei Schritte – und Sie können direkt zu jedem einzelnen springen.

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.

Schritt 1, „Hero“-Stil, mit dem Hinweis: „Wählen Sie das Layout für den Hero-Bereich der Buchungsseite und das Verfügbarkeitsformular aus.“ Es folgen fünf Auswahlmöglichkeiten: „Cinematic“, „Foto in voller Breite mit schwebender Suchleiste“, blau umrandet als aktuelle Auswahl; Glass console, „Mattes Feld mit dem Formular innerhalb des Fotos“; Spotlight pill, „Zentrierte Überschrift mit abgerundeter Suchschaltfläche“; Bento, „Modulare Kacheln mit Standort und Preis“; sowie Diagonal, „Schräg angeordnetes Markenfeld mit dem Formular“.
Fünf Hero-Layouts. Die Wahl bestimmt, wo ein Gast die Datumsfelder vorfindet.
Hero-StilAuswirkung 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

Schritt 2, Zimmerlayout, Hinweis: „Wählen Sie aus, wie die Zimmerliste und der Warenkorb unterhalb des Hero-Bereichs angeordnet werden sollen.“ Es folgen vier Auswahlmöglichkeiten: Sidebar, „Breite Karten mit einer feststehenden Zusammenfassung auf der rechten Seite“; Gallery grid, „Karten mit Bild oben in einem Raster + feststehende Zusammenfassung“; Compact list, „Dichte Reihen zum schnellen Überfliegen + feststehende Zusammenfassung“; und Showcase, „Karten in voller Breite mit einer feststehenden Warenkorb-Leiste am unteren Rand“.
Vier Möglichkeiten, die Zimmerliste anzuordnen. Bei allen vier wird die laufende Gesamtzahl auf dem Bildschirm angezeigt.

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.

ZimmerlayoutAuswirkungen 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

Schritt 3, „Branding“, lautete: „Ihre Farben gelten für den Hero-Bereich, die ‚room‘-Karten, Schaltflächen und Formulare.“ Es folgen fünf Farbfelder, jeweils mit einem Hex-value, einem Farbmuster und einer Schaltfläche zum Zurücksetzen: Brand color #1643E0, Background color #ffffff, Background section color #f8fafc, Headline text #0f172a und General text & icons color #64748b. Die Schaltflächen „Zurück“ und „Save changes“ befinden sich am unteren Rand.
Fünf Farben, jeweils mit einer Schaltfläche zum Zurücksetzen auf die Prostay-Standardeinstellung.

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.

FeldWas 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

Die Frage „Fotos Ihres Objekts auf der Buchungsseite anzeigen?“ mit der Auswahl „Ja“ und daneben „Nein“.
Ein Auswahlfeld entscheidet darüber, ob die Zimmerkarten überhaupt Fotos enthalten.

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.

Häufig gestellte Fragen

  • Beeinflussen diese Einstellungen das Buchungs-Widget auf meiner eigenen Website?

    Nein. Das Widget verfügt über einen eigenen Typ, eine eigene Sprache und eigene Farben, die auf dem Bildschirm „Website Widgets“ festgelegt werden. Der Hero-Stil, das Zimmerlayout und die fünf Farben gelten hier für die Buchungsseite, zu der das Widget einen Gast weiterleitet. Siehe „Ein Buchungs-Widget auf Ihrer Website einbinden“.

  • Kann ich eine Vorschau eines „Hero“-Stils anzeigen, ohne ihn zu speichern?

    Ja, und genau so ist die Nutzung des Bildschirms vorgesehen. Bei jedem Klick wird die Vorschau sofort neu gezeichnet, ohne dass etwas gespeichert wird. Wenn Sie den Bildschirm verlassen, ohne zu speichern, bleibt Ihre Live-Buchungsseite unverändert.

  • Warum zeigt die Vorschau einen Aufenthalt in der nächsten Woche anstelle von heute Abend an?

    Es berechnet den Preis für einen Beispielaufenthalt von zwei Nächten in einer Woche im Voraus, sodass die Daten stets wie bei einer echten Suche aussehen. Die angezeigten Übernachtungspreise sind Ihre eigenen, sodass sich der Gesamtbetrag ändert, sobald sich Ihre Preise ändern.

  • Was geschieht mit dem Layout, wenn ich später eine Unterkunftsart hinzufüge?

    Hier muss nichts überarbeitet werden. Die Zimmerliste wird bei jeder Suche eines Gastes aus Ihren Unterkunftstypen generiert, sodass ein neuer Typ in dem von Ihnen gewählten Layout erscheint. Es lohnt sich, diesen Bildschirm erneut zu öffnen, um zu überprüfen, ob das Layout auch mit der zusätzlichen Karte noch gut lesbar ist.

War dieser Artikel hilfreich?

Verwandte Artikel

Haben Sie immer noch Schwierigkeiten?

Der Support beantwortet Ihre Anfragen auch direkt in der App. Wenn Sie also bereits angemeldet sind, erhalten Sie dort schneller eine Antwort. Andernfalls teilen Sie uns bitte den Namen der Immobilie mit und beschreiben Sie, was Sie versucht haben.