Configuración de imágenes para que se abran en un lightbox

Habilita los efectos de lightbox para abrir imágenes en una superposición con un fondo atenuado.

Última actualización: 29 de enero de 2025

Un lightbox es un efecto de diseño que abre una imagen en una superposición centrada y atenúa el resto de la página cuando se hace clic en una imagen. Al hacer clic en la x en la esquina superior, se cierra y vuelve a la página. Esta es una excelente manera de resaltar y ampliar las imágenes para los visitantes que quieran ver más de cerca.

Mira el video

Antes de comenzar

Cambiar el color de fondo de lightbox

Para las secciones de galería de la versión 7.1, puedes aplicar un estilo al lightbox con cualquier color en el editor de temas de sección.

En la mayoría de los demás casos, puedes elegir una superposición oscura o clara para el lightbox en la configuración de bloque o Estilos del sitio. Para obtener más información, consulta las secciones Bloques de imagen, Bloques de galería y Páginas de galería.

Secciones de galería (versión 7.1)

Las secciones de galería en los diseños de cuadrícula de la versión 7.1 tienen una opción de lightbox en los estilos de sección. Para habilitar el lightbox:

  1. Haz clic en Editar en la página, y coloca el cursor sobre la sección de la galería y haz clic en el ícono del lápiz.
  2. Asegúrate de que Tipo de galería esté configurado como Cuadrícula: Simple, Cuadrícula: Tira o Cuadrícula: Mosaico. Los diseños de diapositivas no son compatibles con las funciones de lightbox.
  3. Activa la opción Lightbox.
  4. Haz clic en Guardar para guardar tus cambios y seguir editando, o en Salir y luego en Guardar para cerrar el editor.

Para aplicar estilo al color del lightbox:

  1. Mientras editas una página, abre Estilos del sitio y, a continuación, haz clic en Colores.
  2. Pasa el cursor sobre el tema que coincida con la sección de la galería y haz clic en el ícono de lápiz.
  3. En la sección Galerías, utiliza el ajuste Fondo del lightbox para seleccionar un color del lightbox.
  4. Para cambiar el color de los controles de navegación de lightbox, utiliza el ajuste ícono de lightbox.
  5. Haz clic en Guardar para guardar tus cambios y seguir editando, o en Salir y luego en Guardar para cerrar el editor.

Ten en cuenta lo siguiente:

  • El texto de la leyenda no se muestra en el efecto lightbox de la sección de galería.
  • Si agregas URL clickthrough a las imágenes y luego activas lightbox, al hacer clic en estas, pasarán a la URL. El efecto lightbox no se abre.

Bloques de imágenes

Los bloques de imagen admiten lightbox cuando:

Para habilitar lightbox:

  1. Agrega un bloque de imagen o haz doble clic en un bloque de imagen actual para abrir el editor de imágenes.
  2. Haz clic en la pestaña Diseño .
  3. Si tu bloque tiene una opción de diseño, asegúrate de que esté configurado en En línea. Otros diseños no admiten lightbox.
  4. Activa la opción Lightbox.
  5. Elige entre Superposición oscura y Superposición clara para tu estilo del lightbox el menú desplegable Tema de lightbox.

Ten en cuenta lo siguiente:

  • Las leyendas siempre se muestran cuando desplazas el cursor sobre las imágenes del lightbox, independientemente de la opción de visualización de leyendas que elijas. En los dispositivos móviles, se muestran al pulsar el ícono de punto.
    • Los bloques de imagen agregados a las secciones del Editor dinámico no admiten leyendas de imagen. Puedes usar un bloque de texto para agregar texto adyacente o superponer un bloque de imagen en su lugar. Este texto no se mostrará en lightbox. 
  • No es posible habilitar una lightbox si agregas una URL clickthrough.
  • Para mantener habilitado el efecto lightbox y vincular imágenes, agrega un enlace de texto a la descripción de la imagen. En los bloques de imagen, algunos diseños también admiten botones.

Bloques de galería en cuadrícula

Después de agregar las imágenes a un bloque de galería en cuadrícula, haz clic en la pestaña Diseño y marca Lightbox. Establece el estilo de diapositivas del lightbox seleccionando Superposición oscura o Superposición clara en el menú desplegable.

Ten en cuenta lo siguiente:

  • Las leyendas siempre se muestran cuando desplazas el cursor sobre una imagen de lightbox. En un dispositivo móvil, se muestran cuando presionas el ícono de punto.
  • Los bloques de diapositivas, carrusel y galería apilada no admiten un lightbox.
  • Si agregas URL clickthrough y habilitas lightbox, cuando hagas clic en la imagen, se abrirá este efecto en lugar de la URL.
  • Para que los videos se abran en lightbox, debes activar Usar miniatura en la configuración del elemento.

Bloques de resumen

Cuando un bloque de sumario de muro o cuadrícula está conectado a una página de galería, las imágenes se abren automáticamente en diapositivas con lightbox. El color de lightbox del bloque de sumario siempre es oscuro. Las leyendas se muestran cuando posicionas el cursor sobre ellas.

Las diapositivas con lightbox afectan las URL clickthrough:

  • Al visualizar la página, las imágenes con URL clickthrough abren el enlace de clickthrough cuando se hace clic, en lugar de abrir las diapositivas con lightbox.
  • Cuando las diapositivas con lightbox están abiertas, las URL clickthrough se desactivan.

Consejo

En los sitios de la versión 7.0 que admiten lightbox, puedes habilitar los videos agregados a las Páginas de galería para que se abran en lightboxes, en Bloques de sumario. Para habilitarlos, activa Miniatura de video en la configuración de elementos de los videos de tu página de galería. Si no lo habilitas o si tu plantilla no es compatible con lightbox, tus videos se reproducen en el Bloque de sumario, pero no se abren en lightbox.

Páginas de Galería (versión 7.0)

Las páginas de galería de algunas plantillas en la versión 7.0 admiten una función de lightbox. Para las páginas de galería estándar, puedes establecer el color de lightbox en Claro u Oscuro en Estilos del sitio. Las descripciones de video no se muestran en lightbox.

Para saber cómo funcionan las opciones de lightbox en estas familias de plantillas, consulta el siguiente cuadro.

Familia de plantillas Opciones de lightbox
Adirondack
  • Página de galería se establece en Cuadrícula.
  • Las leyendas de imagen se muestran al desplazar el cursor.
Avenue
  • No existe lightbox.

Aviator

  • Página de galería se establece en Cuadrícula.
  • Las URL clickthrough deshabilitan un lightbox.
  • Las leyendas de imagen se muestran al desplazar el cursor.

Bedford

  • Página de galería se establece en Cuadrícula.
  • Las URL clickthrough deshabilitan un lightbox.
  • Las leyendas de imagen se muestran al desplazar el cursor.

Brine

  • Página de galería se establece en Cuadrícula.
  • Las URL clickthrough deshabilitan un lightbox.
  • Las leyendas de imagen se muestran al desplazar el cursor.
  • Se admite solo en las secciones de la página de índice de la galería para videos. Consejo: Hacer clic en un enlace en la leyenda del video abre lightbox, no el enlace.

Farro

  • Página de galería se establece en Cuadrícula.
  • Las URL clickthrough deshabilitan un lightbox.
  • Las leyendas de imagen se muestran al desplazar el cursor.
Five
  • Página de galería se establece en Cuadrícula.
  • Las URL clickthrough deshabilitan un lightbox.
  • Las leyendas de imagen se muestran al desplazar el cursor.
Flatiron
  • No existe lightbox.
Forte
  • Haz clic en el ícono + en la esquina superior derecha de la imagen para abrir un lightbox.
  • Está deshabilitado para la página de índice.
  • Las leyendas no se muestran.
Galapagos
  • Página de galería se establece en Cuadrícula.
  • Las URL clickthrough deshabilitan un lightbox.
  • Las leyendas de imagen se muestran al desplazar el cursor.
Ishimoto
  • No existe lightbox.
Momentum
  • No existe lightbox.

Montauk

  • No existe lightbox.
Native
  • Página de galería se establece en Cuadrícula.
  • Las URL clickthrough deshabilitan un lightbox.
  • Las leyendas de imagen se muestran al desplazar el cursor.

Pacific

  • Página de galería se establece en Cuadrícula.
  • Las URL clickthrough deshabilitan un lightbox.
  • Las leyendas de imagen se muestran al desplazar el cursor.
  • Es compatible con secciones de página de índice de la galería de cuadrícula.

Skye

  • Página de galería se establece en Cuadrícula.
  • Las URL clickthrough deshabilitan un lightbox.
  • Está deshabilitado para la página de índice.
  • Las leyendas de imagen se muestran al desplazar el cursor.
Supply
  • No existe lightbox.

Tremont

  • No existe lightbox.
Wells
  • No existe lightbox.
Wexley
  • Haz clic en cualquier imagen para abrir una Presentación de diapositivas en lightbox.
  • Lightbox está deshabilitado en dispositivos móviles.
  • Las leyendas no se muestran.

York

  • Página de galería se establece en Cuadrícula.
  • Las URL clickthrough deshabilitan un lightbox.
  • Las leyendas de imagen se muestran al desplazar el cursor.
Footer Image
  • Recibe ayuda de nuestra comunidad

  • Recibe la ayuda de nuestra comunidad para personalizaciones avanzadas.

  • Contrata a un Squarespace Expert

  • Destácate en línea con la ayuda de un diseñador o desarrollador con experiencia.

Configuración de imágenes para que se abran en un lightbox