Design Builder: Erweitertes Design - Custom CSS

🌟 Ab der Professional Lizenz verfügbar 🌟

Diese Funktion ist nur für NutzerInnen ab der Professional Lizenz verfügbar. Hast du Fragen zu deiner Lizenz, dann wende dich an deine unternehmensinternen AnsprechpartnerInnen.

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 Endkunden und Endkundinnen-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 &#123;
  --concorde-primary-color: #000000; /* Schriftfarbe - Schwarz */
  --concorde-button-background-color: #413ff5FF; /* Buttonfarbe - Blau */
  --concorde-button-hover-bg-color: #ffffff; /* Hoverfarbe - Weiß */
&#125;

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.

Hier findest du alle Klassen und weitere Beispiele

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.
1. Gehe dazu in den Reiter Konfiguration → Designs
2. Wähle eine Journey aus oder bleibe im Design-Builder
3. Schalte “Neues Design” ein
4. Klicke auf die Schaltfläche “Erweitert Beta”
Schreibe oder füge deine CSS-Regeln ein.

Beispiel:

.Concorde-Button &#123;
  background-color: var(--concorde-primary-color);
  color: #fff;
  border-radius: 8px;
&#125;

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:

Anwendungsbeispiele Custom-CSS

Design Builder: Erweitertes Design - Custom CSS

Auf dieser Seite