Individuelles Design

Navigation: MenüOnlinebuchungTab Design&Vorschau
Sie können die Onlinebuchung (Buchungswidget) für Ihre Kunden individuell gestalten. Passen Sie Farben, die Schriftart und den Button an Ihr Corporate Design an. Es gibt zahlreiche Einstellungsmöglichkeiten – alles weitere können Sie mit Hilfe von CSS hinzufügen (z.B. Ihr Logo im Hintergrund).
Anpassungsmöglichkeiten:

1. Standard Design Anpassung

Navigation: MenüOnlinebuchungTab Design & VorschauBuchungswidget

Folgende Einstellungen stehen Ihnen hier zur Verfügung:

Aktionsfarbe
Wählen Sie die Farbe für Aktionselemente wie Buttons.
Titelfarbe
Wählen Sie die Hintergundfarbe der Titelleiste.
Beschriftung Buchung bestätigen
Hier können Sie die Beschriftung des „Verbindlich buchen“ Buttons festlegen.
Onlinedarstellung von Leistungen
Hier können Sie einstellen, wie Leistungen für Ihre Kunden bei der Onlinebuchung angezeigt werden sollen. Sie können beispielsweise für Leistungen den Preis oder die Dauer ausblenden.
Ausgeklappte Kategorie
Hier können Sie festlegen welche Servicekategorie beim Öffnen des Buchungswidgets ausgeklappt sein soll.
Overlayfarbe
Hier können Sie die Farbe des Overlays bestimmen, das sich beim Öffnen des Buchungswidgets als Hintergrund über Ihre Seite legt.
Schriftart
Hier können Sie die Schriftart auswählen, die im Buchungswidget verwendet werden soll. Lassen Sie dieses Feld leer, um die Standardschrift (Roboto) zu verwenden.
Allgemeine Designanpassungen

2. Erweiterte Designanpassung mit Hilfe von CSS

Navigation: MenüOnlinebuchungTab Design&VorschauBuchungswidgetCSS bearbeiten

Mithilfe von CSS können Sie Ihr Buchungswidget (Onlinebuchung) individuell anpassen. Sie können beliebige Texte ausblenden oder überschreiben, Ihr Logo hinzufügen oder ein Hintergrundbild einfügen. Hier sind Ihnen keine Grenzen gesetzt.

Wir haben Ihnen die am meisten genutzten CSS Anpassungen zusammengefasst:

1. Ihr eigenes Logo im Titel hinzufügen

Fügen Sie Ihr eigenes Logo in der Titelleiste hinzu
Anleitung

Schritt 1:
Kopieren Sie den Code unten und fügen sie Ihn hier ein:
Menü → Onlinebuchung → Tab Design&Vorschau → Buchungswidget → CSS bearbeiten

Schritt 2:
Löschen Sie die rote Beispiel-URL und fügen Sie Ihre URL zum Logo ein. (ACHTUNG: Löschen Sie nicht die Hochkomma)
Falls Ihr Logo zu groß oder zu klein dargestellt werden sollte, passen Sie den Zahlenwert in rot an.

Schritt 3 (optional):
Passen Sie die Titelfarbe an Ihr Logo an. (Die Titelfarbe können Sie ohne CSS im cituro Manager ändern.)

Logo Links in der Titelleiste:
html[locale^="de"] #BookingFrame[step="1"] #BookingHeader .caption{ visibility: hidden; } #BookingFrame[step="1"] #innerheader { background-image: url('https://www.cituro.com/help/wp-content/uploads/2019/08/Cituro_logodark-grey-bluehi_res.png'); background-position: center left 20px; background-repeat: no-repeat; background-size: 110px; }
Logo in der Mitte in der Titelleiste:
html[locale^="de"] #BookingFrame[step="1"] #BookingHeader .caption{ visibility: hidden; } #BookingFrame[step="1"] #innerheader { background-image: url('https://www.cituro.com/help/wp-content/uploads/2019/08/Cituro_logodark-grey-bluehi_res.png'); background-position: center center; background-repeat: no-repeat; background-size: 110px; }

2. Titeltext ändern

Titeltext ändern
Anleitung

Schritt 1:
Kopieren Sie den Code unten und fügen sie Ihn hier ein:
Menü → Onlinebuchung → Tab Design&Vorschau → Buchungswidget → CSS bearbeiten

Schritt 2:
Löschen Sie den roten Text und fügen Sie Ihren Wunschtext ein. (ACHTUNG: Löschen Sie nicht die Hochkomma)

html[locale^="de"] #BookingFrame[step="1"] #BookingHeader .caption{ visibility: hidden; } html[locale^="de"] #BookingFrame[step="1"] #BookingHeader .caption:before { content: 'Beispieltext'; visibility:visible; }

3. Mitarbeiter/Ressourcen in der Zusammenfassung entfernen

Mitarbeiter/Ressourcen entfernen
Anleitung

Kopieren Sie den Code unten und fügen sie Ihn hier ein:
Menü → Onlinebuchung → Tab Design&Vorschau → Buchungswidget → CSS bearbeiten

.SummaryBookingStep .summary > .clabel:nth-child(4){ display:none; }

Klingt kompliziert? Wir helfen gerne!

Termin vereinbaren

Wir zeigen Ihnen live was cituro alles kann.

E-Mail

Schreiben Sie uns eine E-Mail
support@cituro.com

w

Live Chat

Stellen Sie uns Ihre Fragen im Live-Chat.

Telefon

Wir sind für Sie da
+49 821 7962 1323