Guía sobre el editor de plantillas de email
Qué aprenderás
Descubre el editor de plantillas de email de Klaviyo, que funciona arrastrando y soltando elementos. También aprenderás a usar diferentes estilos de plantilla y a configurar cada tipo de bloque.
Acerca de los bloques y los diseños
Cuando abras el editor de plantillas de email de Klaviyo, la barra lateral mostrará varias opciones de bloques y secciones. Elige entre bloques básicos, que son lienzos en blanco que se usan para crear emails desde cero, y contenido universal, que es contenido que has creado en otras plantillas y guardado para usarlo más adelante.
En la sección Básico, encontrarás tanto bloques como diseños. Usa los bloques para añadir contenido, como texto, imágenes o botones, Usa diseños (es decir, secciones y columnas) para agrupar tus bloques y configurarlos.
Los bloques y las secciones pueden clonarse, eliminarse o guardarse utilizando los iconos que aparecen al pasar el ratón por encima del bloque o la sección.
Para mover un bloque o sección, haz clic en él y arrástralo.
Estilos de plantilla
Haz clic en Editar estilos en la barra lateral izquierda para abrir las opciones de estilo de toda la plantilla.
Aquí es donde puedes decidir el aspecto de tu email. Si has utilizado el asistente de configuración, esta área ya contendrá algunos de los estilos de la marca.
Para ajustar los estilos de marca que se rellenan en las nuevas plantillas, abre Medios y marca > Valores predeterminados. Haz clic en Editar, ajusta la configuración y luego haz clic en Guardar.
Aquí puedes editar los ajustes siguientes:
- Email
- Fondo de la plantilla
Elige un color de fondo para la plantilla - Imagen de fondo
Añade una imagen de fondo de forma opcional - Fondo del contenido
Establece un color de fondo para el contenido del email; este puede ser diferente al del fondo de la plantilla y solo abarca el ancho del contenido del email - Ancho
El ancho del contenido de tu email (se recomiendan 600 px) - Radio de esquina, márgenes, relleno y borde
Añade espaciado y bordes a tu plantilla
- Fondo de la plantilla
- Texto y encabezados
Establece estilos para el texto normal y 4 estilos de encabezado y, a continuación, elige un estilo de texto del menú desplegable en cualquier bloque de texto para aplicarlo. - Fuente
Selecciona la fuente, el espaciado de fuente, el tamaño, el grosor y el color del estilo de texto - Espaciado entre letras
Espaciado entre cada letra en horizontal - Espaciado entre líneas
Espaciado vertical entre líneas de texto - Alineación del texto
Elige la alineación a la izquierda, al centro o a la derecha. - Móviles
Elige si quieres habilitar la optimización para dispositivos móviles (recomendado) o mostrar los mismos estilos y contenidos tanto en escritorio como en móvil. - Otros
- Moneda
Selecciona una moneda predeterminada para la plantilla, en caso de que sea diferente a la de la configuración de tu cuenta.
- Moneda
Cómo interactúan los estilos de plantilla con los estilos de bloque y sección
Los ajustes de estilo de la plantilla se aplicarán primero, antes que los ajustes específicos de cada bloque o sección. Si los estilos de un bloque o sección entran en conflicto con los estilos de plantilla, se utilizarán los estilos del bloque o la sección. Por ejemplo, si estableces un color de fondo para el contenido en el panel Editar estilos y, después, estableces un color de fondo específico para un bloque, se utilizará el color de fondo del bloque para el área de ese bloque.
Secciones y estilos de sección
Todo el contenido del editor de plantillas está organizado en secciones. Cuando crees una nueva plantilla, contendrá 1 o más secciones de forma predeterminada, y puedes añadir o eliminar secciones según sea necesario.
Para abrir los ajustes de una sección, haz clic en la zona situada a la derecha o a la izquierda del contenido de esa sección. Ten en cuenta que, al hacer clic en un bloque, se abrirán los ajustes de ese bloque en lugar de la sección que lo contenga.
Cada sección tiene una pestaña Estilos y una pestaña Visualización. Utiliza los estilos de la sección para añadir imágenes de fondo, relleno y otros estilos a esa sección. Usa las opciones de visualización de la sección para elegir qué tipos de dispositivos y destinatarios deben ver las secciones.
Obtén más información sobre las secciones.
Los ajustes de estilo de sección se aplicarán a la plantilla después que los estilos de plantilla, pero antes que cualquier estilo de un bloque concreto. Si los estilos de plantilla entran en conflicto con los estilos de sección, se utilizarán los de sección. Si los ajustes de un bloque entran en conflicto con los estilos de tu sección, se usará el estilo de ese bloque.
Bloques y estilos de bloque
Dentro de las secciones, añade bloques para generar contenido en tu email. La mayoría de los bloques de contenido tienen una pestaña Estilos, donde puedes configurar la apariencia del bloque, y una pestaña Visualización, donde puedes elegir quién debe ver el bloque y en qué tipos de dispositivo debe mostrarse. Los ajustes de estilo específicos disponibles son distintos para cada tipo de bloque, pero todos los bloques comparten las mismas opciones de visualización.
Todas las secciones de estilo con opciones de color incluyen la herramienta de selector de color, que ofrece varias formas de elegir un color:
- Usar el campo de degradado para seleccionar un matiz.
- Copiar y pegar un código HEX o RGB.
- Selecciona entre los colores usados recientemente o los colores que ya están presentes en esta plantilla.
- Si tu navegador es compatible con la herramienta cuentagotas, úsala para elegir un color de cualquier parte del lienzo del email.
Obtén información sobre las opciones de visualización o sigue leyendo para conocer los tipos de bloque y cómo utilizarlos.
Mensaje de texto
Utiliza un bloque de texto para añadir texto a los emails. Elige un estilo de texto (Normal o Título 1-4) para aplicar los ajustes de estilo de los estilos de tu plantilla principal o personaliza el contenido del texto con los ajustes del editor de texto.
El editor de email de Klaviyo utiliza el estándar de codificación UTF-8, lo que significa que admite caracteres latinos, emojis, caracteres de doble byte y más.
Puedes añadir contenido dinámico a tu bloque de texto para personalizar el mensaje para cada destinatario. Consulta más información sobre la personalización de mensajes.
Para añadir texto en un idioma que utilice la escritura de derecha a izquierda (por ejemplo, el hebreo), añade este fragmento de código al código fuente de un bloque de texto en la parte superior de la plantilla:
<style type="text/css">
p, h1, h2, h3, h4, ol, li, ul { direction: rtl; }
</style> Abre la pestaña Estilos del bloque de texto para elegir un color de fondo para el bloque o el área de contenido de texto y añadir relleno.
Si escribes el texto fuera del editor de Klaviyo (por ejemplo, en Google Docs o Microsoft Word), asegúrate de pegarlo como texto sin formato al pegar el texto en el editor. Utiliza Comando+Mayús+V o Ctrl+Mayús+V para pegar contenido como texto sin formato. De lo contrario, ciertas etiquetas de estilo se pegarán junto con el texto, lo que puede causar problemas de diseño.
Imagen
Usa un bloque de imagen para insertar una imagen en el email. Puedes añadir imágenes de las siguientes fuentes:
- Colección de imágenes
Añade una imagen que hayas subido en el pasado mediante tu biblioteca de imágenes. - Subir imagen
Sube un archivo JPEG, PNG o GIF desde tu dispositivo. También puedes subir una imagen WebP no animada y convertirla a PNG cuando se te solicite. - Importar desde URL
Importa una imagen con su URL - Imagen dinámica
Muestra una imagen personalizada para cada destinatario mediante una variable de imagen dinámica (por ejemplo, haciendo referencia a una URL de imagen almacenada en los datos del evento de un destinatario o como una propiedad de perfil).
Una vez que selecciones la imagen, ajusta la configuración de la imagen, incluido el texto alternativo (una descripción de la imagen), una dirección de enlace para que se pueda hacer clic en la imagen, el ancho de la imagen, la alineación y otros estilos.
Consulta más información sobre la inserción de imágenes en plantillas.
División
Utiliza un bloque de división para mostrar el contenido en 2 columnas de cualquier ancho. Añade contenido de imagen o texto a cada lado del bloque de división. De forma predeterminada, el bloque de división usará una división 50/50. Ve a la pestaña Estilos para ajustar esta proporción. Otra opción es usar el diseño de columnas para dividir el contenido en 2 o más columnas.
Botón
Los bloques de botones crean enlaces de gran tamaño que son más vistosos que los enlaces de texto normales y resultan ideales para enfatizar las llamadas a la acción (CTA) más relevantes. Dado que se utilizan precisamente para las CTA, te recomendamos aplicar este recurso con prudencia.
Como mínimo, rellena los campos Texto y Dirección del enlace. El texto es lo que los destinatarios verán en el botón, y la URL se utilizará para redirigir a los visitantes cuando hagan clic en él. Ajusta el aspecto, la forma y el tamaño del botón mediante las opciones de color, radio de las esquinas y relleno. También puedes ajustar la fuente del bloque y otros estilos más abajo.
Barra de encabezado o enlaces
Utiliza el bloque de barra de encabezado o enlaces para añadir un logotipo y enlaces de navegación que redirijan a distintos contenidos de tu web.
Cuando arrastres el bloque, aparecerán los diseños más comunes de barra de encabezado o enlaces para que elijas. Puedes seleccionar diferentes diseños para escritorio y dispositivos móviles, para adaptarte mejor al tamaño de cada dispositivo.
Debido a los motores de renderizado HTML exclusivos de Outlook, es posible que se añada un borde a los elementos de la barra de encabezado o enlaces para los destinatarios que usen la bandeja de entrada de Outlook. Para evitarlo, crea un encabezado utilizando un bloque de imagen para el logotipo y una tabla para los enlaces.
Añade los enlaces que quieras a la barra de enlaces. Puedes establecer la configuración de visualización en dispositivo para cada enlace, y recomendamos mostrar solo los enlaces clave en móvil, ya que el tamaño del dispositivo es menor.
Una vez que hayas añadido los enlaces y el logotipo, podrás ultimar detalles con las opciones de estilo que aparecen a continuación. Puedes cambiar la fuente, los colores y el espaciado del bloque. Cuando esté listo, previsualízalo tanto en el escritorio como en un dispositivo móvil para ver el resultado final.
Sombra paralela
Utiliza la opción de sombra paralela para añadir profundidad al mensaje o destacar una zona determinada. Las opciones de color para la sombra incluyen Claro, Medio y Oscuro, y puedes establecer un color de fondo y un relleno para el bloque.
Divisor
Añade una línea sencilla entre otros bloques de contenido. Puedes elegir entre líneas continuas, discontinuas o de puntos. El color, el tamaño y el relleno son totalmente personalizables. Antes se llamaba regla horizontal.
Enlace a redes sociales
El bloque de enlaces de redes sociales permite añadir iconos de tus perfiles de Instagram, Pinterest, Facebook, X (Twitter) y más. Klaviyo dispone de los iconos estándar de colores para una gran variedad de sitios, así como sus opciones simplificadas en negro, blanco o gris.
Si prefieres personalizar estos iconos, elige la opción de personalización y sube tus propios archivos de imagen. En el caso de que optes por esta vía, te recomendamos usar imágenes de 96 px cuadradas. Para mantener el espaciado y la alineación entre los iconos de redes sociales de Klaviyo y tus imágenes personalizadas, usa iconos de 50 px de ancho, que estén centrados tanto vertical como horizontalmente en el archivo de imagen.
Arrastra las etiquetas de los iconos en la barra lateral para reordenarlos. Puedes utilizar el botón Añadir espaciador para tener un control más detallado sobre el espacio entre iconos.
Espaciador
El bloque espaciador añade una cantidad personalizable de espacio entre bloques apilados en vertical. Para personalizar el espacio entre bloques que están uno al lado del otro (por ejemplo, en una columna), utiliza el relleno izquierdo o derecho.
Producto
Elige un bloque de productos para añadir artículos recomendados del catálogo de tu tienda. Cuando añadas un bloque de productos, tendrás dos opciones: dinámico o estático.
Una fuente dinámica se actualiza automáticamente y se configura a través de un feed de productos. Para saber cómo configurar un feed de productos, consulta nuestro artículo Cómo utilizar los feeds de productos y las recomendaciones.
Un bloque de productos estático muestra solo los artículos del catálogo que seleccionas manualmente en el editor de plantillas y no se actualizará automáticamente ni se dirigirá a destinatarios individuales.
Con cualquiera de las dos opciones, una vez que hayas seleccionado la fuente o los artículos, podrás personalizar el aspecto del bloque. Los bloques de productos pueden mostrar solo imágenes o incluir el nombre y el precio de cada artículo. Desplázate por todas las opciones de la pestaña de estilos del bloque de productos para personalizarlo por completo.
Cupón
Usa un bloque de cupón para mostrar un código de cupón en tu email:
- Arrastra un bloque de cupón al lienzo.
- Si tu cuenta todavía no tiene cupones, haz clic en Crear cupón en la configuración del bloque para crear uno y luego vuelve a este bloque en el editor.
- Selecciona un cupón reciente o haz clic en Ver todo para buscar o filtrar la lista de cupones, y haz clic en Seleccionar para elegir el cupón que quieras.
El bloque muestra el código asignado de cada destinatario del cupón seleccionado. Si a un destinatario aún no se le ha asignado un código, Klaviyo le asigna uno como parte del envío del mensaje. Funciona igual que insertar un cupón con una etiqueta de plantilla, pero con opciones de estilo integradas.
Puedes añadir texto de encabezado para proporcionar contexto al cupón y personalizar el aspecto del bloque, incluidos el estilo del texto del cupón, el color de fondo y el borde.
Tabla
Los bloques de tabla pueden ayudarte a estructurar imágenes y texto dentro de una plantilla de email. Añade columnas o filas según sea necesario. El espaciado de las columnas se ajusta automáticamente, o puedes configurar el Ancho de cada columna en la sección Columnas de la pestaña Estilos.
Cuando un bloque de tabla se arrastra por primera vez a la plantilla, tiene 1 fila con 2 columnas. Utiliza la pestaña Estilos para añadir filas y columnas adicionales y, a continuación, vuelve a la pestaña Contenido para configurar el contenido de la tabla.
Utiliza la sección Selector de celda para abrir el contenido de una celda específica. Usa la sección Contenido de la celda para elegir entre contenido de texto o imagen y, a continuación, añade el contenido. Ten en cuenta que, si vas cambiando entre los tipos de contenido de texto e imagen, podrías perder el contenido que había antes en esa celda. Utiliza el botón «Deshacer» para revertir los cambios.
Para editar los colores, las fuentes, los bordes y el diseño de la tabla, abre la pestaña Estilos.
Los bloques de tabla también se usan para mostrar contenido dinámico, como los detalles de una lista de artículos en el carrito de los destinatarios. Obtén más información sobre los bloques de tablas dinámicas.
HTML
Añade un código personalizado a tu plantilla con el bloque HTML. Utiliza este tipo de bloque cuando añadas elementos con códigos personalizados, funciones de terceros como temporizadores de cuenta regresiva o CSS personalizados. Si tienes problemas con el código personalizado del email, descubre aquí cómo solucionar los problemas de código personalizado en las plantillas.
Cita de reseña
Si utilizas Klaviyo Reviews, utiliza un bloque de citas de reseñas para destacar reseñas de clientes en tu email.
El bloque de citas de reseñas ofrece una selección de reseñas que puedes incluir en tus mensajes. Si aún no puedes seleccionar una reseña, puede deberse a lo siguiente:
- Los filtros excluyen las reseñas que quieres. El selector de reseñas empieza con las reseñas de 5 estrellas seleccionadas; ajusta la valoración y otros filtros para ampliar la selección.
- No hay suficientes reseñas de alta calidad en tu cuenta. Vuelve más adelante para ver una selección de reseñas.
- Tus reseñas aún no se han procesado. Si quieres incluir una nueva, espera unas horas antes de volver a intentarlo.
- Las reseñas de tu cuenta no están verificadas. Para que se verifique, se debe enviar una reseña a través de un enlace personalizado en un flujo de solicitud de reseñas de Klaviyo o marcarse como verificada en un CSV de reseñas subidas desde otra plataforma. Las reseñas no verificadas, incluidas las que se envíen directamente a tu sitio web, no pueden incluirse en un bloque de citas de reseñas.
Columnas
Usa un bloque de división o un diseño de columnas para añadir columnas a las plantillas de email. Un bloque de división coloca contenido de texto o imagen en 2 columnas y te permite ajustar con precisión el ancho de cada columna.
Con un diseño de columnas, puedes añadir cualquier tipo de contenido a cada columna, pero te limitas a unas pocas opciones de ancho de columna preseleccionadas. Sin embargo, el diseño de columnas permite entre 1 y 4 columnas.
Una vez que hayas añadido columnas a la plantilla, suelta bloques de contenido en cada columna para rellenarla. No tienes por qué usar solo 1 bloque de contenido por columna: añade tantos bloques de contenido como quieras, apilados unos sobre otros.
Vídeo
Los bloques de vídeo muestran una miniatura enlazada en tu email. Cuando un destinatario hace clic en la miniatura, se abre la página del vídeo enlazado.
Para añadir un bloque de vídeo, pega la URL del vídeo en la configuración del bloque. Klaviyo obtiene una miniatura de las URL de YouTube, Vimeo y TikTok compatibles.
Si no aparece ninguna miniatura o el vídeo está alojado en otro lugar, selecciona o sube una imagen en miniatura. Activa Mostrar botón de reproducción en la configuración del bloque para añadir una superposición de botón de reproducción.
¿Por qué no se reproduce el vídeo directamente en el email?
La mayoría de los principales clientes de email (como Gmail) tratan los contenidos integrados, como los vídeos, como una amenaza para la seguridad. A menudo, estos clientes de email eliminarán completamente ese código insertado y tus destinatarios no verán tu contenido renderizado cuando abran tu email.
Debido a que el vídeo incrustado no se reproduce de forma fiable en los principales clientes de email, Klaviyo no admite el vídeo incrustado directamente.
Contenido universal
Puedes guardar bloques o secciones en plantillas para utilizarlos en otras plantillas mediante el icono de la estrella. Si guardas un bloque o sección, aparecerá en la pestaña Universal de los bloques de la plantilla de email. Cuando editas en un bloque o sección universal, puedes optar por aplicar esas ediciones a todas las instancias del contenido guardado. Después de editar en todas las instancias, haz clic en Publicar cambios, revisa los mensajes afectados y confirma la publicación.
Obtén más información sobre el uso del contenido universal guardado.
Deshacer y rehacer
Si cometes un error al editar la plantilla, utiliza el botón «Deshacer» para revertirlo. También está el botón «Rehacer» para dar marcha atrás con el cambio. La plantilla se guardará automáticamente durante toda la sesión de edición, y los botones de deshacer y rehacer registrarán los cambios mientras estés editando la plantilla. Sin embargo, los cambios anteriores solo se almacenarán durante la sesión de edición. Si sales de la plantilla y vuelves a ella más tarde, el botón «Deshacer» se desactivará hasta que hagas cambios posteriores.
Si la misma plantilla está abierta en más de una pestaña, ventana o dispositivo, los cambios no se combinan. Una versión anterior puede sobrescribir ediciones más recientes si se guarda más tarde.
Vista previa de tu email
Haz clic en Vista previa para comprobar el diseño del email y el contenido personalizado. Si estás creando una plantilla reutilizable, elige los datos de vista previa en función de cómo se enviará el email. Usa la tabla siguiente para seleccionar los datos adecuados.
Tipo de mensaje | Prácticas recomendadas para la vista previa |
Campaña Flujo activado por lista Flujo activado por segmento Flujo activado por fecha | Usa el campo Buscar perfiles para buscar a alguien que forme parte de la lista o el segmento al que tienes previsto enviar, o que pueda reunir los requisitos para recibir el email (en el caso de los flujos). Selecciona un perfil. |
Flujo activado por métrica | Cambia a Evento en Vista previa de la fuente de datos y, a continuación, selecciona la métrica que activará el flujo y un evento de ejemplo. Si seleccionas otro evento o una vista previa por perfil, es posible que los datos dinámicos no se muestren correctamente. |
Flujo de bajada de precio | Abre el email del flujo de bajada de precio y previsualízalo con un evento de ejemplo de ese flujo. Un perfil por sí solo no proporciona los datos del evento de bajada de precio. |
Después de seleccionar los datos de vista previa, comprueba los diseños de escritorio y móvil. Para revisar el correo electrónico en una bandeja de entrada, introduce la dirección de correo electrónico de los destinatarios de la prueba en la barra lateral de la vista previa y haz clic en Enviar prueba. Abre el email de prueba para comprobar su diseño y sus enlaces.
Recursos adicionales
- Message personalization reference
Learn how to use Klaviyo’s personalization variables, or tags, to customize the experience for your customers.
- How to create a base template
Learn how to create a base email template in Klaviyo. Once you create a base template, you can use it across your campaigns and flows to speed up your building process and ensure your branding is consistent across messages.
- Getting started with the email template editor