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. Verifique se o Tipo de Galeria está definido como Grade: Simples, Grade: Faixas ou Grade: Alvenaria. Os layouts de apresentação de slides não são compatíveis com recursos 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 do ícone do 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, em seguida, ativar a lightbox, clique na imagem vai para o URL. A lightbox não 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 são exibidas quando você passa o cursor do mouse sobre imagens de lightbox, independentemente da opção de exibição de legenda escolhida. No dispositivo móvel, eles são exibidos quando você toca no ícone de ponto.
  • Se você adicionar URLs de clickthrough e ativar o lightbox, clicar na imagem abrirá a lightbox em vez do URL.
  • Para manter as lightboxes ativadas e vincular imagens, adicione um link de texto à descrição da imagem. Para Blocos de Imagem, determinados layouts também aceitam botões.

Blocos de Galeria de Grade

Após adicionar suas imagens a um Bloco de Galeria de Grade, clique na guia Design e marque Lightbox. Defina o estilo da apresentação de slides de lightbox escolhendo Sobreposição escura ou Sobreposição escura no menu suspenso.

As legendas sempre são exibidas quando você passa o cursor do mouse sobre imagens de lightbox. No dispositivo móvel, eles são exibidos quando você toca no ícone de ponto. Apresentação em slides, Carrossel e Blocos de Galeria de Pilha não aceitam um lightbox.

Se você adicionar URLs de clickthrough e ativar o lightbox, clicar na imagem abrirá a lightbox em vez do URL.

Blocos de Sumário

Quando um Bloco de Sumário de Grade ou de Mural está 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: se você estiver na versão 7.0 e vinculando um Bloco de Sumário a uma Página de Galeria, marque Usar Miniatura nos vídeos da Página de Galeria. Caso contrário, eles serão reproduzidos no Bloco de Sumário sem abrir em um 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
  • Os URLs de clickthrough desativam lightbox
  • Exibição de legendas de imagem ao passar o mouse

Bedford

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

Brine

  • Página de Galeria definida como Grade
  • Os URLs de clickthrough desativam 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
  • Os URLs de clickthrough desativam lightbox
  • Exibição de legendas de imagem ao passar o mouse
Five
  • Página de Galeria definida como Grade
  • Os URLs de clickthrough desativam 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 o lightbox
  • Desativado para Página Índice
  • As legendas não são exibidas
Galapagos
  • Página de Galeria definida como Grade
  • Os URLs de clickthrough desativam 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
  • Os URLs de clickthrough desativam lightbox
  • Exibição de legendas de imagem ao passar o mouse

Pacific

  • Página de Galeria definida como Grade
  • Os URLs de clickthrough desativam 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
  • Os URLs de clickthrough desativam 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
  • Os URLs de clickthrough desativam lightbox
  • Exibição de legendas de imagem ao passar o mouse
Este artigo foi útil?
Utilizadores que acharam útil: 49 de 170
Definir imagens para abrir em um lightbox