📨

Erstelle Emails mit dem Email-Editor

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
Inhaltsverzeichnis (ausklappen)

Um eine Email mit dem Email Builder zu erstellen, klicke in Friendly Automate links auf «Channels», dann «Emails», dann oben rechts auf «Neu»:

image

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.

image

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.)

image
💡
Möchtest du eigene Vorlagen anlegen? Besuche unser Tutorial:🎨Erstelle eine eigene Email-Vorlage

Gib der Email in der rechten Spalte einen Betreff und einen internen Namen und lege die Sprache fest. Dann klicke oben auf «Builder».

image

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.

image

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.

💡
Wir codieren Emails in MJML. Warum, erfährst du hier:💭Formate für Emails: MJML vs. HTML

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:

image

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.

💡
Spalten werden auf kleinen Bildschirmen automatisch untereinander angezeigt.

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):

image
💡
Für Grösseneinstellungen in Emails ist es noch wichtig zu wissen, dass die Breite einer Email in der Regel 600px beträgt. Inhalte sollten also maximal 600px breit sein, drei Spalten nebeneinander etwa je 200px.

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.

image

Ziehe also zuerst einen Abschnitt mit ein, zwei oder drei Spalten in deine Email.

image

Um die Spaltenbreite anzupassen, wählst du zuerst mit dem blauen Rahmen die Spalte an. Dafür hast du zwei Möglichkeiten:

image

Entweder du bewegst die Maus über das Feld, bis «Column» angezeigt wird, und klickst dann, um die Spalte anzuwählen.

image

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.

image
💡
Generell ist es besser, die Spaltenbreite in Prozent anzugeben. Wenn du dich für Pixel entscheidest, achte darauf, dass die Gesamtbreite der Spalten immer 600px ergeben sollte.

Textfelder

Jede Spalte enthält bereits automatisch einen Textfeld. Durch einen Doppelklick auf das Textfeld kannst du den Text bearbeiten:

image

Klicke oben rechts auf das Symbol mit dem Pinsel und dann auf «Typography», um den Text zu formatieren.

image

Du gelangst zurück zur Blockauswahl, indem du oben rechts auf das Symbol mit den vier Blöcken klickst:

image

Bilder

Um ein Bild einzufügen, ziehe einen «Image» Block in eine vorhandene Section:

image

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:

image

Um das Bild anzupassen, klicke wieder oben rechts auf den Pinsel. Dort kannst du etwa die Bildgrösse oder die Hintergrundfarbe verändern.

image

Buttons

Füge einen Button ein, indem du den «Button» Block in eine vorhandene Section ziehst.

image

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.

image

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ü:

image

Trage dann den Link im Feld «URL» ein:

image

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).

image

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:

image

Benötigst du zusätzliche Elemente, ziehe ein «Social Element» in die Social Group:

image
💡
Achtung: Du musst immer zuerst eine Social Group erstellen, bevor du einzelne Social Elements hinzufügen kannst.

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.

image

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ü:

image

Aus dem Dropdown-Menü wählst du das Kontaktfeld, das du auslesen möchtest:

image
💡
In der aktuellen Version von Friendly Automate sind Platzhalter vorübergehend nicht aus dem Kontextmenü verfügbar. Du kannst Platzhalter auch manuell einsetzen, z.B. {contactfield=firstname} für den Vornamen und {contactfield=lastname} für den Nachnamen. Weitere Platzhalter findest du hier.

Damit wird beim Versenden der Email zum Beispiel automatisch der Vorname des jeweiligen Kontaktes eingetragen.

image

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»:

image
💡
In der aktuellen Version von Friendly Automate sind Platzhalter vorübergehend nicht aus dem Kontextmenü verfügbar. Du kannst die Platzhalter auch manuell einsetzen:

Webview: {webview_text}

Unsubscribe: {unsubscribe_text}

So sieht der Platzhalter für den Webview-Text im Email Builder aus:

image

So kann der Platzhalter in der versendeten Email aussehen:

image

So sieht der Platzhalter für den Unsubscribe-Text im Email Builder aus:

image

So kann der Platzhalter in der versendeten Email aussehen:

image

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»:

image

Klicke dann auf «E-Mail Einstellungen»:

image

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.

image
💡
Achtung: Verändere nicht die Platzhalter zwischen den senkrechten Strichen wie |URL| und |EMAIL|. Die Elemente werden vom System benutzerspezifisch eingetragen.

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.

image

Klicke dann oben rechts auf den Pinsel. Unter «Dimension» kannst du den oberen, unteren, linken und rechten Abstand (padding) definieren:

image
💡
Beachte: Der Email-Editor lässt Abstandseinstellungen nur über «padding» zu. Wenn du bereits mit HTML gearbeitet hast, bist du es möglicherweise gewohnt, Abstände über «margin» zu definieren. Das Problem ist, dass die verschiedenen Email-Clients «margin» sehr unzuverlässig rendern, während die Umsetzung von «padding» dagegen sehr gut ist. Deshalb sollte für Abstände sowohl in HTML- als auch MJML-Emails immer «padding» verwendet werden.
💡
Beachte: Durch einen Bug in Friendly Automate 4 werden manchmal Abstände auf der grafischen Oberfläche angezeigt, obwohl das Padding auf 0px eingestellt ist. Das kannst du beheben, indem du das Padding einmal heraufsetzt (z.B. auf 10px) und dann wieder auf 0px zurücksetzt. Jetzt sollte der Abstand auf der grafischen Oberfläche richtig dargestellt werden.

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:

image

Element verschieben:

image

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:

image

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-Modus

Damit 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:

Friendly AutomateFriendly Automate