Lightbox - Ajuda do Webflow
Use o elemento lightbox para exibir imagens ou vídeos dentro de uma janela modal em tela cheia.
Como criar um lightbox
Um lightbox é uma miniatura clicável aninhada em um bloco de link. Quando os visitantes do site clicam dentro dos limites do link no site ao vivo, o lightbox se abre para exibir a mídia conectada a ele. Você pode adicionar um lightbox a partir de Painel de Adição > Avançado.
Como funciona a imagem em miniatura do lightbox
O lightbox contém um elemento de imagem que se comporta como qualquer outro elemento de imagem. Você pode redimensioná-lo, clicar duas vezes para substituir a imagem em miniatura e adicionar texto alternativo. Saiba mais sobre elementos de imagem.
Você pode usar a mesma imagem para a miniatura do lightbox e a janela modal maior do lightbox. O Webflow cria automaticamente variantes responsivas para todas as imagens em linha. Saiba mais sobre imagens responsivas.
Como substituir a miniatura do lightbox por outro conteúdo
Você substitui o elemento de imagem de espaço reservado e arrasta e solta outro conteúdo (por exemplo, um título ou qualquer outro elemento que não seja um link) dentro do link do lightbox.
Você também pode usar um bloco div e aplicar uma imagem de fundo para criar miniaturas de imagem de tamanho igual.
Como estilizar o lightbox
Você pode estilizar tanto o link do lightbox quanto seu conteúdo. Por exemplo, se você aninhar elementos de texto no link do lightbox, poderá estilizar a tipografia do elemento do link do lightbox.
Como adicionar mídia ao lightbox
Para adicionar uma imagem e legenda à janela modal do lightbox:
- Selecione o link do lightbox na tela
- Vá para Painel de configurações do elemento > Configurações do link do lightbox > Mídia
- Clique no ícone “Adicionar item à lista”
- Escolha "Imagem" como o Tipo
- Clique em Substituir imagem
- Selecione uma imagem no Painel de ativos
- Adicione uma Legenda se necessário
Você pode adicionar quantas imagens quiser a um link do lightbox. Essas imagens serão exibidas como uma apresentação de slides dentro da janela modal do lightbox.
Para adicionar um vídeo à janela modal do lightbox:
- Selecione o link do lightbox na tela
- Vá para Painel de configurações do elemento > Configurações do link do lightbox > Mídia
- Clique no ícone “Adicionar item à lista”
- Escolha "Vídeo" como o Tipo
- Adicione o URL do vídeo no campo URL
- Adicione um Título se necessário
Lightbox para imagens e vídeos - Tutorial de design web
Como criar lightboxes dinâmicos a partir de mídia de campo de Coleção
Você pode criar lightboxes dinâmicos puxando a imagem em miniatura e/ou mídia do lightbox de campos de mídia de Coleção (ou seja, um campo de imagem, campo de múltiplas imagens ou campo de vídeo) em suas Coleções CMS ou Ecommerce.
Para conectar um campo de Coleção dinâmico à miniatura do lightbox:
- Adicione um lightbox a uma lista de Coleção conectada dinamicamente ou a uma página de Coleção CMS
- Selecione a imagem em miniatura de espaço reservado
- Vá para Configurações do elemento > Configurações de imagem
- Clique no ícone "ponto roxo" no campo Imagem
- Selecione um campo de imagem da Coleção
Então, você pode conectar a lightbox ao campo da Coleção, para que suas imagens dinâmicas da Coleção estejam disponíveis na lightbox. Para conectar um campo dinâmico da Coleção à mídia da lightbox:
- Selecione o link da lightbox
- Vá para Configurações do elemento > Configurações do link da lightbox
- Clique no ícone do "ponto roxo" no campo Mídia
- Selecione um campo de mídia da Coleção
Para conectar uma lightbox a um campo de múltiplas imagens:
- Adicione uma lista de Coleção a uma página de Coleção
- Conecte a lista de Coleção ao campo de múltiplas imagens clicando no menu suspenso Fonte e selecionando o campo de múltiplas imagens
- Adicione uma lightbox à lista de Coleção
- Selecione o elemento imagem na lightbox
- Vá para Configurações do elemento > Configurações de imagem
- Clique no ícone do "ponto roxo" no campo Imagem
- Selecione o campo de múltiplas imagens
- Selecione o link da lightbox na tela
- Vá para Configurações do elemento > Configurações do link da lightbox
- Clique no ícone do "ponto roxo" no campo Mídia
- Selecione o campo de múltiplas imagens
Você também pode conectar uma lightbox a um campo de múltiplas imagens quando a lightbox é adicionada a listas de Coleção ou páginas de Coleção.
Como vincular lightboxes usando grupos de lightbox
Você pode vincular várias lightboxes juntas para criar uma galeria de slideshow. Quando um visitante do site clica em uma lightbox vinculada, a lightbox abrirá toda a mídia associada ao grupo vinculado.
Como criar um grupo de lightbox
- Selecione qualquer elemento em uma lightbox
- Vá para Configurações do elemento > Configurações da lightbox
- Insira um nome de grupo no campo Corresponder ou criar um nome de grupo
Lightboxes usando o mesmo nome de grupo estão vinculadas em um grupo.
Para lightboxes em listas de Coleção, criar e vincular uma lightbox em um item de Coleção vincula automaticamente todas as lightboxes na lista de Coleção.
Crie múltiplos grupos de lightbox em uma página
Se houver várias lightboxes na mesma página, você pode separá-las atribuindo a cada grupo de lightbox um Nome de Grupo diferente.