Para personalizar seu site na versão 7.0, ajuste os elementos de design nas páginas da galeria.

É possível ajustar o tamanho da imagem, alterar o design e personalizar a página de galeria no painel "Estilos do site".

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

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

Toda página de galeria cai em 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 ter reprodução automática, que é pausada ao se passar o cursor sobre o slideshow.
• Grade - mostra o conteúdo em grade. Para ajustar a proporção da imagem, margens e quantidade de imagens em miniatura por linha, use o painel "Estilos do site".
• Pilha - mostra o conteúdo em uma coluna simples 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 ter 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.

Essas famílias de templates usam a Página de Galeria padrão:

• Adirondack
• Aviator
• Bedford
• Brine
• Farro
• Five
• Galapagos
• Native
• Pacific
• Skye
• York - Também oferece suporte a uma Página de Projeto exclusiva, semelhante a uma Página de Galeria.

Os templates das seguintes famílias oferecem páginas de galeria exclusivas. Os guias dos templates fornecem mais ajuda:

• 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

Nas seguintes famílias de template, é possível adicionar páginas de galeria ao índice. Algumas galerias têm formatação especial quando abertas pelo índice. Os guias dos templates fornecem 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 do layout:

1. Abra a Página de Galeria.
2. Retorne ao painel Site, clique em Design e depois em Estilos do site.
3. Role para baixo até os estilos da Galeria.
4. Use o ajuste Design da galeria para escolher Slideshow ou 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 em slideshow mostra uma imagem ou vídeo de cada vez. Ele pode incluir elementos de navegação (como a seta e as 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 está 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 - edite o estilo das 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:

• Sobreposição de informações da galeria: sempre mostrar, mostrar ao mover o cursor, ocultar - O tipo de exibição usado 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:

• Transições da galeria: gradual, rolagem
• Reprodução automática da galeria) - troque automaticamente as imagens da galeria, sem a interação do usuário. A reprodução automática é pausada ao se passar o cursor sobre o slideshow.
• 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á 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 do 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 ficar oculto; aparecer ao se passar o cursor sobre uma imagem; ou sempre aparecer, dependendo de como você deixa o ajuste Sobreposição das 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 Exibição de legendas: ao passar o cursor) ou Sempre. Na primeira opção, as legendas aparecem ao se passar o cursor sobre o ícone de círculo no canto direito inferior. No layout empilhado, você pode exibir Legendas abaixo da imagem. Escolha a exibição de legendas: sempre para ativar 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. O título das imagens nunca aparece no lightbox ou no celular. A descrição das imagens nunca aparece.
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.
• O URL de clickthrough transforma a imagem num link para uma página externa, uma página interna ou um arquivo.

Dica: o URL de clickthrough desativa os lightboxes. Na exibição em slideshow, o Adirondack aceita apenas URLs de deeplink e URLs de clickthrough.

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 em Slideshow, mas não quando uma imagem é aberta em uma lightbox no layout de em 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á nos 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: na galeria com vídeo, a rolagem automática impede que ele seja reproduzido na íntegra. Para evitar isso, adicione uma imagem em destaque para permitir a sobreposição de imagens.

Exibição na versão móvel

Todos os templates do Squarespace têm um design responsivo integrado para garantir que as páginas da sua galeria tenham uma ótima aparência em qualquer dispositivo. Para visualizar a página da galeria em dispositivos móveis, use a prévia por aparelho.

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 do seu template, existem algumas alternativas:

• Use o bloco de galeria em uma página de layout para ter mais flexibilidade no design. Para isso, siga estes passos.
• Use um Bloco de Sumário em uma Página de Layout para filtrar conteúdo específico da galeria com mais flexibilidade de design.
• Mude para um template com design diferente da Página de Galeria.

Você também pode criar várias galerias com diferentes estilos de exibição usando uma combinação de páginas de galeria e páginas de layout com blocos de galeria.