Guía del editor de plantillas de correo electrónico

Qué aprenderás

Descubre el editor de plantillas de correo electrónico 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 correo electrónico de Klaviyo, la barra lateral mostrará una selección de opciones de bloques y secciones disponibles. Puedes elegir bloques predeterminados, que son como lienzos en blanco para diseñar correos electrónicos desde cero, o contenido universal, es decir, el que has diseñado en otras plantillas y guardado para usarlo más tarde. 

En la sección Predeterminado, encontrarás una selección tanto de bloques como de diseños. Utiliza bloques para añadir contenido, como texto, imágenes o botones. Usa diseños (es decir, secciones y columnas) para agrupar los bloques y configurarlos. 

Los bloques y las secciones pueden clonarse, borrarse o guardarse utilizando los iconos que aparecen al pasar el ratón por encima del bloque o la sección en cuestión. 

Para mover un bloque o sección, haz clic en él y arrástralo. 

Estilos de plantilla

La pestaña principal Estilos contiene varias opciones de estilo que se aplicarán a toda la plantilla. Para acceder a los ajustes principales de estilos de una plantilla, sal de los bloques o secciones en los que estés trabajando al pulsar el botón Listo y, a continuación, haz clic en Estilos. 

Aquí es donde puedes decidir el aspecto de tu correo electrónico. Si has utilizado el asistente de configuración, esta área ya contendrá algunos de los estilos de la marca.

Aquí puedes editar los ajustes siguientes:

• Correo electrónico 
  • Fondo de la plantilla
    Elige un color de fondo para la plantilla. 
  • Imagen de fondo
    Puedes añadir una imagen de fondo. 
  • Fondo del contenido
    Establece un color de fondo para el contenido del correo electrónico. Este puede ser diferente al del fondo de la plantilla y solo abarca el ancho del contenido. 
  • Ancho
    Se refiere al ancho del contenido (se recomiendan 600 px).
  • Radio de esquina, márgenes, relleno y borde
    Añade espaciado y bordes a la plantilla. 
• Texto y Encabezados
  Establece estilos para el texto normal y cuatro estilos de encabezado. Luego, elige un estilo de texto del menú desplegable en cualquier bloque de texto para aplicarlo. 
• Fuente
  Selecciona la fuente, el espaciado entre caracteres, el tamaño, el grosor y el color del estilo de texto. 
• Espaciado entre letras
  Elige el espaciado horizontal entre cada letra. 
• Espaciado entre líneas
  Elige el 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
  Decide 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 el caso de que sea diferente a la de la configuración de tu cuenta. 

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 la sección principal Estilos y, después, estableces un color de fondo específico para un bloque, el color de fondo del bloque se utilizará 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 plantilla, esta contendrá una o varias 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 las pestañas Estilos y Opciones de 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 de 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 correo electrónico. La mayoría de los bloques de contenido tienen la pestaña Estilos, donde se puede configurar la apariencia del bloque, y una pestaña Opciones de 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. 

Obtén información sobre las opciones de visualización o sigue leyendo para conocer los tipos de bloque y cómo utilizarlos. 

Texto 

Utiliza un bloque de texto para añadir texto a los correos electrónicos. 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 correo electrónico 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. 

<style type="text/css">
    p, h1, h2, h3, h4, ol, li, ul { direction: rtl; }
</style> 

Contrae la sección Contenido o desplázate más allá de ella para ajustar los estilos del bloque. Elige un color de fondo para el bloque o el área de contenido de texto y añade relleno. 

Imagen 

Usa un bloque de imagen para insertar una imagen en el correo electrónico. 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. 
• Importar imagen
  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 seleccionada la imagen, ajusta la configuración. Puedes modificar el texto alternativo (una descripción de la imagen), un enlace para que se pueda hacer clic en la imagen, el ancho, la alineación y otros aspectos. 

División

Utiliza una división para mostrar el contenido en dos columnas de cualquier ancho. Puedes incluir una imagen o un texto a ambos lados de una división. De forma predeterminada, se hará una división 50/50, pero desde la pestaña Ajustes de división puedes ajustar esta proporción. Otra opción es usar el diseño de columnas para dividir el contenido en dos 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 URL. 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, lo que te ayudará a adaptarte mejor al tamaño de cada dispositivo. 

Añade los enlaces que quieras a la barra de enlaces. Puedes establecer la configuración de visualización en dispositivo para cada enlace. En el caso de los dispositivos móviles, recomendamos mostrar solo los enlaces que sean fundamentales, 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 todo 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 clara, oscura y más oscura, 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, este elemento 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: bloque dinámico o bloque estático. 

Una fuente dinámica se actualiza automáticamente y se configura a través de una fuente de productos. Para saber cómo configurar una fuente de productos, consulta nuestro artículo Cómo utilizar las fuentes de productos y las recomendaciones. 

En un bloque de productos estático solo se muestran los artículos del catálogo que selecciones manualmente en el editor de plantillas. 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. 

Tabla

Los bloques de tabla pueden ayudarte a estructurar imágenes y texto dentro de una plantilla de correo electrónico. Te aportan, además, la flexibilidad de añadir las columnas o filas que quieras (se espaciarán automáticamente, o bien podrás fijar el ancho en el ajuste Ancho de la pestaña Columnas). 

Cuando un bloque de tabla se arrastra por primera vez a la plantilla, tiene una fila con dos columnas. Utiliza la pestaña Configuración de tabla para añadir filas y columnas 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 Configuración de tabla. 

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 dificultades para crear el código personalizado en el correo, obtén información sobre cómo solucionar este tipo de problemas en las plantillas.

Cita de reseña

Si utilizas Klaviyo Reviews, puedes incluir opiniones de clientes reales para ofrecer pruebas del valor de tu marca e impulsar las conversiones. 

El bloque de citas de reseñas ofrece una selección de valoraciones que puedes incluir en tus mensajes. Si no puedes seleccionar una reseña, puede deberse a lo siguiente: 

• No hay suficientes reseñas de alta calidad en tu cuenta. Puedes intentarlo más adelante. 
• 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 verifiquen, las valoraciones deben enviarse a través de un enlace personalizado en un flujo de solicitud de reseñas de Klaviyo o marcarse como verificadas 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

Hay dos bloques diferentes que puedes utilizar para arrastrar columnas a plantillas de correo electrónico: el bloque de división y el diseño de columnas. Con un bloque de división, te limitas al contenido de texto e imagen en dos columnas, pero puedes 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, este diseño permite usar entre una y cuatro 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 un solo bloque de contenido por columna: añade tantos bloques de contenido como quieras, apilados unos sobre otros. 

Vídeo

Los bloques de vídeo crean la apariencia de un vídeo incluido en un correo electrónico. Cuando un destinatario haga clic en el botón de reproducción, se abrirá una nueva pestaña y se reproducirá el vídeo. 

Para añadir un bloque de vídeo, copia la URL del vídeo de YouTube, Vimeo, TikTok o la plataforma de alojamiento de vídeos que prefieras. Si usas un vídeo de YouTube, Klaviyo seleccionará automáticamente una imagen en miniatura. 

Si utilizas un vídeo de cualquier otra fuente, tendrás que subir también una imagen en miniatura. Se superpondrá un botón de reproducción en la miniatura del vídeo, que podrás desactivar en los ajustes del bloque.

¿Por qué no se reproduce el vídeo en el correo electrónico? 

La mayoría de los principales clientes de correo electrónico (como Gmail) tratan los contenidos integrados, como los vídeos, como una amenaza para la seguridad. A menudo, estos clientes de correo electrónico eliminarán completamente ese código insertado y tus destinatarios no podrán ver esos contenidos cuando abran tu correo electrónico. 

En Klaviyo nos comprometemos a preparar a nuestros clientes para el éxito. Debido a que nuestras pruebas muestran que los contenidos de vídeo no se reproducen de forma fiable en todos los principales clientes de correo electrónico, no admitimos vídeos directamente integrados.

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 correo electrónico. Cuando editas en un bloque o sección universal, puedes optar por aplicar esas ediciones a todas las instancias del contenido guardado.

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 deshabilitará hasta que hagas cambios en el futuro. 

Vista previa del correo electrónico 

Utiliza el botón Previsualizar y probar para ver cómo será el correo electrónico para los destinatarios. Si estás creando un correo electrónico desde la pestaña Plantillas de correo electrónico, asegúrate de previsualizarlo en función de cómo se enviará. Usa la tabla siguiente para identificar la mejor forma de previsualizarlo. 

Recursos adicionales

• Referencia de personalización de mensajes
• Cómo crear una plantilla base
• Curso: Introducción al editor de plantillas de correo electrónico