Cómo crear una plantilla de email híbrida

Qué aprenderás

Descubre cómo crear plantillas HTML personalizadas que sean compatibles con el editor de arrastrar y soltar de Klaviyo (es decir, plantillas híbridas). Al seguir estos pasos, puedes diseñar un email HTML totalmente personalizado y, al mismo tiempo, mantener el acceso a funciones disponibles solo en el editor de arrastrar y soltar (por ejemplo, bloques de productos o bloques de contenido universal).

Añade un fragmento de código a tu plantilla HTML

Solo añade uno de los fragmentos de código que se indican a continuación por plantilla de email. Un fragmento de código te permite añadir varios bloques de arrastrar y soltar, así que no necesitas añadir varios fragmentos de código.

Por ejemplo, si quieres añadir una imagen y un bloque de tabla con el editor de arrastrar y soltar, solo tienes que seguir los pasos de Añadir un bloque de imagen personalizable que se indican a continuación. Una vez que subas tu plantilla a Klaviyo y la uses en una campaña o un flujo, podrás añadir bloques por encima o por debajo del bloque de imagen.

Añade un bloque de texto editable

1. Crea una plantilla HTML personalizada con tu editor HTML preferido.
2. Añade el siguiente fragmento de código a tu plantilla HTML. Colócalo donde quieras añadir tu bloque de texto en tu plantilla.
   

text Copy

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-text-block">Hello world!</div>
</td>

1. En Klaviyo, navega hasta Contenido > Plantillas.
2. Selecciona la pestaña Plantillas de Email.
3. Haz clic en Importar.
4. Introduce un nombre para tu plantilla, sube tu archivo HTML e impórtalo.
5. Si abres la plantilla desde la pestaña Plantillas, verás el código de tu plantilla en el editor HTML de Klaviyo.
   

1. Para acceder a la plantilla en el editor de arrastrar y soltar de Klaviyo, añádela a una campaña o flujo.
2. Selecciona Arrastrar y soltar como el tipo de plantilla.
   

1. Fíjate en el bloque de texto que dice ¡Hola, mundo! Este es tu bloque de texto editable.
2. Arrastra y suelta bloques adicionales por encima o por debajo del bloque de texto, según se desee.

Añade un bloque de imagen personalizable

1. Crea una plantilla HTML personalizada con tu editor HTML preferido.
2. Añade el siguiente fragmento de código a tu plantilla HTML. Asegúrate de colocarlo donde quieras añadir tu bloque de imagen después de importar tu plantilla.
   

text Copy

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-image-block"></div>
</td>

1. De forma opcional, puedes añadir una imagen predefinida dentro del div. Si decides hacerlo, tu código tendrá este aspecto:
   

text Copy

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-image-block">
        <a href="http://klaviyo.com><img src="example.com/my_image.png" alt="My Image" /></a>    </div>
</td>

1. En Klaviyo, navega hasta Contenido > Plantillas.
2. Selecciona la pestaña Plantillas de Email.
3. Haz clic en Importar.
4. Introduce un nombre para tu plantilla, sube tu archivo HTML e impórtalo.
5. Si abres la plantilla desde la pestaña Plantillas, verás el código de tu plantilla en el editor HTML de Klaviyo.
   

1. Para acceder a la plantilla en el editor de arrastrar y soltar de Klaviyo, añádela a una campaña o un flujo. En el paso de contenido, selecciona la plantilla que importaste.
2. Fíjate en el bloque de imagen, que contendrá un botón para subir una imagen o la imagen que hayas incluido.
3. Arrastra y suelta bloques adicionales encima o debajo del bloque de imagen, según quieras.
   

Añadir un bloque de contenido universal

Este proceso es compatible con bloques de contenido universal, no con secciones universales.

1. Crea una plantilla HTML personalizada con tu editor HTML preferido.
2. Añade el siguiente fragmento de código a tu plantilla HTML. Asegúrate de colocarlo donde quieras añadir tu bloque de imagen después de importar tu plantilla.
   

text Copy

<td data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">     <div data-klaviyo-universal-block="block_id_1">&nbsp;<div></td>

1. Sustituye block_id_1 por el ID de tu bloque de contenido universal. Para encontrar el ID de un bloque de contenido universal:
   1. Ve a Contenido > Contenido universal.
   2. Abre un bloque de contenido universal para editarlo.
   3. La URL de esta página tendrá este formato: https://www.klaviyo.com/email-template-editor/universal/block/BLOCK_ID.
   4. Copia el ID del bloque desde la URL.
2. En Klaviyo, navega hasta Contenido > Plantillas.
3. Selecciona la pestaña Plantillas de Email.
4. Haz clic en Importar.
5. Introduce un nombre para tu plantilla, sube tu archivo HTML e impórtalo.
6. Si abres la plantilla desde la pestaña Plantillas, verás el código de tu plantilla en el editor HTML de Klaviyo.
   

1. Para acceder a la plantilla en el editor de arrastrar y soltar de Klaviyo, añádela a una campaña o un flujo. En el paso de contenido, selecciona la plantilla que importaste.
2. Fíjate en el/los bloque(s) de contenido universal.

Puedes añadir varios bloques de contenido universal con un solo fragmento de código. Para hacerlo, añade otro elemento div inmediatamente después del primero en el fragmento de código anterior, usando el ID de un bloque diferente.

Añade un bloque de otro tipo (es decir, bloque de producto, bloque de tabla)

1. Crea una plantilla HTML personalizada con tu editor HTML preferido.
2. Añade el siguiente fragmento de código a tu plantilla HTML. Colócalo donde quieras añadir tus bloques después de importar tu plantilla.
   

text Copy

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-text-block">Hello world!</div>
</td>

1. En Klaviyo, navega hasta Contenido > Plantillas.
2. Selecciona la pestaña Plantillas de Email.
3. Haz clic en Importar.
4. Introduce un nombre para tu plantilla, sube tu archivo HTML e impórtalo.
5. Si abres la plantilla desde la pestaña Plantillas, verás el código de tu plantilla en el editor HTML de Klaviyo.
   

1. Para acceder a la plantilla en el editor de arrastrar y soltar de Klaviyo, añádela a una campaña o un flujo. En el paso de contenido, selecciona la plantilla que importaste.
2. Fíjate en el bloque de texto que dice ¡Hola, mundo! Arrastra otro bloque (p. ej., un bloque de producto) debajo de este bloque.
3. Elimina el bloque de texto y añade bloques personalizados adicionales, según quieras.
   

Código de ejemplo de plantilla de email híbrido

El siguiente ejemplo muestra un archivo HTML funcional con el fragmento de código híbrido para un bloque de texto. Usa este código para probar la funcionalidad del editor híbrido.

  <html>
  <head>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>A simple hybrid email</title>
    <style>
      body {
        background-color: #f6f6f6;
        font-family: sans-serif;
        margin: 20px;
      }
      .main {
        background: #ffffff;
        border-radius: 3px;
        width: 100%;
      }
      .container {
        margin: 0 auto !important;
        width: 600px;
      }
      .wrapper {
        box-sizing: border-box;
        padding: 15px;
      }
      table {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <table class="main">
        <tr>
          <td class="wrapper">This is a very simple HTML email</td>
        </tr>
        <tr>
          <td class="wrapper">
            <table>
              <tr>
                <td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
                  <div class="klaviyo-block klaviyo-text-block">
                    Hello world!
                  </div>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td class="wrapper">{% unsubscribe %}</td>
        </tr>
      </table>
    </div>
  </body>
</html>

Emojis y plantillas de email híbridas

A partir de febrero de 2024, se admiten todos los emojis en todos los editores de email de Klaviyo (es decir, el editor de arrastrar y soltar, el editor híbrido, el editor de solo texto y el editor de HTML personalizado).

Resultado

Después de completar estos pasos, podrás añadir y editar determinadas áreas de una plantilla HTML personalizada. Ten en cuenta que no puedes añadir ni editar bloques de arrastrar y soltar en ninguna zona de la plantilla personalizada, excepto donde se colocó el bloque inicial.

Recursos adicionales