Módulo de Imagen

El texto y la imagen son dos elementos esenciales de una página web. Elegir y posicionar imágenes tienen un fuerte impacto en la impresión que tu página web causa a los internautas. Por lo tanto, el módulo de Imagen es el mejor elemento para seducir a los visitantes de tu página web.

Las opciones del módulo de Imagen

Agregar una imagen al editor de SiteW es fácil: solo hay que arrastrar y soltar un módulo de Imagen en la página y luego elegir el archivo de imagen en el administrador de archivos de SiteW.

Formato de las imágenes

El editor de SiteW es compatible con muchos formatos de imagen: JPG, PNG, GIF, SVG, WebP (y BMP aunque este formato no es aconsejable en la Web).

Ajustar la imagen

El siguiente video muestra las diferentes opciones disponibles para ajustar la imagen para que encaje al tamaño del módulo de Imagen:

Tamaño de las imágenes

Para optimizar el tiempo de carga de tu página web, nuestro sistema utiliza la técnica del “lazy loading” (carga de las imágenes en diferido) y nuestros servidores vuelven a enviar copias de tus archivos al tamaño exacto de tus módulos.

Clic en la imagen

Puedes lanzar varias acciones haciendo clic en el módulo de Imagen:

1. Pantalla completa al hacer clic en la imagen: la imagen se muestra en pantalla completa por encima de la página (cf. el video arriba)

2. Imágenes en pantalla completa: en vez de abrir la imagen en pantalla completa, este botón permite seleccionar una o varias imágenes que se mostrarán en galería en pantalla completa al hacer clic en ellas

3. Elegir un enlace: este botón permite agregar un enlace a la imagen entre todos los tipos de enlaces disponibles en nuestro editor (página del sitio web, URL externa, archivo descargable…)

Tamaño de las imágenes

Nuestro editor optimiza imágenes en función del tamaño del módulo. En el caso de una visualización en pantalla completa, si la imagen es más pequeña que la pantalla, la imagen se muestra en su dimensión original. En cuanto al tamaño de las imágenes en pantalla completa, te aconsejamos que te bases en una resolución Full HD (1920*1080).

Imagen al pasar el ratón

Dos efectos están disponibles al pasar el ratón por encima de la imagen:

1. Imagen al pasar el ratón: otra imagen reemplaza la imagen actual

2. Menú al pasar el ratón: un menú se muestra por encima o cerca de la imagen

¡No olvides a los usuarios móviles!

En una pantalla táctil, la noción de pasar el ratón ya no funciona. Los efectos de pasar el ratón solo conciernen la navegación en ordenador. Por lo tanto, se debe acceder a las secciones de un menú mouseover de otra manera (menús, botones, enlaces…).

El siguiente video muestra un ejemplo de estos efectos de pasar el ratón:

Agregar un filtro a las imágenes

La pestaña Diseño del módulo de Imagen ofrece unos filtros que puedes agregar a tus imágenes (desenfoque, contraste, escala de grises…) así como diferentes formas (curva, círculo, estrella…):

Para resumir

Tienes muchas posibilidades con el módulo de Imagen. ¡Finalmente, elegir las imágenes adecuadas para ilustrar tu página web será la tarea más difícil! Por lo demás, para profundizar más, puedes utilizar un módulo de Ilustración o un módulo de Galería.