Design Builder: Erweitertes Design - Custom CSS
Inhaltsverzeichnis
Mit dieser Funktion kannst du das Erscheinungsbild deiner Journeys gezielt an dein Branding anpassen – über die Standardmöglichkeiten des Design Builders hinaus.
Einführung
Mit Custom CSS kannst du:
Dein Markenbild stärken: Passe Buttons, Links, Schriftarten und mehr individuell an.
Feinjustierung vornehmen: Style ganze Themes, einzelne Journeys, einzelne Schritte oder einzelne Blöcke.
Herausstechen: Gestalte optisch ansprechende, individuelle Erlebnisse für deine Kund*innen.
Wichtig: Diese Funktion ist Teil des neuen Concorde-Designs und gilt ausschließlich für Journeys – nicht für das Endkund*innen-Portal. Wir entwickeln die Funktion stetig weiter – aktuelle Infos findest du in den Release Notes und in der Dokumentation.
Struktur des Stylings
HTML-Grundaufbau im Concorde-Design
Das neue Concorde-Design basiert auf vier zentralen Bausteinen:
Layout: Bestimmt die grundsätzliche Anordnung.
Schritte (Steps): Repräsentieren einzelne Abschnitte im Journey-Ablauf – z. B. „Neuer Schritt 1“ oder “Produktauswahl”.
Blöcke: Funktionale Elemente innerhalb eines Schrittes – z. B. Texteingabe, Datumseingabe oder Verfügbarkeit.
Komponenten: Kleinere UI-Elemente – z. B. Eingabefelder, Checkboxen oder Buttons.
Alle diese Elemente sind mit spezifischen HTML-Klassen und -IDs versehen, die mit Concorde- beginnen. Dadurch kannst du sie gezielt mit CSS ansprechen.
Eine vollständige Übersicht aller unterstützten Klassen und ID-Formate findest du hier:
HTML und ID-Struktur
Design Tokens (CSS-Variablen)
Im Concorde-Design stehen dir sogenannte Design Tokens zur Verfügung – das sind zentrale CSS-Variablen, mit denen du wiederkehrende Gestaltungselemente wie Farben, Schriftgrößen oder Abstände konsistent anpassen kannst.
Diese Tokens ermöglichen ein einheitliches Styling über alle Journeys und Schritte hinweg und vereinfachen spätere Anpassungen erheblich.
Eine vollständige Übersicht aller verfügbaren Variablen findest du hier:
CSS-Variablen
Wie Custom CSS funktioniert
Sobald du im Design Builder eigenes CSS einfügst, erzeugt das System daraus ein zentrales Stylesheet, das automatisch auf deine Journey angewendet wird.
Der Code wird direkt im Custom-CSS-Editor eingetragen und beim Speichern als <style>-Tag mit einer eindeutigen ID im <head> der Journey eingebunden.
Beispiel:
.Concorde-Button {
--concorde-primary-color: #000000; /* Schriftfarbe - Schwarz */
--concorde-button-background-color: #413ff5FF; /* Buttonfarbe - Blau */
--concorde-button-hover-bg-color: #ffffff; /* Hoverfarbe - Weiß */
} 
Wichtige Hinweise:
Verwende die offiziellen Design Tokens (z. B. für Farben und Schriftgrößen), um ein konsistentes Erscheinungsbild zu gewährleisten.
Nutze ausschließlich die gepflegten Concorde-Klassen und -IDs, um zukünftige Kompatibilität sicherzustellen.
Das finale CSS wird automatisch im <head> der Journey eingefügt, sodass es direkt beim Laden wirksam ist.
Nicht unterstützte CSS-Regeln
Um die Stabilität und Sicherheit der Journey nicht zu gefährden, sind bestimmte CSS-Eigenschaften nicht erlaubt. Diese könnten das grundlegende Layout oder Verhalten der Anwendung beeinträchtigen.
Nicht unterstützte Eigenschaften:
Positionsregeln:position: relative;position: absolute;
Vollständiges Ausblenden von Elementen:display: none;
Hintergrundbilder:background: url(*)background-image: url(*)
Diese Einschränkungen sorgen dafür, dass Journeys stabil und einheitlich funktionieren.
Custom CSS im Design Builder konfigurieren
So fügst du eigenes CSS ein:
- Öffne im Design Builder das „Custom CSS“-Panel.
- Gehe dazu in den Reiter Konfiguration → Designs
- Wähle eine Journey aus oder bleibe im Design-Builder
- Schalte “Neues Design” ein
- Klicke auf die Schaltfläche “Erweitert Beta”
- Schreibe oder füge deine CSS-Regeln ein.
Beispiel:
Live-Vorschau nutzen:
Während du tippst, wird automatisch angezeigt, wie sich dein CSS auf die Journey auswirkt.
Änderungen speichern:
Sobald du zufrieden bist, speichere deine Anpassungen – sie werden sofort übernommen.
Empfehlungen und Best Practices
Damit dein Custom CSS stabil und zukunftssicher bleibt, beachte bitte die folgenden Grundregeln:
Verwende nur unterstützte Klassen
Es steht eine öffentliche Liste aller unterstützten CSS-Klassen zur Verfügung, z. B. Concorde-Button oder Concorde-Link.
Nutze ausschließlich diese Klassen, um sicherzustellen, dass deine Anpassungen langfristig kompatibel mit dem Concorde-Design bleiben.
Link zur Übersicht: Custom CSS: HTML-Klassen & ID-Format
Verwende Design Tokens (CSS-Variablen)
Die Concorde Design Tokens ermöglichen es dir, zentrale Designkomponenten wie Farben, Schriftgrößen oder Abstände konsistent und themenübergreifend zu steuern.
Durch die Nutzung dieser Variablen bleibt dein Styling einheitlich und einfacher wartbar.
Link zur Übersicht: Concorde Design Tokens: CSS-Variablen
Vermeide das Überschreiben des Basislayouts
Verzichte auf CSS-Eigenschaften, die das Grundlayout der Journey beeinflussen können, z. B.:
display
position
z-index
Diese Eigenschaften können zu unerwartetem Verhalten führen und werden möglicherweise zukünftig eingeschränkt, um die Designstabilität zu gewährleisten.
Halte dein CSS kurz und übersichtlich
Ein kompakter CSS-Code erleichtert die Pflege und wirkt sich positiv auf die Ladegeschwindigkeit und Performance der Journey aus.
Teste dein CSS vor dem Speichern
Nutze die Live-Vorschau im Editor, um direkt zu sehen, wie sich deine Anpassungen auswirken.
Fehler und Konflikte mit dem Basisdesign werden dabei hervorgehoben, sodass du sie vor dem Speichern korrigieren kannst.
Häufig gestellte Fragen (FAQs)
Frage: Bleiben meine Custom-CSS-Anpassungen bei zukünftigen Updates erhalten?
Antwort:
Ja, wenn du das neue Concorde-Design nutzt und dich an die unterstützten Klassen und Variablen hältst, bleiben deine Anpassungen bestehen. Sollte es dennoch Änderungen im Basisdesign geben, die Anpassungen erforderlich machen, informieren wir dich frühzeitig.
Frage: Wie kann ich CSS nur auf eine bestimmte Journey anwenden?
Antwort:
Du kannst ein eigenes Design erstellen, das nur für eine bestimmte Journey verwendet wird. Alternativ kannst du auch gezielt bestimmte Step- oder Block-IDs ansprechen. So stellst du sicher, dass deine Styles ausschließlich diese eine Journey betreffen und keine anderen beeinflussen.
Frage: Was passiert, wenn ich einen Schritt oder Block lösche?
Antwort:
Wird ein Step oder Block entfernt, sollten die zugehörigen CSS-Regeln automatisch aus dem finalen Stylesheet entfernt werden. So bleibt das Styling aktuell und übersichtlich.
Frage: Was kann ich tun, wenn mein CSS nicht wie erwartet funktioniert?
Antwort:
Unsere Support-Dokumentation hilft dir dabei, Probleme zu analysieren und dein Custom CSS zu optimieren. Bei Bedarf kannst du dich auch direkt an den Support wenden.
Fazit
Custom CSS im Rahmen des Concorde-Projekts bietet dir eine leistungsstarke Möglichkeit, individuelle und markengerechte Nutzererlebnisse zu gestalten.
Durch die Möglichkeit, Styles auf globaler Ebene, für einzelne Journeys, Schritte oder sogar einzelne Blöcke anzuwenden, behältst du die volle Kontrolle über das Design – ohne dabei die Stabilität des zugrunde liegenden Systems zu gefährden.
Wenn du Fragen hast oder Feedback geben möchtest, wende dich gern an unser Support-Team.
Anwendungsbeispiele
Hier gelangst du zu unseren Anwendungsbeispielen: