Designs

Diseños MJML

Crea diseños de correo electrónico responsivos para campañas de Clerk.io usando MJML.

MJML es un lenguaje de marcado diseñado específicamente para crear emails responsivos. En lugar de lidiar con tablas de HTML y estilos en línea para obtener un resultado consistente en Gmail, Outlook y Apple Mail, escribes un marcado limpio y semántico, y MJML lo compila en HTML probado y confiable que funciona en todas partes.

El editor de campañas de email de Clerk.io incluye un editor de MJML integrado, lo que lo convierte en el enfoque recomendado para crear diseños de email que se vean bien en cualquier dispositivo o cliente.

Cuándo Utilizarlo #

Usa MJML cuando crees o edites diseños para Newsletters o Triggers en Clerk.io Email.

Para diseños en el sitio — Search, Recommendations y la capa de visualización de Email Embeds — usa el Design Editor o Code Designs en su lugar. MJML solo es relevante para la capa de envío de emails.

Estructura Básica #

Cada documento MJML envuelve el contenido en <mjml>, con un <mj-head> opcional para estilos globales y un <mj-body> para el diseño visible:

<mjml>
  <mj-head>
    <!-- Global styles and attributes -->
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <!-- Your content here -->
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Los bloques fundamentales son:

  • <mj-section> — una fila de ancho completo
  • <mj-column> — una columna dentro de una fila; usa varias para diseños lado a lado
  • <mj-text> — un bloque de texto
  • <mj-image> — una imagen responsiva
  • <mj-button> — un botón de llamada a la acción estilizado
  • <mj-divider> — una línea horizontal
  • <mj-spacer> — añade espacio vertical entre secciones

La documentación de MJML cubre la lista completa de componentes disponibles.

Variables de Producto #

El lenguaje de plantillas Liquid de Clerk.io funciona dentro de MJML del mismo modo que en cualquier otro diseño. Envuelve los datos del producto en {{ }} para mostrarlos.

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

Bucles de Productos #

Utiliza un bucle {% for %} para repetir un bloque de diseño por cada producto recomendado. El bucle muestra una sección por producto en la lista devuelta por 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 %}

Lógica Condicional #

Utiliza {% if %} para mostrar u ocultar partes del diseño según los datos del producto. Un caso común es mostrar el precio original cuando un producto está en oferta:

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

También puedes utilizar {% else %} para mostrar un mensaje alternativo cuando no se cumple la condición:

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

Estilos Globales #

Usa <mj-attributes> dentro de <mj-head> para establecer estilos predeterminados que se apliquen a todo el diseño. Esto evita repetir la misma fuente o color en cada 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>

Cualquier atributo definido aquí aún puede ser sobrescrito en componentes individuales.

Diseño Multicolumna #

Utiliza varios elementos <mj-column> dentro de una sola <mj-section> para crear diseños lado a lado. Define valores explícitos de width para controlar las proporciones.

Una cuadrícula de productos de dos columnas:

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

Para una cuadrícula real de dos por fila, recorre con loop.index y agrupa los productos manualmente, o utiliza una sola sección con dos columnas fijas que hacen referencia a products[0] y products[1].

Ejemplo Completo #

A continuación, se muestra un diseño completo de newsletter con estilos globales, un encabezado, filas de productos con lógica de precio de oferta y un pie de página.

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

    <!-- Product rows -->
    {% 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>

Vista Previa y Pruebas #

El editor de MJML de Clerk.io compila el marcado y muestra una vista previa en vivo mientras editas. Para probar en diferentes clientes de email antes de enviar, pega el HTML compilado en una herramienta como Litmus o Email on Acid.

Para la referencia completa de componentes, consulta la documentación de MJML.

Esta página ha sido traducida por una IA útil, por lo que puede contener errores de idioma. Muchas gracias por su comprensión.