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

Use os Blocos de Galeria para adicionar galerias de imagens e de vídeos a páginas e publicações do blog em diferentes layouts. É possível fazer upload de imagens, integrar vídeos, licenciar imagens de acervo ou exibir conteúdo de uma Página de Galeria existente.

Para saber como configurar Blocos de Galeria no seu site, siga os passos deste guia. Para conferir as dúvidas mais comuns, acesse Perguntas Frequentes sobre Blocos de Galeria.

Na versão 7.1, só é possível adicionar Blocos de Galeria a publicações do blog, itens de produto e eventos individuais. Para adicionar galerias a páginas, use seções de galeria.

Assistir a um vídeo

Adicionar um Bloco de Galeria

Para adicionar um Bloco de Galeria:

  1. Edite uma página ou publicação, clique em um ponto de inserção e selecione Texto no menu. Veja ajuda em Adição de blocos.
  2. Em Galeria, selecione SlideshowCarrosselGrade, ou Pilha.

Opções do Bloco de Galeria no Bloco de Menu.

  1. Use a aba Conteúdo para adicionar imagens e vídeos.
  2. Use a aba Design para alterar o layout e personalizar o design.
  3. Clique em Aplicar para salvar as alterações.
  1. Toque no ícone de Páginas.
  2. Toque no título da página que deseja editar.
  3. Toque em Editar ou no ícone de lápis, no canto superior direito.
  4. Toque no ícone + no canto superior direito para abrir o Bloco de Menu.
  5. Em Galeria, selecione SlideshowCarrosselGrade, ou Pilha.
  6. Use a aba Carregar ou Existentepara adicionar uma imagem ou vídeo.
  7. Use a aba Mostrar como para alterar o layout e personalizar o design.
  8. Toque em Concluído ou em para salvar as alterações.

Adicionar imagens e vídeos

Na aba Conteúdo do editor de Bloco de Galeria, você pode fazer upload de imagens, adicionar imagens de acervo, incorporar vídeos ou mostrar conteúdo de uma Página de Galeria existente. Você também pode reutilizar uma imagem carregada ou de acervo em outras áreas do site.

Para saber mais sobre nossas práticas recomendadas para carregamentos de imagem, acesse Formatar suas imagens para serem exibidas na internet ou confira nossa série Tudo sobre imagens.

Limitações

  • Você pode adicionar até 250 imagens e vídeos.
  • Quanto mais conteúdo você adiciona, mais a página demora para carregar, especialmente em dispositivos móveis com potência de processamento limitada. Para diminuir o tamanho da página, você sempre pode criar várias galerias nas páginas.

Opção 1 - Adicione suas próprias imagens

No editor do Bloco de Galeria, arraste várias imagens para o carregador de imagens. Você também pode clicar nele para abrir um menu de seleção de arquivos.

Opção 2 - adicione uma imagem de acervo

Clique no ícone + no canto inferior direito e depois em Buscar imagens. Dependendo do tamanho do browser, é necessário rolar a página para ver o ícone +.

Para saber mais, acesse Pesquise e adicione cenas de bancos de imagem.

Opção 3 - Adicionar vídeos

Você pode incorporar vídeos de um serviço de hospedagem. Não é possível fazer upload direto dos vídeos. No momento, aceitamos URLs diretas dos seguintes serviços: YouTube, Vimeo, Wistia e Animoto. No caso de outros serviços, use um código de incorporação. Saiba mais em Escolhendo a opção correta para incorporação de vídeo.

Para adicionar um vídeo:

  1. Clique no ícone + no canto inferior direito e depois em Vídeo.
  2. Na janela Editar Vídeo, cole a URL do vídeo na caixa Insira uma URL de incorporação aqui . Você também pode clicar no ícone </> e colar o código de incorporação do vídeo na janela Incorporar Dados que é exibida.
  3. Você pode adicionar uma miniatura personalizada para aparecer sobre o vídeo antes de o visitante reproduzi-lo. Alguns vídeos vêm com uma imagem carregada no Bloco de Galeria, mas você pode excluir essa imagem e carregar uma nova.
  4. Para usar a miniatura personalizada, marque Usar Miniatura.
  5. Quando tiver terminado, clique em Save (Salvar).

Opção 4 - Usar uma galeria existente

Os Blocos de Galeria podem exibir imagens e vídeos adicionados a uma Página de Galeria existente.

Para exibir conteúdo em uma Página de Galeria existente, clique em Usar Galeria Existente. Em seguida, selecione a Página de Galeria a ser usada.

Opção 1 - Adicione suas próprias imagens

Para adicionar imagens ao Bloco de Galeria:

  1. Na aba Carregar do editor do bloco, toque em Conteúdo.
  2. Toque no ícone +.
  3. Escolha uma imagem:
    • Tirar uma nova foto - toque em Tirar foto ou em Câmera.
    • Escolher uma imagem do seu aparelho - toque em Biblioteca de fotos ou em Arquivos.
    • Escolha uma imagem no iCloud - toque em Inserir de....
  4. Toque na imagem para adicionar título, descrição e URL de clickthrough.
Atenção: no momento, não é possível buscar imagens de acervo ou adicionar vídeos aos Blocos de Galeria no aplicativo. Para isso, use um computador.

Opção 2 - use uma galeria existente

Para usar uma Página de Galeria existente no site:

  1. Toque na aba Existente no editor do bloco.
  2. Toque em Minhas galerias.
  3. Toque na Página de Galeria que você deseja usar.

Para adicionar o título, a descrição e a URL de clickthrough da imagem, edite a imagem na Página de Galeria.

Layouts de Bloco de Galeria

Veja um exemplo de cada layout de Bloco de Galeria. No computador, você pode alterar o layout na aba Design do Bloco de Galeria. No aplicativo do Squarespace, toque em Mostrar como para alterar o layout.

Os Blocos de Galeria em Slideshow exibem os itens em slides. Os visitantes podem clicar nos itens, ou o slideshow pode ser apresentado automaticamente, exibindo um item de cada vez.

Exemplo de Bloco de Galeria em Slideshow.

Os Blocos de Galeria em Carrossel exibem os itens na horizontal. Os visitantes podem clicar nos itens, ou o carrossel pode avançar automaticamente. O número de itens exibidos de cada vez depende do tamanho do bloco.

Exemplo de Bloco de Galeria em Carrossel.

Os Blocos de Galeria em Grade exibem os itens em uma grade homogênea. Os itens com alturas diferentes aparecem com um espaço entre eles.

Exemplo de Bloco de Galeria em Grade.

Os Blocos de Galeria em Pilha exibem os itens em uma coluna, com um pixel de espaço entre eles. Os itens ocupam toda a largura do bloco. Este layout é menos personalizável e não tem opções de proporção da imagem nem controles de navegação.

Exemplo de Bloco de Galeria em Pilha.

Personalizar o design

Você pode personalizar o design e o comportamento do Bloco de Galeria. No computador, clique na aba Design no editor do bloco para fazer essas alterações. No aplicativo do Squarespace, toque em Mostrar como. As opções variam de acordo com o layout.

Estas são as opções de design para os Blocos de Galeria em Slideshow:

Opção de design Use para
Fazer a transição automática entre slides

Fazer o slideshow passar automaticamente para o próximo vídeo ou imagem depois de um período definido. Com esta opção marcada, um controle deslizante aparece para configurar o tempo de transição (entre um e dez segundos).

Quando um vídeo é reproduzido, essa configuração é ignorada. Se reproduzir um vídeo, o visitante precisará clicar na seta para avançar e ver o próximo item da galeria.

Mostrar controles Avançar e Anterior

Adicionar setas para navegação. Os controles aparecem em sobreposições à esquerda e à direita da imagem ou do vídeo principal. Quando desmarcada, o visitante pode clicar para avançar na apresentação de slides, a menos que a imagem use URLs de clickthrough.

Se a galeria contiver vídeos e a opção Fazer a Transição Automática Entre Slides estiver selecionada, recomendamos marcar esta configuração.

Recortar imagens automaticamente

Recortar ou redimensionar as imagens para melhorar o design.

Quando essa opção não está marcada:

  • A imagem ou o vídeo mais largo ocupa toda a largura do bloco. Sua altura é redimensionada para manter a proporção da imagem.
  • Todos os outros vídeos e imagens são redimensionados para ficar com a mesma altura que a imagem ou o vídeo mais largo.
  • As proporções da imagem são mantidas.
Quando essa opção está marcada:
  • A imagem ou o vídeo mais largo ocupa toda a largura do bloco. A proporção da imagem é mantida com a altura.
  • Todos os outros vídeos e imagens são redimensionados para ficar com a mesma largura e altura que a imagem ou o vídeo mais largo.
Mostrar imagens em miniatura

Adicionar uma faixa com miniaturas de todas as imagens e vídeos à galeria abaixo da publicação principal.

Com esta opção marcada, os controles deslizantes definem a altura da faixa de miniaturas e a distância entre essa faixa e a publicação principal.

Mostrar título e descrição

Exibir títulos e descrições conforme definido nas configurações de cada imagem.

Com esta opção selecionada, mais opções aparecem para definir a localização e para exibi-los somente ao pairar o cursor.

Fundo transparente Remover a cor cinza atrás de imagens não recortadas. Aparece apenas quando a opção Recortar imagens automaticamente não está marcada.
Abrir links em uma nova janela Abrir URLs de clickthrough em novas abas quando são clicadas.

Altura do slideshow

A altura dos Blocos de Galeria em Slideshow é definida pela altura da imagem mais larga. O bloco considera como imagem mais larga aquela que tem a  proporção de imagem mais larga.

Veja um exemplo de duas imagens que poderiam ser carregadas no Bloco de Galeria. Uma tem maior proporção entre largura e altura, e a outra tem maior largura em pixels:

Comparação de imagens com diferentes proporções entre largura e altura.

A imagem com a maior proporção entre largura e altura define a altura do bloco:

A imagem com a maior proporção entre largura e altura define a altura do Bloco de Galeria em Slideshow:

Para definir a altura da galeria, confira se a imagem com a proporção de imagem mais larga tem a altura desejada. Por exemplo, para reduzir a altura da galeria toda, recorte a imagem com a proporção de imagem mais ampla.

Confira mais algumas dicas para ajustar a altura:

  • Para ajudar a prever a altura da galeria e manter a consistência entre os tamanhos das imagens, você pode usar um editor de imagens de terceiros para recortar as imagens com a mesma proporção antes de fazer o upload.
  • No caso de imagens de acervo ou imagens já carregadas, use o Editor de Imagem integrado para recortar.
  • Para escolher se todas as imagens no slideshow serão exibidas com a mesma proporção, marque Recortar imagens automaticamente na aba Design. 
  • Para saber mais sobre a proporção da imagem, acesse Entenda a proporção da imagem.

Estas são as opções de design para os Blocos de Galeria em Carrossel:

Opção de design Use para
Fazer a transição automática entre slides

Fazer a galeria mudar para o próximo item automaticamente depois de um tempo especificado (entre um e 10 segundos).

Quando um vídeo é reproduzido, essa configuração é ignorada. Se reproduzir um vídeo, o visitante precisará clicar na seta para ver o próximo item da galeria.

Mostrar controles Avançar e Anterior

Adicionar setas para navegação. Os controles aparecem em sobreposições à esquerda e à direita do item principal.

Se a galeria tiver vídeos, e a opção Fazer a Transição Automática Entre Slides estiver selecionada, recomendamos marcar esta configuração.

Abrir links em uma nova janela Abrir as URLs de clickthrough em novas abas.

Estas são as opções de design para os Blocos de Galeria em Grade:

Opção de design Use para
Proporção da imagem Alterar o formato das imagens e vídeos. Por padrão, quadrado 1:1 é selecionado.
Recortar imagens

Remover as margens e exibir as imagens e os vídeos na proporção da imagem selecionada.

Quando esta opção está desmarcada, a altura de cada linha é padronizada com base na imagem ou no vídeo mais alto. Dependendo da proporção da imagem selecionada, o espaçamento pode ser inconsistente, especialmente se a grade estiver configurada com uma miniatura por linha.

Mostrar título

Exibir os títulos abaixo das imagens.

Quando as imagens são abertas em um lightbox, os títulos e descrições aparecem quando o usuário move o cursor.

Miniaturas por linha Definir o número de miniaturas em uma linha. Aumentar o número diminui o tamanho de cada miniatura.
Margem Alterar o espaçamento/margem entre cada imagem ou vídeo. Mover o controle deslizante para 0 remove a margem.
Lightbox

Quando esta opção está marcada, a imagem ou o vídeo clicado é exibido em um lightbox de slideshow com fundo preto ou branco. AS URLs de clickthrough são desativadas.

Use o menu suspenso Tema do lightbox para escolher se o fundo do lightbox deve ser preto ou branco.

Abrir links em uma nova janela Abrir URLs de clickthrough em novas abas quando são clicadas.

Estas são as opções de design para os Blocos de Galeria em Pilha:

Opção de design Use para
Mostrar título e descrição

Exibir os títulos e as descrições abaixo de cada imagem ou vídeo.

Abrir links em uma nova janela Abrir URLs de clickthrough em novas abas quando são clicadas.

Adicionar títulos e descrições de imagens

Os títulos e as descrições são exibidos apenas nos Blocos de Galeria em Slideshow, em Grade e em Pilha. Os títulos de imagens funcionam como textos alternativos, o que pode ajudar no SEO e na acessibilidade do site.

Para adicionar título e descrição a uma imagem ou vídeo:

  1. Passe o mouse sobre uma imagem ou vídeo no editor do Bloco de Galeria ou na Página de Galeria existente.
  2. Clique em o ícone de engrenagem.
  3. Insira um título e uma descrição. Recomendamos usar termos curtos que descrevem a imagem e se relacionam ao conteúdo geral do seu site.
  1. Toque na aba Conteúdo.
  2. Toque em uma imagem.
  3. Digite o título e descrição. Recomendamos usar termos curtos, que descrevam a imagem e tenham relação com o conteúdo geral do site. 
Dica: se as imagens no Bloco de Galeria forem de uma Página de Galeria existente, os títulos e as descrições das imagens da Página de Galeria aparecerão automaticamente no Bloco de Galeria.

O comportamento e a aparência do texto dependem do layout do Bloco de Galeria:

  • Slideshow - os títulos e descrições ficam à mostra ou aparecem ao passar o mouse. Defina a posição na aba Design do bloco. Em browsers menores e na versão móvel, talvez os títulos e descrições não apareçam.
  • Carrossel - os títulos e descrições não aparecem.
  • Grade - os títulos aparecem abaixo das imagens. Os títulos e descrições aparecem quando o usuário passa o mouse sobre a imagem aberta em lightbox, mas não aparecem em vídeos abertos em lightbox.
  • Empilhado - os títulos e descrições aparecem abaixo das imagens.
Dica: o estilo das legendas depende do design do Bloco de Galeria e do template. Para saber mais, acesse Estilizar legendas das imagens.

Adicionar URLs de clickthrough

Use URLs de clickthrough para vincular imagens a páginas externas, conteúdo interno ou arquivos. É uma ótima maneira de incentivar cliques em outros conteúdos, como projetos de clientes, produtos ou publicações do blog. As URLs de clickthrough funcionam com imagens, mas não com vídeos.

Para adicionar um link URL:

  1. Passe o mouse sobre uma imagem ou vídeo no editor do Bloco de Galeria ou na Página de Galeria existente.
  2. Clique em o ícone de engrenagem.
  3. Defina o link na caixa Clique para adicionar URL.... Para obter os passos detalhados, acesse Usar URLs de clickthrough.
  4. Marque ou desmarque Abrir links em uma nova janela na aba Design, para controlar como os links aparecem.
  1. Toque na aba Conteúdo.
  2. Toque em uma imagem.
  3. Toque em Link da imagem.
  4. Use as abas para criar um link para uma página do seu site, um site externo, um endereço de e-mail, um arquivo enviado ou um número de telefone.
  5. Toque na seta no canto superior esquerdo e depois em Salvar.

O Bloco de Galeria tem algumas restrições quanto às URLs de clickthrough:

  • Nos Blocos de Galeria em slides, a URL de clickthrough anula a navegação. Ao usar URLs de clickthrough e o design em slides, recomendamos marcar a opção Mostrar controles Próximo e Anterior na aba Design do editor do bloco.
  • Nos Blocos de Galeria em Grade, as URLs de clickthrough não são aceitas quando a opção Lightbox está marcada.

Recorte ou redimensione imagens (somente computador)

É possível redimensionar ou recortar Blocos de Galeria de várias maneiras. As opções variam de acordo com o layout.

  • Para recortar automaticamente as imagens com a mesma proporção, marque Recortar imagens na aba Design.
  • Para alterar o tamanho de todas as imagens, ajuste o número de miniaturas por linha na aba Design.
  • Para cortar imagens individuais, use o Editor de Imagem integrado.
  • Para voltar a centralizar as imagens, ajuste os pontos focais dela.
  • Para diminuir todo o Bloco de Galeria, adicione blocos em um dos lados.

Blocos de Galeria em dispositivos móveis

Em dispositivos móveis, o comportamento ou a exibição dos Blocos de Galeria pode ser diferente do computador, dependendo do layout.

Os Blocos de Galeria em Slideshow mantêm o layout de slideshow em dispositivos móveis:

  • As configurações de transição automática e navegação escolhidas na aba Design continuam valendo. As URLs de clickthrough funcionam quando o usuário toca nelas.
  • Os títulos e descrições não são exibidos em telas com menos de 480 pixels de largura. Isso inclui a maioria dos smartphones na vertical.
  • Os títulos e as descrições (incluindo legendas ao pairar o mouse) podem ser exibidos em modo paisagem e em dispositivos maiores, como tablets. Depende do dispositivo.

Os Blocos de Galeria em Carrossel mantêm o layout de carrossel em dispositivos móveis:

  • Dependendo das imagens, talvez seja exibida apenas uma imagem de cada vez.
  • As configurações de transição automática e navegação escolhidas na aba Design continuam valendo. As URLs de clickthrough funcionam quando o usuário toca nelas.

Os Blocos de Galeria em Grade são exibidos como grades de duas colunas em dispositivos móveis:

  • A proporção da imagem escolhida na aba Design continua valendo.
  • Quando ativados, os lightboxes são exibidos.
  • Quando os lightboxes estão desativados, as URLs de clickthrough funcionam quando são tocadas.
  • No lightbox, toque no círculo no canto inferior direito para exibir o título e a descrição de uma imagem.

Tocar no círculo para exibir o texto de uma imagem em um lightbox em dispositivo móvel.

Os Blocos de Galeria em Pilha mantêm a mesma exibição e o mesmo comportamento em dispositivos móveis.

Esse artigo foi útil?
Usuários que acharam isso útil: 126 de 329