Galerías de imágenes

La galería de imágenes de Sitely es mucho más que un simple carrusel de imágenes: sus posibles usos van mucho más allá de mostrar una galería. Es una de las funciones más recientes de Sitely y supone un gran salto adelante en la forma de presentar información en una página de Sitely. El elemento de galería ahora admite tanto imágenes como archivos PDF. Una de las preguntas que más hacen los usuarios es cómo incrustar un documento PDF en una página web de Sitely. Tradicionalmente, la respuesta era hacer lo mismo que cualquier otra aplicación de diseño web: añadir algo de código a la página para que el PDF se muestre en un iframe. Claramente, esto no era lo que los desarrolladores tenían en mente cuando idearon Sitely como una herramienta de diseño web sin código. Pues bien, todo eso es cosa del pasado. El nuevo elemento de galería se encarga de incrustar documentos PDF en tu página web con facilidad y sencillez, y añade mejoras que hacen que ver imágenes o páginas PDF sea un placer para los usuarios.

Cuando se añade por primera vez el elemento de galería a una página, se ve así. Es un carrusel de aspecto bastante estándar que espera a que le añadas contenido.

Cuando se usa como una galería de imágenes tradicional, añadirías imágenes JPG o PNG desde la sección 'Galería de imágenes' del panel Estilos. Se ve así.

Al hacer clic en el botón Editar se mostrará un panel de selección de imágenes donde puedes añadir tu contenido. Simplemente haz clic en el botón Añadir para buscar imágenes en tu disco.

También puedes añadir páginas PDF. Pueden ser archivos PDF de una o varias páginas. Cuando añades PDF, Sitely convierte cada página en una imagen de alta calidad que se incrusta en la galería. Esto facilita integrar presentaciones o folletos en tu página web y hace que tus documentos sean completamente independientes de las fuentes. Al combinarse con la función de lightbox de la galería, las páginas se ampliarán en pantalla para facilitar la lectura. En el ejemplo de abajo, una presentación de Keynote se exportó como un archivo PDF y se añadió a la galería de imágenes. Haz clic en la galería para ver lo sencillo que es mostrar material de presentación en una página web.

Hay muchas formas creativas de utilizar el nuevo elemento de galería de imágenes. Por ejemplo, podrías crear una galería simple de dos imágenes y hacer que reproduzca la presentación automáticamente para crear una llamada a la acción llamativa en tu página. Aquí tienes un ejemplo.

‍En este ejemplo, podrías configurar acciones de clic diferentes en cada imagen: una para abrir un formulario de registro en una ventana emergente y otra para abrir una ventana emergente distinta que explique la oferta con más detalle. Pruébalo en este ejemplo: espera a que cambien las imágenes y luego haz clic en ellas.

‍No tienes que ser diseñador gráfico para crear banners sencillos como este. Puedes usar las herramientas de Apple que ya tienes. Este ejemplo se hizo como una presentación de Keynote de dos páginas (con tamaño personalizado) y luego cada diapositiva se exportó como imagen. También podrías exportar las dos diapositivas como un único archivo PDF y usarlo para poblar la galería de imágenes.

Entonces, después de ver lo que puede hacer la nueva galería de imágenes, veamos cómo configurarla y darle estilo. Como casi todos los elementos en Sitely, todo se configura en el panel Estilos. Ya hemos visto arriba lo sencillo que es añadir contenido, así que pasemos al estilo y las opciones. La segunda sección del panel Estilos te permite definir una acción al hacer clic para cada imagen individual. Es una opción muy flexible que te permite asignar acciones diferentes a imágenes distintas. Se puede establecer cualquier acción actualmente compatible con Sitely. La acción más común para una galería probablemente sea 'Ampliar imagen en lightbox'. Esto mostrará las imágenes a mayor escala sobre un fondo atenuado para ofrecer a los usuarios una vista más grande. Si quieres aplicar la misma acción de clic a todas las demás imágenes, haz clic en el icono de ajustes (tres puntos en un círculo) Esto te ofrecerá la opción de aplicar la acción a todas las imágenes. Si la opción 'Mostrar etiqueta' está activada, la diapositiva se superpondrá con una etiqueta de texto. Esta puede estilizarse y moverse a gusto, incluso por debajo de la diapositiva si es necesario.

Cuando se elige la opción de lightbox como acción al hacer clic, el panel Estilos te mostrará varias opciones adicionales. Se muestran a continuación y en su mayor parte se explican por sí solas.

Si desmarcas la casilla Presentación, se eliminarán las flechas izquierda y derecha, tanto en el lienzo como cuando la presentación se abra en un lightbox. No obstante, una vez abierto el lightbox, las diapositivas aún podrán avanzarse con gestos de deslizamiento. Esto puede ser útil si quieres obligar a los usuarios a abrir la galería en un lightbox antes de poder desplazarse por las imágenes. En la práctica, la primera imagen permanecerá estática en la página. Por supuesto, tendrás que añadir una superposición de acción sobre la imagen para indicar que se puede ampliar.

‍El siguiente conjunto de opciones te permite dar estilo a los distintos elementos de los botones de navegación de la presentación, incluido el color estándar de las flechas, así como los colores al pasar el ratón por encima y al hacer clic.

‍El botón de cierre es el icono que se muestra en la parte superior derecha de la presentación y permite a los usuarios salir de la presentación y volver a la página. Tienes varias opciones de estilo, y a cada una se le pueden aplicar colores diferentes según el estado del botón.

‍La superposición de acción es donde seleccionas un icono para superponer sobre las imágenes de tu galería y que la gente sepa que se pueden ampliar. Esta superposición puede configurarse diapositiva por diapositiva e incluye versiones en negro y en blanco, según el color de fondo de tus imágenes. Si todas tus imágenes tienen un fondo similar, como en nuestra presentación de Keynote anterior, puedes aplicar una superposición de acción solo a la primera diapositiva y luego activar 'aplicar acción a todas las imágenes' junto a la opción 'Ampliar imagen en lightbox'.

‍Las opciones finales te dan control sobre cómo se mostrará tu galería. La opción Letterbox está pensada para permitir la inclusión de imágenes con diferentes relaciones de aspecto. Si tus imágenes están en 'FIT' (ajustar), su tamaño se adaptará para encajar dentro del límite de la galería. Esto puede provocar un efecto de bandas, a izquierda y derecha de las imágenes altas o arriba y abajo de las imágenes anchas. Puedes usar esta opción para definir un color de fondo para ese espacio en blanco alrededor de tus imágenes. Si esta opción está en 'FILL' (rellenar), tus imágenes se ampliarán para llenar el contenedor de la galería. Esto puede provocar recortes en algunas imágenes.

‍Las opciones de borde, redondeado y sombra aplican el efecto a todas las diapositivas, aunque no a las miniaturas, si las hay.

‍La opción Transición te permite establecer la velocidad de las transiciones que aplicas a tu presentación. Las opciones también permiten el fundido cruzado de imágenes o un efecto de deslizamiento. Ten en cuenta que el fundido cruzado solo funcionará en la versión en lienzo de la galería; la versión en lightbox siempre tendrá una transición de deslizamiento.

‍Al seleccionar la casilla Miniaturas tendrás opciones adicionales para mostrar una cuadrícula de miniaturas debajo o encima de tu galería. Esto permitiría a los usuarios hacer clic en las miniaturas para navegar por la galería. Como alternativa, podrías optar por mostrar puntos.

‍La función Presentación automática hará avanzar tu presentación sin interacción del usuario. Las diapositivas pueden pausarse durante un periodo específico antes de pasar a la siguiente. También puedes hacer que la presentación se pause al pasar el ratón por encima.

Color y degradados