Cómo usar un bloque de división en un email
Qué aprenderás
Aprende a usar un bloque de división para organizar el contenido en paralelo en Klaviyo.
Cuándo usar un bloque de división
Hay 3 formas de organizar contenido en paralelo con el editor de email de Klaviyo: bloque de división, columnas y bloque de tabla. Cada opción ofrece ciertas ventajas y concesiones. Un bloque de división es mejor cuando:
- Necesitas 2 columnas y quieres tener control total sobre el ancho de cada una.
- Quieres colocar texto o imágenes en paralelo.
- Quieres elegir si las columnas se apilan en móvil o se mantienen una al lado de la otra.
Obtén más información sobre los bloques de división, las columnas y las tablas en el siguiente gráfico.
Diseño del contenido | Número de columnas | Opciones de ancho | Tipos de contenido permitidos | ¿Se pueden apilar las columnas en la vista móvil? |
Bloque de división | 2 | Control preciso (Usa Estilos > Diseño) | Imagen o texto | Sí |
Columnas | 1-4 | Selección limitada | Cualquier tipo de bloque de contenido (p. ej., bloque de texto, bloque de imagen, bloque de cita de reseña) | Sí |
Bloque de tabla | Cualquier número | Control preciso (Usa Ancho de columna > Manual) | Imagen o texto | No |
Las tablas pueden ser un reto para la accesibilidad, ya que los lectores de pantalla tienen dificultades para interpretarlas.
Añade un bloque de división a una plantilla de email
Para usar el apilamiento para móviles y las vistas previas para móviles, asegúrate de que Optimize for mobile esté activado en la configuración de Styles > Mobile optimization del email.
- En una plantilla de email, arrastra un bloque de división al lienzo.
- En Selector de columnas, alterna entre los lados izquierdo y derecho de la división.
- En Contenido de la columna, elige si el lado seleccionado actualmente de la división debe contener una imagen o texto.
- Para el texto, haz doble clic en el texto del lienzo de email e introduce el contenido. Para una imagen, usa los controles de imagen de la barra lateral para seleccionar o subir una imagen.
- Repite el proceso para el otro lado de la división.
- Abre la pestaña Estilos del bloque.
- En Diseño, cambia el ancho de col. 1 o el ancho de col. 2 para establecer los anchos de las columnas como porcentajes. La otra columna se ajusta automáticamente para que el total se mantenga en el 100 %.
- Configura Espaciado para ajustar el espacio entre las columnas en píxeles.
- En Apilado en móvil, en la pestaña Estilos del bloque, elige De izquierda a derecha o De derecha a izquierda para apilar las columnas, o Sin apilado para mantenerlas una al lado de la otra.
- Haz clic en Vista previa y luego alterna entre Escritorio y Móvil para comprobar el ancho de las columnas, el espaciado y el apilamiento.
Recursos adicionales
- How to build dynamic blocks in a flow email
Learn how to use dynamic table blocks to add product and other event information to your metric-triggered flows. In this article, you'll learn how to create a dynamic block using the example of an abandoned cart reminder showing the products that were left behind.
- How to add columns to an email
Learn how to add columns to your emails when needed to make your templates more aesthetically pleasing. There are a few ways to add columns to your templates. This article will run through all the ways you can add columns to your email and how to optimize your design based on device.