CleverReach Newsletter – Farbige Listenpunkte in E-Mails darstellen

Lesezeit: ca. 2 Minuten

Farbige Listenpunkte in E-Mails für CleverReach – So geht’s!

E-Mail-Designs in CleverReach bieten viele Anpassungsmöglichkeiten, doch die Darstellung von Listenpunkten (Bullets) in der gewünschten Farbe stellt oft eine Herausforderung dar. Viele E-Mail-Clients ignorieren CSS-Formatierungen für li::marker. In diesem Beitrag zeigen wir, wie du grüne Listenpunkte zuverlässig in deinem Newsletter darstellst.

Warum ist die Anpassung von Listenpunkten in E-Mails problematisch?

Die meisten E-Mail-Clients schränken CSS-Funktionen stark ein. Besonders Microsoft Outlook ignoriert viele moderne CSS-Techniken, wodurch ::marker oder list-style-type: square; color: green; nicht funktionieren. Doch es gibt praktikable Lösungen!

3 Lösungen für farbige Listenpunkte in CleverReach Newslettern

1. Unicode-Square für maximale Kompatibilität

Diese Methode funktioniert in fast allen E-Mail-Clients:

<ul style="padding-left: 0; list-style: none;">
    <li style="font-size: 13px; margin-bottom: 10px;">
        <span style="color: #a3c93f;">&#9632;</span> Bürofläche: ca. 1.328 m²
    </li>
    <li style="font-size: 13px; margin-bottom: 10px;">
        <span style="color: #a3c93f;">&#9632;</span> Teilbar ab: ca. 280 m²
    </li>
</ul>

Vorteile:

✔ Funktioniert in fast allen E-Mail-Clients

✔ Kein CSS notwendig

✔ Direkt in CleverReach einsetzbar

2. Inline-SVG als Liste nutzen

Falls du ein individuelles Design bevorzugst, kannst du ein SVG-Symbol verwenden:

<ul style="padding-left: 0; list-style: none;">
    <li style="font-size: 13px; margin-bottom: 10px;">
        <img src="https://yourserver.com/gruenpunkt.svg" width="10" height="10" style="vertical-align: middle;"> Bürofläche: ca. 1.328 m²
    </li>
</ul>

Vorteile:

✔ Volle Kontrolle über das Design

✔ Perfekt für CI-konforme Newsletter

3. Pseudo-Element ::before (eingeschränkt nutzbar)

Falls der E-Mail-Client moderne CSS-Techniken unterstützt, kannst du ::before nutzen:

li::before {
    content: "■";
    color: #a3c93f;
    font-weight: bold;
    margin-right: 5px;
}

Nachteil: Funktioniert nicht in Outlook und vielen Webmail-Clients.

Fazit: Die beste Methode für CleverReach Newsletter

Die Unicode-Lösung (■) ist die beste und einfachste Methode, um grüne Listenpunkte in CleverReach Newslettern darzustellen. Falls du ein individuelles Icon verwenden möchtest, eignet sich die SVG-Lösung.