¿Cómo funciona el previsualizador de imagen en el sistema?

En este artículo aprenderás a utilizar el previsualizador de imágenes para subirlas a tu web.

Soporte Fitco avatar
Escrito por Soporte Fitco
Actualizado hace más de una semana

Beneficios de esta nueva herramienta:

  • Los usuarios tendrán control sobre cómo presentar sus imágenes.

  • Los usuarios podrán subir una imagen que no tenga la misma proporción y podrán ajustarla en el mismo previsualizador.

    • Ejemplo: Un usuario quiere subir una imagen con una proporción cuadrada al campo de imagen principal que tiene una proporción rectangular.

      • Anteriormente, la imagen se hubiese redimensionado para llenar todo el espacio.

        • En este proceso la imagen podría haberse agrandado y recortado por algunos extremos.

        • Este proceso se hubiese hecho automáticamente a la hora de subirse a la web y el usuario no hubiese tenido control sobre el resultado final.

      • Actualmente el cliente puede subir una imagen con una proporción diferente y posicionarla y/o escalarla en el mismo previsualizador.

        • Éste último punto es importante ya que en primer lugar, el usuario tiene visibilidad de que la imagen que quiere subir tendrá que ser recortada para que sea compatible con el espacio en la que la quiere poner. En segundo lugar, le da la posibilidad de elegir como recortarla y posicionarla.

  • Los usuarios tienen una herramienta que les permite personalizar aún más su página web.

  • Los usuarios no tienen que utilizar otras herramientas como Photoshop o Illustrator para recortar sus imágenes, pueden hacerlo todo desde Fitco.

Cómo utilizar el previsualizador:

  1. Dirígete al módulo “Página Web” e ingresa al sub módulo “Navegador de Páginas”.

  2. Dale click al botón “Editar” sobre el campo de imagen que quieras editar.

  3. Dale Click al botón “Choose File” o “Seleccionar Archivo”.


  4. Selecciona la foto que quieras subir desde la ventana emergente del navegador que se abrirá.


  5. A continuación se abrirá la ventana del previsualizador con la imagen seleccionada.

    1. Importante: Si la imagen es muy grande no se verá el previsualizador completo. Se tiene que hacer scroll down para ver el botón de recortar.

      1. Esto es más común en casos de imagen verticales como en el ejemplo.

    2. Vista del previsualizador cuando se abre.


    3. Scroll down para ver el botón de recorte.


      6. El recuadro que se muestra hace referencia al área de recorte. Es decir, esa es la proporción que tiene el espacio en la página web.


      a. En este ejemplo podemos ver de manera muy clara que sin un previsualizador la imagen se hubiese escalado y recortado automáticamente teniendo un resultado muy diferente que la imagen original.

      7. El previsualizador nos permite escalar y posicionar una imagen.

      8. Para escalar una imagen utiliza tu trackpad o tu mouse para hacer zoom in o zoom out. Recuerda estar dentro del previsualizador mientras lo hagas.

      1. Ejemplo de img con zoom out.

      2. Ejemplo de la misma img con zoom in.


        9. Para posicionar una imagen, sólo selecciona la img dándole click y arrastrala a la posición deseada.

        1. Ejemplo de imagen con zoom out posicionada en la parte inferior de la misma.

          10. Una vez que tengas la configuración deseada de la img, dale click a recortar.


          11. Recuerda que para guardar todos los cambios le debes dar click al botón de guardar en la parte superior de la página.

          12. Luego de darle click a guardar, deberás de ver una alerta de éxito en la esquina superior derecha. También verás la imagen actualizada en el previsualizador con las propiedades previamente configuradas.



¿Ha quedado contestada tu pregunta?