Objetivos de aprendizaje

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.

Un ejemplo de formulario con una imagen en el lado izquierdo.

Antes de empezar

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 formulario

Añade una imagen lateral a tu formulario

Para añadir una imagen a cada lado del contenido de tu formulario de registro:

  1. Ve a la pestaña Formulario de registro.
  2. 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. 

  3. 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).
    La sección Imagen lateral de la pestaña Estilos muestra la imagen lateral de un formulario de ejemplo configurada para mostrarse a la Derecha.
  4. Haz clic en el marcador de posición de la imagen vacía en la vista previa del formulario.
  5. 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.
    El menú Cargar una imagen que se muestra cuando haces clic en el marcador de posición de imagen vacío, donde puedes hacer clic en Examinar biblioteca de imágenes.

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 lateral

Opciones de visualización de la imagen lateral

Estilos de formulario

Estilos 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.

La sección Mostrar en de la pestaña Estilos con la imagen lateral de un formulario de ejemplo seleccionada para mostrarse en Todos los dispositivos. 

Estilos de imagen lateral

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. 

La sección Estilos de la configuración de la Imagen Lateral, donde puedes añadir texto alt, establecer la Posición de la Imagen, elegir la alineación y establecer un color de fondo.

  • 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.
  • 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.
Recursos adicionales

Recursos adicionales

¿Te resultó útil este artículo?
Usa este formulario solo para enviar comentarios sobre el artículo. Más información sobre cómo contactar al equipo de asistencia.

Descubre más sobre Klaviyo

Comunidad
Conecta con colegas, socios y expertos de Klaviyo para inspirarte, compartir ideas y resolver todas tus dudas.
Capacitación en vivo
Únete a una sesión en tiempo real con expertos de Klaviyo para conocer las mejores prácticas, cómo configurar funciones clave y mucho más.
Asistencia

Accede a la asistencia a través de tu cuenta.

Asistencia por correo electrónico (prueba gratuita y cuentas de pago) Disponible 24/7

Asistencia virtual/por chat
La disponibilidad varía según la ubicación y el tipo de plan