👩🏻‍💻

Bearbeite deine Emails im Code-Modus

Wenn du Code zu deinen Emails hinzufügen möchtest, der im Email Builder nicht verfügbar ist, kannst du dafür den Code-Modus verwenden und so den MJML-Code direkt bearbeiten. Damit stehen dir alle Funktionalitäten von MJML uneingeschränkt zur Verfügung.

In diesem Tutorial lernst du:

  • Grundlegendes zur Codierung von MJML
  • wie du in Friendly Automate in den Code-Modus gelangst
  • und wie du dort konkrete Anpassungen am Code vornimmst

Grundlegendes zur Codierung von MJML

Warum wir MJML statt HTML verwenden, erfährst du auf dieser Seite:

💭Formate für Emails: MJML vs. HTML

Kurz zusammengefasst: MJML ist eine Open Source Markup-Sprache, die dafür entwickelt wurde, Inhalte in allen Email-Clients richtig (und das heisst vor allem auch responsiv) darzustellen. MJML wird dabei nur im Hintergrund verwendet: Vor dem Versenden der Email wird sie in responsives HTML umgesetzt.

MJML nimmt dir damit viel Arbeit ab, denn die MJML-Komponenten sind Layout-Container, die eine einfache Codierung zulassen, die nachträglich automatisch in ein komplexes HTML-Layout übersetzt werden. Wie das MJML-Layout grundsätzlich aufgebaut ist, lernst du in unserem Email-Editor-Tutorial.

Wenn du auf der Code-Ebene mit MJML arbeiten möchtest, kannst du die offizielle MJML-Dokumentation nutzen, um dich über die möglichen Komponenten und deren Attribute zu informieren. Einige der wichtigsten MJML-Komponenten sind:

  • Abschnitt: <mj-section>
  • Spalte: <mj-column>
  • Bild: <mj-image>
  • Text: <mj-text>
  • Button: <mj-button>
  • Social-Media-Element: <mj-social>
💡
Wichtig ist noch: MJML beinhaltet auch HTML-Code, und zwar innerhalb des MJML-Text-Elements <mj-text>. Innerhalb von <mj-text> ist jedes HTML-Element mit allen passenden Attributen möglich. Wenn du dafür Ressourcen benötigst, findest du hier eine HTML-Dokumentation.

Passe deine Email im Code-Modus an

Beispiel: Spalten auch auf Smartphones nebeneinander darstellen

Ein grosser Vorteil von MJML ist, dass deine Emails responsiv dargestellt werden. Wenn du einen Abschnitt mit zwei Spalten erstellst, werden diese Spalten auf einem Smartphone automatisch untereinander dargestellt.

Hier siehst du einen Abschnitt mit zwei Spalten in der Ansicht im Email-Editor:

image

Wählst du oben links die Ansicht für mobile Endgeräte, werden die Spalten automatisch untereinander platziert:

image

Nehmen wir an, du möchtest, dass diese Spalten auf einem Smartphone stattdessen nebeneinander angezeigt werden. MJML bietet diese Möglichkeit mit der Komponente <mj-group> (siehe die MJML-Dokumentation). Über die grafische Oberfläche des Email-Editors kannst du <mj-group> nicht einbinden, aber im Code-Modus ist das ganz einfach möglich.

Öffne zuerst deine Email im Email-Editor. Wenn du damit Hilfe benötigst, besuche dieses Tutorial. Klicke dann oben rechts auf das Symbol für den Code-Modus:

image

Damit gelangst du in die Code-Ansicht. Finde die Spalten, die gruppiert werden sollen:

image

Füge oberhalb der ersten Spalte den tag <mj-group> hinzu und schliesse den tag unterhalb der zweiten Spalte mit </mj-group> wieder:

image

Speichere deine Änderung, indem du auf den Button «Bearbeiten» klickst.

💡
Achtung: Durch einen Bug in Friendly Automate 4 werden dir Änderungen, die du im Code-Modus vorgenommen hast, auf der grafischen Oberfläche zunächst nicht angezeigt bzw. weitere Elemente «verschwinden» plötzlich. Es ist jedoch alles gespeichert. Die Email wird wieder richtig angezeigt, wenn du folgende Schritte durchführst:
  • Schliesse die Email durch einen Klick auf das Kreuz ganz oben rechts.
  • Klicke nun oben rechts auf «Sichern & Schließen».
  • Klicke oben rechts auf «Ändern», dann auf «Builder». Du bist wieder im Email-Editor und die Email wird richtig angezeigt.

Wenn du die Email jetzt auf einem Smartphone öffnest, werden die Spalten nicht mehr so ausgegeben…

… sondern so:

image
image
💡
Beachte: Da der Email-Editor diese Funktion auf der grafischen Oberfläche nicht unterstützt, werden die Spalten in der Vorschau für mobile Endgeräte weiterhin untereinander angezeigt. Der Code ist aber gespeichert und wird beim Versand der Email berücksichtigt.

Auf diese Weise kannst du ganz einfach weitreichende Anpassungen an deinen Emails im Code-Modus vornehmen.

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