Use layouts variados ao expor um conjunto de imagens ou vídeos.
Use Blocos de Galeria para adicionar galerias de imagens e vídeos a páginas e publicações do blog em uma variedade de layouts. Você pode carregar imagens, incorporar vídeos ou licenciar imagens de estoque.
Assistir a um vídeo
Onde adicionar Blocos de Galeria
Onde você pode adicionar Blocos de Galeria depende da versão do seu site.
Você pode adicionar Blocos de Galeria a áreas do seu site onde as seções da galeria não são aceitas, incluindo:
- Postagens de blog
- Eventos específicos
- Outras informações do produto
Não é possível adicionar Blocos de Galeria a nenhuma área com seções de página, incluindo:
- Páginas de Layout
- Páginas de destino da coleção (Páginas do Blog, Páginas de Eventos, Páginas do Portfólio, Páginas da loja)
- Subpáginas de Portfólio
- Rodapé
Os membros do Circle podem adicionar blocos de galeria a todas as áreas de conteúdo no 7.1. Depois de adicionar o bloco, qualquer pessoa com permissões para editar o conteúdo do site pode editar o bloco. Para saber como se tornar um membro do Circle, acesse Squarespace Circle.
Você pode adicionar Blocos de Galeria a qualquer área de conteúdo de bloco do seu site. Para saber mais, visite Adicionar conteúdo com blocos.
Adicionar um Bloco de Galeria
Para adicionar um Bloco de Galeria:
- Clique em um ponto de inserção em uma área que aceita Blocos de Galeria e depois em Galeria. Para obter ajuda, acesse Adicionar conteúdo com blocos.
- Use a aba Conteúdo para adicionar imagens e vídeos.
- Use a aba Design para alterar o layout e personalizar o design. Se o seu site for da versão 7.0, clique em Aplicar para publicar as alterações.
Adicione imagens e vídeos
Na aba Conteúdo do editor de Bloco de Galeria, você pode fazer upload de imagens, adicionar imagens de acervo ou incorporar vídeos. Você também pode reutilizar uma imagem de acervo ou carregada de outras áreas do seu site. Quando adiciona uma nova imagem a um bloco de galeria, as alterações são salvas automaticamente.
Para saber mais sobre nossas práticas recomendadas para carregar imagens, visite Formatar suas imagens para exibição na Web ou assista à nossa série de vídeos Tudo Sobre Imagens.
Limitações
- Você pode adicionar até 250 imagens e vídeos.
- Quanto mais conteúdo você adicionar, mais lenta a página será carregada. Isso é especialmente verdadeiro em dispositivos móveis com poder de processamento limitado. Para diminuir o tamanho da página, considere criar galerias menores em várias páginas.
A forma como você adiciona imagens e vídeos aos Blocos de Galeria depende da versão do seu site.
Atenção: não é possível usar a opção Usar galeria existente na versão 7.1. Essa opção é exclusiva para páginas de galeria, que só estão disponíveis na versão 7.0.
Adicione suas próprias imagens
No Editor de Bloco de Galeria, arraste várias imagens para o carregador de imagens ou clique no carregador de imagens para abrir um menu de seleção de arquivos.
Para reutilizar as imagens que você já carregou em seu site, clique no ícone + no canto inferior direito e clique em Pesquisar imagens. Isso abre a guia Minha biblioteca, que mostra as imagens e os vídeos que você carregou em seu site e todas as imagens de acervo gratuitas e licenciadas que você usou.
Adicione imagens de acervo
Clique no ícone + no canto inferior direito e depois em Buscar imagens. Dependendo do tamanho do navegador, pode ser necessário rolar para baixo até o ícone de + aparecer.
Para saber mais, acesse Pesquise e adicione cenas de bancos de imagem.
Adicione 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 e Vimeo. 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:
- Clique no ícone + no canto inferior direito e depois em Vídeo.
- 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.
- 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.
- Para usar a miniatura personalizada, marque Usar Miniatura.
- Ao terminar, clique em Salvar.
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.
Para reutilizar as imagens que você já carregou em seu site, clique no ícone + no canto inferior direito e clique em Pesquisar imagens. Isso abre a guia Minha biblioteca, que mostra as imagens e os vídeos que você carregou em seu site e todas as imagens de acervo gratuitas e licenciadas que você usou.
Adicione imagens de acervo
Clique no ícone + no canto inferior direito e depois em Buscar imagens. Dependendo do tamanho do navegador, pode ser necessário rolar para baixo até o ícone de + aparecer.
Para saber mais, acesse Pesquise e adicione cenas de bancos de imagem.
Adicione 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 e Vimeo. 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:
- Clique no ícone + no canto inferior direito e depois em Vídeo.
- 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.
- 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.
- Para usar a miniatura personalizada, marque Usar Miniatura.
- Ao terminar, clique em Salvar.
Importar de outras páginas
Há duas maneiras de adicionar imagens de outras páginas ao seu site:
- Adicionar imagens e vídeos de uma página de galeria - Clique em Usar galeria existente e selecione a página da galeria a ser usada.
- Adicionar imagens de outras páginas - Clique no + no canto inferior direito e, em seguida, clique em Pesquisar imagens para encontrar e reutilizar imagens.
Adicione suas próprias imagens
Para adicionar imagens ao Bloco de Galeria:
- Na guia Upload do editor de blocos, toque em Conteúdo.
- Toque no ícone +.
- 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....
- Toque na imagem para adicionar título, descrição e URL de clickthrough.
Atenção: no momento, não é possível procurar imagens de acervo no app do Squarespace nem adicionar conteúdo aos blocos de galeria nas publicações do blog. Para isso, use um computador.
Usar uma galeria existente (somente versão 7.0)
Nos sites da versão 7.0, você pode extrair imagens de uma Página de Galeria existente em seu site:
- Toque na aba Existente no editor do bloco.
- Toque em Minhas galerias.
- 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.
No bloco de galeria em carrossel, os itens rolam na horizontal. Os visitantes podem clicar nos itens, ou o carrossel pode avançar automaticamente. O número de itens que aparecem por vez depende da proporção da imagem e do tamanho do bloco.
Os Blocos de Galeria de Grade exibem itens em uma grade uniforme. Itens com comprimentos irregulares têm espaço entre eles, a menos que você os corte automaticamente.
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.
Se você quiser um conjunto empilhado de imagens com mais espaço entre elas, mude para o layout Grade. Em seguida, você pode definir Miniaturas por linha como 1 e alterar o espaçamento conforme necessário.
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 acessar 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:
|
| Mostrar imagens em miniatura |
Adiciona uma faixa com miniaturas de todas as imagens e vídeos à galeria abaixo da imagem 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 imagem 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:
A imagem com a maior proporção entre largura e altura define a altura do bloco:
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 definir 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 acessar 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. |
| Alinhamento ativo |
Escolha onde a imagem ativa deverá aparecer no controle deslizante à medida que as imagens se moverem. |
| 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 descrições aparecem apenas no bloco de galeria tipo Slideshow, Grade e Empilhado. O título de cada imagem atua como um texto alternativo, o que pode ajudar na SEO e na acessibilidade do site. Saiba mais sobre como melhorar a acessibilidade do seu site em Deixando áudio, imagens e vídeos mais acessíveis.
Para adicionar títulos e descrições a imagens e vídeos:
- Passe o cursor do mouse sobre uma imagem ou vídeo no Editor de Bloco de Galeria.
- Clique em
. - 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.
.- Toque na aba Conteúdo.
- Toque em uma imagem.
- 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.
Dica: se o seu site estiver na versão 7.0, as imagens de uma Página de Galeria existente exibirão automaticamente os títulos e as descrições das imagens da Página de Galeria.
O comportamento e a aparência do texto dependem do layout 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 da legenda depende do design do Bloco de Galeria e da versão do seu site. Para saber mais, visite Estilizar legendas de imagem.
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:
- Passe o cursor do mouse sobre uma imagem no Editor do Bloco de Galeria.
- Clique em .
- Defina o link no campo Clique para adicionar URL.... Veja o passo a passo no artigo URLs de clickthrough.
- Marque ou desmarque Abrir links em uma nova janela na aba Design para ver como os links aparecem.
- Toque na aba Conteúdo.
- Toque em uma imagem.
- Toque em Link de imagem.
- 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.
- Toque na seta no canto superior esquerdo e depois em Salvar.
Lembre-se de algumas limitações para 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.
- Os vídeos não oferecem suporte a URLs de clickthrough.
- Na versão 7.1, ao adicionar um URL de clickthrough, não é possível selecionar uma página de portfólio na aba Conteúdo. Em vez disso, selecione Externo e cole o URL na página do seu portfólio.
Reorganizar imagens e vídeos
Os Blocos de Galeria não incluem opções para classificar automaticamente imagens e vídeos, mas você pode reordenar itens manualmente seguindo as etapas abaixo. Quando você reordena uma imagem, a alteração é salva automaticamente.
- Para mover uma imagem de cada vez, abra o editor de blocos e clique e arraste a imagem para o lugar.
- Para mover várias imagens, mantenha pressionada a tecla Ctrl no Windows ou ⌘ no Mac e, em seguida, clique em cada imagem que você quer mover. Depois de selecionar as imagens, clique e arraste as imagens para o lugar.
Na versão 7.0, se o bloco de galeria mostrar o conteúdo de uma galeria existente, reorganize as imagens ou vídeos na página de galeria original.
Remover uma imagem ou vídeo
Para remover uma imagem ou vídeo de um bloco de galeria:
- No editor de blocos de galeria, passe o cursor do mouse sobre a imagem que você deseja excluir e clique no ícone da lixeira.
- Clique em Confirmar.
- Na guia Upload do editor de blocos, toque em Conteúdo.
- Toque em Editar.
- Toque no ícone vermelho em qualquer imagem ou vídeo que você deseja excluir e, em seguida, toque em Excluir.
Quando você remove uma imagem ou vídeo de um bloco de galeria, a alteração é salva automaticamente.
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 automaticamente na aba Design.
- Para cortar uma imagem específica, use o editor de imagem integrado.
- Para voltar a centralizar as imagens, altere os pontos focais dela.
- Para diminuir todo o Bloco de Galeria, adicione blocos em um dos lados.
- Para alterar o tamanho de uma imagem e o número de imagens que aparecem por vez, use a alça de recorte.
- Para cortar uma imagem específica, use o editor de imagem integrado.
- Para diminuir todo o Bloco de Galeria, adicione blocos em um dos lados.
- Para recortar automaticamente as imagens com a mesma proporção, marque Recortar imagens na aba Design.
- Para alterar o tamanho de todas as imagens, altere o número de miniaturas por linha na aba Design.
- Para cortar uma imagem específica, use o editor de imagem integrado.
- Para voltar a centralizar as imagens, altere os pontos focais dela.
- Para diminuir todo o Bloco de Galeria, adicione blocos em um dos lados.
- Para cortar uma imagem específica, use o editor de imagem integrado.
- 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 guia Design ainda se aplica.
- 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.
Os Blocos de Galeria em Pilha mantêm a mesma exibição e o mesmo comportamento em dispositivos móveis.