When creating an email campaign, you must always preview and test the email on different email clients before sending it. Indeed, some email clients do not support all HTML content as email HTML isn't as developed as web HTML. Interactive elements such as Flash or JavaScript won't work in most email clients.
Wir empfehlen die Verwendung des HTML-Blocks nur fortgeschrittenen Benutzer:innen. Das Hinzufügen von benutzerdefiniertem HTML-Code kann die Anzeige deiner 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 deine E-Mail auf den E-Mail-Clients wie erwartet angezeigt wird, empfehlen wir dringend, Deine E-Mail-Kampagne zu testen, bevor sie an deine Kontakte versendet wird.
Was ist der Unterschied zwischen dem HTML-Editor und dem HTML-Block?
Du kannst die Aufmachung deiner E-Mail-Kampagne mit zwei verschiedenen HTML-Tools anpassen:
The HTML editor allows you to design your entire email campaign using HTML. To use the HTML editor, create an email campaign and choose the HTML editor from the Design step. To learn more, check our dedicated article Upload an HTML file to design your campaign.
The HTML block can be used in the Drag & Drop email editor to design some elements of your email with HTML code. To use the HTML block, design an email with the Drag & Drop email editor drag and drop the HTML block into your email design. Paste your HTML code and see what it looks like instantly:
Welche HTML-Formate kann ich in meiner E-Mail-Kampagne verwenden?
In der folgenden Tabelle findest du Informationen darüber, welche HTML-Formate du in deiner E-Mail-Kampagne sicher verwenden kannst 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 deiner E-Mail-Kampagne zu erzielen, empfehlen wir dir Folgendes:
- Use very simple CSS,
Use this website as a dictionary to check if your CSS will be well supported on email clients. - Verwende CSS nur für allgemeine Stilelemente wie Schriftart und Farben;
-
Use inline CSS instead of embedded CSS. In inline CSS, any background colors or <body> settings should be handled with a 100% wide <table> around your email.
❗️ WichtigEinige E-Mail- Clients entfernen Codezeilen, die mit einem Komma oder einem Punkt beginnen. Füge am Anfang jeder Zeile, die mit einem Komma oder einem Punkt beginnt, ein Leerzeichen ein, um dies zu vermeiden.
Use fonts that are easy to read and easily readable by any email client. Check the fonts you are using before sending your email campaign. To make sure that your clients will be able to read your email campaign with a font that you chose, add a fallback font in the Drag & Drop Editor. You will be able to choose which fonts to use if the one you chose is not supported by your recipients' email client. To learn more, check our dedicated article Add Google and fallback fonts in the Drag & Drop Editor.
Wir empfehlen dir außerdem, maximal zwei bis drei Schriftarten in einer E-Mail-Kampagne zu verwenden. Damit deine E-Mail gut lesbar ist, wähle eine Größe zwischen 14 und 16 px für deinen Text: 14 px für lange E-Mails mit Absätzen und 16 px für kurze E-Mails (zwei bis drei Sätze).
Du kannst deinen Kampagnen ganz einfach Image Maps hinzufügen, indem du im Drag & Drop-Editor einen Link zu deinem Bildblock hinzufügst:
- Füge einen Bildblock zu deinem Kampagnenentwurf hinzu und klicke auf das Bild.
- Klicke auf Add link (Link hinzufügen). Das Fenster Insert/edit link (Link einfügen/bearbeiten) öffnet sich.
- Gib die folgenden Informationen ein:
- Art des Links. Dies ist oft ein absoluter Link (URL) , aber du kannst auch jede andere Art von Link wählen;
- Link-Ziel. Das ist der Link, zu dem dein Bild führen soll;
- Name des Links Das ist das Wort, das du anzeigen möchtest, wenn du den Mauszeiger über das Bild bewegst.
- Klicke 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 dein variabler Inhalt zum Beispiel <h1>Mein Titel</h1> lautet, dann würde dein Template genau diesen Text in deiner E-Mail ausgeben: <h1>Mein Titel</h1>, anstatt der Wortgruppe „Mein Titel“ als H1-Titel formatiert auszugeben.
Um zu erfahren, wie du das automatische Ausblenden deaktivieren kannst, lies unseren Artikel Automatisches Ausblenden deaktivieren und doppelte geschweifte Klammern in deinen E-Mails anzeigen.
Wenn du mit dem HTML-Editor Kampagnen mit mehreren Bildern gestaltest, kannst du keine Bilder direkt in den HTML-Code einbetten. Eingebettete Bilder werden von einigen E-Mail-Clients nicht unterstützt und können dazu führen, dass die Gesamtgröße deiner Kampagne die 5 MB-Grenze überschreitet (mit einem Maximum von 1 MB für HTML-Inhalte), wodurch die Planung verhindert wird.
Wenn du die folgende Warnung sehen, musst du deine Kampagne anpassen, bevor du sie erneut versenden kannst:
| Deine Kampagne kann nicht versendet werden, da sie das Limit von 1 MB für HTML-Inhalte überschreitet. Um die Größe deines HTML-Inhalts zu reduzieren, bette deine Bilder ein, indem du in den Zusätzlichen Einstellungen deiner Kampagne das Kästchen Embed images in the email (Bilder im Textkörper der E-Mail) aktivierst. |
Um deine E-Mail-Kampagne erneut zu versenden, dupliziere und bearbeite sie, um deine Bilder mit der <img src= [...] > Eigenschaft einzufügen, anstatt sie einzubetten.
Wenn du Bilder einbetten musst, achte darauf, dass dein HTML-Inhalt nicht größer als 1 MB ist. Füge dann deine Bilder mit der <img src= [...] > Eigenschaft ein und aktiviere die Option Embed images in the email (Bilder in die E-Mail einbetten) in den Additional settings (Zusätzlichen Einstellungen) deiner E-Mail-Kampagne.
⏩ Nächste Schritte
- Artikelserie für den Drag & Drop-Editor
- Eine HTML-Datei für die Gestaltung deiner Kampagne hochladen
- Eine E-Mail-Kampagne erstellen
- Google Fonts zum Drag & Drop Editor-hinzufügen
- So testest du deine 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 der richtigen zertifizierten Brevo-Partneragentur verbinden.