Cómo agregar imágenes laterales en los formularios de registro
Objetivos del artículo
Descubre cómo incluir una imagen de alta calidad a la izquierda o derecha del formulario de registro para una experiencia de registro atractiva que coincida con el diseño de la marca.
Antes de empezar
Las imágenes laterales aparecen a la izquierda o a la derecha del contenido del formulario. Al usar una imagen en un formulario, hay algunas cosas que debes tener en cuenta:
- Hay muchos tipos de formatos de imagen para elegir. Los archivos JPEG equilibran bien la calidad y el tamaño para imágenes coloridas, mientras que los archivos PNG pueden mantener nítidas las imágenes o los logotipos transparentes.
- Asegúrate de usar una imagen de calidad razonablemente alta para obtener los mejores resultados.
- Procura mantener las imágenes entre 600 y 1000 px de ancho y menos de 2000 px de alto para imágenes de ancho completo, para equilibrar la calidad y el tiempo de carga. Las imágenes de menos que ancho completo pueden ser más pequeñas que 600 px.
- Como ocurre con todas las imágenes que se ven en la web, los tamaños de archivo más grandes hacen que los tiempos de carga sean más lentos.
- Procura que el archivo pese entre 50 y 100 KB para las imágenes laterales y menos de 200 KB para las imágenes de fondo, para que la imagen se vea de alta calidad sin ralentizar el sitio.
- Agrega texto alternativo a la imagen para que tus formularios sean accesibles para todos los visitantes del sitio.
Como los formularios de registro se renderizan en los navegadores (a diferencia de los correos electrónicos, que se renderizan en los ESP), hay menos recomendaciones sobre cómo darles formato y ajustarlos. Los navegadores pueden renderizar imágenes de todos los tipos y tamaños, así que, en general, usa imágenes de alta resolución, con tamaños de archivo manejables, y prueba la apariencia en cada tipo de dispositivo.
Agrega una imagen lateral al formulario
Para agregar una imagen en cualquiera de los lados del contenido del formulario de registro:
- Ve a la pestaña Formulario de registro.
- Junto al formulario, haz clic en los 3 puntos > Editar formulario.
Si el formulario se creó antes de julio de 2021 y usa una imagen de fondo alineada a la derecha o a la izquierda como imagen lateral, elimínala antes de usar la función de imagen lateral. Para hacerlo, ve a la sección Form Background de la sección Styles y elimina la imagen de fondo. Luego, desplázate hacia abajo hasta Form Styles y elimina cualquier relleno sobrante del lado derecho o izquierdo.
- En la sección Estilos, ve a la sección Imagen lateral y selecciona el lado donde quieres agregar una imagen (izquierda o derecha).
- Haz clic en el marcador de posición de imagen vacío en la vista previa del formulario.
- Haz clic en Explorar biblioteca de imágenes para agregar una imagen desde tu biblioteca de imágenes de Klaviyo, cargar una imagen o importar una nueva imagen desde una URL.
Asegúrate de usar una imagen de calidad razonablemente alta para obtener los mejores resultados. Como ocurre con todas las imágenes que se ven en la web, los tamaños de archivo más grandes generan tiempos de carga más lentos. Procura que el tamaño del archivo sea de 50-100 KB para las imágenes laterales, para que la imagen se vea de alta calidad sin ralentizar el sitio.
Opciones de visualización de la imagen lateral
Estilos de formulario
De forma predeterminada, los formularios con imágenes laterales tienen un ancho de 780px y el ancho de la imagen lateral está configurado en Mediano. Puedes usar las secciones Ancho y Altura mínima para ajustar el tamaño del formulario. Si quieres que la imagen lateral ocupe más o menos espacio dentro del formulario, ajusta el tamaño en la sección Imagen lateral (p. ej., pequeña, mediana, grande, personalizada).
La imagen lateral del formulario se ocultará en dispositivos móviles de forma predeterminada para optimizar la experiencia móvil, ya que el espacio de pantalla en dispositivos móviles es limitado. Si quieres que la imagen lateral se muestre en todos los dispositivos, haz clic en la imagen en la vista previa y luego desplázate hasta Show on y selecciona All devices.
Estilos de imagen lateral
Usa la sección Estilos de la configuración de Imagen lateral para elegir cómo se mostrará la imagen.
- Texto alternativo
Agrega texto alternativo a la imagen para que sea accesible para cualquier persona que visite el sitio web. - Posición de la imagen
Esto determina cómo se ajustará la imagen dentro del área de imagen lateral. Selecciona una de las siguientes opciones:- Contener
La imagen completa aparecerá dentro de la sección y no se recortará en absoluto. Si la imagen no encaja con precisión en el área de la imagen, el color de fondo de la sección llenará las áreas que queden sin cubrir. - Portada
La imagen llenará por completo el área de la imagen lateral. Es posible que se recorten algunas partes de la imagen para que la imagen llene el espacio. - Personalizado
Selecciona tu propio ancho para la imagen.
- Contener
- Alineación horizontal y Alineación vertical
Estas opciones permiten elegir si la imagen está centrada o alineada en la parte superior, inferior, izquierda o derecha del área de la imagen. - Color de fondo
Si usas una imagen más pequeña en el formulario, configura un color de fondo para rellenar el espacio vacío detrás de ella.
Recursos adicionales
- Mejores prácticas para la accesibilidad de correos electrónicos y formularios
Descubre cómo hacer que tus correos electrónicos y formularios de registro sean más accesibles. Cuando diseñes los correos electrónicos y formularios de registro, asegúrate de que los diseños sean accesibles para todos los destinatarios.
- Entender los estilos de un formulario de registro
Aprende a usar el creador de formularios de registro de Klaviyo para diseñar el formulario al editar la configuración de diseño disponible en la sección Estilos. La configuración de estilo se aplica en todo el formulario de registro, incluidos todos los pasos de un formulario y el mensaje de éxito.
- Primeros pasos con Canva para imágenes
Aprende a integrar Klaviyo con Canva para traer imágenes de Klaviyo a Canva y diseños de Canva a la biblioteca de imágenes de Klaviyo. Una vez que los diseños de Canva estén en la biblioteca de imágenes de Klaviyo, puedes usarlos en plantillas de correo electrónico, contenido de SMS, formularios de registro y más.