CSS Inliner verwenden

Achte für die Einbindung von CSS in HTML-E-Mails auf einen einfachen Code und richte dein CSS als „Inline“ ein. Das Tool Automatic CSS-Inliner von Mailchimp konvertiert Stile aus deinem eingefügten Code in inline und erspart dir das manuelle Programmieren.

In diesem Artikel erfährst du, wie du Automatic CSS Inliner in einer selbst erstellten Vorlage aktivierst und welche Selektoren unterstützt werden.

Inliner aktivieren

Für die Aktivierung von CSS-Inliner in deiner selbst erstellten Code-Vorlage verfährst du folgendermaßen:

1. Klicke im Bereich Inhalt der Checkliste auf E-Mail gestalten.
2. Klicke auf den Tab Selbst erstellt und wähle Code einfügen aus. Wenn du den neuen Builder verwendest, klicke auf im Dialogfenster auf Ja, mit dem klassischen Builder fortfahren .
3. Füge im Schritt Code deinen HTML-Code ein.
4. Klicke auf den Tab Settings (Einstellungen).
5. Aktiviere das Kontrollkästchen neben Automatic CSS Inliner.
   

Vom CSS Inliner unterstützte Selektoren

Mit Automatic CSS Inliner kannst du komplexe CSS-Stile, wie etwa Attribute, Pseudo-Klassen, Descendants usw., in HTML-E-Mails einfügen. Diese Selektoren werden durch CSS Inliner unterstützt.

• tagname
• class
• has attribute
• attribute value equals
• attribute value is one of
• attribute value contains
• attribute hyphen value
• attribute value begins with
• attribute value ends with
• pseudo-classes first-child
• last-child
• only-child
• empty
• not
• nth-child
• child
• descendant
• sibling

Nachdem du den Inliner aktiviert hast und der Rest deines Codes fertig ist, kannst du mit der Einrichtung deiner E-Mail fortfahren.