Inclua imagens no site; e adicione animações, legendas e links.
Use um bloco de imagem para adicionar imagens a uma página ou publicação do blog. Cada bloco de imagem mostra uma imagem.
Assistir a um vídeo
Adicionar uma imagem
Para adicionar um Bloco de Imagem:
- Edite uma página ou publicação, clique em Adicionar bloco ou num ponto de inserção e, em seguida, clique em Imagem. Para ajuda, confira "Adição de conteúdo com blocos".
- Clique no ícone + no bloco de imagem.
- Faça upload de um arquivo do seu computador ou aparelho móvel; reutilize uma imagem da sua biblioteca; ou use uma imagem de acervo. Para um melhor resultado, use uma imagem com menos de 500 KB.
- Use o editor do bloco de imagem para trocar, apagar ou editar a imagem.
- No Editor Intuitivo, não se esqueça de também ajustar o layout para versão móvel.
Dica: o bloco de imagem só aparece no seu site ativo se houver uma imagem carregada.
Carregue imagens de um aparelho móvel
Você pode usar o app do Squarespace para adicionar imagens do seu telefone ou outro aparelho móvel. Para carregar uma imagem:
- No editor do bloco de imagens, clique em + e escolha Carregar do celular. Uma notificação por push será enviada para o seu aparelho.
- Se for a primeira vez que você carrega nesse site, aparecerá um código QR no seu computador. Se você ainda não tem o app do Squarespace, escaneie o código para baixá-lo; depois, clique em Continuar e Enviar push.
- Toque na notificação no seu aparelho para abrir a ferramenta de importação do app do Squarespace. O app extrai automaticamente as imagens da biblioteca de fotos do aparelho.
- Se a notificação não aparecer, confira as configurações do seu aparelho e veja se as notificações por push do app do Squarespace estão ativadas.
- Toque na imagem desejada e depois toque em Carregar.
- A imagem aparecerá no bloco de imagens no seu computador. No app do Squarespace, toque em Trocar para escolher outra imagem; ou toque em Concluído para fechar o carregador.
Dica: ao carregar imagens do celular, clique em Solução de problemas na janela pop-up que aparece no seu computador para reescanear o código QR que baixa o app do Squarespace; ou encontre a opção de reenviar a notificação por push.
Abra o editor do bloco de imagem
O editor do bloco de imagem:
- Troca, apaga ou edita a imagem
- Defina o ponto focal
- Define as opções de design
- Adiciona um texto alternativo
- Edita o nome do arquivo
- Ativa ou desativa um lightbox
- Adiciona efeitos de imagem
Para abrir o editor do bloco de imagem:
- Edite a página ou a publicação.
- Clique no bloco de imagem.
- Clique no ícone de lápis na barra de ferramentas do bloco.
Adicione um link à imagem
No layout inline, para transformar a imagem em link, adicione o URL ao campo Link ou clique em 
para mais opções.
Lembre-se:
- A ativação do lightbox desativa os URLs de clickthrough
- A maioria dos layouts do editor clássico inclui uma opção de botão.
Layouts do editor clássico
No Editor Intuitivo, os blocos de imagem adicionados às seções não vêm com opções de layout. Para criar um layout semelhante, sobreponha os blocos de imagem a outros blocos, como bloco de texto e bloco de botão.
No editor clássico, ao se adicionar um bloco de imagem, ele usa o layout inline como padrão. Para alterar, clique na aba Design e escolha o layout desejado do seguinte:
- Inline - O Bloco de Imagem básico, com legendas opcionais abaixo ou sobrepondo a imagem. Define como a legenda é exibida na guia Conteúdo.
- Pôster - mostra um texto sobre imagens, criando um visual de banner ou de pôster.
- Cartão - mostra as imagens com texto à esquerda ou à direita. O texto geralmente se move por baixo das imagens nos browsers e aparelhos móveis menores; ou quando os blocos de imagem são usados em colunas.
- Sobreposição - mostra a imagem de um lado e o texto do outro, sobreposto parcialmente à imagem. Adicione uma cor de fundo ao título para destacar. O texto geralmente se move em direção à parte inferior das imagens em browsers menores e na versão móvel; ou quando os blocos de imagem são usados em colunas.
- Colagem - mostra as imagens de um lado e o texto sobre os "cartões" de fundo do outro, compensando e sobrepondo a imagem. O texto geralmente se move em direção ao canto inferior das imagens nos browsers e aparelhos móveis menores; ou quando os blocos de imagem são usados em colunas.
- Stack - Exibe imagens com texto abaixo.
Ao selecionar um layout, aparecerá uma prévia dele na página. Para ver como o bloco de imagem aparece nos aparelhos móveis, use prévia por aparelho.
Altere rapidamente o layout e o alinhamento do texto
O editor clássico tem botões de ação rápida para você alterar o layout e o alinhamento do texto do bloco de imagem sem abrir o editor. Clique no bloco de imagem ao editar a página e, em seguida, clique no botão de layout ou de alinhamento que aparece entre os ícones de lápis e lixeira.
Defina a forma da imagem
Além de cortar e ajustar o tamanho, você pode moldar o bloco de imagem para variar e dar um efeito visual exclusivo às imagens. Defina a forma da imagem na aba Design do editor do bloco de imagem:
- Raio do canto - para um efeito sutil, arredonde os cantos da imagem.
- Forma - para uma mudança mais radical, defina uma forma, como círculo ou triângulo. A forma aparece sobre a sua imagem, como uma máscara.
Dica: se o seu site aceita o Editor Intuitivo, você pode usar um bloco de forma para adicionar formas com cores sólidas às páginas sem imagens.
Raio do canto
Na aba Design, use as opções Raio do canto para deixar o raio na imagem inteira ou num canto específico.
Lembre-se:
- Para remover o raio do canto, desfaça as alterações fazendo edições ou insira 0 nos campos de raio de canto.
- Se as opções de raio de canto não aparecerem na aba Design, veja se a opção Forma não foi selecionada.
Forma
Na aba Design, clique em Forma, escolha a proporção da imagem (1:1, 2:3 ou 3:2) e escolha a forma. Para excluir a forma, selecione outra opção na aba Design (Ajustar/preencher ou Original).
Lembre-se:
- Use o ponto focal para personalizar sua imagem na forma
- Se você criar imagens que se abrem em lightbox, a forma original da imagem aparecerá após os visitantes clicarem nela
- Se você escolher o círculo, mas a imagem aparecer oval, use nosso editor de imagem integrado para cortar a imagem na proporção de 1:1
Redimensionar a imagem
É possível ajustar o tamanho ou cortar o blocos de imagem de várias formas. A principal forma de ajustar o tamanho da imagem é:
- Editor Intuitivo - clique e arraste a partir dos cantos ou laterais e use a opção Preencher na aba "Design" para cortar e modelar
- Editor clássico - ajuste o tamanho com blocos
Em todos os blocos de imagem, você também pode usar o editor de imagem para cortar a imagem original. Lembre-se de que essa mudança é permanente.
Ajuste o tamanho no editor clássico
No editor clássico, para diminuir o tamanho do bloco de imagem, adicione blocos a ambos os lados. A forma mais comum de fazer isso é com um bloco de espaçamento, que cria espaços em branco.
Para redimensionar com blocos:
- Clique em um ponto de inserção para adicionar um Bloco de Espaço.
- Arraste o bloco espaçador para a esquerda ou a direita do bloco de imagem.
- Clique e arraste o cursor de ajuste de tamanho.
Lembre-se:
- Para centralizar a imagem, adicione blocos de espaçamento de tamanho igual em ambos os lados.
- Nos layouts Inline e Pôster do editor clássico, clique e arraste a alça de corte para cortar a imagem na vertical. Isso deixa a imagem com a mesma largura, mas altera a altura.
- Nas configurações de estilo do editor clássico, os layouts Cartão, Sobreposição e Colagem têm a opção de ajustar o tamanho:
- Ao editar uma página, abra Estilos do Site e clique em Blocos de Imagem.
- Acesse a seção desse layout (por exemplo: role até a seção Bloco de Imagem: cartão).
- Use o ajuste de Largura de imagem para alterar o tamanho. O texto da imagem será ajustado automaticamente de acordo com o espaço.
- Clique em Salvar.
- Abra o painel Design e clique em Estilos do site.
- Acesse a seção desse layout (por exemplo: role até a seção Bloco de Imagem: cartão).
- Use o ajuste Largura de imagem para alterar o tamanho. O texto da imagem ficará automaticamente maior ou menor para caber no espaço.
- Clique em Salvar.
Lembre-se de que a aplicação dessas alterações afeta todos os blocos de imagem que tiverem esse layout.
Dica: para excluir o espaçamento aplicado automaticamente aos blocos de imagem, adicione um código personalizado. Saiba mais informações nesta publicação do Squarespace Forum. Nosso suporte não cobre modificações no código personalizado. Por isso, não ajudamos na configuração ou na resolução de problemas de soluções baseadas em código.
Preencha o bloco
No Editor Intuitivo, você pode colocar as imagens para preencher toda a área do bloco; editor clássico, isso é possível no layout Inline. Os outros layouts clássicos preenchem automaticamente a área do bloco.
- Editor Intuitivo - use a opção Preencher na aba Design para que a imagem preencha o contêiner. Se você escolher Ajustar, a imagem terá um espaçamento ao redor dela.
- Editor clássico - ative o botão Esticar na aba Design.
- Se a imagem for mais larga do que a área do Bloco de Imagem, ela será encolhida para caber (sem corte).
Lembre-se:
- Esticar uma imagem pode afetar a qualidade dela.
- Para reduzir a necessidade de alongamento, recomendamos fazer o upload da imagem com largura entre 1.500 e 2.500 pixels.
Adicione animações e efeitos de imagem
Para o site com um visual mais interessante, você pode adicionar uma animação sutil às imagens:
- Editor Intuitivo - ative as animações em todo o site nos estilos do site; ou adicione efeitos de imagem
- Editor clássico - ative as animações de bloco na aba Design em cada bloco de imagem que você deseja animar.
Adicionar texto
No editor clássico, o bloco de imagem já vem com opções de legenda; o Editor Intuitivo oferece mais versatilidade.
Dica: também recomendamos adicionar um texto alternativo a todas as imagens para melhorar a acessibilidade e a SEO. Saiba como deixar suas imagens mais acessíveis em "Deixando áudio, imagens e vídeos mais acessíveis".
Editor Intuitivo
Nas seções do Editor Intuitivo, use um bloco de texto para adicionar um texto ao lado ou em sobreposição ao bloco de imagem.
Editor clássico
Nas seções do editor clássico, clique nos campos de texto para adicionar texto à imagem. Pode aparecer um texto de marcador, como Adicione uma descrição da imagem ou Destaque-se.
Lembre-se:
- Limite os títulos a algumas palavras. Nas legendas, use uma ou duas frases. Isso equilibra a quantidade de palavras e a imagem, além de deixar o texto visível nos aparelhos móveis.
- Para adicionar quebras de linha ao texto do título, pressione Shift + Enter.
- Realce o texto e use a barra de ferramentas para fazer alterações na formatação, como negrito ou itálico; ou para adicionar um link.
- Com exceção dos layouts inline e empilhado, o texto mantém a largura relativa definida com a imagem nos aparelhos móveis e browsers estreitos.
- Ao trocar o layout inline por qualquer outro layout pela primeira vez, você precisa reinserir o texto de imagem.
O layout inline aceita uma legenda básica, enquanto os outros layouts aceitam os campos título e subtítulo.
O layout inline aceita uma legenda:
- Um campo de texto básico
- Estilizar texto no painel Estilos do Site (versão 7.1) ou Estilos do Site para o seu template (versão 7.0)
Na guia Conteúdo , selecione uma opção de exibição no menu suspenso legenda:
- Desativado - Nenhuma legenda é exibida a menos que a imagem seja visualizada no lightbox.
- Legenda abaixo - A legenda é exibida abaixo da imagem.
- Sobreposição da Legenda - A legenda aparece sobre a imagem em uma barra cinza escuro.
- Sobreposição das Legendas ao Passar o Mouse - A legenda é exibida sobre a imagem em uma barra cinza escuro quando o cursor passa sobre a imagem.
Dica: se você não vir Adicionar uma descrição de imagem, alterne temporariamente o estilo da legenda para Legenda abaixo na guia Conteúdo.
As legendas sempre aparecem em lightbox. Elas não são exibidas em Blocos de Imagem vazios. Para adicionar texto sem imagem, use um Bloco de Texto.
Outros layouts aceitam título e subtítulo:
- Dois campos de texto, um acima do outro
- Estilizar texto no painel Estilos do Site (versão 7.1) ou Estilos do Site para o seu template (versão 7.0)
- Na versão 7.1, para alterar o alinhamento ou o espaçamento de texto, estilize o Bloco de Imagem.
- Adicione texto alternativo manualmente no campo texto alternativo Imagem na guia Conteúdo.
Fontes e cores
Editor Intuitivo
Nas seções do Editor Intuitivo, para adicionar uma cor de sobreposição a um bloco de imagem, ative a opção Sobreposição na aba Design. A sobreposição aplica um filtro colorido sobre as imagens, dando uma leve tonalidade a elas.
Use o seletor para selecionar a cor e a transparência da sobreposição. Clique no modo Combinar para adicionar um efeito visual à sobreposição. Dependendo do browser, esses efeitos serão renderizados com pequenas diferenças visuais.
Editor clássico
No editor clássico, o modo de ajustar o estilo das fontes e cores do bloco de imagem depende da versão do site.
Para estilizar blocos de imagem globalmente:
- Altere as fontes do bloco no painel Fontes.
- Altere as cores da seção desse bloco no painel Cores.
- Personalize as cores do tema para elementos como o título, a sobreposição de imagem ou o segundo plano do botão com os ajustes de cor do Bloco de Imagem.
- Ajuste o estilo do botão do bloco no painel Botões. Os botões do bloco de imagem seguem as configurações do estilo Principal
- Defina o tamanho da fonte e outras formatações na barra de ferramentas de texto. O tamanho da fonte do botão segue o Parágrafo 2.
Para estilizar elementos específicos do layout no bloco de imagem, como alinhamento de texto ou largura do conteúdo:
- Ao editar uma página, abra Estilos do Site e clique em Blocos de Imagem.
- Role até a seção de cada layout para alterar os respectivos ajustes.
Na versão 7.0, todos os layouts de blocos de imagem, exceto inline, têm suas próprias configurações de estilo nos estilos do site. Para encontrar essas opções:
- Abra o painel Design e clique em Estilos do site.
- Role até a seção de cada layout para alterar os respectivos ajustes.
O bloco de imagem inline não tem ajustes de design nos estilos do site. Saiba mais sobre estilos, cores e tamanhos de fontes de legenda em Edição do estilo das legendas da imagem.
Próximos passos
Após configurar o bloco de imagem, você pode:
- Arraste e solte o bloco para movê-lo ou para criar colunas e linhas.
- Use o Editor de imagens para cortar, girar ou adicionar filtros a uma imagem.
- Apague o bloco.
Para solucionar problemas com a imagem, confira Formatação de imagens para exibição na web