Guía del editor de plantillas de correo electrónico
Objetivos del artículo
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á varias opciones de bloques y secciones. Puedes usar bloques básicos, que son como lienzos en blanco para diseñar correos electrónicos desde cero, o contenido universal, es decir, el contenido que has diseñado en otras plantillas y guardado para usarlo más tarde.
En la sección Básico, encontrarás tanto bloques como diseños. Utiliza los bloques para añadir contenido, como texto, imágenes o botones. Utiliza los 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 íconos 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 sobre el elemento y arrástralo.
Estilos de plantilla
La pestaña principal de Estilos contiene varias opciones de estilo que se aplicarán a toda la plantilla. Para acceder a la configuración principal de estilos de una plantilla, pulsa el botón Listo para salir de los bloques o secciones en los que estés trabajando y, a continuación, haz clic en Estilos.
Aquí es donde puedes decidir el aspecto de tu correo electrónico. Si utilizaste el asistente de configuración, esta área ya contendrá algunos de los estilos de tu marca.
Para ajustar los estilos de marca que se generan en las nuevas plantillas, ve a Imágenes y marca > Por defecto.
Aquí puedes editar las siguientes opciones de configuración:
- Correo electrónico
- Fondo de la plantilla
Elige un color de fondo para tu plantilla - Imagen de fondo
Puedes añadir una imagen de fondo. - Fondo del contenido
Establece un color de fondo para el contenido de tu correo electrónico; este color puede ser diferente al fondo de la plantilla y solo abarca el ancho del contenido de tu correo electrónico - Ancho
El ancho del contenido de tu correo electrónico (se recomienda 600 píxeles) - Radio de las esquinas, 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 cuatro estilos de encabezado. Luego, elige un estilo de texto del menú desplegable en cualquier bloque de texto para aplicarlo. - Fuente
Selecciona un tipo de letra, espaciado entre caracteres, tamaño, grosor y color para el estilo de texto. - Espacio entre letras
Espacio entre cada letra horizontalmente. - Espaciado entre líneas
Espaciado vertical entre líneas de texto - Alineación del texto
Elige la alineación hacia la izquierda, el centro o la derecha. - Dispositivos móviles
Decide si deseas habilitar la optimización para dispositivos móviles (recomendado) o mostrar los mismos estilos y contenidos tanto en computadoras como en dispositivos móviles. - Otros
- Moneda
Selecciona una moneda por defecto para la plantilla, si es diferente a la configuración de tu cuenta.
- Moneda
Cómo interactúan los estilos de plantilla con los estilos de bloque y sección
La configuración de estilo de la plantilla se aplicará primero, antes que la configuración específica de cada bloque o sección. Si los estilos de un bloque o sección entran en conflicto con los estilos de la 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 de 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 creas una plantilla nueva, contendrá una o varias secciones de forma predeterminada, y puedes añadir o eliminar secciones según sea necesario.
Para abrir la configuración 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, si haces clic en un bloque, se abrirá la configuración 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 cada sección.
La configuración de estilo de sección se aplicará a la plantilla después 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 la configuración de un bloque entra en conflicto con los estilos de sección, se utilizará el estilo del bloque.
Bloques y estilos de bloque
Dentro de las secciones, puedes añadir bloques para agregarle contenido a 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. La configuración de estilos específicos disponibles es distinta 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.
- Elegir uno de los colores que se hayan usado recientemente o uno de los presentes en la plantilla actual.
- Usar la herramienta de gotero para elegir un color de cualquier parte del lienzo de correo electrónico (actualmente no está disponible para bloques de texto, división ni tabla).
Obtén más 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 tus correos electrónicos. Elige un estilo de texto (Normal o Encabezado 1 - 4) para aplicar la configuración de estilo de los estilos de tu plantilla principal, o personaliza el contenido del texto con la configuración 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.
Para añadir texto en un idioma que utilice la escritura de derecha a izquierda (p. ej., 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> 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 un relleno.
Si escribes tu texto en un editor externo, por ejemplo, en Google Docs o Microsoft Word, asegúrate de pegarlo como texto sin formato en el editor de Klaviyo. Usa Comando+Mayús+V o Ctrl+Mayús+V para pegarlo 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 correo electrónico. Puedes añadir imágenes de las siguientes fuentes:
- Biblioteca de imágenes
Añade una imagen que hayas subido previamente a partir de tu biblioteca de imágenes. - Cargar imagen
Carga un archivo JPEG, PNG o GIF desde tu dispositivo. - Importar imagen
Importa una imagen utilizando su URL. - Imagen dinámica
Muestra una imagen personalizada para cada destinatario mediante una variable de imagen dinámica (p. ej., haciendo referencia al URL de una imagen almacenada en los datos del evento de un destinatario o como una propiedad del 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.
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 dos columnas de cualquier ancho. Solo puedes incluir una imagen o un texto en ambos lados de una división. Por defecto, se hará una división 50/50, pero desde la pestaña Configuración de división puedes modificar 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 botón crean enlaces de gran tamaño que son más vistosos que los enlaces de texto normales y resultan ideales para enfatizar los llamados a la acción (CTA) más relevantes. Dado que se utilizan para los CTA, te recomendamos aplicar solo unos pocos en cada correo electrónico.
Como mínimo, completa los campos Texto y URL. El texto es lo que los destinatarios verán en el botón, y el URL se utilizará para redirigir a los visitantes cuando hagan clic en él. Configura 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 modificar la fuente del bloque y otros estilos más abajo.
Barra de encabezado/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 sitio 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 computadoras y dispositivos móviles, lo que te ayudará a 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 deseas a la barra de enlaces. Puedes establecer la configuración de visualización para cada enlace. En el caso de los dispositivos móviles, te 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
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, mediano 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 una línea sólida, de guiones o de puntos. El color, el tamaño y el relleno son totalmente personalizables. Antes, este elemento se llamaba Regla horizontal.
Enlaces de redes sociales
El bloque de enlaces de redes sociales permite añadir los íconos de tus perfiles de Instagram, Pinterest, Facebook, X (Twitter) y más. Klaviyo dispone de los íconos estándar de colores para una gran variedad de sitios, así como sus opciones simplificadas en negro, blanco o gris.
Si prefieres personalizar estos íconos, 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 íconos de redes sociales de Klaviyo y tus imágenes personalizadas, usa íconos de 50 px de ancho, que estén centrados tanto vertical como horizontalmente en el archivo de imagen.
Arrastra las etiquetas de los íconos en la barra lateral para reordenarlos. Puedes utilizar el botón Añadir espaciador para controlar con más detalle el espacio entre íconos.
Espaciador
El bloque espaciador añade una cantidad personalizable de espacio entre bloques apilados verticalmente. 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 una fuente de productos. Para obtener más información sobre la creación de una fuente de productos, lee nuestro artículo Cómo utilizar fuentes de productos y 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 personalizará para 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 correo electrónico. Cuando arrastres un bloque de cupón al lienzo, haz clic en el botón + para elegir un cupón de tu cuenta. Puedes buscar por nombre o filtrar por categoría.
El código de cupón seleccionado se mostrará a todos los destinatarios. Si un destinatario aún no tiene asignado el cupón, se le asignará automáticamente a la hora de envío. Esto funciona igual que insertar un cupón con una etiqueta de plantilla, pero con opciones de estilo integradas.
Puedes añadir un texto de encabezado para dar contexto al cupón y personalizar el aspecto del bloque, lo que incluye 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 correo electrónico. Te aportan, además, la flexibilidad de añadir las columnas o filas que deseas (se espaciarán automáticamente, o bien podrás fijar el ancho en la opción 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 Estilos 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. Utiliza la sección Contenido de celda para elegir entre Texto o Imagen y, a continuación, añade el contenido. Ten en cuenta que, si cambias entre los tipos de contenido de texto a imagen, y viceversa, podrías perder el contenido que había en esa celda. Utiliza el botón Deshacer para revertir los cambios.
Para editar los colores, fuentes, 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 del destinatario. Consulta más información sobre los bloques de tabla dinámicos.
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ódigo personalizado, funciones de terceros, como temporizadores de cuenta regresiva o CSS personalizados. Si tienes problemas con el código personalizado en tu correo electrónico, descubre cómo solucionar problemas de código personalizado en 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 cita de reseña 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 volver a intentarlo más adelante.
- Tus reseñas aún no se han procesado. Si deseas 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 reseñas deben enviarse a través de un enlace personalizado en un flujo de solicitud de reseñas de Klaviyo , o bien marcarse como verificadas en un CSV de reseñas cargadas desde otra plataforma. Las reseñas no verificadas, incluyendo las que se enviaron directamente desde tu sitio web, no pueden incluirse en un bloque de cita de reseña.
Columnas
Hay dos bloques diferentes que puedes utilizar para añadir columnas a tus 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 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 que usar un solo bloque de contenido por columna: puedes añadir tantos bloques de contenido como desees, apilados unos sobre otros.
Video
Los bloques de video crean la apariencia de un video incrustado en un correo electrónico. Cuando el destinatario haga clic en el botón de reproducción, se abrirá una nueva pestaña y se reproducirá el video.
Para añadir un bloque de video, copia el URL del video de YouTube, Vimeo, TikTok o la plataforma de alojamiento de video que prefieras. Si tu video es de YouTube, Klaviyo seleccionará automáticamente una imagen en miniatura.
Si utilizas un video 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 video, que podrás desactivar en la configuración del bloque.
¿Por qué no se reproduce el video directamente en el correo electrónico?
La mayoría de los principales clientes de correo electrónico (como Gmail) tratan los contenidos incrustados, como los videos, 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 el contenido cuando abran tu correo electrónico.
En Klaviyo nos comprometemos a darles a nuestros clientes las herramientas para el éxito. Debido a que nuestras pruebas muestran que los contenidos de video no se reproducen de forma fiable en los principales clientes de correo electrónico, no admitimos videos directamente incrustados.
Contenido universal
Puedes guardar bloques o secciones en plantillas para utilizarlos en otras plantillas mediante el ícono 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 un bloque o sección universal, puedes optar por aplicar esas ediciones a todas las instancias del contenido guardado.
Consulta más información sobre el uso de contenido universal guardado.
Deshacer y rehacer
Si cometes un error al editar la plantilla, utiliza el botón Deshacer para revertirlo. También puedes usar 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 guardarán durante la sesión de edición. Si sales de la plantilla y vuelves a ella más tarde, el botón Deshacer estará desactivado hasta que hagas nuevos cambios.
Previsualizar tu correo electrónico
Usa el botón Previsualizar y probar para comprobar cómo se verá 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 siguiente tabla para identificar la mejor forma de previsualizarlo.
Tipo de mensaje | Mejores prácticas de previsualización |
Campaña Flujo activado por lista Flujo activado por segmento Flujo de reducción de precio Flujo activado por fecha | Utiliza el campo Buscar perfiles para buscar a alguien que forme parte de la lista o el segmento al que deseas enviar el correo electrónico, o que cumpla los requisitos para recibirlo (en el caso de los flujos). Selecciona un perfil. |
Flujo activado por métricas | Cambia a Evento en Fuente de datos de la vista previa y luego selecciona el evento que activará el flujo. Si seleccionas un evento diferente o una vista previa por perfil, es posible que los datos dinámicos no se muestren correctamente. |
Recursos adicionales
- Guía de personalización de mensajes
Descubre cómo usar las variables de personalización (o etiquetas) de Klaviyo para ofrecer una experiencia personalizada a tus clientes.
- Cómo crear una plantilla base
Aprende a crear una base de plantillas de correo electrónico en Klaviyo. Una vez creada una plantilla base, puedes utilizarla en todas tus campañas y flujos para acelerar el proceso de construcción y asegurarte de que tu construcción de marca es coherente en todos los mensajes.
- Primeros pasos con el editor de plantillas de correo electrónico