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

Edição de estilo da Página de Galeria

É possível ajustar o tamanho da imagem, alterar o design e personalizar sua Página de Galeria no painel Estilos do Site.

Este guia é sobre a versão 7.0. A versão 7.1 usa seções de galeria.

Exibição da Página de Galeria por template

Cada Página de Galeria tem, como padrão, um dos seguintes estilos de exibição:

  • Slideshow - mostra uma imagem ou vídeo por vez. O visitante clica para ir para o slide seguinte, ou a galeria pode ser configurada para reprodução automática. A reprodução automática é pausada ao passar o mouse sobre o slideshow.
  • Grade - mostra o conteúdo em grade. Ajuste a proporção da imagem, margens e quantidade de imagens em miniatura por linha no painel Estilos do Site.
  • Stack (Pilha) - Exibe o conteúdo em uma única coluna com um pixel de margem entre cada imagem ou vídeo.
  • Carrossel - mostra o conteúdo em uma linha horizontal. O visitante clica para ir para o slide seguinte, ou a galeria pode ser configurada para reprodução automática.

O estilo da Página de Galeria depende do template. A maioria deles usa a Página de Galeria padrão, que aparece em grade ou em slideshow. Outros templates possuem Páginas de Galeria específicas com recursos, ajustes de estilo e layouts específicos.

  • Adirondack
  • Aviator
  • Bedford
  • Brine
  • Farro
  • Five
  • Galapagos
  • Native
  • Pacific
  • Skye
  • York – Também é compatível com uma Página de Projeto exclusiva, que é semelhante a uma Página de Galeria.
  • Avenue - slideshow
  • Flatiron - empilhada
  • Forte - carrossel, com slideshow em lightbox.
  • Ishimoto - carrossel
  • Momentum - slideshow, com opção de exibição em grade
  • Montauk - empilhada
  • Supply - empilhada
  • Tremont - empilhada, em blocos ou com layout em grade na horizontal
  • Wells - slideshow ou em grade
  • Wexley - em grade, com slideshow em lightbox

Páginas de Galeria dentro do Índice

É possível adicionar Páginas de Galeria ao Índice nas seguintes famílias de template. Algumas galerias têm formatação especial quando abertas pelo Índice. Leia os guias dos templates para mais ajuda.

  • Avenue - empilhada quando aberta pelo Índice
  • Brine - Seções de índice de galeria são exibidas como uma grade ou apresentação de slides
  • Flatiron - mostra elementos de navegação quando aberta pelo Índice
  • Forte
  • Momentum
  • Montauk - quando aberto no Índice, mostra elementos de navegação, e o banner não aparece
  • Pacific - Seções de índice de galeria são exibidas como uma grade ou apresentação de slides
  • Supply
  • Tremont - o slideshow da página de landing do Índice aparece no fim da página
  • York

Estilize a Página de Galeria padrão

Para templates que usam a Página de Galeria padrão, siga as etapas nesta seção. Para templates com Páginas de Galeria exclusivas, consulte seus guias de template.

Escolha o layout

A Página de Galeria padrão aceita dois layouts. Para definir o estilo de layout:

  1. Abra a Página de Galeria.
  2. No Menu Inicial, clique em Design e depois em Estilos do Site.
  3. Desça até Gallery Styles (Estilos de Galeria).
  4. Use o ajuste Gallery Design (Design da Galeria) para escolher Slideshow ou Grid (Grade).
Dica: isso define o layout de todas as Páginas de Galeria no seu site. Para criar galerias com layouts diferentes, use um Bloco de Galeria.

Estilize o layout do slideshow

O layout do slideshow exibe uma imagem ou vídeo de cada vez. Ele pode incluir elementos de navegação como a seta e miniaturas no exemplo abaixo e você pode configurá-lo para reprodução automática.

Os ajustes a seguir aparecem na seção Estilos de Galeria quando o Design da Galeria estiver definido como Slideshow.

Estilize ou oculte a navegação:

  • Navegação na Galeria – Escolha o tipo de navegação (miniaturas, marcadores, números, círculos, simples). Escolha Nenhum para ocultar a navegação.
  • Estilo de Seta da Galeria – Estilize as setas usadas para percorrer os slides (cantos redondos, retangulares, circulares, sem fundo).
  • Setas de exibição da galeria - desmarque para ocultar as setas na exibição da galeria.
  • Tamanho da Miniatura da Galeria – Defina a altura da navegação da imagem em miniatura.
  • Plano de fundo da seta da galeria
  • Cor da seta da galeria
  • Cor do círculo da galeria

Escolha a forma das imagens:

  • Proporção da imagem da galeria – Defina a proporção da imagem (largura:altura). Use com o ajuste de Corte Automático da Galeria .
  • Corte Automático de Galeria – Corta as imagens automaticamente para a proporção da imagem definida com o ajuste de Proporção da imagem da Galeria.

Defina como as legendas são exibidas:

  • Gallery Info Overlay (Sobreposição de Informações da Galeria): Always Show (Sempre Mostrar), Show on Hover (Mostrar ao passar sobre), Hide (Ocultar) - Tipo de exibição usada para títulos e legendas de imagens.
  • Gallery Info Background (Plano de Fundo das Informações da Galeria) - Cor usada de plano de fundo dos títulos e legendas da imagem.

Escolha como as imagens transitam dentro do slideshow:

  • Gallery Transitions (Transições da Galeria): Fade (Desaparecer), Scroll (Rolar)
  • Gallery Autoplay (Reprodução Automática da Galeria) - Alterne automaticamente as imagens da galeria sem interação do usuário. Passar o mouse sobre os slideshows pausa a reprodução automática. 
  • Gallery Loop (Ciclo da Galeria) - Habilite a galeria para alternar para o primeiro slide após o último slide.
  • Velocidade de reprodução automática da galeria (s)

Estilize o layout da grade

Os ajustes a seguir aparecem na seção Estilos de Galeria quando o Design da Galeria está definido como Grade.

Escolha a forma e o tamanho das imagens:

  • Proporção da imagem – Define a proporção da imagem (largura:altura). Se você definir a proporção da imagem como Automático, as imagens serão reorganizadas para criar o melhor ajuste na página. Elas podem ser exibidas em uma ordem diferente de como foram carregadas.
  • Grid Spacing (Espaçamento da Grade) - Aumenta a margem entre as imagens individuais na grade.
  • Min Column Width (Largura Mínima da Coluna) - Configura a largura das colunas na grade.

Estilo da lightbox:

  • Estilo da lightbox: escuro, claro 

Legendas de estilo

Para editar as fontes do título e da descrição das imagens, leia Edição de estilo de legenda da imagem.

Cada template mostra as legendas de uma forma. Nos templates com a Página de Galeria padrão:

  • Slideshow – O texto pode ocultar, ser exibido ao passar o cursor sobre uma imagem ou sempre exibir, dependendo de como você define o ajuste Sobreposição de Informações da Galeria
  • Grade - o texto aparece ao passar o cursor sobre uma imagem em lightbox
  • Texto nunca é exibido para vídeos

Veja como o título e a descrição das imagens aparecem nas Páginas de Galeria específicas das seguintes famílias de templates:

Família de template Notas

Avenue

O texto só aparece quando a Página de Galeria faz parte do Índice.

Flatiron

O texto nunca aparece.

Forte

O texto sempre aparece.

Ishimoto

O texto pode ser ocultado ou sempre ser exibido.

Momentum

O texto sempre aparece ao clicar no ícone "i".

Montauk

O texto sempre aparece.

Supply

O texto aparece sobreposto à imagem ao passar o cursor por cima e clicar no ícone +.

O texto nunca é exibido para vídeos.

Tremont

Escolha em Captions Display (Exibição de Legendas): On Hover (Ao passar sobre) ou Always (Sempre). Ao passar sobre, as legendas aparecem ao passar sobre o ícone de círculo no canto direito inferior.

No layout empilhado, é possível exibir as Captions Below Image (Legendas Embaixo da Imagem). Escolha Captions Display (Exibição das Legendas): Always (Sempre) para habilitar esse ajuste.

Wells

O texto sempre aparece.

Wexley

O título da imagem aparece ao passar o mouse por cima dela. Use o ajuste Ativar ao passar mouse sobre a miniatura para mostrar ou ocultar o título.

Os títulos de imagem nunca são exibidos no lightbox ou no celular. As descrições das imagens nunca são exibidas.

York

A família York oferece a Página de Galeria padrão.

Na Página de Projetos, o texto pode aparecer ao lado ou abaixo da imagem, dependendo da orientação dela.

Adicionar links especiais

Em algumas Páginas de Galeria, é possível criar links de e para as suas imagens.

  • URL de links diretos são URL personalizadas e atribuídas a cada imagem para que o visitante caia diretamente na imagem dentro da Página de Galeria.
  • As URLs de clickthrough transformam a imagem em um link para página externa, uma página interna ou arquivo.
Dica: URLs de clickthrough desativam lightboxes. O Adirondack aceita apenas URLs de deeplink e URLs de clickthrough na visualização de slideshow.

Navegação pelo teclado

Na maioria dos templates, usam-se as setas do teclado para navegar pelas imagens. Talvez seja necessário clicar na página para que a navegação pelo teclado funcione.

A Página de Galeria padrão aceita a navegação do teclado no layout de Slideshow, mas não quando uma imagem é aberta em uma lightbox a partir do layout de Grade.

Todas as Páginas de Galeria exclusivas aceitam navegação por teclado (visualizações de slideshow, carrossel e lightbox).

Reproduzir galerias automaticamente

Em alguns modelos, a transição das imagens é automática para que o visitante não precise clicar na imagem seguinte.

Caso seu template tenha a função de reprodução automática, ela estará no painel Estilos do Site. Por exemplo: nos templates que usam a Página de Galeria padrão, marque o ajuste Reprodução automática da galeria.

Atenção: se a galeria incluir um vídeo, a rolagem automática impede que ele seja reproduzido até o final. Para evitar que o vídeo seja cortado, adicione uma imagem em miniatura para permitir a sobreposição de imagens.

Exibição na versão móvel

Todos os templates do Squarespace têm design responsivo integrado para garantir que suas Páginas de Galeria sejam exibidas de forma adequada em qualquer dispositivo. Para visualizar a Página de Galeria em dispositivos móveis, use o Device View (Simulador de Dispositivos).

Para saber mais, acesse Como meu site será exibido em dispositivos móveis?

Mais opções de estilo

Para criar um visual diferente do disponível na Página de Galeria de seu template, existem algumas alternativas possíveis:

Também é possível criar várias galerias com diferentes estilos de exibição usando uma mistura de Páginas de Galeria e Páginas de Layout com Blocos de Galeria.

Este artigo foi útil?
Utilizadores que acharam útil: 40 de 162
Edição de estilo da Página de Galeria