Friendly Automate hat einen integrierten Drag-and-Drop Email Builder, der es dir mit seiner grafischen Oberfläche einfach macht, ansprechende und responsive Emails zu erstellen.
In diesem Tutorial lernst du:
- die Struktur einer visuellen Email zu verstehen
- eine einfache Email mit Text, Bildern, Buttons und Links zu erstellen
- deine Email mit Platzhaltern, Abständen und weiteren Einstellungen zu verfeinern
Um eine Email mit dem Email Builder zu erstellen, klicke in Friendly Automate links auf «Channels», dann «Emails», dann oben rechts auf «Neu»:
Jetzt hast du die Auswahl zwischen einer «Vorlagen E-Mail» und einer «Segment E-Mail». In den meisten Fällen wählst du die Vorlagen-Email. Damit erstellst du eine Email, die du später im Rahmen einer Kampagne verschicken kannst.
Du bekommst nun eine Anzahl von Email-Vorlagen angezeigt, von denen du eine auswählen kannst. Für eine neue leere Email verwende die Vorlage «Hello». (Wir empfehlen, nicht die Vorlagen «Code-Modus» oder «Blank» zu verwenden, da sie nicht responsiv sind.)
Gib der Email in der rechten Spalte einen Betreff und einen internen Namen und lege die Sprache fest. Dann klicke oben auf «Builder».
Damit gelangst du in den Email Builder. Rechts siehst du verschiedene Abschnitte und Blöcke, die du per Drag and Drop in deine Email ziehen kannst.
1. Die Struktur einer Email verstehen
Um zu verstehen, wie du diese Elemente einsetzen, miteinander kombinieren und anpassen kannst, schauen wir uns zuerst an, wie eine Email in MJML ganz grundsätzlich aufgebaut ist.
In der Grobstruktur besteht eine MJML-Email aus Abschnitten (sections) und Spalten (columns).
Hier siehst du einen Beispiel-Newsletter:
Und hier siehst du, aus welchen Abschnitten (schwarze Rahmen) sowie Spalten (orange Rahmen) er aufgebaut ist:
Die Abschnitte (sections) bilden also die äusserste Struktur der Email.
Jeder Abschnitt enthält darin mindestens eine Spalte (column). Maximal sind drei Spalten empfehlenswert. Die Spalten organisieren die vertikale Struktur innerhalb der Abschnitte.
In den Spalten gibt es einen oder mehrere Blöcke. Blöcke befinden sich immer innerhalb einer Spalte und sind immer untereinander angeordnet. Blöcke sind zum Beispiel: ein Textfeld, ein Bild, ein Button, eine Social Group, oder eine Trennlinie.
Hier wieder der Beispiel-Newsletter:
Und hier die Abschnitte (schwarz), Spalten (orange) und Blöcke (farbige Felder):
Damit kannst du beginnen, deine erste Email zusammenzustellen.
2. Erstelle eine Email
Lerne jetzt Schritt für Schritt, wie du eine Email mit dem Email Builder aufbaust. Wichtig ist, dass du immer zuerst einen Abschnitt mit einer bestimmten Anzahl Spalten anlegst, bevor du die eigentlichen Inhalte (Blöcke) einfügst.
Abschnitte und Spalten
Im Email Builder findest du oben rechts die Abschnitte, die bereits ein, zwei oder drei Spalten enthalten. Darunter findest du die Blöcke.
Ziehe also zuerst einen Abschnitt mit ein, zwei oder drei Spalten in deine Email.
Um die Spaltenbreite anzupassen, wählst du zuerst mit dem blauen Rahmen die Spalte an. Dafür hast du zwei Möglichkeiten:
Entweder du bewegst die Maus über das Feld, bis «Column» angezeigt wird, und klickst dann, um die Spalte anzuwählen.
Oder du klickst auf das Textfeld und dann auf den blauen Pfeil, um eine Ebene höher anzuwählen.
Zu den Formatierungsmöglichkeiten gelangst du, indem du oben rechts auf den Pinsel klickst. Die Einstellungen für die Spaltenbreite findest du unter «Dimension». Dort kannst du die Spaltenbreite in Pixel oder in Prozent angeben.
Textfelder
Jede Spalte enthält bereits automatisch einen Textfeld. Durch einen Doppelklick auf das Textfeld kannst du den Text bearbeiten:
Klicke oben rechts auf das Symbol mit dem Pinsel und dann auf «Typography», um den Text zu formatieren.
Du gelangst zurück zur Blockauswahl, indem du oben rechts auf das Symbol mit den vier Blöcken klickst:
Bilder
Um ein Bild einzufügen, ziehe einen «Image» Block in eine vorhandene Section:
Doppelklicke auf den Bild-Platzhalter. Es öffnet sich ein Dialog. Doppelklicke auf den oberen Balken, um ein neues Bild hochzuladen, oder wähle weiter unten ein Bild aus, das du bereits hochgeladen hast:
Um das Bild anzupassen, klicke wieder oben rechts auf den Pinsel. Dort kannst du etwa die Bildgrösse oder die Hintergrundfarbe verändern.
Buttons
Füge einen Button ein, indem du den «Button» Block in eine vorhandene Section ziehst.
Per Doppelklick auf den Button kannst du den Text des Buttons verändern.
Jetzt kannst du wieder über den Pinsel oben rechts Einstellungen vornehmen, wie etwa den Link, auf den der Button verweist, Grösse und Farbe des Buttons sowie die Schriftart.
Links
Links sind keine Blöcke, sondern du kannst jeden einfachen Text in einen Link umwandeln. Schreibe zuerst den Text, aus dem du einen Link machen möchtest.
Markiere den Text und klicke auf das Link-Symbol im Kontextmenü:
Trage dann den Link im Feld «URL» ein:
Wenn du die Linkfarbe anpassen möchtest, wechsle in den Reiter «Erweitert». Im Feld «Style» kannst du den Code «color: #083172» einsetzen. Ersetze dabei die Zahl durch einen beliebigen hexadezimalen Zahlenwert (finde HTML Farbcodes hier).
Klicke auf OK, um den Link einzusetzen. Damit hast du einen Link erstellt.
Social Elements
Um deiner Email Links zu Social Media hinzuzufügen, ziehe eine «Social Group» in eine vorhandene Section:
Benötigst du zusätzliche Elemente, ziehe ein «Social Element» in die Social Group:
Markiere ein Social Element und klicke oben rechts auf den Pinsel, um das Element anzupassen. Du kannst dort aus einer Vielzahl von Social Media auswählen (neben Facebook und Twitter etwa auch Youtube, Linkedin oder SoundCloud) sowie den Link eintragen.
3. Verfeinere deine Email mit mehr Elementen und Einstellungen
Platzhalter
Mithilfe von Platzhaltern (tokens) kannst du kontaktspezifischen Text verwenden. Um einen Platzhalter einzufügen, setze den Cursor an die Stelle, an der du kontaktspezifischen Text anzeigen möchtest.
Klicke dann auf das Platzhalter-Symbol im Kontextmenü:
Aus dem Dropdown-Menü wählst du das Kontaktfeld, das du auslesen möchtest:
Damit wird beim Versenden der Email zum Beispiel automatisch der Vorname des jeweiligen Kontaktes eingetragen.
Webview- und Unsubscribe-Text
Mithilfe von Platzhaltern kannst du auch einen standardisierten Webview- und Unsubscribe-Text einfügen.
Setze wieder den Cursor an die entsprechende Stelle, klicke auf das Platzhalter-Symbol im Kontextmenü und wähle «Text für Web-Ansicht» bzw. «Text für die Abmeldung»:
Webview: {webview_text}
Unsubscribe: {unsubscribe_text}
So sieht der Platzhalter für den Webview-Text im Email Builder aus:
So kann der Platzhalter in der versendeten Email aussehen:
So sieht der Platzhalter für den Unsubscribe-Text im Email Builder aus:
So kann der Platzhalter in der versendeten Email aussehen:
Du kannst selber einstellen, welcher Text für den Webview- und Unsubscribe-Platzhalter angezeigt wird. Klicke dafür in Friendly Automate oben rechts auf das Zahnrad und dann auf «Konfiguration»:
Klicke dann auf «E-Mail Einstellungen»:
Scrolle nach unten, bis du «Einstellungen für Nachrichten» und «Einstellungen für die Abmeldung» findest. Dort kannst du die Webview- und Unsubscribe-Texte anpassen.
Abstände
Abstände kannst du auf der Block-Ebene und auf der Abschnitt-Ebene einstellen. Wähle zuerst die Ebene aus, für die du den Abstand einstellen möchtest.
Klicke dann oben rechts auf den Pinsel. Unter «Dimension» kannst du den oberen, unteren, linken und rechten Abstand (padding) definieren:
Elemente duplizieren, verschieben und löschen
Du kannst Abschnitte, Spalten und Blöcke duplizieren, verschieben, sowie löschen.
Duplizieren und verschieben ist besonders sinnvoll für Textfelder: Da du jedes Textfeld einzeln formatieren musst, kann es Sinn machen, zuerst ein einziges Textfeld zu erstellen und es fertig zu formatieren. Dann kannst du dieses Textfeld duplizieren und verschieben. Damit behältst du die Formatierung bei.
Element duplizieren:
Element verschieben:
Auf dieselbe Weise kannst du auch Spalten oder Abschnitte duplizieren oder verschieben. Beachte, dass du immer die richtige Ebene anwählst.
In der blauen Auswahl kannst du mit einem Klick auf den Mülleimer das Element löschen.
Ansichten
Lasse dir eine Vorschau anzeigen, um zu sehen, wie deine Email auf einem Desktop-Gerät, einem Tablet oder einem Smartphone responsiv angezeigt wird. Klicke dafür im Email Builder auf die Symbole in der linken oberen Ecke:
Code-Modus
Zu guter Letzt: Du kannst für deine Emails alle Elemente und Attribute verwenden, die in MJML möglich sind. Um den Email Builder nicht zu überfrachten, sind nicht alle Einstellungen auf der grafischen Oberfläche möglich. Du kannst jedoch jederzeit in den Code-Modus gehen, um dort weitere Anpassungen vorzunehmen.
Besuche dazu unser Tutorial:
Bearbeite deine Emails im Code-ModusDamit weisst du alles, um erfolgreich Emails in Friendly Automate zu erstellen!
Hast du noch Fragen? Gerne helfen wir Dir per 📧 E-Mail, ☎️ Telefon und 👩💻 Videoanrufen.
Hier gelangst du zurück zur Hilfe-Startseite:
