EverWeb tiene cuatro formas de mostrar fotos una tras otra. Para una presentación que se reproduce sola a lo ancho de una página, usa el widget Control deslizante de imágenes (Image Slider). Para diapositivas que mezclan fotos, texto, botones o vídeo en una página adaptable, usa el widget Carrusel. Para que las fotos vayan cambiando detrás de tu texto o dentro de cualquier recuadro, usa un Relleno de presentación de diapositivas. Si quieres que los visitantes vean todas tus fotos como miniaturas y hagan clic en una para abrir una presentación a pantalla completa, usa una galería.
Cuándo usarlo
- Un hotel quiere que su página de inicio vaya mostrando fotos de sus habitaciones, cada una con un enlace a la página de esa habitación: Control deslizante de imágenes.
- Una cafetería quiere una fila de tarjetas que los visitantes puedan pasar con el dedo, cada una con una foto, una línea de texto y un botón Pedir: Carrusel.
- Un pintor que viene de iWeb quiere cada serie en su propia página, con una presentación que empiece cuando alguien haga clic en un cuadro: una galería.
Cuál usar
| Control deslizante de imágenes | Carrusel | Relleno de presentación de diapositivas | Galería de imágenes adaptable / Galería de imágenes | |
|---|---|---|---|---|
| Cómo se ve | Una foto cada vez, con miniaturas debajo si quieres | Diapositivas con cualquier cosa: fotos, texto, botones, vídeo. Puede mostrar varias a la vez | Fotos que cambian detrás de un Cuadro de texto, una forma, una imagen o un Contenedor | Una cuadrícula de miniaturas. Al hacer clic en una se abre una presentación grande sobre la página |
| Tipo de página | Adaptable y Diseño centrado | Pensado para páginas adaptables | Adaptable y Diseño centrado | Galería de imágenes adaptable para páginas adaptables, Galería de imágenes para Diseño centrado |
| Textos | Un Subtítulo para cada foto | Añade un Cuadro de texto a la diapositiva | El texto que escribas se mantiene encima de todas las fotos | Un Subtítulo para cada foto |
| Un enlace en cada diapositiva | Sí, una URL: para cada foto | Sí, cada objeto puede tener su propio enlace | No, el recuadro cambia de foto, no de enlace | No, un clic abre la foto en grande |
| Se reproduce sola | Sí, viene activado | Solo si marcas Reproducción automática | Sí, con Cambiar diapositivas automáticamente | Una vez abierta la presentación |
| En teléfonos | Se reduce para caber si tiene marcado Anchura completa | Se reduce para caber si tiene marcado Anchura completa | Sigue el tamaño del recuadro | Las columnas se reorganizan para caber (Galería de imágenes adaptable) |
Añadir un Control deslizante de imágenes
- Haz clic en la pestaña Widgets y arrastra Control deslizante de imágenes a la página. En una página adaptable, ponlo directamente en la página o dentro de un Contenedor, no en una Fila dinámica.
- Para que ocupe todo el ancho de la pantalla, ve a Inspector > Métricas y marca Anchura completa.
- Ve a Inspector > Ajustes del widget y añade tus fotos con Elegir….
- Selecciona cada foto de la lista para escribir su Subtítulo, su Texto ALT (una descripción para los buscadores y los lectores de pantalla) y, si quieres, una URL: a la que enlace.
- En Opciones de presentación de diapositivas, deja marcado Reproducción automática de presentación de diapositivas y fija la Velocidad de presentación de diapositivas: en milésimas de segundo (4000 son 4 segundos). Elige una Transición:, como fade (fundido) o slide (deslizamiento).
- En Apariencia, desmarca Mostrar miniaturas si quieres un banner limpio y elige una opción de Recorte de imagen:. Fill (rellenar) llena el marco y puede recortar los bordes. Fit (ajustar) muestra la foto entera.
- En Comportamiento, marca Pausa al pasar el mouse sobre el objeto o Haga clic para ampliar la imagen si los quieres.
Añadir un Carrusel
- Arrastra Carrusel desde la pestaña Widgets a una página adaptable.
- Arrastra dentro fotos, Cuadros de texto o Contenedores. Cada uno es una diapositiva. Para una foto con texto y un botón, ponlos primero en una Columna de contenedor.
- En Inspector > Ajustes del widget, en Opciones del slider, fija Diapositivas por vista (con 0 decide el Carrusel), una Animación de diapositiva como Fade, Coverflow o Cards, y Bucle.
- En Ajustes de reproducción automática, marca Reproducción automática, fija la Velocidad (3000 son 3 segundos) y marca Stop on mouseover (detener al pasar el mouse) si quieres que se pare.
Usar un Relleno de presentación de diapositivas
- Selecciona un Cuadro de texto, una forma rectangular, una imagen o un Contenedor.
- Ve a Inspector > Opciones de forma y, en el menú Relleno, elige Presentación de diapositivas.
- Haz clic en Elegir… y selecciona tus fotos. Si es una imagen, añade también la foto original a la lista.
- Ajusta la Animación, la Velocidad del pase de diapositivas (ms) y Cambiar diapositivas automáticamente. Mientras trabajas, deja Mostrar flechas en Siempre para poder pasar las diapositivas. Cuando termines, cámbialo a Nunca si no quieres flechas.
Galerías
Arrastra Galería de imágenes adaptable (páginas adaptables) o Galería de imágenes (páginas con Diseño centrado) a la página y añade tus fotos. Al hacer clic en una miniatura se abre una presentación que puede reproducirse sola, como el «Play Slideshow» de iWeb. Consulta ¿Cómo abro una ventana emergente o amplío una foto cuando alguien hace clic?
Prepara tus fotos
- Haz que todas tengan la misma forma y el mismo tamaño, por ejemplo todas de 1600 x 900 píxeles. Las fotos de formas distintas dejan huecos blancos o hacen que la presentación cambie de altura.
- Que cada una pese menos de 500KB, o la presentación cargará despacio en los teléfonos. Una herramienta gratuita como squoosh.app puede reducirlas.
- Marca Exportar imágenes optimizadas en Archivo > Editar ajustes de publicación para que EverWeb publique copias WebP más ligeras.
Problemas habituales
| Lo que ves | Qué hacer |
|---|---|
| Las fotos cambian de tamaño o dejan espacio en blanco | Haz que todas tengan el mismo tamaño en píxeles. En un Control deslizante de imágenes, pon Recorte de imagen: en Fill |
| Una fila de fotos pequeñas debajo del control deslizante | Desmarca Mostrar miniaturas |
| El Carrusel no se mueve solo | Reproducción automática viene desactivada. Márcala en Ajustes de reproducción automática |
| Quieres que las fotos pasen sin detenerse | Ninguna de las presentaciones integradas lo hace: todas se paran en cada diapositiva |
| En una galería se ven otras fotos detrás de la foto grande | Usa la Galería de imágenes adaptable y ajusta Color de fondo (el color de fondo de la presentación) |
| Demasiado ancho en un teléfono | Marca Anchura completa en Inspector > Métricas y sácalo de cualquier Fila dinámica |
Artículos relacionados
- ¿Cómo abro una ventana emergente o amplío una foto cuando alguien hace clic?
- Crea un sitio web de portafolio de fotografía o arte con EverWeb
- Crea una página adaptable con Contenedores para que se apile bien en un teléfono
- Haz que el texto se lea bien sobre una foto: superposiciones, máscaras y opciones de relleno de imagen