Designs

MJML Designs

Opret responsive emaildesigns til Clerk.io-kampagner ved hjælp af MJML.

MJML er et markup-sprog designet specifikt til at bygge responsive emails. I stedet for at kæmpe med HTML-tabeller og inline-styles for at opnå ensartet visning på Gmail, Outlook og Apple Mail, skriver du ren, semantisk markup, og MJML kompilerer det til gennemtestet HTML, der virker overalt.

Clerk.io’s email-kampagneeditor inkluderer en indbygget MJML-editor, hvilket gør det til den anbefalede metode til at skabe email-designs, der ser godt ud på enhver enhed eller klient.

Hvornår bruges det #

Brug MJML, når du opretter eller redigerer designs til Nyhedsbreve eller Triggere i Clerk.io Email.

Til on-site-designs — Search, Recommendations og visningslaget af Email Embeds — brug i stedet Design Editor eller Code Designs. MJML er kun relevant for selve emailsending-laget.

Grundlæggende struktur #

Ethvert MJML-dokument omslutter indhold i <mjml>, med en valgfri <mj-head> til globale styles og en <mj-body> til det synlige layout:

<mjml>
  <mj-head>
    <!-- Globale styles og attributter -->
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <!-- Dit indhold her -->
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

De vigtigste byggeklodser er:

<mj-section> — en række i fuld bredde
<mj-column> — en kolonne i en række; brug flere for side-ved-side layouts
<mj-text> — en tekstblok
<mj-image> — et responsivt billede
<mj-button> — en stiliseret call-to-action-knap
<mj-divider> — en horisontal linje
<mj-spacer> — tilføjer lodret afstand mellem sektioner

MJML-dokumentationen dækker hele listen over tilgængelige komponenter.

Produktvariabler #

Clerk.io’s Liquid template-sprog fungerer inde i MJML på samme måde som i ethvert andet design. Omslut produktdata i {{ }} for at vise det.

<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 nu
    </mj-button>
  </mj-column>
</mj-section>

Produktloops #

Brug en {% for %}-loop for at gentage et layout-blok for hvert anbefalet produkt. Loopen gengiver én sektion pr. produkt i listen returneret af Clerk.io.

{% 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 nu
    </mj-button>
  </mj-column>
</mj-section>
{% endfor %}

Betinget logik #

Brug {% if %} til at vise eller skjule dele af designet baseret på produktdata. Et almindeligt brugsscenarie er at vise den originale pris, når et produkt er på tilbud:

{% 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 %}

Du kan også bruge {% else %} for at vise et alternativ, hvis betingelsen ikke er opfyldt:

{% if product.in_stock %}
<mj-button href="{{ product.url }}" background-color="#000000">
  Shop nu
</mj-button>
{% else %}
<mj-text font-size="13px" color="#999999" align="center">
  Ikke på lager
</mj-text>
{% endif %}

Globale styles #

Brug <mj-attributes> inde i <mj-head> for at sætte standardstyles, der gælder for hele designet. Dette undgår at gentage samme skrifttype eller farve på hver komponent.

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

Enhver attribut sat her kan stadig overstyres på individuelle komponenter.

Fler-kolonne layout #

Brug flere <mj-column> elementer inden i én <mj-section> for at skabe side-ved-side layouts. Sæt eksplicitte width-værdier for at styre proportionerne.

Et produktgrid i to kolonner:

{% 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 nu</mj-button>
  </mj-column>
</mj-section>
{% endfor %}

For et reelt to-pr.-række grid, loop med loop.index og gruppér produkterne manuelt, eller brug en enkelt sektion med to hårdkodede kolonner, der refererer til products[0] og products[1].

Komplet eksempel #

Herunder er et komplet nyhedsbrevsdesign med globale styles, header, produkt-rækker med tilbudslogik og en 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">
          Udvalgt til dig
        </mj-text>
        <mj-divider border-color="#eeeeee" padding="12px 0 0" />
      </mj-column>
    </mj-section>

    <!-- Produkt-rækker -->
    {% 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 nu
        </mj-button>
        {% else %}
        <mj-text font-size="13px" color="#999999">
          Ikke på lager
        </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">
          Du modtager denne email, fordi du har tilmeldt dig opdateringer.
        </mj-text>
      </mj-column>
    </mj-section>

  </mj-body>
</mjml>

Forhåndsvisning og test #

Clerk.io’s MJML-editor kompilerer markuppen og viser et live-preview, mens du redigerer. For at teste på tværs af email-klienter før udsendelse, indsæt den kompilerede HTML i et værktøj som Litmus eller Email on Acid.

For komplet komponentreference, se MJML-dokumentationen.

Denne side er oversat af en hjælpsom AI, og der kan derfor være sproglige fejl. Tak for forståelsen.