DokumentationJourney Optimizer B2BDokumentation zu Journey Optimizer B2B Edition

Hinzufügen von benutzerdefiniertem CSS für Inhalte

Last update: Tue Sep 09 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Erstellt für:

  • Benutzende

Sie können Ihr eigenes benutzerdefiniertes CSS direkt im E-Mail- oder Landingpage-Design-Bereich hinzufügen. Verwenden Sie benutzerdefiniertes CSS, um erweiterte und spezifische Stile anzuwenden, um die Flexibilität und Kontrolle über das Erscheinungsbild Ihrer Inhalte zu erhöhen.

Das benutzerdefinierte CSS wird innerhalb eines <head>-Tags mit dem <style>-Attribut an den data-name="global-custom"-Abschnitt angehängt. Diese Struktur stellt sicher, dass die benutzerdefinierten Stile global auf den Inhalt angewendet werden.

Beispielimplementierung
code language-html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="content-version" content="3.3.31">
    <meta name="x-apple-disable-message-reformatting">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style data-name="default" type="text/css">
      td { padding: 0; }
      th { font-weight: normal; }
    </style>
    <style data-name="grid" type="text/css">
      .acr-grid-table { width: 100%; }
    </style>
    <style data-name="acr-theme" type="text/css" data-theme="default" data-variant="0">
      body { margin: 0; font-family: Arial; }
    </style>
    <style data-name="media-default-max-width-500px" type="text/css">
      @media screen and (max-width: 500px) {
        body { width: 100% !important; }
      }
    </style>
    <style data-name="global-custom" type="text/css">
      /* Add you custom CSS here */
    </style>
  </head>
  <body>
    <!-- Minimal content -->
  </body>
</html>
NOTE
Das benutzerdefinierte CSS wird für eine ausgewählte Komponente im Bedienfeld Stile nicht angezeigt oder validiert. Sie ist völlig unabhängig und kann nur durch die Option Benutzerdefiniertes CSS hinzufügen auf der Ebene der Hauptteilkomponente geändert werden.

Hinzufügen von benutzerdefiniertem CSS

  1. Wenn mindestens eine Inhaltskomponente auf der Arbeitsfläche hinzugefügt wurde, wählen Sie die Hauptteil in der linken Navigationsleiste aus.

  2. Wählen Sie auf rechten Seite die „Stile“ und klicken Sie auf Benutzerdefiniertes CSS hinzufügen.

    Zugriff auf Textkörperstile {width="800" modal="regular"}

    note note
    NOTE
    Die Schaltfläche Benutzerdefiniertes CSS hinzufügen ist nur verfügbar, wenn die Komponente Hauptteil ausgewählt ist. Sie können jedoch benutzerdefinierte CSS-Stile auf alle darin enthaltenen Komponenten anwenden.

    Der Benutzerdefinierte CSS hinzufügen Popup-Editor wird mit Platzhalter-Code-Kommentaren angezeigt.

  3. Geben Sie Ihren CSS-Code im Editor ein.

    Stellen Sie sicher, dass das benutzerdefinierte CSS gültig ist und der richtigen Syntax folgt. Wenn die eingegebene CSS-Datei ungültig ist, wird eine Fehlermeldung angezeigt und die CSS-Datei kann nicht gespeichert werden. Weitere Informationen finden Sie unter CSS-Gültigkeit.

    Benutzerdefiniertes CSS im Editor eingeben {width="450"}

  4. Klicken Sie Speichern, um das benutzerdefinierte CSS zu speichern.

    Das benutzerdefinierte Stylesheet wird auf den vorhandenen Inhalt angewendet. Sie können überprüfen, ob Ihr benutzerdefiniertes CSS Ihren Anforderungen entspricht. Informationen zum Vornehmen von Änderungen und Anpassen der Stylesheet-Anwendung finden Sie unter Fehlerbehebung.

    Benutzerdefiniertes CSS auf Inhalte angewendet {width="600" modal="regular"}

CSS-Gültigkeit

CAUTION
Benutzende sind für die Sicherheit ihres benutzerdefinierten CSS verantwortlich. Stellen Sie sicher, dass durch Ihr CSS keine Sicherheitslücken entstehen und dass es nicht mit den vorhandenen Inhalten in Konflikt steht.
Vermeiden Sie die Verwendung von CSS, das unbeabsichtigt das Layout oder die Funktionalität des Inhalts beeinträchtigen könnte.
Beispiele für gültiges CSS
code language-css 
.acr-component[data-component-id="form"] {
  display: flex;
  justify-content: center;
  background: none;
}

.acr-Form {
  width: 100%;
  padding: 20px 100px;
  border-spacing: 0px 8px;
  box-sizing: border-box;
  margin: 0;
}

.acr-Form .spectrum-FieldLabel {
  width: 20%;
}

.acr-Form.spectrum-Form--labelsAbove .spectrum-FieldLabel,
.acr-Form [data-form-item="checkbox"] .spectrum-FieldLabel {
  width: auto;
}

.acr-Form .spectrum-Textfield {
  width: 100%;
}

#acr-form-error,
#acr-form-confirmation {
  width: 100%;
  padding: var(--spectrum-global-dimension-static-size-500);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: var(--spectrum-global-dimension-static-size-200);
}

.spectrum-Form-item.is-required .spectrum-FieldLabel:after{
  content: '*';
  font-size: 1.25rem;
  margin-left: 5px;
  position: absolute;
}

/* Error field placeholder */
.spectrum-HelpText {
  display: none !important;
}

.spectrum-HelpText.is-invalid,
.is-invalid ~ .spectrum-HelpText {
  display: flex !important;
}
code language-css 
@media only screen and (min-width: 600px) {
  .acr-paragraph-1 {
    width: 100% !important;
  }
}
Beispiele für ungültiges CSS

Die Verwendung von <style>-Tags wird nicht akzeptiert:

code language-html 
<style type="text/css">
  .acr-Form {
    width: 100%;
    padding: 20px 100px;
    border-spacing: 0px 8px;
    box-sizing: border-box;
    margin: 0;
  }
</style>

Ungültige Syntax wie fehlende Klammern wird nicht akzeptiert:

code language-css 
body {
  background: red;

CSS in importierten Inhalten

Wenn Sie benutzerdefiniertes CSS mit Inhalten verwenden möchten, die in den Design-Bereich für E-Mails oder Landingpages importiert wurden, sollten Sie Folgendes beachten:

  • Wenn Sie externen HTML-Inhalt einschließlich CSS importieren, wird dieser im Kompatibilitätsmodus ausgefüllt und der Abschnitt CSS-" ist nicht verfügbar.

  • Wenn Sie Inhalte importieren, die ursprünglich im Design-Bereich der E-Mail oder Landingpage mit der Option Benutzerdefiniertes CSS hinzufügen erstellt wurden, ist die angewendete CSS-Datei von derselben Option aus sichtbar und bearbeitbar.

Fehlerbehebung

Wenn Ihr benutzerdefiniertes CSS nicht wie erwartet angewendet wird, verwenden Sie die Browser-Entwickler-Tools, um den Inhalt zu überprüfen und sicherzustellen, dass Ihr CSS auf die richtigen Selektoren abzielt. Beachten Sie beim Überprüfen des Stilcodes Folgendes:

  • Überprüfen Sie, ob Ihr CSS gültig und frei von Syntaxfehlern (z. B. fehlende Klammern, falsche Eigenschaftsnamen) ist.

  • Vergewissern Sie sich, dass Ihre CSS-Datei dem <style>-Tag mit dem data-name="global-custom" hinzugefügt wurde.

  • Überprüfen Sie, ob für das Stil-Tag des global-custom das Attribut auf „true“ festgelegt data-disabled, z. B.:

    <style data-name="global-custom" type="text/css" data-disabled="true"> body: { color: red; } </style>

  • Vergewissern Sie sich, dass Ihr CSS nicht an einer beliebigen Stelle im Inhalt überschrieben wird, z. B. beim Anwenden von Inline-Stilen.

  • Fügen Sie Ihren -Deklarationen !important hinzu, um sicherzustellen, dass sie Vorrang haben, z. B.:

    code language-none 
    .acr-Form {
background: red !important;
}
recommendation-more-help
6ef00091-a233-4243-8773-0da8461f7ef0