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 Imagem

Use os Blocos de Imagem para adicionar imagens a páginas ou publicações do blog em vários layouts. Cada Bloco de Imagem exibe uma imagem.

Dica: Para adicionar várias imagens a um bloco, use Blocos de Galeria. Para saber como adicionar imagens a outras áreas do site, acesse nossos guias sobre banners, planos de fundo, Páginas de Galeria e imagens de produto.

Assistir a um vídeo

Adicionar um Bloco de Imagem

Para adicionar um Bloco de Imagem:

  1. Edite uma página ou publicação, clique em um ponto de inserção e selecione Imagem em um Bloco de Imagem Inline; ou selecione Pôster, Cartão, Sobreposição, Colagem ou Pilha em outros layouts. Veja ajuda em Adição de blocos.

Menu Bloco com as opções de Bloco de Imagem destacadas.

  1. Use a aba Conteúdo para adicionar uma imagem.
  2. Use a aba Design para alterar o layout e adicionar um link de imagem.
  3. Use a aba Animações  para animar o bloco.
  4. Clique em Aplicar para salvar as alterações.

Siga as seções abaixo para ver etapas mais detalhadas.

  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. Toque em Imagem para adicionar um Bloco de Imagem.
  6. Toque em Adicionar imagem para adicionar uma imagem.
  7. Toque em Design para alterar o layout e adicionar um link de imagem.
  8. Toque em Concluído ou em para salvar as alterações.

Adicionar uma imagem

É possível adicionar imagens de várias fontes ao Bloco de Imagem. Algumas opções estão disponíveis apenas pelo computador, enquanto outras estão disponíveis apenas pelo aplicativo Squarespace.

Na aba Conteúdo do editor de Blocos de Imagem, faça upload de uma imagem ou adicione uma imagem usando nossas integrações com bancos de imagem. Você também pode reutilizar uma imagem de acervo ou já carregada a partir da janela Buscar Imagem.

Dica: Para melhorar os resultados, faça upload de imagens com até 500 KB. Para ver mais dicas de formatação de imagens, acesse Formatar imagens para exibição na web.

Opção 1 - Faça upload de uma imagem

Para fazer upload de uma imagem, clique em Fazer Upload de uma Imagem. Também é possível arrastar a imagem até o carregador de imagem para selecionar um arquivo do computador.

Para adicionar uma imagem própria, clique em Fazer Upload de uma Imagem, na aba Conteúdo do Bloco de Imagem.

Opção 2 - Adicione uma imagem de banco de imagem

Para usar uma imagem de banco de imagem, clique em Buscar imagem. Você pode escolher entre opções gratuitas ou premium. Para saber mais, acesse Pesquise e adicione cenas de bancos de imagem.

Para adicionar uma imagem de banco de imagem, clique em Buscar Imagem, na aba Conteúdo do Bloco de Imagem.

Toque em Adicionar imagem e 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.
  • Escolher uma imagem no iCloud - toque em Inserir de....

Layouts de Bloco de Imagem

Veja um exemplo de cada layout do Bloco de Imagem; você pode alterá-los na aba Design. Ao selecionar um layout, você verá uma prévia dele na página.

Dica: ao trocar o layout inline por outro tipo, você precisará digitar de novo o texto da imagem.

Os Blocos de Imagem Inline exibem imagens com legenda opcional abaixo sobreposta ou abaixo da imagem.

Exemplos de Blocos de Imagem Inline, um com a legenda embaixo e um com uma sobreposição de legenda.

Os Blocos de Imagem Pôster exibem texto sobre imagens, criando o visual de um banner ou pôster.

Exemplo de um Bloco de Imagem Pôster.

Os Blocos de Imagem Cartão exibem imagens com texto à esquerda ou à direita, com cores de fundo opcionais. O texto costuma ficar abaixo das imagens em navegadores menores e em dispositivos móveis ou quando os Blocos de Imagem são usados em colunas.

Exemplo de um Bloco de Imagem Cartão

Para selecionar de que lado a imagem é exibida, use o menu suspenso Posição da Imagem na aba Design do Bloco de Imagem.

Os Blocos de Imagem Sobreposição mostram imagens de um lado e texto do outro, sobrepondo-se parcialmente à imagem. Adicione uma cor de fundo ao título para destacar. O texto costuma fica abaixo das imagens em navegadores menores e em dispositivos móveis ou quando os Blocos de Imagem são usados em colunas.

Exemplo de um Bloco de Imagem Sobreposição.

Para selecionar de que lado a imagem é exibida, use o menu suspenso Posição da Imagem na aba Design do Bloco de Imagem.

Os Blocos de Imagem Colagem exibem as imagens de um lado e o texto sobre "cartões" de fundo do outro, cobrindo e se sobrepondo à imagem. O texto costuma fica abaixo das imagens em navegadores menores e em dispositivos móveis ou quando os Blocos de Imagem são usados em colunas.

Exemplo de um Bloco de Imagem Colagem.

Para selecionar de que lado a imagem é exibida, use o menu suspenso Posição da Imagem na aba Design do Bloco de Imagem.

Os Blocos de Imagem Empilhados exibem imagens com o texto embaixo, com cores de fundo opcionais.

Exemplo de um Bloco de Imagem Empilhado.

Adicione um link ou botão de imagem

Na aba Design você pode transformar a imagem em link ou adicionar um botão ao layout dela.

Para transformar a imagem em link no layout Inline, adicione a URL à caixa URL de clickthrough ou clique o ícone de engrenagem para mais opções.

Lembre-se:

  • Ativar o lightbox desabilita URLs de clickthrough.
  • O layout Alinhado não suporta botões.

No caso de todos os outros layouts de Bloco de Imagem, use o menu suspenso Link de imagem. Escolha entre:

  • Nenhum  - Sem link
  • Na imagem  - a imagem inteira vira um link. Adicione a URL ou clique em o ícone de engrenagem para mais opções na caixa de URL que aparece abaixo do menu suspenso.
  • Botão - aparece um botão alinhado com o texto, abaixo do título e subtítulo. Personalize o texto do botão e adicione a URL nas caixas que aparecem abaixo do menu suspenso; ou clique em o ícone de engrenagem para mais opções.
  • Você pode estilizar o botão no painel Estilos do Site.

Adicione uma animação (somente computador)

Na aba Animações do editor de Bloco de Imagem, é possível adicionar animações que os visitantes veem quando carregam ou atualizam a página. Recomendamos testar as diferentes opções até achar as animações de sua preferência.

Para adicionar animações:

  1. No editor de Bloco de Imagem, clique na aba Animações.
  2. Selecione um efeito no menu suspenso Animar Bloco de Imagem para aplicar à imagem e qualquer texto. Ao selecionar uma opção, você verá uma prévia dele na página.
  3. Para animar a imagem e o texto separadamente, selecione Personalizado e, em seguida, selecione as opções para Animar imagem e Animar texto da imagem.

Escolha entre estas opções de animação para a imagem, o texto ou ambos:

  • Fade In - o bloco, a imagem ou texto aparece gradualmente
  • Deslizar para cima - o bloco, a imagem ou texto desliza para cima
  • Deslizar para baixo - a imagem ou texto desliza para baixo
  • Clipe horizontal - o bloco ou a imagem carrega em camadas horizontais
  • Clipe vertical - o bloco ou a imagem carrega em camadas verticais
  • Inclinar para cima - o bloco ou a imagem aumenta com inclinação para cima
  • Inclinar para baixo - o bloco ou a imagem aumenta com inclinação para baixo
  • Foco - o bloco aparece borrado e depois entra em foco
  • Colidir - imagem e texto deslizam de fora para dentro pelos lados
  • Revelar - imagem e texto deslizam do centro para fora
  • Deslizar da esquerda - a imagem ou texto aparece deslizando pela esquerda
  • Deslizar da direita - a imagem ou texto aparece deslizando pela direita

Veja o exemplo de um Bloco de Imagem Colagem com estas configurações:

  • Animar Imagem de Bloco - personalizar
  • Animar imagem - deslizar da direita
  • Animar texto da imagem - deslizar da esquerda

Exemplo de um Bloco de Imagem com animações.

Adicionar texto

Depois de clicar em Aplicar para salvar o bloco, clique em Escreva uma legenda aquiEscreva um título aqui ou Escreva um subtítulo aqui para adicionar o texto correspondente à imagem.

Para ter os melhores resultados, o texto deve ser curto. Tente limitar os subtítulos a uma ou duas frases. Dessa forma, há um equilíbrio agradável entre as palavras e as imagem. Isso também mantém o texto visível em dispositivos móveis.

Legendas x títulos e subtítulos

Os campos de texto e as opções de estilo variam de acordo com o layout. 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:

Na aba Design, selecione uma opção de exibição no menu suspenso Legenda:

  • Não Exibir Legenda - Nenhuma legenda será exibida a menos que a imagem seja visualizada no lightbox.
  • Legenda Embaixo - A legenda aparece abaixo da imagem, alinhada à esquerda.
  • 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 o texto Escreva uma legenda aqui, altere temporariamente o estilo da legenda para Legenda Embaixo na aba Design.

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:

Redimensionar a imagem

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

Os Blocos de Imagem Inline mantêm a largura do arquivo de imagem original. Se a imagem for mais estreita do que a área do conteúdo, haverá um espaço em branco em ambos os lados dela. Isso preserva a qualidade original da imagem. Para preencher esse espaço em branco e exibir a imagem em toda a largura do bloco, marque a opção Esticar na aba Design do bloco. Esticar uma imagem pode afetar a qualidade dela.

Existem outras formas de mudar o tamanho e o corte da imagem:

No layout Pôster, as imagens são esticadas automaticamente para preencher o bloco todo.

Há várias formas de mudar o tamanho e o corte da imagem:

Há várias formas de mudar o tamanho e o corte da imagem:

Há várias formas de mudar o tamanho e o corte da imagem:

Há várias formas de mudar o tamanho e o corte da imagem:

No layout Empilhado, as imagens são esticadas automaticamente para preencher o bloco todo.

Há várias formas de mudar o tamanho e o corte da imagem:

Estilizar o Bloco de Imagem

Alguns layouts têm as próprias configurações de estilo de fontes, cores e botões.

Para encontrar essas opções:

No Menu Inicial, clique em Design e depois em Estilos do Site.

O Bloco de Imagem Inline não tem opções exclusivas de Estilos do Site. Os estilos de legenda são definidos pelo template.

Role para baixo até a seção Bloco de Imagens: pôster para mudar esses ajustes. Eles afetam todos os Blocos de Imagens tipo pôster no site:

  • Alinhamento do texto: esquerda, direita, centralizado
  • Fonte do título - Define a fonte do título e o tamanho dela
  • Cor do título
  • Fonte do subtítulo - Define a fonte do subtítulo e o tamanho dela
  • Cor da legenda
  • Cor do link inline - Define a cor do link do título e do subtítulo
  • Separação do título - Define o espaço entre o título e o subtítulo
  • Cor da sobreposição da imagem - Adiciona um filtro de cor sobre a imagem.
  • Largura do conteúdo - Define a largura da legenda
  • Cor de fundo do título - Adiciona uma cor atrás do título

Se você adicionou um botão, use estes ajustes para personalizá-lo:

  • Fonte do Botão - Define a fonte e o tamanho do botão
  • Cor da Fonte do Botão
  • Cor de Fundo do Botão
  • Cor da borda do botão - ajusta a cor da borda definida com o ajuste Largura da borda do botão
  • Largura da Borda do Botão
  • Preenchimento do Botão
  • Arredondamento do botão
  • Separação do Botão - define a posição do botão

Quando terminar, clique em Salvar.

Dica: é possível definir a opacidade no ajuste de cada cor.

Role para baixo até a seção Bloco de Imagem: cartão para mudar esses ajustes. Eles afetam todos os Blocos de Imagem tipo cartão no site:

  • Dimensionamento dinâmico de fontes- Redimensiona o texto de acordo com a largura do bloco e do navegador. O texto do título e do subtítulo não pode ser redimensionado para um tamanho menor que 14 pixels.
  • Posição do conteúdo: superior, centro, inferior
  • Alinhamento do texto: esquerda, centro, direita, corresponder, oposto - Alinha o título e o subtítulo. Corresponder alinha o texto do mesmo lado que a imagem. Oposto alinha o texto do outro lado.
  • Largura da imagem - Define o tamanho da imagem
  • Fonte do título - Define a fonte do título e o tamanho dela
  • Cor do título
  • Fonte do subtítulo - Define a fonte do subtítulo e o tamanho dela
  • Cor da legenda
  • Cor do link inline - Define a cor do link do título e do subtítulo
  • Separação do título - Define o espaço entre o título e o subtítulo
  • Cor de fundo do cartão - muda o fundo que aparece atrás do texto
  • Espaçamento do cartão - Define o espaçamento em um dos lados do texto
  • Separação do cartão - Adiciona espaço entre a imagem e o fundo do cartão
  • Cor da sobreposição da imagem - Adiciona um filtro de cor sobre a imagem.
  • Cor de fundo do título - Adiciona uma cor atrás do título

Se você adicionou um botão, use estes ajustes para personalizá-lo:

  • Fonte do Botão - Define a fonte e o tamanho do botão
  • Cor da Fonte do Botão
  • Cor de Fundo do Botão
  • Cor da borda do botão - ajusta a cor da borda definida com o ajuste Largura da borda do botão
  • Largura da Borda do Botão
  • Preenchimento do Botão
  • Arredondamento do botão
  • Separação do Botão - define a posição do botão

Quando terminar, clique em Salvar.

Dica: é possível definir a opacidade no ajuste de cada cor.

Role para baixo até a seção Bloco de Imagem: sobreposição para mudar esses ajustes. Eles afetam todos os Blocos de Imagem tipo sobreposição no site:

  • Dimensionamento dinâmico de fontes- Redimensiona o texto de acordo com a largura do bloco e do navegador. O texto do título e do subtítulo não pode ser redimensionado para um tamanho menor que 14 pixels.
  • Posição do conteúdo: superior, centro, inferior
  • Alinhamento do texto: esquerda, centro, direita, corresponder, oposto - Alinha o título. Corresponder alinha o texto do mesmo lado que a imagem. Oposto alinha o texto do outro lado.
  • Largura da imagem - Define o tamanho da imagem
  • Sobreposição de título - Define quanto do título se sobrepõe à imagem. Isso afeta o tamanho do texto.
  • Fonte do título - Define a fonte do título e o tamanho dela
  • Cor do título
  • Fonte do subtítulo - Define a fonte do subtítulo e o tamanho dela
  • Cor da legenda
  • Cor do link inline - Define a cor do link do título e do subtítulo
  • Separação do título - Define o espaço entre o título e o subtítulo
  • Cor da sobreposição da imagem - Adiciona um filtro de cor sobre a imagem.
  • Cor de fundo do título - Adiciona uma cor atrás do título

Se você adicionou um botão, use estes ajustes para personalizá-lo:

  • Fonte do Botão - Define a fonte e o tamanho do botão
  • Cor da Fonte do Botão
  • Cor de Fundo do Botão
  • Cor da borda do botão - ajusta a cor da borda definida com o ajuste Largura da borda do botão
  • Largura da Borda do Botão
  • Preenchimento do Botão
  • Arredondamento do botão
  • Separação do Botão - define a posição do botão

Quando terminar, clique em Salvar.

Dica: é possível definir a opacidade no ajuste de cada cor.

Role para baixo até a seção Bloco de Imagem: colagem para mudar esses ajustes. Eles afetam todos os Blocos de Imagem tipo colagem no site:

  • Dimensionamento dinâmico de fontes- Redimensiona o texto de acordo com a largura do bloco e do navegador. O texto do título e do subtítulo não pode ser redimensionado para um tamanho menor que 14 pixels.
  • Posição do conteúdo: superior, centro, inferior
  • Alinhamento do texto: esquerda, centro, direita, corresponder, oposto - Alinha o título e o subtítulo. Corresponder alinha o texto do mesmo lado que a imagem. Oposto alinha o texto do outro lado.
  • Largura da imagem - Define o tamanho da imagem
  • Largura do conteúdo - Define a largura da legenda. Isso afeta o tamanho do texto.
  • Deslocamento de conteúdo - Define quanto da legenda se sobrepõe à imagem. Isso afeta o tamanho do texto.
  • Fonte do título - Define a fonte do título e o tamanho dela
  • Cor do título
  • Fonte do subtítulo - Define a fonte do subtítulo e o tamanho dela
  • Cor da legenda
  • Cor do link inline - Define a cor do link do título e do subtítulo
  • Separação do título - Define o espaço entre o título e o subtítulo
  • Fundo do cartão - muda a cor do fundo que aparece atrás da legenda
  • Espaçamento do cartão - Define o espaçamento em um dos lados da legenda
  • Cor da sobreposição da imagem - Adiciona um filtro de cor sobre a imagem.

Se você adicionou um botão, use estes ajustes para personalizá-lo:

  • Fonte do Botão - Define a fonte e o tamanho do botão
  • Cor da Fonte do Botão
  • Cor de Fundo do Botão
  • Cor da borda do botão - ajusta a cor da borda definida com o ajuste Largura da borda do botão
  • Largura da Borda do Botão
  • Preenchimento do Botão
  • Arredondamento do botão
  • Separação do Botão - define a posição do botão

Quando terminar, clique em Salvar.

Dica: é possível definir a opacidade no ajuste de cada cor.

Role para baixo até a seção Bloco de Imagem: pilha para mudar esses ajustes. Eles afetam todos os Blocos de Imagem tipo pilha no site:

  • Dimensionamento dinâmico de fontes- Redimensiona o texto de acordo com a largura do bloco e do navegador. O texto do título e do subtítulo não pode ser redimensionado para um tamanho menor que 14 pixels.
  • Alinhamento do texto: esquerda, direita, centralizado
  • Fonte do título - Define a fonte do título e o tamanho dela
  • Cor do título
  • Fonte do subtítulo - Define a fonte do subtítulo e o tamanho dela
  • Cor da legenda
  • Cor do link inline - Define a cor do link do título e do subtítulo
  • Separação do título - Define o espaço entre o título e o subtítulo
  • Fundo do cartão - muda a cor do fundo que aparece atrás da legenda
  • Espaçamento do cartão - Define o espaçamento em um dos lados da legenda
  • Cor da sobreposição da imagem - Adiciona um filtro de cor sobre a imagem.

Se você adicionou um botão, use estes ajustes para personalizá-lo:

  • Fonte do Botão - Define a fonte e o tamanho do botão
  • Cor da Fonte do Botão
  • Cor de Fundo do Botão
  • Cor da borda do botão - ajusta a cor da borda definida com o ajuste Largura da borda do botão
  • Largura da Borda do Botão
  • Preenchimento do Botão
  • Arredondamento do botão
  • Separação do Botão - define a posição do botão

Quando terminar, clique em Salvar.

Dica: é possível definir a opacidade no ajuste de cada cor.

Blocos de Imagem (versão móvel)

Cada layout de Bloco de Imagem mantém seu formato no celular. O texto se moverá no celular para caber no dispositivo e manterá uma posição similar em relação à imagem.

  • Para ver qual será o aspecto dos Blocos de Imagem , utilize o Simulador de Dispositivos.
  • Com exceção dos layouts Inline e Empilhado, as legendas mantêm sua largura definida em relação à imagem. Isso significa que legendas extensas podem ser mais difíceis de se ler.
  • Nos layouts Cartão, Colagem e Sobreposição, a posição das legendas encontram-se abaixo da imagem, e não ao lado da imagem.
  • Os layouts de Cartão, Colagem, Sobreposição e Empilhado oferecem a opção de Redimensionamento dinâmico de fontes no painel Estilos do Site. Com essa opção ativada, o texto não pode ser redimensionado para um tamanho menor do que 14 pixels.
  • Múltiplos Blocos de Imagemse empilham verticalmente no celular.

Próximos passos

Depois de configurar o Bloco de Imagem, você pode seguir os próximos passos para reorganizar, editar ou removê-lo:

  • Arraste e solte o bloco para movê-lo ou para criar colunas e linhas. Saiba mais em Movendo blocos.
  • Use o Editor de imagens para cortar, girar ou adicionar filtros a uma imagem.
  • Substitua a imagem, clicando em Excluir na aba Conteúdo do editor de blocos e carregando uma nova imagem. Dessa forma, você não precisa adicionar um novo Bloco de Imagem.
  • Para criar um efeito de imagem de banner com o bloco, mova-o para o topo da página. Saiba mais em Adição de imagem no banner.
  • Apague o bloco.

Perguntas Frequentes

A imagem está de lado.

Se o arquivo de imagem estiver torto quando carregado, ele aparecerá do mesmo modo no seu site. Para girar a imagem, use o Editor de imagens.

As imagens ficaram com a cor errada depois do upload

Se a imagem foi salva em CMYK em vez de RGB, as cores dela no seu site do Squarespace podem ficar diferentes do que você vê no arquivo de imagem original.

Sempre salve as imagens em RGB ou sRGB. A cor do modo RGB é um formato seguro para a web, enquanto o CMYK serve para impressão e não é renderizado na maioria dos navegadores. Para ver mais dicas de formatação de imagens, acesse Formatar imagens para exibição na web.

Esse artigo foi útil?
Usuários que acharam isso útil: 53 de 186