Wenn Sie eine E-Mail-Kampagne erstellen, müssen Sie die E-Mail immer vor dem Versenden auf verschiedenen E-Mail-Clients überprüfen und testen. In der Tat unterstützen einige E-Mail-Clients nicht alle HTML-Inhalte, da E-Mail-HTML nicht so weit entwickelt ist wie Web-HTML. Interaktive Elemente wie Flash oder JavaScript funktionieren in den meisten E-Mail-Clients nicht.
Wir empfehlen die Verwendung des HTML-Blocks nur fortgeschrittenen Benutzer:innen. Das Hinzufügen von benutzerdefiniertem HTML-Code kann die Anzeige Ihrer E-Mail-Kampagne auf einigen E-Mail-Clients beeinträchtigen. Benutzerdefiniertes HTML muss so E-Mail-konform und responsiv wie möglich sein. Um sicherzustellen, dass Ihre E-Mail auf den E-Mail-Clients wie erwartet angezeigt wird, empfehlen wir dringend, Ihre E-Mail-Kampagne zu testen, bevor sie an Ihre Kontakte versendet wird.
Was ist der Unterschied zwischen dem HTML-Editor und dem HTML-Block?
Sie können die Aufmachung Ihrer E-Mail-Kampagne mit zwei verschiedenen HTML-Tools anpassen:
Mit dem HTML-Editor können Sie Ihre gesamte E-Mail-Kampagne in HTML gestalten. Um den HTML-Editor zu verwenden, erstellen Sie eine E-Mail-Kampagne und wählen Sie den HTML-Editor aus dem Schritt Design. Wenn Sie mehr darüber erfahren möchten, lesen Sie unseren Artikel Eine HTML-Datei für die Gestaltung Ihrer Kampagne hochladen.
Der HTML-Block kann im Drag & Drop-Editor verwendet werden, um einige Elemente Ihrer E-Mail mit HTML-Code zu gestalten. Um den HTML-Block zu verwenden, erstellen Sie eine E-Mail-Kampagne. Im Schritt Design wählen Sie ein Template und ziehen den HTML-Block per Drag & Drop in Ihr E-Mail-Design:
Welche HTML-Formate kann ich in meiner E-Mail-Kampagne verwenden?
In der folgenden Tabelle finden Sie Informationen darüber, welche HTML-Formate Sie in Ihrer E-Mail-Kampagne sicher verwenden können und welche nicht:
| ✅ Sichere Benutzung | 🟠 Mit Vorsicht benutzen | ❌ Nie benutzen |
|
|
|
CSS ist bei der Verwendung in E-Mail-HTML eingeschränkt. Um die besten Ergebnisse bei der Gestaltung Ihrer E-Mail-Kampagne zu erzielen, empfehlen wir Ihnen Folgendes:
- Verwenden Sie sehr einfache CSS.
Nutzen Sie diese Website als Wörterbuch, um zu überprüfen, ob Ihr CSS von E-Mail-Clients gut unterstützt wird; - Verwenden Sie CSS nur für allgemeine Stilelemente wie Schriftart und Farben;
- Verwenden Sie Inline-CSS anstelle von eingebettetem CSS. In Inline-CSS sollten alle Hintergrundfarben oder -Einstellungen mit einem 100 % breiten <table> um Ihre E-Mail herum behandelt werden.
❗️ WichtigEinige E-Mail- Clients entfernen Codezeilen, die mit einem Komma oder einem Punkt beginnen. Fügen Sie am Anfang jeder Zeile, die mit einem Komma oder einem Punkt beginnt, ein Leerzeichen ein, um dies zu vermeiden.
Verwenden Sie Schriftarten, die leicht zu lesen sind und von jedem E-Mail-Client problemlos gelesen werden können. Überprüfen Sie die Schriftarten, die Sie verwenden, bevor Ihre E-Mail-Kampagne versendet wird. Um sicherzustellen, dass Ihre Kundinnen und Kunden Ihre E-Mail-Kampagne mit einer von Ihnen gewählten Schriftart lesen können, fügen Sie im Drag & Drop-Editor eine Fallback-Schriftart hinzu. Sie können wählen, welche Schriftarten verwendet werden sollen, wenn die von Ihnen gewählte Schriftart vom E-Mail-Client Ihrer Empfänger:innen nicht unterstützt wird. Um mehr zu erfahren, lesen Sie unseren Artikel Hinzufügen von Google- und Fallback-Schriftarten im Drag & Drop-Editor.
Wir empfehlen Ihnen außerdem, maximal zwei bis drei Schriftarten in einer E-Mail-Kampagne zu verwenden. Damit Ihre E-Mail gut lesbar ist, wählen Sie eine Größe zwischen 14 und 16 px für Ihren Text: 14 px für lange E-Mails mit Absätzen und 16 px für kurze E-Mails (zwei bis drei Sätze).
Sie können Ihren Kampagnen ganz einfach Image Maps hinzufügen, indem Sie im Drag & Drop-Editor einen Link zu Ihrem Bildblock hinzufügen:
- Fügen Sie einen Bildblock zu Ihrem Kampagnenentwurf hinzu und klicken Sie auf das Bild.
- Klicken Sie auf Add link (Link hinzufügen). Das Fenster Insert/edit link (Link einfügen/bearbeiten) öffnet sich.
-
Geben Sie die folgenden Informationen ein:
- Art des Links. Dies ist oft ein absoluter Link (URL) , aber Sie können auch jede andere Art von Link wählen;
- Link-Ziel. Das ist der Link, zu dem Ihr Bild führen soll;
- Name des Links Das ist das Wort, das Sie anzeigen möchten, wenn Sie den Mauszeiger über das Bild bewegen.
- Klicken Sie auf Insert (Einfügen).
Standardmäßig wird der HTML- (und JS-) Inhalt aller Variablen ausgeblendet. Das bedeutet, dass jeglicher HTML-Code, der innerhalb einer Variablen übergeben wird, automatisch ausgeblendet und als Text ausgegeben wird. Wenn Ihr variabler Inhalt zum Beispiel <h1>Mein Titel</h1> lautet, dann würde Ihr Template genau diesen Text in Ihrer E-Mail ausgeben: <h1>Mein Titel</h1>, anstatt der Wortgruppe „Mein Titel“ als H1-Titel formatiert auszugeben.
Um zu erfahren, wie Sie das automatische Ausblenden deaktivieren können, lesen Sie unseren Artikel Automatisches Ausblenden deaktivieren und doppelte geschweifte Klammern in Ihren E-Mails anzeigen.
⏩ Nächste Schritte
- Artikelserie für den Drag & Drop-Editor
- Eine HTML-Datei für die Gestaltung Ihrer Kampagne hochladen
- Eine E-Mail-Kampagne erstellen
- Google Fonts zum Drag & Drop Editor-hinzufügen
- So testen Sie Ihre E-Mail-Kampagne
🤔 Sie haben eine Frage?
Wenden Sie sich bei Fragen an unser Support-Team: Erstellen Sie einfach ein Ticket über Ihr Konto. Wenn Sie noch kein Konto haben, können Sie uns hier kontaktieren.
Wenn Sie Unterstützung bei einem Projekt mit Brevo suchen, können wir Sie mit dem richtigen zertifizierten Brevo-Expertenpartner zusammenbringen.