Bloco Imagem: foto ou banner com link opcional

Como usar o bloco Imagem do Editor visual: enviar a imagem, descrição para o Google, link ao clicar e cantos arredondados.

4 min de leitura Atualizado em 30/10/2026

Neste artigo

Onde encontrar o bloco
O que o bloco mostra no site
Campos da aba Conteúdo
Aba Estilo (igual em todos os blocos livres)
Exemplos de uso
Perguntas frequentes
Veja também

O bloco Imagem coloca uma foto ou arte no meio da página: banner de um lançamento, mapa de um loteamento, foto da equipe, uma tabela em imagem. Pode virar um link para outra página.

Antes de começar

Só o administrador do site usa o Editor visual.
Este é um bloco "livre": vale na Página inicial e na Página do imóvel e pode ser repetido quantas vezes quiser.
Nada vai ao ar antes de você publicar.

Onde encontrar o bloco

Abra o editor. No painel, vá em Site › Editor visual e escolha a página no seletor "Página" (Página inicial ou Página do imóvel).
Clique na aba "+ Adicionar". Os blocos aparecem em grupos. Este está no grupo Básico, com o nome Imagem. Se preferir, digite "imagem" em "Buscar bloco…".
Coloque na página. Arraste o bloco até o lugar desejado ou clique nele para ir ao fim da página.
Abra as opções. Clique no bloco na prévia (ou na aba "Blocos"). A lateral mostra as abas Conteúdo e Estilo.
Publique. O que você muda fica em rascunho até clicar em Publicar. Veja como.

Aba "+ Adicionar": procurando o bloco Imagem

O que o bloco mostra no site

A imagem ocupa toda a largura da área do conteúdo (ou da tela, se você escolher "Tela inteira") e a altura se ajusta sozinha, sem cortar. Os cantos podem ser arredondados. Imagens grandes carregam só quando o visitante chega perto.

Campos da aba Conteúdo

Imagem. Envie pelo botão Enviar imagem ou escolha em Biblioteca. Aceita JPG, PNG, WebP, GIF e SVG. Imagens grandes são convertidas e reduzidas para o site ficar rápido (até 2.400 px de largura). Use Tirar imagem para limpar. Sem imagem, o visitante não vê nada; no editor aparece o aviso "escolha a imagem nas opções do bloco".
Descrição da imagem (para o Google) — até 160 letras. Texto invisível que descreve a imagem. Ajuda o Google Imagens e pessoas com deficiência visual. Exemplo: "Fachada do edifício Solar das Palmeiras".
Link ao clicar (opcional). Se preenchido, a imagem vira link (abre na mesma aba). Precisa começar com https://, http://, /, #, mailto: ou tel:.
Cantos arredondados. Ligado por padrão. Desligue para cantos retos.

Aba Estilo (igual em todos os blocos livres)

Ao lado de Conteúdo há a aba Estilo. Ela tem os mesmos campos em todo bloco livre:

Fundo: Sem fundo, Cinza claro, Cor principal ou Cor de destaque (as cores do seu site). Em fundo escuro, os títulos ficam brancos. Saiba mais.
Outra cor de fundo: qualquer cor sua, que vale no lugar do fundo pronto. Use o seletor ou digite um código como #1b6a3a.
Cor do texto: muda a cor das letras do bloco. Vazio = automática.
Alinhamento do texto: Padrão, À esquerda, Centralizado ou À direita.
Espaço em cima e embaixo: Nenhum, Pequeno, Médio (padrão) ou Grande. No computador vale 0, 40, 76 ou 110 px; no celular o site reduz sozinho.
Largura: Alinhada ao conteúdo (padrão, com margens laterais) ou Tela inteira (de ponta a ponta). Saiba mais.
Mostrar em: Computador e celular, Só no computador ou Só no celular. Saiba mais.
Espaçamento (px): Preenchimento (espaço por dentro) de 0 a 400 e Margem (espaço por fora) de -300 a 400, nos quatro lados. O cadeado muda os quatro lados juntos. Em branco = padrão. Saiba mais.
No celular: Espaço em cima e embaixo, Alinhamento do texto, Preenchimento e Margem só para telas pequenas (padrão "Igual ao computador"). Use o botão de celular no alto do editor para conferir.
Animação ao aparecer na tela: Nenhuma, Surgir, Subir, Aproximar ou Vir do lado. Saiba mais.
CSS personalizado: para quem conhece CSS (até 5.000 caracteres; use selector para falar do bloco). Saiba mais.

Para uma imagem de ponta a ponta, como um banner largo, escolha Largura: Tela inteira e Espaço em cima e embaixo: Nenhum. Para uma imagem menor e centralizada, coloque-a numa seção com colunas.

Exemplos de uso

Banner de lançamento com link para a vitrine do empreendimento.
Planta do loteamento com descrição "Mapa do Loteamento Vista Verde".
Foto da equipe com cantos arredondados, logo abaixo do texto "Quem somos".

Perguntas frequentes

A imagem ficou distorcida ou cortada?

O bloco nunca estica nem corta: ele mantém a proporção original. Se ficou grande demais, use uma coluna ou margens laterais na aba Estilo.

Veja também

Este artigo ajudou?