Cómo añadir imágenes laterales en formularios de registro
Qué aprenderás
Descubre cómo incluir una imagen de alta calidad a la izquierda o a la derecha de tu formulario de registro para ofrecer una experiencia de registro atractiva que se ajuste al diseño de tu marca.
Antes de empezar
Las imágenes laterales aparecen a la izquierda o a la derecha del contenido de tu formulario. Al usar una imagen en un formulario, hay algunas cosas que debes tener en cuenta:
- Hay muchos tipos de formatos de imagen entre los que elegir. Los JPEG equilibran bien la calidad y el tamaño para las imágenes con muchos colores, mientras que los 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.
- Intenta que tus imágenes tengan 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 que no sean de ancho completo pueden tener menos de 600 px
- Al igual que con todas las imágenes que se ven en la web, los archivos de mayor tamaño provocan tiempos de carga más lentos.
- Procura que el tamaño del archivo sea de 50-100 KB para las imágenes laterales y de menos de 200 KB para las imágenes de fondo, para garantizar que la imagen se vea de alta calidad sin ralentizar tu sitio.
- Añade texto alternativo a la imagen para que los formularios sean accesibles para todos los visitantes del sitio.
Dado que los formularios de registro se muestran en los navegadores (a diferencia de los emails, que se renderizan en los ESP), hay menos recomendaciones sobre cómo darles formato y ajustarlos. Los navegadores pueden renderizar imágenes de todo tipo y tamaño, así que, en general, mantén imágenes de alta resolución, tamaños de archivo manejables y prueba el aspecto en cada tipo de dispositivo.
Añade una imagen lateral a tu formulario
Para añadir una imagen a ambos lados del contenido de tu formulario de registro:
- Ve a la pestaña formularios de registro.
- Junto a tu formulario, haz clic en los 3 puntos > Editar formulario.
Si tu 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 las funciones de imagen lateral. Para ello, ve a la sección Fondo del formulario de la sección Estilos y elimina la imagen de fondo. A continuación, desplázate hacia abajo hasta Estilos del formulario y elimina el exceso de relleno del lado derecho o izquierdo.
- En la sección Estilos, ve a la sección Imagen lateral y selecciona el lado donde quieras añadir 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 añadir una imagen desde tu biblioteca de imágenes de Klaviyo, subir 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. Al igual que ocurre con todas las imágenes que se ven en la web, los archivos de mayor tamaño ralentizan los tiempos de carga. Procura que el tamaño del archivo sea de 50-100 KB para las imágenes laterales, para que tu imagen se vea de alta calidad sin ralentizar tu sitio.
Opciones de visualización de la imagen lateral
Estilos de formulario
De forma predeterminada, los formularios con imágenes laterales están configurados con un ancho de 780px y el ancho de la imagen lateral se establece en Medio. 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 en el formulario, ajusta el tamaño en la sección Imagen lateral (p. ej., pequeño, medio, grande, personalizado).
La imagen lateral de tu formulario se ocultará en los dispositivos móviles de forma predeterminada para optimizar la experiencia móvil, ya que el espacio de pantalla en los dispositivos móviles es limitado. Si quieres que tu imagen lateral se muestre en todos los dispositivos, haz clic en la imagen en la vista previa y luego desplázate hasta Mostrar en y selecciona Todos los dispositivos.
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
Añade texto alternativo a tu imagen para que sea accesible para todas las personas que visitan tu 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 rellenará las áreas que queden sin cubrir. - Portada
La imagen llenará completamente el área de imagen lateral. Es posible que algunas partes de la imagen se recorten para que la imagen llene el espacio. - Personalizado
Selecciona tu propio ancho para la imagen.
- Contener
- Alineación horizontal y Alineación vertical
Te permiten elegir si la imagen está centrada o alineada con la parte superior, inferior, izquierda o derecha del área de la imagen. - Color de fondo
Si utilizas una imagen más pequeña en el formulario, establece un color de fondo para rellenar el espacio vacío que queda detrás.