DokumentationCampaignCampaign Web-Benutzeroberfläche

Hinzufügen von benutzerdefiniertem CSS zu E-Mail-Inhalten email-metadata

Last update: Thu Aug 07 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Gilt für:
  • Campaign v8 Web User Interface

Erstellt für:

  • Fortgeschrittener
  • Benutzende

Beim Erstellen Ihrer E-Mails können Sie Ihr eigenes benutzerdefiniertes CSS direkt im E-Mail-Designer hinzufügen. Mit dieser Funktion können Sie erweiterte und spezifische Stile anwenden, um die Flexibilität und Kontrolle über das Erscheinungsbild Ihrer Inhalte zu erhöhen.

Definieren von benutzerdefiniertem CSS define-custom-css

Gehen Sie wie folgt vor, um dem E-Mail-Inhalt benutzerdefiniertes CSS hinzuzufügen.

  1. Stellen Sie sicher, dass im E-Mail-Designer beliebiger Inhalt definiert ist, indem Sie mindestens eine Komponente hinzufügen.

  2. Wählen Sie entweder über den Navigationsbaum links oder oben im rechten Bereich Hauptteil aus. Der Abschnitt CSS-Stile wird auf der rechten Seite angezeigt.

    Auswählen der Schaltfläche „Benutzerdefiniertes CSS hinzufügen“ {width="85%"}

    note note
    NOTE
    Der Abschnitt CSS-Stile ist nur verfügbar, wenn im Editor bereits Inhalt vorhanden ist.

  3. Klicken Sie auf die Schaltfläche Benutzerdefiniertes CSS hinzufügen.

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

  4. Geben Sie Ihren CSS-Code in den entsprechenden Textbereich ein, der angezeigt wird. Stellen Sie sicher, dass das benutzerdefinierte CSS gültig ist und der richtigen Syntax folgt. Weitere Informationen

    Eingeben von benutzerdefiniertem CSS in den entsprechenden Textbereich {width="65%"}

  5. Speichern Sie Ihr benutzerdefiniertes CSS und überprüfen Sie, ob das benutzerdefinierte CSS korrekt auf Ihren Inhalt angewendet wird. Ist dies nicht der Fall, lesen Sie den Abschnitt Fehlerbehebung.

    Auswählen der Schaltfläche „Benutzerdefiniertes CSS hinzufügen“ {width="85%"}

  6. Wenn Sie den gesamten Inhalt entfernen, wird der Abschnitt ausgeblendet und das zuvor definierte benutzerdefinierte CSS wird nicht mehr angewendet.

  7. Fügen Sie im Editor wieder Inhalte ein, damit der Abschnitt CSS-Stile erneut angezeigt wird. Das benutzerdefinierte CSS wird wieder angewendet.

Sicherstellen, dass gültiges CSS verwendet wird use-valid-css

Sie können einen beliebigen gültigen CSS-String im Textbereich Benutzerdefiniertes CSS hinzufügen eingeben. Richtig formatiertes CSS wird sofort auf den Inhalt angewendet.

CAUTION
Benutzende sind für die Sicherheit ihres benutzerdefinierten CSS verantwortlich. Stellen Sie sicher, dass Ihr CSS keine Sicherheitslücken verursacht oder 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 CSS

Im Folgenden finden Sie 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;
  }
}

Wenn ungültiges CSS eingegeben wird, wird eine Fehlermeldung angezeigt, die darauf hinweist, dass das CSS nicht gespeichert werden kann. Im Folgenden finden Sie Beispiele für ungültiges CSS.

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;

Technische Implementierung implementation

Ihr benutzerdefiniertes CSS wird am Ende des <head>-Abschnitts als Teil eines <style>-Tags mit dem Attribut data-name="global-custom" hinzugefügt, wie im folgenden Beispiel dargestellt. Dadurch wird sichergestellt, dass die benutzerdefinierten Stile global auf die Inhalte angewendet werden.

Siehe Beispiel
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>

Das benutzerdefinierte CSS wird vom Bereich Einstellungen des E-Mail-Designers nicht interpretiert oder überprüft. Es ist völlig unabhängig und kann nur über die Option Benutzerdefiniertes CSS hinzufügen geändert werden.

Schutzmechanismen – Importierte Inhalte

Wenn Sie benutzerdefiniertes CSS auf in den E-Mail-Designer importierte Inhalte anwenden möchten, sollten Sie Folgendes beachten:

  • Wenn Sie externe HTML-Inhalte einschließlich CSS importieren, werden diese Inhalte – sofern sie nicht konvertiert werden – im Kompatibilitätsmodus angezeigt, in dem der Abschnitt CSS-Stile nicht verfügbar ist. Weitere Informationen zum Importieren bestehender Inhalte

  • Beim Importieren von im E-Mail-Designer erstellten Inhalten, einschließlich über die Option Benutzerdefiniertes CSS hinzufügen angewendetem CSS, wird das zuvor angewendete CSS über dieselbe Option angezeigt und ist so bearbeitbar.

Fehlerbehebung troubleshooting

Wenn Ihr benutzerdefiniertes CSS nicht angewendet wird, sollten Sie die folgenden Optionen überprüfen.

  • Stellen Sie sicher, dass Ihr CSS gültig und frei von Syntaxfehlern ist (z. B. fehlende Klammern, falsche Eigenschaftsnamen). Weitere Informationen

  • Stellen Sie sicher, dass Ihr CSS zum <style>-Tag mit dem Attribut data-name="global-custom" hinzugefügt wird.

  • Überprüfen Sie, ob das Attribut data-disabled des Stil-Tags global-custom auf true festgelegt ist. In diesem Fall wird das benutzerdefinierte CSS nicht angewendet.

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

+++

  • Stellen Sie sicher, dass Ihr CSS nicht durch andere CSS-Regeln überschrieben wird.

    • Verwenden Sie die Entwickler-Tools Ihres Browsers, um den Inhalt zu überprüfen und sicherzustellen, dass Ihr CSS auf die richtigen Selektoren abzielt.

    • Erwägen Sie, Ihren Deklarationen !important hinzuzufügen, um sicherzustellen, dass sie Vorrang haben.

Beispiel:
code language-none 
 ```css
 .acr-Form {
   background: red !important;
 }
 ```
recommendation-more-help
c39c2d00-ba9a-424b-adf9-66af58a0c34b