MJML-Designs
MJML ist eine Markup-Sprache, die speziell für den Aufbau responsiver E-Mails entwickelt wurde. Anstatt sich mit HTML-Tabellen und Inline-Styles herumzuschlagen, um ein konsistentes Ergebnis in Gmail, Outlook und Apple Mail zu erzielen, schreiben Sie sauberes, semantisches Markup, und MJML kompiliert es in bewährtes HTML, das überall funktioniert.
Der E-Mail-Kampagneneditor von Clerk.io enthält einen integrierten MJML-Editor, was ihn zur empfohlenen Methode für das Erstellen von E-Mail-Designs macht, die auf jedem Gerät oder Client großartig aussehen.
Wann verwenden #
Verwenden Sie MJML beim Erstellen oder Bearbeiten von Designs für Newsletters oder Triggers in Clerk.io Email.
Für On-Site-Designs — Search, Recommendations und die Darstellungsebene von Email Embeds — verwenden Sie stattdessen den Design Editor oder Code Designs. MJML ist nur für die Versandebene der E-Mail relevant.
Grundlegende Struktur #
Jedes MJML-Dokument umschließt Inhalte in <mjml> mit einem optionalen <mj-head> für globale Styles und einem <mj-body> für das sichtbare Layout:
<mjml>
<mj-head>
<!-- Globale Styles und Attribute -->
</mj-head>
<mj-body>
<mj-section>
<mj-column>
<!-- Ihr Inhalt hier -->
</mj-column>
</mj-section>
</mj-body>
</mjml>
Die wichtigsten Bausteine sind:
<mj-section>— eine zeilenbreite Reihe<mj-column>— eine Spalte innerhalb einer Reihe; mehrere für nebeneinander angeordnete Layouts verwenden<mj-text>— ein Textblock<mj-image>— ein responsives Bild<mj-button>— ein gestalteter Call-to-Action-Button<mj-divider>— eine horizontale Linie<mj-spacer>— fügt vertikalen Abstand zwischen Abschnitten ein
Die MJML-Dokumentation enthält die vollständige Liste aller verfügbaren Komponenten.
Produktvariablen #
Clerk.io’s
Liquid template language funktioniert in MJML genauso wie in jedem anderen Design. Produktdaten werden in {{ }} eingefügt, um sie zu rendern.
<mj-section>
<mj-column width="35%">
<mj-image src="{{ product.image }}" href="{{ product.url }}" />
</mj-column>
<mj-column width="65%">
<mj-text font-size="16px" font-weight="bold">
{{ product.name }}
</mj-text>
<mj-text font-size="14px" color="#666666">
{{ product.price | money }}
</mj-text>
<mj-button href="{{ product.url }}" background-color="#000000">
Shop now
</mj-button>
</mj-column>
</mj-section>
Produkt-Schleifen #
Verwenden Sie eine {% for %}-Schleife, um einen Layoutblock für jedes empfohlene Produkt zu wiederholen. Die Schleife rendert einen Abschnitt pro Produkt in der von Clerk.io zurückgegebenen Liste.
{% for product in products %}
<mj-section background-color="#ffffff" padding="10px 20px">
<mj-column width="35%">
<mj-image src="{{ product.image }}" href="{{ product.url }}" border-radius="4px" />
</mj-column>
<mj-column width="65%">
<mj-text font-size="16px" font-weight="bold">
{{ product.name }}
</mj-text>
<mj-text font-size="18px" font-weight="bold">
{{ product.price | money }}
</mj-text>
<mj-button href="{{ product.url }}" background-color="#000000">
Shop now
</mj-button>
</mj-column>
</mj-section>
{% endfor %}
Bedingte Logik #
Verwenden Sie {% if %}, um Teile des Designs basierend auf Produktdaten anzuzeigen oder auszublenden. Ein gängiges Beispiel ist das Anzeigen des Originalpreises, wenn ein Produkt im Angebot ist:
{% for product in products %}
<mj-section background-color="#ffffff">
<mj-column>
<mj-image src="{{ product.image }}" href="{{ product.url }}" />
<mj-text font-size="15px" font-weight="bold">
{{ product.name }}
</mj-text>
{% if product.price < product.list_price %}
<mj-text font-size="13px" color="#999999">
<s>{{ product.list_price | money }}</s>
</mj-text>
{% endif %}
<mj-text font-size="18px" font-weight="bold" color="#cc0000">
{{ product.price | money }}
</mj-text>
</mj-column>
</mj-section>
{% endfor %}
Sie können auch {% else %} verwenden, um eine Alternative anzuzeigen, wenn die Bedingung nicht erfüllt ist:
{% if product.in_stock %}
<mj-button href="{{ product.url }}" background-color="#000000">
Shop now
</mj-button>
{% else %}
<mj-text font-size="13px" color="#999999" align="center">
Out of stock
</mj-text>
{% endif %}
Globale Styles #
Verwenden Sie <mj-attributes> innerhalb von <mj-head>, um Standardstile festzulegen, die auf das gesamte Design angewendet werden. Dadurch vermeiden Sie es, dieselbe Schriftart oder Farbe bei jeder Komponente zu wiederholen.
<mj-head>
<mj-attributes>
<mj-all font-family="Arial, sans-serif" />
<mj-text font-size="14px" color="#333333" line-height="1.6" />
<mj-button background-color="#000000" color="#ffffff" border-radius="4px" />
</mj-attributes>
</mj-head>
Jedes hier gesetzte Attribut kann bei einzelnen Komponenten überschrieben werden.
Mehrspaltiges Layout #
Verwenden Sie mehrere <mj-column>-Elemente innerhalb eines einzelnen <mj-section>, um nebeneinander angeordnete Layouts zu erstellen. Mit expliziten width-Werten steuern Sie die Proportionen.
Ein zweispaltiges Produktgitter:
{% for product in products %}
<mj-section background-color="#ffffff" padding="10px">
<mj-column width="50%">
<mj-image src="{{ product.image }}" href="{{ product.url }}" />
<mj-text font-size="14px" font-weight="bold" align="center">
{{ product.name }}
</mj-text>
<mj-text font-size="13px" color="#666666" align="center">
{{ product.price | money }}
</mj-text>
<mj-button href="{{ product.url }}">Shop now</mj-button>
</mj-column>
</mj-section>
{% endfor %}
Für ein echtes Zweier-pro-Reihe-Gitter können Sie mit loop.index iterieren und die Produkte manuell gruppieren oder einen einzigen Abschnitt mit zwei fest codierten Spalten erstellen, die auf products[0] und products[1] verweisen.
Komplettes Beispiel #
Nachfolgend finden Sie ein vollständiges Newsletter-Design mit globalen Styles, einem Header, Produktreihen mit Sale-Preis-Logik und einem Footer.
<mjml>
<mj-head>
<mj-attributes>
<mj-all font-family="Arial, sans-serif" />
<mj-text font-size="14px" color="#333333" line-height="1.6" />
<mj-button background-color="#000000" color="#ffffff" border-radius="4px" font-size="13px" />
</mj-attributes>
</mj-head>
<mj-body background-color="#f4f4f4">
<!-- Header -->
<mj-section background-color="#ffffff" padding="24px 20px 12px">
<mj-column>
<mj-text font-size="24px" font-weight="bold" align="center">
Picked for you
</mj-text>
<mj-divider border-color="#eeeeee" padding="12px 0 0" />
</mj-column>
</mj-section>
<!-- Produktreihen -->
{% for product in products %}
<mj-section background-color="#ffffff" padding="10px 20px">
<mj-column width="35%">
<mj-image
src="{{ product.image }}"
href="{{ product.url }}"
border-radius="4px" />
</mj-column>
<mj-column width="65%">
<mj-text font-size="15px" font-weight="bold">
<a href="{{ product.url }}" style="color:#333333; text-decoration:none;">
{{ product.name }}
</a>
</mj-text>
{% if product.price < product.list_price %}
<mj-text font-size="13px" color="#999999">
<s>{{ product.list_price | money }}</s>
</mj-text>
{% endif %}
<mj-text font-size="18px" font-weight="bold" color="#000000">
{{ product.price | money }}
</mj-text>
{% if product.in_stock %}
<mj-button href="{{ product.url }}" padding="10px 0 0">
Shop now
</mj-button>
{% else %}
<mj-text font-size="13px" color="#999999">
Out of stock
</mj-text>
{% endif %}
</mj-column>
</mj-section>
<mj-section background-color="#ffffff" padding="0 20px">
<mj-column>
<mj-divider border-color="#eeeeee" padding="0" />
</mj-column>
</mj-section>
{% endfor %}
<!-- Footer -->
<mj-section background-color="#f4f4f4" padding="20px">
<mj-column>
<mj-text font-size="12px" color="#999999" align="center">
Sie erhalten diese E-Mail, weil Sie sich für Updates angemeldet haben.
</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
Vorschau und Testing #
Der MJML-Editor von Clerk.io kompiliert das Markup und zeigt während der Bearbeitung eine Live-Vorschau an. Um vor dem Versand in verschiedenen E-Mail-Clients zu testen, fügen Sie das kompilierte HTML in ein Tool wie Litmus oder Email on Acid ein.
Die vollständige Komponentenreferenz finden Sie in der MJML-Dokumentation.
Diese Seite wurde von einer hilfreichen KI übersetzt, daher kann es zu Sprachfehlern kommen. Vielen Dank für Ihr Verständnis.