In diesem Tutorial lernst du, wie du eine responsive Email-Vorlage erstellst. Diese kannst du in Friendly Automate hochladen und damit Emails für deine Kampagnen erstellen.
Du lernst in diesem Tutorial:
- wie du eine Email in MJML erstellst
- wie du diese Email in eine Email-Vorlage umwandelst
- und wie du deine Email-Vorlage in Friendly Automate hochlädst und weiterverwendest.
Legen wir los!
Erstelle eine Email im MJML-Format
Für deine Email-Vorlage in Friendly Automate benötigst du zunächst eine Email in MJML.
Du hast du mehrere Möglichkeiten, um deine MJML-Email zu erstellen:
- Benutze direkt unseren Email Editor in Friendly Automate (hier findest du dazu ein Tutorial).
- Oder du kannst jede andere Plattform verwenden, auf der du Emails in MJML erstellen kannst. Wir empfehlen den Editor der offiziellen MJML-Website. Alle Infos zum MJML-Standard, viele Beispiel-Vorlagen und eine umfangreiche Dokumentation findest du auf mjml.io.
So könnte eine Email aussehen, die du im Email Editor in Friendly Automate erstellst:
So verwendest du benutzerdefinierte Schriftarten in deiner E-Mail-Vorlage
Du kannst benutzerdefinierte Schriftarten (wie Google Fonts) in deinen Vorlagen verwenden. Dazu musst du sie zunächst in der Kopfzeile deiner E-Mail hinzufügen.
{{ getAssetUrl('themes/'~template~'/assets/fontname.css', null, null, true) }}Der Kopf einer MJML-E-Mail beginnt mit dem <mj-head>-Tag und endet mit dem </mj-head>-Tag. Wenn diese Tags in deiner Vorlage noch nicht vorhanden sind, füge sie einfach nach dem ersten <mjml>-Tag und vor dem ersten <mj-body>-Tag ein.
Innerhalb des Head-Tags kannst du dann eine eigene Schriftart angeben.
Beispiel mit extern geladenem Font (aus Datenschutzgründen nicht empfohlen):
<mjml>
<mj-head>
<mj-font name="Comforter" href="https://fonts.googleapis.com/css2?family=Comforter"/>
</mj-head>
<mj-body>
Here you'll find the visible content of an email.
</mj-body>
</mjml>Beispiel mit selbst gehostetem Font (empfohlen):
<mjml>
<mj-head>
<mj-font name="CustomFont" href="{{ getAssetUrl('themes/'~template~'/assets/customfont.css', null, null, true) }}"/>
</mj-head>
<mj-body>
Here you'll find the visible content of an email.
</mj-body>
</mjml>In den mj-text Blöcken können dann eigene Schriftarten ausgewählt werden:
<mj-text align="center" color="#fff" font-family="CustomFont, sans-serif" font-size="12px">
This is some text rendered in a fancy Google Font
</mj-text>Die "sicheren" Schriftarten, die von den meisten E-Mail-Clients unterstützt werden, sind:
- Arial (sans-serif)
- Verdana (sans-serif)
- Helvetica (sans-serif)
- Tahoma (sans-serif)
- Trebuchet MS (sans-serif)
- Times New Roman (serif)
- Georgia (serif)
- Courier New (monospace)
- Brush Script MT (cursive)
Wenn du eine benutzerdefinierte Schriftart verwendest, achte bitte darauf, dass du immer eine der sicheren Schriftarten als Fallback-Schriftart angibst. Verwende zum Beispiel nicht diese Einstellung:
<mj-text font-family="SomeFancyGoogleFont">
Some text
</mj-text>Biete stattdessen eine oder mehrere Fallback-Schriftarten für alle E-Mail-Clients an, die keine benutzerdefinierten Schriften unterstützen:
<mj-text font-family="SomeFancyGoogleFont, Times New Roman, serif">
Some text
</mj-text>Wandle deine Email in eine Email-Vorlage um
Um nun deine Email-Vorlage für Friendly Automate zu erstellen, lade zuerst diese zip-Datei herunter und entpacke sie:
In der Datei findest du zwei Ordner, «assets» und «html», sowie die zwei Dateien «config.json» und «thumbnail.png».
Damit machst du folgendes:
assets
In den assets-Ordner legst du alle Bilder, die du in deiner Email verwendet hast, natürlich mit den identischen Dateinamen. Es ist vorteilhaft, dafür die Bildgrösse zu reduzieren – generell genügt eine Bildbreite von 600px – und ein passendes Dateiformat zu wählen, meist JPG für Fotos und PNG für Logos oder Grafiken.
config.json
In der config-Datei findest du die Metadaten deiner Emailvorlage. Öffne sie mit einem einfachen Texteditor (z.B. Notepad oder Textedit):
Passe die Einträge wie folgt an:
- "name": Setze hier den Namen deiner Vorlage ein.
- "author": Trage hier den Namen (oder die Firma) des Autors der Vorlage ein. Diese Information ist nur intern sichtbar, ist aber hilfreich, um in Friendly Automate den Überblick über deine eigenen Vorlagen zu behalten.
- "authorUrl": Trage hier deine Website oder die deiner Firma ein.
- "builder": Hier musst du nichts anpassen. "grapesjsbuilder" ist der Name des Email Editors in Friendly Automate.
So sähe die angepasste config.json für den Beispiel-Paul-Klee-Newsletter aus:
html
In diesem Ordner findest du vier Dateien:
Öffne die Datei «email.mjml.twig» mit einem einfachen Texteditor (z.B. Notepad oder Textedit). Lösche den Beispieltext in der Datei und kopiere stattdessen den MJML-Code deiner Email in die Datei. Wenn du deine Email im Email Editor in Friendly Automate erstellt hast, findest du den Email-Code hier:
Passe dann die Links bei allen Bildern an:
Bisher lautet der Link:
src="https://kathrin.friendlyautomate.io/media/images/grapesjs/logo.jpeg"Verändere den Link wie folgt:
src="{{ getAssetUrl('themes/'~template~'/assets/logo.jpeg', null, null, true) }}"Natürlich setzt du jeweils wieder den richtigen Dateinamen des Bildes ein. Führe diesen Schritt für alle Bilder in deiner Email durch.
Kopiere nun den gesamten Code aus dieser Datei und setze ihn identisch in die Datei «email.html.twig» ein. Speichere beide Dateien.
Mit den anderen beiden Dateien im Ordner (base.html.twig und message.html.twig) musst du nichts machen.
thumbnail.png
Diese Datei ersetzt du durch einen Screenshot von deiner Email. Es ist das Bild, das im Auswahlbildschirm für die Email-Vorlagen angezeigt wird. Gehe dafür wie folgt vor:
- Erstelle einen Screenshot von deiner Email.
- Passe die Grösse des Screenshots auf ungefähr 400x600px an (die genaue Grösse ist nicht entscheidend).
- Stelle sicher, dass das Dateiformat "png" ist oder passe es allenfalls an.
- Benenne deinen Screenshot in "thumbnail.png" um und ersetze die Beispieldatei im Vorlagen-Ordner mit dieser Datei.
Dateien komprimieren
Erstelle zum Schluss wieder eine zip-Datei aus allen Dateien der Vorlage.
Integriere deine Email-Vorlage in Friendly Automate
Klicke in Friendly Automate oben rechts auf das Zahnrad und dann auf «Vorlagen».
Jetzt siehst du alle bereits vorhandenen Email-Vorlagen. Klicke oben rechts auf «Datei auswählen», finde die zip-Datei und klicke auf «Installieren».
Damit sollte deine Vorlage in der Vorlagen-Auswahl zur Verfügung stehen. Du gelangst dorthin, indem du links auf «Channels» und dann «Emails» klickst, und dann oben rechts auf den Button «Neu».
So sähe etwa die Vorschau für die Beispiel-Newsletter-Vorlage aus:
Damit hast du eine eigene Email-Vorlage erfolgreich installiert! Du kannst sie jetzt für deine Email-Kampagnen weiterverwenden.
Hast du noch Fragen? Gerne helfen wir Dir per 📧 E-Mail, ☎️ Telefon und 👩💻 Videoanrufen.
Hier gelangst du zurück zur Hilfe-Startseite:
Friendly Automate