Design Builder: Erweitertes Design - Custom CSS

Mit Custom CSS passt du deine Journeys über die Einstellungen des Design Builders hinaus an, zum Beispiel eine Navigationsleiste mit Farbverlauf oder einen besonders auffälligen Absenden-Button.

Dieser Artikel zeigt dir, wo du Custom CSS einträgst, welche Klassen du nutzen kannst und was du beachten musst.

Hinweis

Custom CSS ist ab der Professional-Lizenz verfügbar und wirkt nur auf Journeys mit der neuen Journey-Oberfläche, nicht auf das Endkundenportal. Du brauchst CSS-Grundkenntnisse.

So funktioniert's

Dein CSS wird mit dem Design gespeichert und in jede Journey geladen, die dieses Design verwendet. Alle Bereiche der Journey haben feste Klassen, die mit Concorde- beginnen:

Layout: zum Beispiel Concorde-Topbar und Concorde-Layout-Content.
Schritte: Concorde-Step, jeder Schritt zusätzlich mit eigener ID.
Blöcke: zum Beispiel Concorde-TextInput-Block, jeder Block zusätzlich mit eigener ID.
Komponenten: zum Beispiel Concorde-Button und Concorde-Checkbox.

Am einfachsten änderst du Farben und Größen über Design-Tokens. Das sind CSS-Variablen wie --concorde-primary-color. Die vollständigen Listen findest du in Custom CSS: HTML-Klassen und IDs und Custom CSS: Design-Tokens (CSS-Variablen).

Konfiguration

CSS eintragen

1. Öffne Konfiguration > Designs und dein Design.

2. Wechsle rechts zum Tab Erweitert.

3. Schreib deine Regeln in den Editor unter Custom CSS. Die Vorschau links zeigt die Änderung sofort.

.Concorde-Topbar {
  background: linear-gradient(90deg, #413FF5, #913997);
}

4. Klicke auf CSS bereinigen, um den Code einheitlich zu formatieren.

5. Prüfe das Ergebnis in der Vorschau, auch mit Dark Mode vorschau und in der Smartphone-Ansicht, und klicke auf Speichern.

Nur bestimmte Elemente anpassen

6. Für alle Elemente eines Typs nutzt du die Klasse, zum Beispiel alle primären Buttons:

.Concorde-Button__Primary {
  --concorde-button-background-color: #005EB4;
  border-radius: 24px;
}

7. Für einen einzelnen Block oder Schritt nutzt du seine ID, zum Beispiel #Concorde-Block---e982566808ed. Die ID findest du in den Entwicklertools deines Browsers in der veröffentlichten Journey.

#Concorde-Block---e982566808ed {
  --concorde-primary-color: #0A7B3E;
}

Tipp

Soll eine Anpassung nur für eine Journey gelten, kopiere das Design, trag das CSS in der Kopie ein und weise sie nur dieser Journey zu. Weitere Beispiele findest du in Custom CSS: Anwendungsbeispiele.

Nicht unterstützte CSS-Regeln

Damit Journeys stabil bleiben, werden einige Eigenschaften nicht übernommen:

position: relative und position: absolute
display: none
Hintergrundbilder mit background: url(…) oder background-image: url(…)

Vermeide außerdem Änderungen an z-index und am Grundlayout. Sie können zu unerwartetem Verhalten führen.

Wichtig

Nutze nur die dokumentierten Concorde-Klassen und Design-Tokens. Andere Klassen können sich mit Updates ändern, und deine Anpassungen funktionieren dann nicht mehr.

Häufige Fragen

Bleiben meine Anpassungen bei Updates erhalten?

Ja, wenn du nur die dokumentierten Klassen und Design-Tokens verwendest.

Was passiert mit meinem CSS, wenn ich einen Block lösche?

Regeln für die ID dieses Blocks wirken dann nicht mehr. Entferne sie, damit dein CSS übersichtlich bleibt.

Was ist mit dem früheren eigenen Theme (Material UI)?

Die Funktion Eigenes Theme verwenden gibt es nicht mehr. Nutze stattdessen die Design-Einstellungen und Custom CSS.

Gilt mein CSS auch im Dark Mode?

Ja. Prüfe deshalb immer beide Darstellungen. Fest eingestellte Farben können die dunkle Darstellung überschreiben.