Cómo crear unas plantillas híbridas de correo electrónico

Aprox. 6 min. de lectura

Actualizado el 7 jul 2025, 10:03 a.m. EST

Aprende a crear plantillas HTML personalizadas compatibles con el editor de arrastrar y soltar de Klaviyo(es decir, plantillas híbridas). Siguiendo estos pasos, puedes diseñar un correo electrónico HTML totalmente personalizado manteniendo el acceso a funciones/características sólo disponibles en el editor de arrastrar y soltar (por ejemplo, bloque de producto o bloque de contenido universal).

Sólo recomendamos utilizar HTML personalizado a los especialistas en marketing con conocimientos técnicos, o a cualquiera que tenga acceso a un desarrollador. Aunque nuestro producto hace HTML personalizado, nuestro equipo de asistencia no puede ayudarte a construir tu plantilla personalizada más allá de ofrecerte la orientación general que se cubre en esta documentación. ¿Necesitas ayuda? alcanzar a un socio Klaviyo .

Para mantener la seguridad de tus datos, el equipo de asistencia de Klaviyo no puede abrir tus archivos HTML.

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

Añade sólo uno de los fragmentos de código que se indican a continuación por cada plantilla de correo electrónico. Un fragmento de código te permite añadir varios bloques arrastrando y soltando, por lo que no necesitas añadir varios fragmentos de código.

Por ejemplo, si quieres añadir una imagen y un bloque de tabla utilizando el editor de arrastrar y soltar, sólo 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 utilices en una campaña o flujo, podrás añadir bloque encima o debajo del bloque de la imagen.

Añadir un bloque de texto editable

Crea una plantilla HTML personalizada utilizando tu editor HTML preferido.

Añade el siguiente fragmento de código a tu plantilla HTML. Colócalo donde quieras añadir el bloque de texto en tu plantilla.

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

En Klaviyo, navega hasta Contenido > plantilla.
Selecciona la pestaña Plantillas de correo electrónico.
Haz clic en importar.
Introduce un nombre para tu plantilla, sube tu archivo HTML e impórtalo.
Si abres la plantilla desde la pestaña de tu plantilla, verás el código de tu plantilla en el editor HTML de Klaviyo.
Para acceder a la plantilla en el editor de arrastrar y soltar de Klaviyo, añádela a una campaña o flujo.
Selecciona Arrastrar y soltar como tipo de plantilla.
Observa el bloque de texto que dice ¡Hola mundo! Este es tu bloque de texto editable.
Arrastra y suelta bloques adicionales encima o debajo del bloque de texto, según desees.

Añadir un bloque de imagen personalizable

Crea una plantilla HTML personalizada utilizando tu editor HTML preferido.

Añade el siguiente fragmento de código a tu plantilla HTML. Asegúrate de colocarlo donde quieras añadir tu bloque de imágenes después de importar tu plantilla.

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

Opcionalmente, puedes añadir una imagen predefinida dentro del div. Si decides hacerlo así, tu código tendrá el siguiente aspecto:

<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="Mi imagen" /></a>
    </div>
</td>

En Klaviyo, navega hasta Contenido > plantilla.
Selecciona la pestaña Plantillas de correo electrónico.
Haz clic en importar.
Introduce un nombre para tu plantilla, sube tu archivo HTML e impórtalo.
Si abres la plantilla desde la pestaña de tu plantilla, verás el código de tu plantilla en el editor HTML de Klaviyo.
Para acceder a la plantilla en el editor de arrastrar y soltar de Klaviyo, añádela a una campaña o flujo. En el paso de contenido, selecciona la plantilla que importaste.
Fíjate en el bloque de la imagen, que contendrá un botón para subir una imagen o la imagen que hayas incluido.
Arrastra y suelta bloques adicionales encima o debajo del bloque de imagen, según desees.

Añadir un bloque de contenido universal

Este proceso es compatible con el contenido universal en bloque, no con las secciones universales.

Crea una plantilla HTML personalizada utilizando tu editor HTML preferido.
Añade el siguiente fragmento de código a tu plantilla HTML. Asegúrate de colocarlo donde quieras añadir tu bloque de imágenes después de importar tu plantilla.
```
<td data-klaviyo-region="true" data-klaviyo-region-width-pixels="600"> 
    <div data-klaviyo-universal-block="block_id_1"> & nbsp;<div>
</td>
```
Sustituye block_id_1 por el ID de tu bloque de contenido universal. Para encontrar el ID de un bloque de contenido universal:
1. Navega hasta 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 de la URL.
En Klaviyo, navega hasta Contenido > plantilla.
Selecciona la pestaña Plantillas de correo electrónico.
Haz clic en importar.
Introduce un nombre para tu plantilla, sube tu archivo HTML e impórtalo.
Si abres la plantilla desde la pestaña de tu plantilla, verás el código de tu plantilla en el editor HTML de Klaviyo.
Para acceder a la plantilla en el editor de arrastrar y soltar de Klaviyo, añádela a una campaña o flujo. En el paso de contenido, selecciona la plantilla que importaste.
Observa el bloque o bloques de contenido universal.

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

Añade un bloque de otro tipo (por ejemplo, bloque de producto, bloque de tabla)

Crea una plantilla HTML personalizada utilizando tu editor HTML preferido.

Añade el siguiente fragmento de código a tu plantilla HTML. Colócalo donde quieras añadir tu(s) bloque(s) después de importar tu plantilla.

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

En Klaviyo, navega hasta Contenido > plantilla.
Selecciona la pestaña Plantillas de correo electrónico.
Haz clic en importar.
Introduce un nombre para tu plantilla, sube tu archivo HTML e impórtalo.
Si abres la plantilla desde la pestaña de tu plantilla, verás el código de tu plantilla en el editor HTML de Klaviyo.
Para acceder a la plantilla en el editor de arrastrar y soltar de Klaviyo, añádela a una campaña o flujo. En el paso de contenido, selecciona la plantilla que importaste.
Observa el bloque de texto que dice ¡Hola mundo! Arrastra otro bloque (por ejemplo, un bloque de producto) debajo de este bloque.
Elimina el bloque de texto y añade otros bloques personalizados, si lo deseas.

Ejemplo de código híbrido de plantillas de correo electrónico

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

  <html>
  <head>
    < meta content="width=device-width, initial-scale=1.0" name="ventana gráfica" />
    <title>Un sencillo correo electrónico híbrido</title>
    <style>
      body {
        background-color: #f6f6f6;
        font-family: sans-serif;
        margin: 20px;
      }
      .main {
        background: #ffffff;
        border-radius: 3px;
        width: 100%;
      }
      .contenedor {
        margin: 0 auto !important;
        width: 600px;
      }
      .envoltorio {
        box-sizing: border-box;
        padding: 15px;
      }
      table   /style   /head   body   div class= container    table class= main    tr   td class= wrapper  Este es un correo electrónico HTML muy sencillo /td   /tr>
 <>
 <"" {
        width: 100%;
      }
    <>
 <>
 <>
 <"">
 <"">
 <>
 <""><>
 </style>
  </head>
  <body>
    <tr>
          </td>
        </tr>
        <tr>
          <table>
              <tr>
                < td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600"> 
 < div class="klaviyo-block klaviyo-text-block"> 
 ¡Hola mundo!
                  <>
 <>
 <>
</div>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          < td class="wrapper">{% unsubscribe %}</td>
        </tr>
      < /table xml-ph-0032@d></table>
    </div>
  </body>
</html>

Emojis y plantillas de correo electrónico híbridas

A partir de febrero de 2024, todos los emojis son compatibles con todos los editores de correo electrónico de Klaviyo (es decir, el editor de arrastrar y soltar, el editor híbrido, el editor de sólo texto y el editor HTML personalizado).

Resultado

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

Recursos adicionales

¿Te resultó útil este artículo?

Usa este formulario solo para enviar comentarios sobre el artículo. Más información sobre cómo contactar al equipo de asistencia.

Descubre más sobre Klaviyo

Comunidad

Conecta con colegas, socios y expertos de Klaviyo para inspirarte, compartir ideas y resolver todas tus dudas.

Visita la comunidad

Capacitación en vivo

Únete a una sesión en tiempo real con expertos de Klaviyo para conocer las mejores prácticas, cómo configurar funciones clave y mucho más.

Regístrate ahora

Asistencia

Accede a la asistencia a través de tu cuenta.

Asistencia por correo electrónico (prueba gratuita y cuentas de pago) Disponible 24/7

Asistencia virtual/por chat
La disponibilidad varía según la ubicación y el tipo de plan

Iniciar sesión