Cómo añadir imágenes laterales en los formularios de inscripción

Qué aprenderás

Aprenda a incluir una imagen de alta calidad a la izquierda o a la derecha de su formulario de registro para conseguir una experiencia de registro atractiva que se adapte al diseño de su marca.

Antes de empezar

Las imágenes laterales aparecen a la izquierda o a la derecha del contenido de su formulario. Cuando utilice una imagen en un formulario, debe 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 para las imágenes en color, mientras que los PNG pueden mantener nítidas las imágenes transparentes o los logotipos. 
• Asegúrese de utilizar una imagen de calidad razonable para obtener los mejores resultados. 
  
  • Intente mantener sus 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.
  • Procure 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 su imagen tenga un aspecto de alta calidad sin ralentizar su sitio.
• Añada texto alt a su imagen para que sus formularios sean accesibles a todos los visitantes del sitio. 

Dado que los formularios de inscripción se renderizan en los navegadores (a diferencia de los correos electrónicos, que se renderizan en los ESP), existen menos recomendaciones sobre cómo formatearlos y ajustarlos. Los navegadores pueden renderizar imágenes de todo tipo y tamaño, así que, en general, limítese a imágenes de alta resolución, tamaños de archivo manejables y pruebe el aspecto en cada tipo de dispositivo. 

Añada una imagen lateral a su formulario

Para añadir una imagen a cada lado del contenido de su formulario de inscripción:

1. Navegue hasta la pestaña Formularios de inscripción.
2. Junto a su formulario, haga clic en los 3 puntos > Editar formulario.
   

   Si su 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ínela antes de utilizar la función de imagen lateral. Para ello, vaya al apartado Fondo del formulario de la sección Estilos y elimine la imagen de fondo. A continuación, desplácese hasta Estilos de formulario y elimine cualquier exceso de relleno en el lado derecho o izquierdo. 

3. En la sección Estilos, vaya a la sección Imagen lateral y seleccione el lado en el que desea añadir una imagen (izquierdo o derecho).
   
4. Haga clic en el marcador de posición de la imagen vacía en la vista previa del formulario.
5. Haga clic en Examinar biblioteca de imágenes para añadir una imagen de su biblioteca de imágenes Klaviyo, cargar una imagen o importar una nueva imagen desde una URL.
   

Asegúrese 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. Tenga como objetivo un tamaño de archivo de 50-100 KB para las imágenes laterales para garantizar que su imagen tenga un aspecto de alta calidad sin ralentizar su sitio. 

Opciones de visualización de la imagen lateral

Estilos de formulario

Por defecto, los formularios con imágenes laterales se establecen en 780px de ancho con el ancho de la imagen lateral establecido en Medio. Puede utilizar las secciones Anchura y Altura mínima para ajustar el tamaño del formulario. Si desea que la imagen lateral ocupe más o menos espacio dentro del formulario, ajuste el tamaño en la sección Imagen lateral (por ejemplo, pequeño, mediano, grande, personalizado). 

La imagen lateral de su 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 desea que su imagen lateral se muestre en todos los dispositivos, pulse sobre la imagen en la vista previa, desplácese a Mostrar en y seleccione Todos los dispositivos.

Estilos de imagen lateral

Utilice la sección Estilos de los ajustes de Imagen lateral para elegir cómo se mostrará la imagen. 

• Texto alternativo
  Añada texto alternativo a su imagen para que sea accesible para todos los que visiten su sitio web.
• Posición de la imagen
  Determina cómo encajará la imagen dentro del área Imagen lateral. Seleccione 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 cabe exactamente en el área de la imagen, el color de fondo de la sección rellenará las zonas que queden sin cubrir. 
  • 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. 
  • Personalizar
    Seleccione su propia anchura para la imagen.
• Alineación horizontal y Alineaciónvertical
  Le permiten elegir si la imagen se centra o se alinea en la parte superior, inferior, izquierda o derecha del área de la imagen.
• Color de fondo
  Si utiliza una imagen más pequeña en su formulario, establezca un color de fondo para rellenar el espacio vacío detrás de ella.

Recursos adicionales

• Mejores prácticas para crear correos electrónicos y formularios accesibles 
• Comprender los estilos para un formulario de registro
• Primeros pasos con Canva