Terminseiten-Details mit dem visuellen Branding-Editor verstecken

Mit dem visuellen Branding-Editor kannst du Elemente auf deiner Buchungsseite ausblenden – etwa die Beschreibung, die Kanalauswahl, die Dauer oder die Gastgeber-Infos. Du brauchst dafür nur ein paar Zeilen CSS und siehst das Ergebnis sofort in der Live-Vorschau.

Visuellen Branding-Editor öffnen

Je nachdem, wie weitreichend deine Änderungen wirken sollen, hast du zwei Einstiegspunkte:

• Unternehmensweit – wirkt sich auf alle Buchungsseiten aus. Öffne Branding und klicke auf Editor öffnen.
• Nur für eine Terminseite – öffne die Terminseite, gehe zum Reiter Branding & Styling und klicke im Bereich Visueller Branding-Editor auf Editor öffnen.

Der Editor öffnet sich in einem neuen Tab. Rechts siehst du die Live-Vorschau deiner Buchungsseite, links die Bedienelemente.

Elemente über den CSS-Tab verstecken

Für einzelne Elemente der Buchungsseite gibt es keine An/Aus-Schalter – die Sichtbarkeit steuerst du über Custom CSS. Damit du die richtigen Selektoren nicht raten musst, hat der Editor einen CSS-Tab mit eingebauter Klassen-Referenz.

1. Wechsle im Editor zum Tab CSS
2. Scrolle nach unten und klappe CSS Class Reference auf – dort sind alle verfügbaren Klassen nach Bereich gruppiert (Meeting Information, Calendar & Time Selection, Duration & Channel Selection usw.). Klick auf eine Klasse, um sie zu kopieren.
3. Füge eine display: none-Regel für das Element hinzu, das du ausblenden willst
4. Beobachte, wie sich die Vorschau rechts in Echtzeit aktualisiert
5. Nutze den Geräte-Umschalter (Desktop / Tablet / Mobile), um zu prüfen, dass es auf allen Bildschirmgrößen passt
6. Klicke auf Speichern

Gängige Elemente, die du ausblenden kannst

Füge eines dieser Snippets in den CSS-Tab ein.

Beschreibung der Terminseite verstecken:

.booking-description-content {
  display: none;
}

Kanal-Auswahl (Video-Anbieter) verstecken:

.booking-channel-selection {
  display: none;
}

Dauer-Anzeige oder Dauer-Auswahl verstecken:

/* Dauer-Anzeige neben dem Titel ausblenden */
.booking-duration-info {
  display: none;
}

/* Dauer-Auswahl ausblenden (bei mehreren angebotenen Dauern) */
.booking-duration-selection {
  display: none;
}

Ort verstecken:

.booking-location-info,
.booking-location-text {
  display: none;
}

Gastgeber-Avatar und -Name verstecken:

.booking-host-info-wrapper {
  display: none;
}

/* Oder einzeln ausblenden */
.booking-host-avatar { display: none; }
.booking-host-name { display: none; }

Titel der Terminseite verstecken:

.booking-title {
  display: none;
}

Rechtliche Hinweise / Datenschutz unter der Buchung verstecken:

.booking-legal-details {
  display: none;
}

Zeitzonen-Auswahl im Kalender verstecken:

.booking-timezone-picker {
  display: none;
}

Anzeige "Plätze frei" bei Gruppenbuchungen verstecken:

.booking-spots-left {
  display: none;
}

Du kannst beliebig viele Regeln kombinieren – schreibe sie einfach untereinander in denselben CSS-Block.

Eine Terminseite oder alle anpassen

Wenn du den Editor aus einer einzelnen Terminseite öffnest, gelten die Änderungen nur für diese Terminseite. Im Reiter Branding & Styling kannst du außerdem auswählen, wie die Terminseite CSS verwendet:

• Kein Custom CSS – Standard-Aussehen, ignoriert das Unternehmens-CSS
• Unternehmens-CSS verwenden – übernimmt, was du unternehmensweit eingestellt hast
• Custom CSS nur für diese Terminseite – überschreibt die Unternehmens-Standards

Wenn du dieselben Elemente überall verstecken willst, hinterlege das CSS auf Unternehmensebene und stelle jede Terminseite auf Unternehmens-CSS verwenden.

Klassennamen finden, der nicht aufgelistet ist

Die Klassen-Referenz deckt alle Standard-Elemente ab. Wenn du etwas Spezielleres ansprechen musst:

1. Öffne die Buchungsseite in deinem Browser
2. Klicke mit der rechten Maustaste auf das Element und wähle Untersuchen
3. Kopiere den Klassennamen (er beginnt meistens mit booking-) und füge im CSS-Tab eine display: none-Regel dafür hinzu