Nota: Si bien hemos traducido las guías más populares al español, algunas guías están disponibles solamente en inglés.
Bloques de Galería

Usa Bloques de galería para añadir galerías de imágenes y videos a páginas y publicaciones de blog en una variedad de diseños. Puedes subir imágenes, incrustar videos, obtener imágenes de stock con licencia o mostrar contenidos de una Página de Galería existente.

Si deseas informarte sobre cómo configurar los Bloques de galería en tu sitio, sigue los pasos de esta guía. Para preguntas frecuentes, consulta Preguntas frecuentes sobre los Bloques de galería.

En la versión 7.1, solo puedes añadir Bloques de galería a las publicaciones de blog, los elementos de productos y los eventos separados. Para agregar galerías a las páginas, usa secciones de galería.

Mira el video

Añadir un Bloque de galería

Para añadir un Bloque de galería:

  1. Edita una página o una publicación, presiona un punto de inserción y selecciona Texto en el menú.  Si necesitas ayuda, consulta Cómo agregar bloques.
  2. En Galería, selecciona PresentaciónCarruselCuadrícula, o Apilado.

Opciones del Bloque de galería en el menú del bloque.

  1. Usa la pestaña Contenidos para añadir imágenes y videos.
  2. Usa la pestaña Diseño para cambiar el diseño y personalizarlo.
  3. Haz clic en Aplicar para guardar tus cambios.
  1. Toca el ícono de Páginas .
  2. Toca el título de la página que deseas editar.
  3. Pulsa Editar o el ícono del lápiz en la esquina superior derecha.
  4. Pulsa el ícono + en la esquina superior derecha para abrir el menú de bloque.
  5. En Galería, toca PresentaciónCarruselCuadrícula o Apilado.
  6. Usa la pestaña SubirExistente para añadir imágenes y videos.
  7. Usa la pestaña Mostrar como para cambiar el diseño y personalizar el diseño.
  8. Toca Listo o  para guardar tus cambios.

Añadir imágenes y videos

En la pestaña Contenidos del editor del Bloque de galería, puedes subir imágenes, añadir imágenes de stock, incrustar videos o mostrar los contenidos de una Página de Galería existente. También puedes reutilizar una imagen de stock o una que hayas subido a otras áreas de tu sitio.

Para informarte mejor sobre nuestras mejores prácticas para subir imágenes, consulta Ajustar el formato de tus imágenes para mostrarlas en la web o ve nuestra serie de videos Todo sobre las imágenes.

Limitaciones

  • Puedes añadir hasta 250 imágenes y videos.
  • Cuanto más contenido agregues, más lento cargará la página. Esto es especialmente así para los dispositivos móviles con capacidad de procesamiento limitada. Para disminuir el tamaño de la página, siempre se pueden crear múltiples galerías en varias páginas.

Opción 1 - 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.

Opción 2: Añadir imágenes de stock

Haz clic en el icono +, en la esquina superior derecha y, luego, haz clic en Buscar imágenes. Según el tamaño de tu navegador, podrías tener que desplazarte para ver el ícono +.

Para conocer más, visita Buscar y agregar imágenes de stock.

Opción 3: Añadir videos

Puedes incrustar videos desde los servicios de alojamiento. Los videos no se pueden subir directamente. Actualmente, se admiten direcciones URL directas de YouTube, Vimeo, Wistiay Animoto. Para otros servicios, usa códigos para insertar. Para informarte mejor, consulta Elegir la opción correcta para insertar videos.

Para añadir un video:

  1. Haz clic en el icono +, en la esquina inferior derecha y, a continuación, en Video.
  2. En la ventana de Editar video, pega la URL del vídeo en la casilla Introducir una URL integrable 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á.
  3. 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.
  4. Para utilizar imágenes en miniatura personalizadas, marca Utilizar miniaturas.
  5. Luego de que hayas terminado, haz clic en Guardar.

Opción 4: Usar una galería existente

Los Bloques de galería pueden mostrar las imágenes y los videos que has añadido a una Página de Galería existente.

Para mostrar los contenidos de una Página de Galería, haz clic en Usar Galería existente y, a continuación, selecciona la Página de Galería que quieres usar.

Opción 1 - Agrega tus propias imágenes

Para añadir imágenes a Bloques de galería:

  1. En la pestaña Subir del editor de bloques, toca Contenido.
  2. Toca el icono +.
  3. 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...
  4. Pulsa las imágenes para añadir títulos, descripciones y URL clickthrough.
Nota: Actualmente no es posible buscar imágenes de stock o añadir videos a Bloques de galería en la aplicación. Para hacerlo, usa una computadora.

Opción 2: Usar una galería existente

Para usar una Página de Galería existente en tu sitio:

  1. Toca la pestaña Existente en el editor de bloques.
  2. Pulsa Mis galerías.
  3. 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 presentación muestran los elementos en un formato de presentación. 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.

Ejemplo de Bloque de galería en modo presentación.

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 del tamaño del bloque.

Ejemplo de Bloque de galería en carrusel.

Los Bloques de resumen en cuadrícula muestran los elementos en una cuadrícula pareja. Los elementos de diferentes longitudes tienen un espacio entre ellos.

Ejemplo de Bloque de galería en cuadrícula.

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.

Ejemplo de Bloque de galería apilado.

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 modo presentación:

Opción del diseño Usa estas opciones con los siguientes fines
Transición automática entre las diapositivas

Cambia la presentación automáticamente a la siguiente imagen 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 ver el 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 que visitan el sitio pueden hacer clic para hacer avanzar la presentación, 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:

  • La imagen o el video más ancho ocupa todo el ancho del bloque. Se cambia la altura para conservar su relación de aspecto.
  • Se modifica el tamaño de todas las demás imágenes y videos para que tengan la misma altura que la imagen o el video más ancho.
  • Se conservan las relaciones de aspecto.
Si está marcada:
  • La imagen o el video más ancho ocupa todo el ancho del bloque. Se conserva la relación de aspecto con su altura.
  • Se modifica el tamaño de todas las demás imágenes y videos para que tengan la misma altura y el mismo ancho que la imagen o el video más ancho.
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 la presentación

La altura de los Bloques de galería en modo presentación se configura de acuerdo con 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:

Comparación de imágenes con diferentes proporciones de ancho:altura.

La imagen con la proporción mayor de ancho:altura fija la altura del bloque:

La imagen con la proporción mayor de ancho:altura establece la altura del Bloque de galería en modo presentación.

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 ajustar 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 la presentación 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 ver el 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.

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, tal vez veas espacios no uniformes, especialmente si se ha configurado la cuadrícula en una 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 presentación 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, en cuadrícula y apilado. Cada título de imagen actúa como texto alternativo, lo que puede ayudarte con la SEO y la accesibilidad.

Para añadir un título y una descripción en una imagen o video:

  1. Posiciona el cursor sobre una imagen o un video en el editor del Bloque de galería o en una Página de Galería existente.
  2. Haz clic en el icono del engranaje.
  3. 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.
  1. Toca la pestaña Contenido.
  2. Toca una imagen.
  3. 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 las imágenes en el Bloque de galería son de una Página de Galería existente, los títulos de las imágenes y las descripciones de la Página de Galería aparecerán automáticamente en el Bloque de galería.

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 la leyenda depende del diseño del Bloque de galería y de tu plantilla. Para conocer más, consulta Cambiar el estilo de las 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 un enlace URL:

  1. Posiciona el cursor sobre una imagen o un video en el editor del Bloque de galería o en una Página de Galería existente.
  2. Haz clic en el icono del engranaje.
  3. Configura el enlace en la casilla Haz clic para añadir la URL.... Para obtener pasos detallados, consulta Usar URL clickthrough.
  4. Marca o desmarca la opción Abrir enlaces en una nueva ventana en la pestaña Diseño para controlar cómo aparecen tus enlaces.
  1. Toca la pestaña Contenido.
  2. Toca una imagen.
  3. Toca Enlace de imagen.
  4. 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.
  5. Pulsa la flecha en la esquina superior izquierda y, a continuación, toca Guardar.

Los Bloques de galería tienen algunas limitaciones para las URL clickthrough:

  • En el Bloque de galería en modo presentación, las URL clickthrough anulan la navegación. Si utilizas URL clickthrough y el diseño Presentación, 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.

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 en la pestaña Diseño.
  • Para cambiar el tamaño de todas las imágenes, ajusta la cantidad de 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, ajusta el punto focal de las imágenes.
  • 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 modo presentación conservan su diseño de presentación 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:

  • Sigue vigente la relación de aspecto que hayas seleccionado en la pestaña Diseño.
  • 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.

Tocar el círculo para mostrar el texto de una imagen en un lightbox, en dispositivos móviles.

Los Bloques de galería apilados aparecen y se comportan de igual modo en los dispositivos móviles.

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 126 de 329