Imagens se abrindo em um lightbox

Use o efeito lightbox para abrir imagens sobrepostas ao fundo esmaecido.

Ultima atualização 29 de Janeiro de 2025

Um lightbox é um efeito de design que abre uma imagem em uma sobreposição centralizada e escurece o resto da página quando uma imagem é clicada. Clicar no x no canto superior a fecha e retorna à página. Os lightboxes são uma ótima maneira de destacar e ampliar imagens para os visitantes que desejam ver mais de perto.

Assista a este vídeo

Antes de começar

Alterar a cor de fundo do lightbox

Para seções de galeria na versão 7.1, você pode estilizar sua lightbox para qualquer cor no editor de temas de seção.

Na maioria dos outros casos, você pode escolher uma sobreposição Escura ou Clara para o lightbox nas configurações de bloqueio ou Estilos do Site. Para obter mais detalhes, consulte as seções sobre Blocos de Imagem, Blocos de Galeria e Páginas de Galeria.

Seção de galeria (versão 7.1)

As seções de galeria em layouts de grade na versão 7.1 têm uma opção de lightbox em estilos de seção. Para habilitar o lightbox:

  1. Clique em Editar na página, passe o cursor do mouse sobre a seção da galeria e clique no ícone de lápis.
  2. Veja se o Tipo de galeria está como Grade: simples, Grade: tirass ou Grade: tijolos. O layout de slideshow não aceita o recurso de lightbox.
  3. Ligue a opção Lightbox.
  4. Clique em Salvar para salvar as alterações e continuar editando; ou em Sair e depois Salvar para fechar o editor.

Para estilizar a cor do lightbox:

  1. Ao editar uma página, abra Estilos do Site e clique em Cores.
  2. Passe o cursor do mouse sobre o tema que corresponde à seção da galeria e clique no ícone de lápis .
  3. Na seção Galerias, use o ajuste Fundo do lightbox para escolher a cor do lightbox.
  4. Para alterar a cor dos controles de navegação do lightbox, use o ajuste no ícone do Lightbox.
  5. Clique em Salvar para salvar as alterações e continuar editando; ou em Sair e depois Salvar para fechar o editor.

Lembre-se:

  • O texto da legenda não é exibido na lightbox da seção de galeria.
  • Se você adicionar URLs de clickthrough a imagens e depois ativar a lightbox, o clique na imagem vai para o URL. A lightbox não se abrirá.

Blocos de Imagem

O bloco de imagens aceita lightbox quando:

Para ativar uma lightbox:

  1. Adicione um Bloco de Imagemou clique duas vezes em um Bloco de Imagem atual para abrir o editor de imagens.
  2. Clique na aba Design.
  3. Se o bloco tiver a opção de layout, veja se ela está como Inline. Os outros layouts não aceitam lightbox.
  4. Ligue a opção Lightbox.
  5. Escolha entre Sobreposição escura e Sobreposição clara para seu estilo lightbox com o menu suspenso Tema lightbox.

Lembre-se:

  • As legendas sempre aparecem quando você passa o cursor sobre a imagem lightbox, independentemente da opção da legenda escolhida. Na versão móvel, elas aparecem quando você toca no ícone de ponto.
    • Blocos de imagens adicionados a uma seção do Editor Intuitivo não aceitam legendas nas imagens. Você pode usar o bloco de texto para adicionar um texto ao lado ou sobreposto ao bloco de imagens. O texto não aparece na lightbox. 
  • Não é possível ativar a lightbox se você adicionar um URL de clickthrough.
  • Para manter os lightboxes ativados e criar um link nas imagens, adicione um link de texto à descrição da imagem. No Bloco de Imagem, determinados layouts também aceitam botões.

Blocos de Galeria de Grade

Após adicionar suas imagens a um Bloco de Galeria em grade, clique na aba Design e marque Lightbox. Para especificar o estilo da apresentação de slides no lightbox, escolha Sobreposição escura ou Sobreposição clara no menu suspenso.

Lembre-se:

  • As legendas sempre aparecem quando você passa o cursor sobre uma imagem lightbox. Na versão móvel, elas aparecem quando você toca no ícone de ponto.
  • Slideshow, Carrossel e Blocos de Galeria empilhados não suportam um lightbox.
  • Se você adicionar URLs de clickthrough e ativar o lightbox, clicar na imagem abrirá o lightbox em vez do URL.
  • Para abrir um vídeo no lightbox, ative a opção Usar miniatura nas configurações do item.

Blocos de Sumário

Quando um bloco de sumário em grade ou em mural é vinculado a uma página de galeria, as imagens se abrem automaticamente em slideshow no lightbox. A cor do lightbox do bloco de sumário é sempre Escura. As legendas aparecem ao se passar o cursor.

A apresentação de slides do Lightbox afeta os URL de clickthrough:

  • Ao visualizar a página, as imagens com URL de clickthrough abrem o link de cliques quando clicadas, em vez de abrirem a apresentação de slides do Lightbox.
  • Com o slideshow do lightbox aberto, o URL de clickthrough é desativado.

Dica

nos sites 7.0 que aceitam efeito lightbox, é possível ativar vídeos adicionados à Página de Galeria para abrirem em um lightbox no Bloco de Sumário. Para ativar essa opção, ative Miniatura de vídeo nas configurações do item nos vídeos da Página de Galeria. Se você não ativar a opção; ou se o template não aceitar lightbox, os vídeos são reproduzidos no Bloco de Sumário, sem abrir no lightbox.

Página de Galeria (versão 7.0)

As Páginas de Galeria de alguns templates na versão 7.0 aceitam uma funcionalidade lightbox. Para Páginas de Galeria padrão, você pode definir a cor do lightbox como Claro ou Escuro nos Estilos do Site. As descrições de vídeo não são exibidas no lightbox.

Para saber como as opções de lightbox funcionam nessas famílias de templates, consulte a tabela abaixo.

Família de template Opções do Lightbox
Adirondack
  • Página de Galeria definida como Grade
  • Exibição de legendas de imagem ao passar o mouse
Avenue
  • Sem Lightbox

Aviator

  • Página de Galeria definida como Grade
  • URLs de clickthrough desativam uma lightbox
  • Exibição de legendas de imagem ao passar o mouse

Bedford

  • Página de Galeria definida como Grade
  • URLs de clickthrough desativam uma lightbox
  • Exibição de legendas de imagem ao passar o mouse

Brine

  • Página de Galeria definida como Grade
  • URLs de clickthrough desativam uma lightbox
  • Exibição de legendas de imagem ao passar o mouse
  • Funciona apenas nas seções da Página Índice da galeria e somente em vídeos. Dica: clicar em um link na legenda do vídeo abre o lightbox, não o link.

Farro

  • Página de Galeria definida como Grade
  • URLs de clickthrough desativam uma lightbox
  • Exibição de legendas de imagem ao passar o mouse
Five
  • Página de Galeria definida como Grade
  • URLs de clickthrough desativam uma lightbox
  • Exibição de legendas de imagem ao passar o mouse
Flatiron
  • Sem Lightbox
Forte
  • Clique no ícone + no canto superior direito da imagem para abrir uma mesa de luz
  • Desativado para Página Índice
  • As legendas não são exibidas
Galapagos
  • Página de Galeria definida como Grade
  • URLs de clickthrough desativam uma lightbox
  • Exibição de legendas de imagem ao passar o mouse
Ishimoto
  • Sem Lightbox
Momentum
  • Sem Lightbox

Montauk

  • Sem Lightbox
Native
  • Página de Galeria definida como Grade
  • URLs de clickthrough desativam uma lightbox
  • Exibição de legendas de imagem ao passar o mouse

Pacific

  • Página de Galeria definida como Grade
  • URLs de clickthrough desativam uma lightbox
  • Exibição de legendas de imagem ao passar o mouse
  • Compatível com seções da Página Índice da galeria de grade

Skye

  • Página de Galeria definida como Grade
  • URLs de clickthrough desativam uma lightbox
  • Desativado para Página Índice
  • Exibição de legendas de imagem ao passar o mouse
Supply
  • Sem Lightbox

Tremont

  • Sem Lightbox
Wells
  • Sem Lightbox
Wexley
  • Clique em uma imagem para abrir o slideshow em lightbox
  • O Lightbox está desativado nos dispositivos móveis
  • As legendas não são exibidas

York

  • Página de Galeria definida como Grade
  • URLs de clickthrough desativam uma lightbox
  • Exibição de legendas de imagem ao passar o mouse
Footer Image
  • Peça ajuda à nossa comunidade

  • Peça ajuda à nossa comunidade sobre personalizações avançadas.

  • Contrate um Squarespace Expert

  • Ganhe destaque on-line com a ajuda de um designer ou desenvolvedor experiente.