Lightbox - Ayuda de Webflow
Usa el elemento lightbox para mostrar imágenes o videos en una ventana modal de pantalla completa.
Cómo crear un lightbox
Un lightbox es una miniatura clicable anidada en un bloque de enlace. Cuando los visitantes del sitio hacen clic dentro de los límites del enlace en el sitio en vivo, el lightbox se abre para mostrar el medio conectado a él. Puedes agregar un lightbox desde Panel de agregar > Avanzado.
Cómo funciona la imagen en miniatura del marcador de posición del lightbox
El lightbox contiene un elemento de imagen que se comporta como cualquier otro elemento de imagen. Puedes redimensionarlo, hacer doble clic para reemplazar la imagen en miniatura del marcador de posición y agregar texto alternativo. Aprende más sobre los elementos de imagen.
Puedes usar la misma imagen para la miniatura del lightbox y la ventana modal más grande del lightbox. Webflow crea automáticamente variantes responsivas para todas las imágenes en línea. Aprende más sobre imágenes responsivas.
Cómo reemplazar la miniatura del lightbox con otro contenido
Reemplazas el elemento de imagen del marcador de posición y arrastras y sueltas otro contenido (por ejemplo, un encabezado u otros elementos que no sean enlaces) dentro del enlace del lightbox.
También puedes usar un bloque div y aplicar una imagen de fondo para crear miniaturas de imagen de tamaño igual.
Cómo estilizar el lightbox
Puedes estilizar tanto el enlace del lightbox como su contenido. Por ejemplo, si anidas elementos de texto en tu enlace de lightbox, puedes estilizar la tipografía del elemento del enlace del lightbox.
Cómo añadir medios al lightbox
Para añadir una imagen y pie de foto a la ventana modal del lightbox:
- Selecciona el enlace del lightbox en el lienzo
- Ve al panel de configuración de elementos > Configuración del enlace del lightbox > Medios
- Haz clic en el icono “Añadir elemento de lista”
- Elige "Imagen" como el Tipo
- Haz clic en Reemplazar imagen
- Selecciona una imagen del panel de activos
- Añade un pie de foto si es necesario
Puedes añadir tantas imágenes a un enlace del lightbox como desees. Estas imágenes se mostrarán como una presentación de diapositivas dentro de la ventana modal del lightbox.
Para añadir un video a la ventana modal del lightbox:
- Selecciona el enlace del lightbox en el lienzo
- Ve al panel de configuración de elementos > Configuración del enlace del lightbox > Medios
- Haz clic en el icono “Añadir elemento de lista”
- Elige "Video" como el Tipo
- Añade la URL del video en el campo URL
- Añade un Título si es necesario
Lightbox para imágenes y videos - Tutorial de diseño web
Cómo crear lightboxes dinámicos a partir de medios de campos de colección
Puedes crear lightboxes dinámicos extrayendo la imagen en miniatura y/o los medios del lightbox desde campos de medios de Colección (es decir, un campo de imagen, campo de imágenes múltiples o campo de video) en tus Colecciones de CMS o Ecommerce.
Para conectar un campo de Colección dinámico a la miniatura del lightbox:
- Añade un lightbox a una lista de Colección conectada dinámicamente o a una página de Colección de CMS
- Selecciona la imagen en miniatura de marcador de posición
- Ve a Configuración de elementos > Configuración de imagen
- Haz clic en el icono "punto morado" en el campo Imagen
- Selecciona un campo de imagen de Colección
Luego, puedes conectar el lightbox al campo de la Colección, para que tus imágenes dinámicas de la Colección estén disponibles en el lightbox. Para conectar un campo dinámico de la Colección al medio del lightbox:
- Selecciona el enlace del lightbox
- Ve a Configuración del elemento > Configuración del enlace del lightbox
- Haz clic en el icono del "punto morado" en el campo Medios
- Selecciona un campo de medios de la Colección
Para conectar un lightbox a un campo de múltiples imágenes:
- Añade una lista de Colección a una página de Colección
- Conecta la lista de Colección al campo de múltiples imágenes haciendo clic en el menú desplegable Fuente y seleccionando el campo de múltiples imágenes
- Añade un lightbox a la lista de Colección
- Selecciona el elemento imagen en el lightbox
- Ve a Configuración del elemento > Configuración de imagen
- Haz clic en el icono del "punto morado" en el campo Imagen
- Selecciona el campo de múltiples imágenes
- Selecciona el enlace del lightbox en el lienzo
- Ve a Configuración del elemento > Configuración del enlace del lightbox
- Haz clic en el icono del "punto morado" en el campo Medios
- Selecciona el campo de múltiples imágenes
También puedes conectar un lightbox a un campo de múltiples imágenes cuando el lightbox se añade a listas de Colección o páginas de Colección.
Cómo enlazar lightboxes usando grupos de lightbox
Puedes enlazar múltiples lightboxes juntos para crear una galería de diapositivas. Cuando un visitante del sitio hace clic en un lightbox enlazado, el lightbox abrirá todos los medios asociados con el grupo enlazado.
Cómo crear un grupo de lightbox
- Selecciona cualquier elemento en un lightbox
- Ve a Configuración del elemento > Configuración del lightbox
- Introduce un nombre de grupo en el campo Coincidir o crear un nombre de grupo
Los lightboxes que usan el mismo nombre de grupo están enlazados en un grupo.
Para lightboxes en listas de Colección, crear y enlazar un lightbox en un elemento de Colección enlaza automáticamente todos los lightboxes en la lista de Colección.
Crear múltiples grupos de lightbox en una página
Si hay múltiples lightboxes en la misma página, puedes separarlos asignando a cada grupo de lightbox un Nombre de grupo diferente.