Cómo añadir imágenes laterales en el formulario de registro
Objetivos de aprendizaje
Aprende a incluir una imagen de alta calidad a la izquierda o a la derecha de tu formulario de registro para conseguir una experiencia de Registrarse atractiva y acorde con el 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. Cuando utilices una imagen en un formulario, debes tener en cuenta algunas cosas:
- Hay muchos tipos de formatos de imagen entre los que elegir. Los JPEG equilibran bien la calidad y el tamaño de las imágenes en color, mientras que los PNG pueden mantener nítidas las imágenes transparentes o los logotipos.
- Asegúrate de utilizar una imagen de calidad razonable para obtener los mejores resultados.
- Intenta mantener tus imágenes entre 600 y 1000px de ancho y menos de 2000px de alto para las imágenes de ancho completo, para equilibrar la calidad y el tiempo de carga. Las imágenes que no sean de ancho completo pueden ser inferiores a 600px
- Como ocurre con todas las imágenes que se ven en la web, los archivos de mayor tamaño provocan tiempos de carga más lentos.
- Intenta 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 asegurarte de que tu imagen tenga un aspecto de alta calidad sin ralentizar tu sitio.
- Añade texto alternativo a tu imagen para que tus formularios sean accesibles a todos los visitantes del sitio.
Como los formularios de registro se visualizan en los navegadores (a diferencia de los correos electrónicos, que se visualizan en los proveedores de envío de correos electrónicos), hay menos recomendaciones sobre cómo formatearlos y ajustarlos. Los navegadores pueden renderizar imágenes de todos los tipos y tamaños, así que, en general, limítate a imágenes de alta resolución, tamaños de archivo manejables y prueba la apariencia en cada tipo de dispositivo.
Añade una imagen lateral a tu formularioAñade una imagen lateral a tu formulario
Para añadir una imagen a cada lado del contenido de tu formulario de registro:
- Ve a la pestaña Formulario 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 utiliza una imagen de fondo alineada a la derecha o a la izquierda como imagen lateral, elimínala antes de utilizar las funciones/características de la 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 hasta Estilos de formulario y elimina cualquier exceso de relleno en el lado derecho o izquierdo.
- En la sección Estilos, ve a la sección Imagen lateral y selecciona el lado en el que quieres añadir una imagen (izquierdo o derecho).
- Haz clic en el marcador de posición de la imagen vacía en la vista previa del formulario.
- Haz clic en Examinar biblioteca de imágenes para añadir una imagen de tu biblioteca de imágenes Klaviyo, subir una imagen o importar una nueva imagen desde una URL.
Asegúrate de utilizar una imagen de calidad razonable para obtener los mejores resultados. Como ocurre con todas las imágenes que se ven en la web, los archivos de mayor tamaño provocan tiempos de carga más lentos. Intenta que el tamaño del archivo de las imágenes laterales sea de 50-100 KB para garantizar que tu imagen tenga un aspecto de alta calidad sin ralentizar tu sitio web.
Opciones de visualización de la imagen lateralOpciones de visualización de la imagen lateral
Estilos de formularioEstilos de formulario
Por defecto, los formularios con imágenes laterales se establecen en 780px de ancho con la anchura de la imagen lateral establecida en Media. Puedes utilizar las secciones Anchura 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 (por ejemplo, pequeño, mediano, grande, personalizado).
La imagen lateral de tu formulario se ocultará por defecto en los dispositivos móviles 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, desplázate hasta Mostrar en y selecciona Todos los dispositivos.
Estilos de imagen lateral
Utiliza la sección Estilos de la configuración de la Imagen Lateral para elegir cómo se mostrará la imagen.
-
Texto alternativo
Añade texto alternativo a tu imagen para que sea accesible a todos los que visiten tu sitio web. -
Posición de la imagen
Determina cómo encajará la imagen dentro del área Imagen Lateral. Selecciona una de las siguientes opciones:-
Contiene
La imagen completa aparecerá dentro de la sección, y no se recortará en absoluto. Si la imagen no cabe exactamente en el área de la imagen, el color de fondo de la sección rellenará las áreas no cubiertas. -
Portada
La imagen llenará completamente el área de imagen lateral. Algunas partes de la imagen pueden estar cortadas, para permitir que la imagen llene el espacio. -
Personalizado
Selecciona tu propia anchura para la imagen.
-
Contiene
-
Alineación Horizontal y AlineaciónVertical
Te permiten elegir si la imagen se centra o se alinea arriba, abajo, a la izquierda o a la derecha del área de la imagen. -
Color de fondo
Si utilizas una imagen más pequeña en tu formulario, establece un color de fondo para rellenar el espacio vacío detrás de ella.