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

Para reconstruir una plantilla HTML existente como una plantilla de arrastrar y soltar, usa la conversión de HTML a arrastrar y soltar. Klaviyo utiliza IA para recrear el diseño con bloques editables. Revisa el diseño y el contenido convertidos antes de enviar. Usa una plantilla híbrida cuando quieras conservar el HTML personalizado y añadir bloques editables solo en regiones específicas.

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

Cada fragmento de código que aparece a continuación crea 1 región editable. Puedes añadir varios bloques de arrastrar y soltar dentro de esa región. Para que haya zonas independientes de la plantilla que sean editables, añade un fragmento de código para cada región.

Coloca cada fragmento de código <td> dentro de un <tr> en el diseño de tabla del email. Configura data-klaviyo-region-width-pixels con el ancho de esa región en píxeles; en los ejemplos se usa 600.

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.

Antes de importar una plantilla de email de marketing, incluye una etiqueta de darse de baja, como {% unsubscribe %}. Guarda la plantilla como un archivo .html.

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.
   

textCopy

<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 Email: guardados.
3. Haz clic en Crear > Importar plantilla de email.
4. Introduce un nombre para la plantilla, carga el archivo HTML y haz clic en Importar plantilla.
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. Si se te pide que elijas un tipo de plantilla, selecciona Arrastrar y soltar.

1. En la galería de plantillas, selecciona Email: guardado, selecciona la plantilla que importaste y haz clic en Usar plantilla.
2. Fíjate en el bloque de texto que dice ¡Hola, mundo! Este es tu bloque de texto editable.
3. 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.
   

textCopy

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

1. Si quieres, añade una imagen predefinida dentro de div. Sustituye la URL de la imagen de ejemplo que aparece abajo por una URL de imagen de acceso público y sustituye el enlace y el texto alternativo por los tuyos:

textCopy

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

1. En Klaviyo, navega hasta Contenido > Plantillas.
2. Selecciona la pestaña Email: guardados.
3. Haz clic en Crear > Importar plantilla de email.
4. Introduce un nombre para la plantilla, carga el archivo HTML y haz clic en Importar plantilla.
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. Si se te pide que elijas un tipo de plantilla, selecciona Arrastrar y soltar.
2. En la galería de plantillas, selecciona Email: guardado, selecciona la plantilla que importaste y haz clic en Usar plantilla.
3. Fíjate en el bloque de imagen, que contendrá un botón para subir una imagen o la imagen que hayas incluido.
4. 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 la plantilla HTML. Asegúrate de colocarlo donde quieras añadir el bloque de contenido universal después de importar la plantilla.
   

textCopy

<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 Email: guardados.
4. Haz clic en Crear > Importar plantilla de email.
5. Introduce un nombre para la plantilla, carga el archivo HTML y haz clic en Importar plantilla.
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 flujo. Si se te pide que elijas un tipo de plantilla, selecciona Arrastrar y soltar.
2. En la galería de plantillas, selecciona Email: guardado, selecciona la plantilla que importaste y haz clic en Usar plantilla.
3. 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.
   

textCopy

<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 Email: guardados.
3. Haz clic en Crear > Importar plantilla de email.
4. Introduce un nombre para la plantilla, carga el archivo HTML y haz clic en Importar plantilla.
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. Si se te pide que elijas un tipo de plantilla, selecciona Arrastrar y soltar.
2. En la galería de plantillas, selecciona Email: guardado, selecciona la plantilla que importaste y haz clic en Usar plantilla.
3. Fíjate en el bloque de texto que dice ¡Hola, mundo! Arrastra otro bloque (p. ej., un bloque de producto) debajo de este bloque.
4. 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, todos los emojis son compatibles con 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).

Vista previa del email híbrido

Previsualiza el email en ordenador y móvil y envía un email de prueba antes de enviarlo a los destinatarios. Comprueba el diseño, las imágenes, los enlaces y cualquier contenido dinámico de la campaña o el flujo en el que planeas usarlo. Espera a que se terminen de guardar los cambios antes de salir del editor.

Resultado

Después de completar estos pasos, puedes añadir y editar bloques de arrastrar y soltar en las regiones definidas por tus fragmentos de código. El HTML personalizado circundante permanece fuera de esas regiones editables.

Recursos adicionales