Bloco Imagem e texto lado a lado: foto, texto e botão
Junte uma foto grande, um título, um texto e um botão opcional. Veja todas as opções do bloco Imagem e texto lado a lado.
Neste artigo
O bloco Imagem e texto lado a lado junta uma foto grande com um texto de apresentação e um botão opcional. É ideal para destacar um lançamento, um serviço (como avaliação gratuita) ou um diferencial com mais força visual.
- Tenha a imagem pronta no computador ou já na biblioteca de imagens do editor.
Para adicionar: . Você também pode digitar parte do nome na caixa Buscar bloco…. O bloco vale na Página inicial e na Página do imóvel (escolha a página no alto do editor).
12- 1Digite parte do nome (ou uma palavra-chave) para achar o bloco mais rápido.
- 2Clique em "Imagem e texto lado a lado" (ou arraste para a página) para adicionar o bloco.
O que ele mostra no site
Duas metades: a imagem com cantos arredondados e sombra, e do outro lado um texto pequeno em cima, o título, o parágrafo e, se você quiser, um botão. No celular, a imagem sempre vai para cima e o texto para baixo.
1234- 1A imagem do bloco.
- 2Título (clique e escreva direto).
- 3Texto de apoio.
- 4Botão opcional com link.
Quando usar
- Para destacar um lançamento ou condomínio com uma boa foto.
- Para falar de um serviço e levar o visitante a uma página de contato.
Todos os campos (aba Conteúdo)
12345- 1Envie uma imagem ou escolha na biblioteca.
- 2Foto à esquerda ou à direita.
- 3Título do bloco.
- 4Texto do botão; vazio = sem botão.
- 5Para onde o botão leva.
| Campo | O que faz | Padrão | Opções ou limite |
|---|---|---|---|
| Imagem | Foto do bloco. Enviar imagem (do computador) ou Biblioteca (já enviadas). O arquivo é convertido para WebP, mais leve. | Sem imagem | Imagens JPG, PNG, WebP, GIF; Tirar imagem remove |
| Imagem do lado | De que lado fica a foto no computador. | Esquerdo | Esquerdo; Direito |
| Texto pequeno acima | Frase curta em letras maiúsculas e cor de destaque, acima do título. | Vazio | Até 60 caracteres |
| Título | Título do bloco. | Um título que chama a atenção | Até 120 caracteres |
| Texto | Parágrafo de apoio. | Conte aqui um diferencial, um lançamento ou um serviço. | Até 1500 caracteres |
| Texto do botão (vazio = sem botão) | Texto escrito no botão. Se ficar vazio, o botão não aparece. | Saiba mais | Até 40 caracteres |
| Link do botão | Para onde o botão leva. Escolha na lista de páginas do site ou digite um endereço. | /contato | Começa com /, https://, #, mailto: ou tel: |
Como cada opção muda o resultado
- Imagem do lado: "Direito" inverte a ordem no computador; no celular a imagem continua em cima.
- Texto pequeno acima: bom para um rótulo como "Lançamento" ou "Novidade". Vazio, ele some.
- Botão: só aparece se o texto e o link estiverem preenchidos. Para um botão de WhatsApp, use o bloco Botão ou a Faixa de chamada.
- Sem imagem: no editor aparece uma caixa tracejada pedindo a imagem; no site público a caixa fica vazia. Sempre escolha uma imagem.
- O título do bloco é usado como descrição da imagem para o Google e leitores de tela.
Aba Estilo (vale para este bloco)
Ao lado de Conteúdo existe a aba Estilo, igual em todos os blocos livres: fundo (pronto ou outra cor), cor do texto, alinhamento do texto, espaço em cima e embaixo, largura, onde mostrar (computador, celular ou os dois), espaçamentos em pixels, ajustes só do celular, animação ao aparecer e CSS próprio. Veja Fundo e cor, Alinhamento e largura, Espaços e margens, Onde mostrar e Animação.
1234- 1A aba Estilo é igual em todos os blocos livres.
- 2Fundo: sem fundo, cinza claro, cor principal ou cor de destaque.
- 3Espaço em cima e embaixo do bloco.
- 4Alinhada ao conteúdo ou tela inteira.
Exemplos de uso
- Avaliação gratuita: foto do corretor, texto pequeno "Para quem quer vender", título "Descubra quanto vale seu imóvel", botão "Pedir avaliação" para /anuncie.
- Lançamento: imagem do empreendimento à direita, botão "Ver imóveis" apontando para a lista de lançamentos.
Perguntas frequentes
O botão não aparece.
Confira se o texto do botão e o link estão preenchidos. Se um deles estiver vazio, o botão fica escondido.