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. HTMLKurz 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>
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:
Wählst du oben links die Ansicht für mobile Endgeräte, werden die Spalten automatisch untereinander platziert:
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:
Damit gelangst du in die Code-Ansicht. Finde die Spalten, die gruppiert werden sollen:
Füge oberhalb der ersten Spalte den tag <mj-group> hinzu und schliesse den tag unterhalb der zweiten Spalte mit </mj-group> wieder:
Speichere deine Änderung, indem du auf den Button «Bearbeiten» klickst.
- 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:
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 Automate