Designs

Progetti MJML

Crea design di email responsive per le campagne Clerk.io utilizzando MJML.

MJML è un linguaggio di markup progettato specificamente per creare email responsive. Invece di combattere con tabelle HTML e stili inline per ottenere un risultato coerente su Gmail, Outlook e Apple Mail, scrivi un markup semantico pulito e MJML lo compila in HTML collaudato che funziona ovunque.

L’editor delle campagne email di Clerk.io include un editor MJML integrato, rendendolo l’approccio consigliato per creare design di email che appaiono perfetti su qualsiasi dispositivo o client.

Quando Usare #

Usa MJML quando crei o modifichi design per Newsletter o Trigger in Clerk.io Email.

Per i design on-site — Search, Recommendations, e lo strato di visualizzazione degli Email Embeds — utilizza invece il Design Editor o i Code Designs. MJML è rilevante solo per lo strato di invio email.

Struttura di Base #

Ogni documento MJML racchiude il contenuto in <mjml>, con un <mj-head> opzionale per stili globali e un <mj-body> per il layout visibile:

<mjml>
  <mj-head>
    <!-- Stili e attributi globali -->
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <!-- Il tuo contenuto qui -->
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Gli elementi principali sono:

  • <mj-section> — una riga a larghezza intera
  • <mj-column> — una colonna all’interno di una riga; usane più di una per layout affiancati
  • <mj-text> — un blocco di testo
  • <mj-image> — un’immagine responsive
  • <mj-button> — un pulsante call-to-action stilizzato
  • <mj-divider> — una linea orizzontale
  • <mj-spacer> — aggiunge spazio verticale tra le sezioni

La documentazione MJML copre l’elenco completo dei componenti disponibili.

Variabili del Prodotto #

Il linguaggio di template Liquid di Clerk.io funziona all’interno di MJML allo stesso modo in cui avviene in altri design. Racchiudi i dati del prodotto in {{ }} per renderizzarli.

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

Cicli sui Prodotti #

Usa un ciclo {% for %} per ripetere un blocco di layout per ogni prodotto consigliato. Il ciclo renderizza una sezione per ogni prodotto nell’elenco restituito da 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 now
    </mj-button>
  </mj-column>
</mj-section>
{% endfor %}

Logica Condizionale #

Usa {% if %} per mostrare o nascondere parti del design in base ai dati del prodotto. Un caso comune è mostrare il prezzo originale quando un prodotto è in saldo:

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

Puoi anche usare {% else %} per mostrare un’alternativa quando la condizione non è soddisfatta:

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

Stili Globali #

Usa <mj-attributes> all’interno di <mj-head> per impostare stili predefiniti che si applicano a tutto il design. Questo evita di ripetere lo stesso font o colore su ogni componente.

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

Ogni attributo impostato qui può comunque essere sovrascritto sui singoli componenti.

Layout Multi‐Colonna #

Usa più elementi <mj-column> all’interno di una singola <mj-section> per creare layout affiancati. Imposta valori width espliciti per controllare le proporzioni.

Una griglia prodotti a due colonne:

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

Per una vera griglia due per riga, cicla con loop.index e raggruppa manualmente i prodotti, oppure usa una singola sezione con due colonne hardcoded che fanno riferimento a products[0] e products[1].

Esempio Completo #

Di seguito un design di newsletter completo con stili globali, un header, righe prodotti con logica sul prezzo in saldo e un 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>

    <!-- Righe prodotto -->
    {% 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">
          You are receiving this email because you signed up for updates.
        </mj-text>
      </mj-column>
    </mj-section>

  </mj-body>
</mjml>

Anteprima e Test #

L’editor MJML di Clerk.io compila il markup e mostra un’anteprima dal vivo mentre lo modifichi. Per testare su diversi client di posta prima dell’invio, incolla l’HTML compilato in uno strumento come Litmus o Email on Acid.

Per il riferimento completo dei componenti, vedi la documentazione MJML.

Questa pagina è stata tradotta da un'utile intelligenza artificiale, quindi potrebbero esserci errori linguistici. Grazie per la comprensione.