Qué aprenderás
Aprenda a crear plantillas HTML personalizadas compatibles con el editor de arrastrar y soltar de Klaviyo (es decir, plantillas híbridas). Siguiendo estos pasos, puede diseñar un correo electrónico HTML totalmente personalizado manteniendo el acceso a las funciones sólo disponibles en el editor de arrastrar y soltar (por ejemplo, bloques de productos o contenido universal).
Sólo recomendamos el uso de HTML personalizado a los vendedores con conocimientos técnicos, o a cualquiera que tenga acceso a un desarrollador. Aunque nuestro producto admite HTML personalizado, nuestro equipo de asistencia no puede ayudarle a crear sus plantillas personalizadas más allá de ofrecerle la orientación general que se recoge en esta documentación. ¿Necesita ayuda? Póngase en contacto con un socio de Klaviyo.
Para mantener la seguridad de sus datos, el equipo de soporte de Klaviyo no puede abrir sus archivos HTML.
Añada un fragmento de código a su plantilla HTML
Añada sólo uno de los fragmentos de código que se indican a continuación por plantilla de correo electrónico. Un fragmento de código le permite añadir varios bloques de arrastrar y soltar, por lo que no necesita añadir varios fragmentos de código.
Por ejemplo, si desea añadir una imagen y un bloque de tabla utilizando el editor de arrastrar y soltar, sólo tiene que seguir los pasos de Añadir un bloque de imagen personalizable que se indican a continuación. Una vez que suba su plantilla a Klaviyo y la utilice en una campaña o flujo, podrá añadir bloques encima o debajo del bloque de imagen.
Añadir un bloque de texto editable Añadir un bloque de texto editable
- Cree una plantilla HTML personalizada utilizando su editor HTML preferido.
- Añada el siguiente fragmento de código a su plantilla HTML. Colóquelo donde desee añadir el bloque de texto en su 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, navegue hasta Contenido > Plantillas.
- Haga clic en Importar.
- Introduzca un nombre para su plantilla, cargue su archivo HTML e impórtelo.
- Si abre la plantilla desde su pestaña Plantillas, verá el código de su plantilla en el editor HTML de Klaviyo.
- Para acceder a la plantilla en el editor de arrastrar y soltar de Klaviyo, añádala a una campaña o flujo.
- Seleccione Arrastrar y soltar como tipo de plantilla.
- Observe el bloque de texto que dice ¡Hola mundo! Este es su bloque de texto editable.
- Arrastre y suelte bloques adicionales por encima o por debajo del bloque de texto, según desee.
Añadir un bloque de imágenes personalizableAñadir un bloque de imágenes personalizable
- Cree una plantilla HTML personalizada utilizando su editor HTML preferido.
- Añada el siguiente fragmento de código a su plantilla HTML. Asegúrese de colocarlo donde desee añadir su bloque de imágenes después de importar su plantilla.
<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600"> <div class="klaviyo-block klaviyo-image-block"></div> </td>- Opcionalmente, puede añadir una imagen preestablecida dentro del div. Si decide hacerlo, su 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>
- Opcionalmente, puede añadir una imagen preestablecida dentro del div. Si decide hacerlo, su código tendrá el siguiente aspecto:
- En Klaviyo, navegue hasta Contenido > Plantillas.
- Haga clic en Importar.
- Introduzca un nombre para su plantilla, cargue su archivo HTML e impórtelo.
- Si abre la plantilla desde su pestaña Plantillas, verá el código de su plantilla en el editor HTML de Klaviyo.
- Para acceder a la plantilla en el editor de arrastrar y soltar de Klaviyo, añádala a una campaña o flujo.
- Seleccione Arrastrar y soltar como tipo de plantilla.
- Fíjese en el bloque de imagen, que contendrá un botón para subir una imagen o la imagen que haya incluido.
- Arrastre y suelte bloques adicionales por encima o por debajo del bloque de imagen, según desee.
Añadir un bloque de otro tipo (por ejemplo, bloque de producto, bloque de tabla, contenido universal) Añadir un bloque de otro tipo (por ejemplo, bloque de producto, bloque de tabla, contenido universal)
- Cree una plantilla HTML personalizada utilizando su editor HTML preferido.
- Añada el siguiente fragmento de código a su plantilla HTML. Colóquelo donde desee añadir su(s) bloque(s) tras importar su 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, navegue hasta Contenido > Plantillas.
- Haga clic en Importar.
- Introduzca un nombre para su plantilla, cargue su archivo HTML e impórtelo.
- Si abre la plantilla desde su pestaña Plantillas, verá el código de su plantilla en el editor HTML de Klaviyo.
- Para acceder a la plantilla en el editor de arrastrar y soltar de Klaviyo, añádala a una campaña o flujo.
- Seleccione Arrastrar y soltar como tipo de plantilla.
- Observe el bloque de texto que dice ¡Hola mundo! Arrastre otro bloque (por ejemplo, un bloque de producto o contenido universal) debajo de este bloque.
- Elimine el bloque de texto y añada otros bloques personalizados, si lo desea.
Ejemplo de código de plantilla de correo electrónico híbrido
El siguiente ejemplo muestra un archivo HTML funcional con el fragmento de código híbrido para un bloque de texto. Utilice 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>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;
}
.wrapper {
box-sizing: border-box;
padding: 15px;
}
tabla {
width: 100%;
}
</style>
</head>
<body>
<div class="contenedor">
<table class="main">
<tr>
<td class="wrapper"> Este es un correo electrónico HTML muy sencillo</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">
¡Hola a todo el mundo!
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="wrapper">{% unsubscribe %}</td>
</tr>
</table>
</div>
</body>
</html>
Emoji y plantillas de correo electrónico híbridas
A partir de febrero de 2024, todos los emoji 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).
ResultadoResultado
Tras completar estos pasos, podrá añadir y editar determinadas áreas de una plantilla HTML personalizada. Tenga en cuenta que no puede 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