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:

1. 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".
2. Clique no ícone + no bloco de imagem.
3. 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.
4. Use o editor do bloco de imagem para trocar, apagar ou editar a imagem.
5. 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:

1. 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.
2. 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.
3. Toque na imagem desejada e depois toque em Carregar.
4. 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:

1. Edite a página ou a publicação.
2. Clique no bloco de imagem.
3. Clique no ícone de lápis na barra de ferramentas do bloco.

Adicione um link à imagem

Para transformar a imagem em link, clique no bloco para realçá-lo. Depois, clique no ícone de link na barra de ferramentas do bloco ou clique em Anexar link no editor do bloco. Na maioria dos layouts no editor clássico, você precisa selecionar Na imagem ou No botão antes que Anexar link apareça. Ao terminar, clique fora do editor do bloco para salvar as alterações.

Lembrete: ativar uma lightbox desativa os URLs de clickthrough

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:

1. Clique em um ponto de inserção para adicionar um Bloco de Espaço.
2. Arraste o bloco espaçador para a esquerda ou a direita do bloco de imagem.
3. 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:

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.

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.

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