Obs.: embora os nossos guias mais acessados tenham sido traduzidos para o português, outros guias estão disponíveis apenas em inglês.

Definir imagens para abrir em um lightbox

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: Faixas ou Grade: tijolos. O layout de slideshow não aceita o recurso de lightbox.
  3. Ligue a opção Lightbox.
  4. Passe o cursor sobre Concluído e clique em Salvar.

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 uma cor de lightbox.
  4. Para alterar a cor dos controles de navegação do lightbox, use o ajuste Ícone Lightbox.
  5. Clique em Salvar.

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

Os Blocos de Imagem usando o layout Inline oferecem suporte a uma lightbox. Para habilitá-lo:

  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. Verifique se o layout está definido como Inline. Outros layouts não são compatíveis com um 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 ao se passar o cursor sobre a imagem lightbox, independentemente da opção da legenda. Na versão móvel, elas aparecem quando você toca no ícone de ponto.
  • Se você adicionar URLs de clickthrough e ativar o lightbox, clicar na imagem abrirá o lightbox em vez do URL.
  • 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 Miniatura de vídeo 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
Este artigo foi útil?
Utilizadores que acharam útil: 52 de 179
Definir imagens para abrir em um lightbox