Du kannst sowohl das Design als auch die Texte deines eingebetteten Buchungsformulars mit CSS anpassen. Dadurch kannst du Elemente ausblenden, Layouts anpassen oder Standardbeschriftungen ersetzen – auch wenn es keine integrierte Einstellung dafür gibt. Grundlegende CSS-Kenntnisse sind nötig, aber wir haben die Struktur so gestaltet, dass sie einfach zu nutzen ist.

So greifst du auf den CSS-Editor zu

1. Gehe zu Web-Tools > Buchungsformulare.
2. Klicke auf die drei Punkte in derselben Zeile wie das Buchungsformular, das du ändern möchtest.
3. Klicke im Dropdown-Menü auf Bearbeiten.
4. Gehe zum Tab Benutzerdefiniertes CSS.

Die CSS-Struktur verstehen

Um deine Anpassungen einfach und zuverlässig zu halten, verwendet Sirvoy die BEM (Block, Element, Modifier)-Namenskonvention. Das hilft dir, CSS zu schreiben, das leichter zu lesen ist und bei zukünftigen Updates weniger wahrscheinlich kaputtgeht.

Vermeide Klassen-Selektoren, die mit js- oder sirvoy- beginnen (außer wie unten angegeben), und vermeide ID-Selektoren. Diese können sich ohne Vorankündigung ändern und sind nicht fürs Styling gedacht.

Text mit CSS ändern

Sirvoy bietet keine integrierte Einstellung, um jede einzelne Beschriftung im Buchungsformular zu ändern, aber du kannst trotzdem einige ändern, indem du bestimmte Klassen in deinem benutzerdefinierten CSS ansprichst.

Textelemente, die du so bearbeiten kannst, verwenden immer die Klasse sirvoy-flexible-text. Diese haben außerdem:

• Eine Übersetzungsschlüsselklasse wie sft-trans-key-shared-button-search
• Eine Sprachklasse wie sft-lang-en (für Englisch), sft-lang-fr (für Französisch) oder sft-lang-sv (für Schwedisch)

Beispiel: Beschriftung des Such-Buttons ändern

Um die Beschriftung des „Suchen“-Buttons auf Englisch und Schwedisch zu ändern, folge diesen Schritten.

1. Zielelement identifizieren

So sieht das ursprüngliche Markup im Buchungsformular aus:

<span class="
  sirvoy-flexible-text 
  sft-lang-en 
  sft-trans-key-shared-button-search 
  sft-initialized" 
  data-translation-key="shared.button.search">
           
  <div class="sft-text">
     Search
  </div>
</span>

Die wichtigsten Klassen sind:

• sft-lang-en oder sft-lang-sv: Die Sprache.
• sft-trans-key-shared-button-search: Der Übersetzungsschlüssel für den „Suchen“-Button.
• sft-text: Der Container für den ursprünglichen Text.

2. CSS hinzufügen, um die Beschriftung zu überschreiben

Verwende das folgende CSS, um die ursprüngliche Beschriftung auszublenden und abhängig von der Sprache eine neue einzufügen:

.sft-lang-en.sft-trans-key-shared-button-search .sft-text,
.sft-lang-sv.sft-trans-key-shared-button-search .sft-text {
 display: none !important;
}

.sft-lang-en.sft-trans-key-shared-button-search::after {
 content: "My button title";
}

.sft-lang-sv.sft-trans-key-shared-button-search::after {
 content: "Min knapptitel";
}

3. Dieselbe Methode an anderer Stelle anwenden

Du kannst denselben Ansatz verwenden, um jede andere Beschriftung oder jedes andere Textelement im Buchungsformular zu ändern, das die Klasse sirvoy-flexible-text verwendet. Untersuche einfach das Element, identifiziere die Klassen für Sprache und Übersetzungsschlüssel, und wende ein ähnliches CSS an.