Cómo crear una plantilla de correo electrónico híbrida

Objetivos del artículo

Aprende a crear plantillas HTML personalizadas compatibles con el editor de arrastrar y soltar de Klaviyo (es decir, plantillas híbridas). Al seguir estos pasos, puedes diseñar un correo electrónico HTML totalmente personalizado y mantener el acceso a funciones disponibles solo en el editor de arrastrar y soltar (p. ej., bloques de productos o bloques de contenido universal).

Agrega un fragmento de código a tu plantilla HTML

Solo agrega uno de los fragmentos de código que se describen a continuación por plantilla de correo electrónico. Un fragmento de código te permite agregar varios bloques de arrastrar y soltar, así que no necesitas agregar varios fragmentos de código.

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

Agrega un bloque de texto editable

1. Crea una plantilla HTML personalizada con el editor HTML que prefieras.
2. Agrega el siguiente fragmento de código a tu plantilla de HTML. Colócalo donde quieras agregar el bloque de texto en la 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 a Contenido > Plantillas.
2. Selecciona la pestaña Plantillas de correo electrónico.
3. Haz clic en Importar.
4. Ingresa un nombre para la plantilla, sube el archivo HTML y luego impórtalo.
5. Si abres la plantilla desde la pestaña Plantillas, verás el código de la plantilla en el editor HTML de Klaviyo.
   

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

1. Observa el bloque de texto que dice ¡Hola, mundo! Este es tu bloque de texto editable.
2. Arrastra y suelta bloques adicionales arriba o abajo del bloque de texto, según lo desees.

Agregar un bloque de imagen personalizable

1. Crea una plantilla HTML personalizada con el editor HTML que prefieras.
2. Agrega el siguiente fragmento de código a tu plantilla de HTML. Asegúrate de colocarlo donde quieras agregar el bloque de imagen después de importar la 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 agregar una imagen predefinida dentro del div. Si decides hacerlo, el código se verá así:
   

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 a Contenido > Plantillas.
2. Selecciona la pestaña Plantillas de correo electrónico.
3. Haz clic en Importar.
4. Ingresa un nombre para la plantilla, carga el archivo HTML e impórtalo.
5. Si abres la plantilla desde la pestaña Plantillas, verás el código de la plantilla en el editor HTML de Klaviyo.
   

1. Para acceder a la plantilla en el editor de arrastrar y soltar de Klaviyo, agrégala a una campaña o flujo. En el paso de contenido, selecciona la plantilla que importaste.
2. Observa el bloque de imagen, que contendrá un botón para subir una imagen o la imagen que incluiste.
3. Arrastra y suelta bloques adicionales arriba o abajo del bloque de imagen, según sea necesario.
   

Agrega 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 el editor HTML que prefieras.
2. Agrega el siguiente fragmento de código a tu plantilla de HTML. Asegúrate de colocarlo donde quieras agregar el bloque de imagen después de importar la 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. Reemplaza block_id_1 con el ID del 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 seguirá 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 a Contenido > Plantillas.
3. Selecciona la pestaña Plantillas de correo electrónico.
4. Haz clic en Importar.
5. Ingresa un nombre para la plantilla, carga el archivo HTML e impórtalo.
6. Si abres la plantilla desde la pestaña Plantillas, verás el código de la plantilla en el editor HTML de Klaviyo.
   

1. Para acceder a la plantilla en el editor de arrastrar y soltar de Klaviyo, agrégala a una campaña o flujo. En el paso de contenido, selecciona la plantilla que importaste.
2. Toma en cuenta los bloques de contenido universal.

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

Agrega un bloque de otro tipo (por ejemplo, bloque de productos, bloque de tabla)

1. Crea una plantilla HTML personalizada con el editor HTML que prefieras.
2. Agrega el siguiente fragmento de código a tu plantilla de HTML. Colócalo donde quieras agregar 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 a Contenido > Plantillas.
2. Selecciona la pestaña Plantillas de correo electrónico.
3. Haz clic en Importar.
4. Ingresa un nombre para la plantilla, carga el archivo HTML e impórtalo.
5. Si abres la plantilla desde la pestaña Plantillas, verás el código de la plantilla en el editor HTML de Klaviyo.
   

1. Para acceder a la plantilla en el editor de arrastrar y soltar de Klaviyo, agrégala a una campaña o flujo. En el paso de contenido, selecciona la plantilla que importaste.
2. Observa 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 agrega bloques personalizados adicionales, según lo desees.
   

Código de plantilla de correo electrónico híbrido de muestra

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 correo electrónico híbridas

A partir de febrero de 2024, se admiten todos los emojis en todos los editores de correo electrónico 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 agregar y editar ciertas áreas de una plantilla HTML personalizada. Ten en cuenta que no puedes agregar ni editar bloques de arrastrar y soltar en ninguna parte de la plantilla personalizada, excepto donde se colocó el bloque inicial.

Recursos adicionales