Usa una variedad de diseños para mostrar un conjunto de imágenes o videos.
Utiliza bloques de galería para agregar galerías de imágenes y videos a páginas y publicaciones de blog en una variedad de diseños. Puedes subir imágenes, insertar videos o autorizar imágenes de stock.
Mira el video
Dónde agregar bloques de galería
El lugar en el que puedes agregar bloques de galería depende de la versión de tu sitio.
Puedes agregar bloques de galería a áreas del sitio en las que no se admitan secciones de galería, como:
- Publicaciones de blog
- Eventos individuales
- Información adicional del producto
No es posible añadir bloques de galería a ningún área con secciones de página, como:
- Páginas de Diseño
- Páginas de aterrizaje de colecciones (páginas de blog, eventos, portafolio y tienda)
- Subpáginas de portafolio
- Pies de página
Los miembros de Circle pueden agregar bloques de galería a todas las áreas de contenido en 7.1. Una vez que lo hagan, cualquier persona con permisos para editar el contenido del sitio puede editar un bloque. Para obtener información sobre cómo convertirse en miembro de Circle, visita Squarespace Circle.
Puedes agregar bloques de galería a cualquier área de contenido de bloque del sitio. Para obtener más información, visita Añadir contenido con bloques.
Añadir un Bloque de galería
Para añadir un Bloque de galería:
- Haz clic en un punto de inserción en un área que admite bloques de galería y luego haz clic en Galería. Para obtener ayuda, visita Añadir contenido con bloques.
- Usa la pestaña Contenidos para añadir imágenes y videos.
- Usa la pestaña Diseño para cambiar el diseño y personalizarlo. Si tu sitio usa la versión 7.0, haz clic en Aplicar para publicar tus cambios.
Añadir imágenes y videos
En la pestaña Contenido del editor de bloques de galería, puedes cargar imágenes, agregar imágenes de stock o insertar videos. También puedes reutilizar una imagen de stock o cargada de otras áreas de tu sitio. Cuando agregas una imagen nueva a un bloque de galería, los cambios se guardan automáticamente.
Para obtener más información sobre nuestras prácticas recomendadas para subir imágenes, visita Cómo dar formato a tus imágenes para mostrarlas en la web o mira nuestra serie de videos Todo sobre imágenes.
Limitaciones
- Puedes añadir hasta 250 imágenes y videos.
- Cuanto más contenido agregues, más lento se cargará la página, especialmente en dispositivos móviles con procesamiento limitado. Para reducir el tamaño de la página, considera crear galerías más pequeñas en varias páginas.
La forma en que añadas imágenes y videos a los bloques de galería depende de la versión de tu sitio web.
Nota: No es posible usar la opción Usar galería existente en la versión 7.1. Esta opción solo es para páginas de galería, que solo están disponibles en la versión 7.0.
Agrega tus propias imágenes
En el editor de bloques de galerías, arrastra varias imágenes al cargador de imágenes o haz clic en el cargador para abrir un menú de selección de archivos.
Para reutilizar las imágenes que ya has subido a tu sitio, haz clic en el ícono + en la esquina inferior derecha y luego haz clic en Buscar imágenes.Se abre la pestaña Mi biblioteca, que muestra las imágenes y los videos que has cargado a tu sitio, y cualquier imagen de stock gratuita y con licencia que hayas usado.
Agregar imágenes de stock
Haz clic en el icono +, en la esquina superior derecha y, luego, en Buscar imágenes. Según el tamaño de tu navegador, podrías tener que desplazarte para ver el icono +.
Para conocer más, visita Buscar y agregar imágenes de stock.
Agregar videos
Puedes incrustar videos desde los servicios de alojamiento. Los videos no se pueden subir directamente. Actualmente admitimos URL directas de YouTube y Vimeo. Para otros servicios, usa códigos para insertar. Para informarte mejor, visita Elegir la opción correcta para insertar videos.
Para añadir un video:
- Haz clic en el icono +, en la esquina inferior derecha y, a continuación, en Video.
- En la ventana de Editar video, pega la URL del video en el campo Introducir una URL para insertar aquí . También puedes hacer clic en el icono > y pegar el código para insertar del video en la ventana Insertar datos que aparecerá.
- Puedes agregar una imagen en miniatura personalizada para mostrar sobre el video antes de que lo reproduzca quien visita el sitio. Algunos videos tienen una imagen que los archivos del Bloque de Galería cargan, pero puedes eliminar esta imagen y cargar una nueva.
- Para utilizar imágenes en miniatura personalizadas, marca Utilizar miniaturas.
- Después de que hayas terminado, haz clic en Guardar.
Agrega tus propias imágenes
En el editor de Bloques de galería, arrastra múltiples imágenes al cargador de imágenes. También puedes hacer clic en el cargador de imágenes para abrir un menú de selección de archivos.
Para reutilizar las imágenes que ya has subido a tu sitio, haz clic en el ícono + en la esquina inferior derecha y luego haz clic en Buscar imágenes.Se abre la pestaña Mi biblioteca, que muestra las imágenes y los videos que has cargado a tu sitio, y cualquier imagen de stock gratuita y con licencia que hayas usado.
Agregar imágenes de stock
Haz clic en el icono +, en la esquina superior derecha y, luego, en Buscar imágenes. Según el tamaño de tu navegador, podrías tener que desplazarte para ver el icono +.
Para conocer más, visita Buscar y agregar imágenes de stock.
Agregar videos
Puedes incrustar videos desde los servicios de alojamiento. Los videos no se pueden subir directamente. Actualmente admitimos URL directas de YouTube y Vimeo. Para otros servicios, usa códigos para insertar. Para informarte mejor, visita Elegir la opción correcta para insertar videos.
Para añadir un video:
- Haz clic en el icono +, en la esquina inferior derecha y, a continuación, en Video.
- En la ventana de Editar video, pega la URL del video en el campo Introducir una URL para insertar aquí . También puedes hacer clic en el icono > y pegar el código para insertar del video en la ventana Insertar datos que aparecerá.
- Puedes agregar una imagen en miniatura personalizada para mostrar sobre el video antes de que lo reproduzca quien visita el sitio. Algunos videos tienen una imagen que los archivos del Bloque de Galería cargan, pero puedes eliminar esta imagen y cargar una nueva.
- Para utilizar imágenes en miniatura personalizadas, marca Utilizar miniaturas.
- Después de que hayas terminado, haz clic en Guardar.
Importar desde otras páginas
Hay dos formas de agregar imágenes de otras páginas de tu sitio:
- Agregar imágenes y videos desde una página de galería: haz clic en Usar galería actual y, a continuación, selecciona la página de galería que quieres usar.
- Agregar imágenes desde otras páginas: haz clic en + en la esquina inferior derecha y, a continuación, haz clic en Buscar imágenes para buscar y reutilizar imágenes.
Agrega tus propias imágenes
Para añadir imágenes a Bloques de galería:
- En la pestaña Cargar del editor de bloques, pulsa Contenido.
- Toca el icono +.
- Elige una imagen:
- Toma una foto nueva - Toca Tomar foto o Cámara.
- Elige una imagen de tu dispositivo - Pulsa Biblioteca de fotos o Archivos.
- Elige una imagen de iCloud - Pulsa Insertar de...
- Pulsa las imágenes para añadir títulos, descripciones y URL clickthrough.
Nota: actualmente no es posible buscar imágenes de stock en la aplicación de Squarespace ni agregar contenido a bloques de galería en las entradas de blog. Para hacerlo, usa una computadora.
Utilizar una galería actual (solo versión 7.0)
En los sitios de la versión 7.0, puedes extraer imágenes de una página de galería actual en tu sitio:
- Toca la pestaña Existente en el editor de bloques.
- Pulsa Mis galerías.
- Presiona la Página de Galería que deseas usar.
Para añadir títulos, descripciones y URL clickthrough en las imágenes, edita las imágenes en la Página de Galería.
Diseños del Bloque de galería
Estos son algunos ejemplos de cada diseño del Bloque de galería. En una computadora, puedes cambiar el diseño en la pestaña Diseño del Bloque de galería. En la aplicación de Squarespace, toca Mostrar como para cambiar el diseño.
Los bloques de galería en diapositivas muestran los elementos en formato de presentación de diapositivas. Los visitantes pueden hacer clic para pasar los elementos, o la presentación puede reproducirse de manera automática. Se muestra un elemento a la vez.
Los bloques de galería en carrusel muestran los elementos en una banda horizontal. Los visitantes pueden hacer clic para que pasen los elementos, o el carrusel puede desplazarse de manera automática. La cantidad de elementos que aparecen al mismo tiempo depende de la relación de aspecto de los elementos y del tamaño del bloque.
Los bloques de galería de cuadrículas muestran elementos en una cuadrícula uniforme. Los elementos con longitudes desiguales tienen espacio entre sí, a menos que los recortes automáticamente.
Los Bloques de galería apilados muestran los elementos en una sola columna con un pixel de espacio entre los elementos. Los elementos cubren todo el ancho del bloque. Este diseño es menos personalizable y no tiene opciones de relación de aspecto ni controles de navegación.
Si deseas un conjunto de imágenes apiladas con más espacio entre sí, cambia al diseño de cuadrícula. A continuación, puedes establecer Imágenes en miniatura por fila en 1 y cambiar el espacio según sea necesario.
Personalizar el diseño
Puedes personalizar el diseño y el comportamiento de los Bloques de galería. En una computadora, haz clic en la pestaña Diseño del editor de bloques para hacer estos cambios. En la aplicación de Squarespace, pulsa Mostrar como. Tus opciones dependen del diseño.
Estas son las opciones de diseño para los bloques de galería en diapositivas:
| Opción del diseño | Usa estas opciones con los siguientes fines |
| Transición automática entre las diapositivas |
Pasa automáticamente a la siguiente diapositiva después de un periodo de tiempo determinado. Cuando se activa, aparecerá un control deslizable para ajustar el tiempo de transición de 1 a 10 segundos. Reproducir un video desactiva esta configuración. Si la persona que visita el sitio reproduce el video, deberá hacer clic en la flecha de siguiente para ir al próximo elemento de la galería. |
| Mostrar los controles Siguiente y Anterior |
Añade flechas para la navegación. Los controles aparecen como superposiciones a la izquierda y a la derecha de la imagen o del video principal. Cuando no está marcado, los visitantes del sitio pueden hacer clic para ver la siguiente diapositiva, a menos que las imágenes usen URL clickthrough. Si tu galería contiene videos y has marcado Transición automática entre diapositivas, te recomendamos marcar esta configuración. |
| Recortar imágenes automáticamente |
Recortar las imágenes o cambiar su tamaño para obtener el mejor diseño. Si no está marcada:
|
| Mostrar miniaturas |
Añadir una banda con imágenes en miniatura de todas las imágenes y los videos a la galería debajo de la imagen principal. Si está seleccionada, aparecen controles deslizantes para configurar la altura de la banda de miniatura y la distancia entre la banda de miniatura y la imagen principal. |
| Mostrar título y descripción |
Mostrar títulos y descripciones de imágenes según lo definido en las configuraciones de cada imagen. Si está seleccionado, aparecen más opciones para configurar la ubicación y para mostrarla solo cuando se posiciona el cursor sobre ellas. |
| Fondo transparente | Eliminar el color gris detrás de las imágenes que no están recortadas. Esta opción solo aparece cuando no se ha seleccionado Recortar las imágenes automáticamente. |
| Abrir enlaces en una nueva ventana | Abrir las URL clickthrough en pestañas nuevas con un clic. |
Altura de las diapositivas
La altura de los bloques de galería en diapositivas se configura según la altura de la imagen más ancha. El bloque considera que la imagen más ancha es la que tiene la relación de aspecto más ancha.
Este es un ejemplo de dos imágenes que podrías subir al bloque de galería. Una de ellas tiene una proporción mayor de ancho:altura y la otra es más ancha en píxeles:
La imagen con la proporción mayor de ancho:altura fija la altura del bloque:
Para configurar la altura de la galería, verifica que la imagen con la relación de aspecto más ancha tenga la altura que deseas. Por ejemplo, para reducir la altura de toda la galería, podrías recortar la imagen con la relación de aspecto más ancha para hacerla más corta.
Estos son algunos consejos adicionales para establecer la altura:
- Para ayudar a predecir la altura de tu galería y para mantener uniformes los tamaños de tus imágenes, considera usar un editor de imágenes de terceros para recortar las imágenes con el fin de que tengan la misma relación de aspecto antes de subirlas.
- Para las imágenes de stock o las imágenes que ya has cargado, recórtalas con el editor de imágenes integrado.
- Elige si todas las imágenes de las diapositivas se mostrarán con la misma relación de aspecto marcando Recortar automáticamente las imágenes en la pestaña Diseño.
- Para informarte mejor sobre las relaciones de aspecto, consulta Comprender las relaciones de aspecto.
Estas son las opciones de diseño para los Bloques de galería en carrusel:
| Opción del diseño | Usa estas opciones con los siguientes fines |
| Transición automática entre las diapositivas |
Haz que la galería cambie automáticamente al siguiente elemento después de un tiempo específico (entre 1 y 10 segundos). Reproducir un video desactiva esta configuración. Si la persona que visita el sitio reproduce el video, deberá hacer clic en la flecha de siguiente para ir al próximo elemento de la galería. |
| Mostrar los controles Siguiente y Anterior |
Añadir flechas para la navegación. Los controles aparecen superpuestos a la izquierda y a la derecha de la publicación principal. Si tu galería contiene videos y has marcado Transición automática entre diapositivas, te recomendamos marcar esta configuración. |
| Alineación activa |
Elige dónde debe aparecer la imagen activa en el control deslizante a medida que se mueve la imagen. |
| Abrir enlaces en una nueva ventana | Hacer que las URL clickthrough se abran en pestañas nuevas. |
Estas son las opciones de diseño para los Bloques de galería en cuadrícula:
| Opción del diseño | Usa estas opciones con los siguientes fines |
| Relación de aspecto | Cambiar la forma de las imágenes y los videos. Cuadrado 1:1 está seleccionado por defecto. |
| Recortar imágenes |
Eliminar el relleno, y mostrar las imágenes y los videos con la relación de aspecto seleccionada. Si no está seleccionado, se estandariza la altura de cada fila según la imagen o el video más alto. Según la relación de aspecto seleccionada, puede haber espacios no uniformes, especialmente si se ha configurado la cuadrícula en una imagen en miniatura por fila. |
| Mostrar título |
Mostrar títulos debajo de las imágenes. Cuando se abren las imágenes en una lightbox, los títulos y las descripciones aparecen cuando se posiciona el cursor sobre estos. |
| Miniaturas por fila | Configura la cantidad de miniaturas en una fila. Aumentar la cantidad disminuye el tamaño de cada miniatura. |
| Relleno | Ajustar el relleno/los márgenes entre cada imagen o video. Mover el control deslizante a 0 elimina el relleno. |
| Lightbox |
Si está seleccionado, hacer clic en una imagen o video lo mostrará en un lightbox en modo diapositivas con un fondo negro o blanco. Se desactivarán las URL clickthrough. Usar el menú desplegable de Tema de lightbox para elegir si el fondo del lightbox será negro o blanco. |
| Abrir enlaces en una nueva ventana | Abrir las URL clickthrough en pestañas nuevas con un clic. |
Estas son las opciones de diseño para los Bloques de galería apilados:
| Opción del diseño | Usa estas opciones con los siguientes fines |
| Mostrar título y descripción |
Mostrar el título y las descripciones debajo de cada imagen o video. |
| Abrir enlaces en una nueva ventana | Abrir las URL clickthrough en pestañas nuevas con un clic. |
Añadir el título y la descripción de las imágenes.
Los títulos y las descripciones se muestran solo en los bloques de galería en presentación de diapositivas, en cuadrícula y apilados. Cada título de imagen funciona como texto alternativo, lo que puede ayudarte con el SEO y la accesibilidad de tu sitio. Para informarte mejor sobre cómo mejorar la accesibilidad de tu sitio, visita Hacer que los audios, imágenes y videos sean más accesibles.
Para añadir títulos y descripciones a imágenes y vídeos:
- Pasa el cursor sobre una imagen o video en el editor de bloques de galería.
- Haz clic en
. - Agrega un título y una descripción. Recomendamos usar términos breves que describan la imagen y estén relacionados con el contenido general del sitio.
.- Toca la pestaña Contenido.
- Toca una imagen.
- Agrega un título y una descripción. Recomendamos usar términos breves que describan la imagen y estén relacionados con el contenido general del sitio.
Consejo: si tu sitio web está en la versión 7.0, las imágenes de una página de galería actual muestran automáticamente los títulos de las imágenes y las descripciones de dicha página.
El comportamiento y el aspecto del texto dependen del diseño del bloque de galería:
- Presentación: Los títulos y las descripciones aparecen constantemente o cuando se posiciona el cursor sobre el elemento. Configura la posición en la pestaña Diseño del bloque. En los navegadores más pequeños y en los dispositivos móviles, tal vez no aparezcan los títulos y las descripciones.
- Carrusel: No se mostrarán los títulos y las descripciones.
- Cuadrícula: Los títulos aparecen debajo de las imágenes. Los títulos y las descripciones se muestran cuando se posiciona el cursor si las imágenes se abren en un lightbox, pero no se visualizan para los videos que se reproducen en un lightbox.
- Apilado: Los títulos y las descripciones aparecen debajo de las imágenes.
Consejo: El estilo de leyenda depende del diseño del bloque de galería y de la versión de tu sitio. Para obtener más información, visita Cómo ajustar el estilo de leyendas de imágenes.
Añadir URL clickthrough
Usa las URL clickthrough para vincular imágenes con páginas externas, contenidos internos o archivos. Esta es una excelente manera de incentivar que los visitantes hagan clic en otros contenidos, como los proyectos de los clientes, los productos o las publicaciones en los blogs. Las URL clickthrough funcionan con imágenes, pero no funcionan con videos.
Para agregar una URL clickthrough:
- Posiciona el cursor sobre una imagen en el Editor de Bloque de Galería.
- Haz clic en .
- Configura el enlace en el campo Haz clic para agregar URL.... Para conocer los pasos detallados, visita URL clickthrough.
- Marca o desmarca la opción Abrir enlaces en una nueva ventana en la pestaña Diseño para configurar cómo aparecen tus enlaces.
- Toca la pestaña Contenido.
- Toca una imagen.
- Presiona Enlace de imagen.
- Usa las pestañas para vincular con una página en tu sitio, un sitio web externo, una dirección de correo electrónico, un archivo cargado o un número de teléfono.
- Pulsa la flecha en la esquina superior izquierda y, a continuación, toca Guardar.
Ten en cuenta algunas limitaciones de las URL clickthrough:
- En el bloque de galería en diapositivas, las URL clickthrough anulan la navegación. Si utilizas URL clickthrough y el diseño Diapositivas, recomendamos que marques Mostrar controles siguientes y previos en la pestaña Diseño del editor de bloques.
- En los bloques de galería en cuadrícula, las URL clickthrough no son compatibles cuando Lightbox está activo.
- Los videos no admiten URL clickthrough.
- Al agregar una URL clickthrough en la versión 7.1, no puedes seleccionar una página de portafolio en la pestaña Contenido . En su lugar, selecciona Externo y pega la URL en la página de portafolio.
Reorganizar imágenes y videos
Los bloques de galería no incluyen opciones para ordenar automáticamente las imágenes y los videos, pero puedes reordenar los elementos manualmente. Al reordenar una imagen, el cambio se guarda automáticamente.
- Para mover una imagen a la vez, abre el editor de bloques, y haz clic y arrastra la imagen hasta su lugar.
- Para mover varias imágenes, mantén presionado Ctrl en Windows o ⌘ en Mac y, a continuación, haz clic en cada imagen que quieras mover. Después de seleccionar imágenes, haz clic y arrastra las imágenes hasta su lugar.
Si tu sitio está en la versión 7.0 y el bloque de galería muestra contenido de una galería actual, reorganiza las imágenes o los videos en la página de galería original.
Eliminar una imagen o un video
Para eliminar una imagen o un video de un bloque de galería:
- En el editor de bloques de galería, coloca el cursor sobre la imagen que quieres eliminar y haz clic en el ícono de la papelera.
- Haz clic en Confirmar.
- En la pestaña Cargar del editor de bloques, pulsa Contenido.
- Toca Editar.
- Toca el ícono - rojo de cualquier imagen o video que quieras eliminar y, a continuación, pulsa Eliminar.
Cuando eliminas una imagen o un video de un bloque de galería, el cambio se guarda automáticamente.
Recortar o cambiar el tamaño de las imágenes (únicamente en computadoras)
Puedes modificar el tamaño de la imagen o recortar los Bloques de galería de distintos modos. Tus opciones dependen del diseño.
- Para recortar las imágenes automáticamente con la misma relación de aspecto, marca Recortar imágenes automáticamente en la pestaña Diseño.
- Para recortar cada imagen por separado, usa el editor de imágenes integrado.
- Para volver a centrar las imágenes, cambia el punto focal de las imágenes.
- Para reducir todo el Bloque de galería, añade bloques a cada lado.
- Para cambiar el tamaño de las imágenes y la cantidad de imágenes que aparecen por vez, usa el controlador de recorte.
- Para recortar cada imagen por separado, usa el editor de imágenes integrado.
- Para reducir todo el Bloque de galería, añade bloques a cada lado.
- Para recortar las imágenes automáticamente con la misma relación de aspecto, marca Recortar imágenes en la pestaña Diseño.
- Para cambiar el tamaño de todas las imágenes, modifica la cantidad de imágenes en miniaturas por fila en la pestaña Diseño.
- Para recortar cada imagen por separado, usa el editor de imágenes integrado.
- Para volver a centrar las imágenes, cambia el punto focal de las imágenes.
- Para reducir todo el Bloque de galería, añade bloques a cada lado.
- Para recortar cada imagen por separado, usa el editor de imágenes integrado.
- Para reducir todo el Bloque de galería, añade bloques a cada lado.
Bloques de galería en dispositivos móviles
Los Bloques de galería pueden aparecer o comportarse de manera diferente en los dispositivos móviles que en las computadoras de escritorio, según el diseño.
Los bloques de galería en diapositivas conservan su diseño en los dispositivos móviles:
- Las configuraciones de navegación y transición automática que elijas en la pestaña Diseño seguirán siendo válidas. Las URL clickthrough funcionan cuando se las toca.
- Los títulos y las descripciones no aparecerán en las pantallas de menos de 480 píxeles de ancho. Esto incluye a la mayoría de los teléfonos inteligentes cuando se los sostiene en posición vertical.
- Tal vez aparezcan los títulos y las descripciones (incluidas las leyendas que aparecen cuando se posiciona el cursor) en posición horizontal en los dispositivos más grandes, como las tabletas. Esto depende del dispositivo.
Los Bloques de galería en carrusel conservan su diseño de carrusel en los dispositivos móviles:
- Según tus imágenes, tal vez aparezca una sola imagen por vez.
- Las configuraciones de navegación y transición automática que elijas en la pestaña Diseño seguirán siendo válidas. Las URL clickthrough funcionan cuando se las toca.
Los Bloques de galería en cuadrícula aparecen como cuadrículas de dos columnas de ancho en los dispositivos móviles:
- La relación de aspecto que elijas en la pestaña Diseño sigue siendo aplicable.
- Los lightboxes aparecen si los activas.
- Cuando los lightboxes están desactivados, las URL clickthrough funcionan si se las toca.
- Mientras estás en un lightbox, toca el círculo en la esquina inferior derecha para mostrar el título y la descripción de una imagen.
Los Bloques de galería apilados aparecen y se comportan de igual modo en los dispositivos móviles.