Inserir links em imagens
Este tutorial ensina como transformar uma imagem em um link clicável dentro de uma página ou publicação do blog. É útil para criar botões gráficos, imagens promocionais que levam a uma seção específica ou atalhos para empreendimentos em destaque.
O editor visual da Mapaprop não permite adicionar links diretamente sobre imagens. Para isso é necessário usar o Modo HTML. Não se preocupe: se você seguir os passos à risca, não precisa saber programar.
O que você vai conseguir
Uma imagem que, ao ser clicada, leva o visitante a outra página do seu site ou a uma URL externa.
Passo 1 — Insira a imagem como de costume
No editor de uma página ou publicação:
- Vá até a aba Biblioteca de imagens.
- Envie a imagem que deseja usar (ou use uma já existente).
- Copie a URL da imagem.
- Volte à aba Edição de conteúdo.
- Pressione o botão 🖼 Imagem da barra de ferramentas e cole a URL.
- A imagem aparece inserida no conteúdo.
Passo 2 — Ative o Modo HTML
Na barra de ferramentas do editor, pressione o botão </> (o último grupo de ícones).
Um aviso aparece. Pressione Aceitar para continuar.
O editor muda para um fundo escuro com texto monoespaçado: você está vendo o código HTML do conteúdo.
Passo 3 — Identifique a imagem no código
Procure a linha correspondente à imagem que você inseriu. Será algo parecido com:
<img src="https://s3.amazonaws.com/mapaprop-images/website-images/1004/245/3204.jpg">
As tags de imagem sempre começam com <img e terminam com >. A URL da imagem está dentro do atributo src="...".
Passo 4 — Envolva a imagem com um link
Adicione <a href="URL_DE_DESTINO"> antes da tag <img ...> e </a> depois. Por exemplo, se você quiser que a imagem leve à página /pagina/emprendimiento-x:
<a href="/pagina/emprendimiento-x"><img src="https://s3.amazonaws.com/mapaprop-images/website-images/1004/245/3204.jpg"></a>
Qual URL usar em href
| Tipo de destino | Exemplo |
|---|---|
| Outra página do seu site | /pagina/la-empresa |
| Uma publicação do blog | /blog/mi-publicacion |
| Resultado de busca interna | /buscar/departamentos-en-palermo |
| Site externo | https://www.facebook.com/suempresa |
Para links externos, vale a pena adicionar target="_blank" para que o link abra em uma nova aba e o visitante não saia do seu site:
<a href="https://www.facebook.com/suempresa" target="_blank"><img src="..."></a>
Passo 5 (opcional) — Alinhar e dar espaçamento à imagem
Se você quiser que a imagem flutue à esquerda com o texto envolvendo ela, adicione um atributo style à tag <img>:
<a href="/pagina/emprendimiento-x">
<img style="float:left; margin-right:10px;" src="https://s3.amazonaws.com/mapaprop-images/website-images/1004/245/3204.jpg">
</a>
| Estilo CSS | O que faz |
|---|---|
float:left; | A imagem flutua à esquerda, o texto a envolve |
float:right; | O mesmo, mas à direita |
margin-right:10px; | Deixa 10 pixels de espaço à direita da imagem |
margin-bottom:10px; | Deixa 10 pixels de espaço abaixo da imagem |
width:300px; | Força a largura da imagem para 300 pixels |
Você pode combinar vários estilos separando-os com ; (ponto e vírgula).
Passo 6 — Salve a página
- Pressione o botão
</>novamente para voltar ao editor visual (ou permaneça no Modo HTML, tanto faz). - Pressione Salvar.
- Abra seu site em uma nova aba e verifique se a imagem está clicável.
Se a imagem não aparecer, volte ao Modo HTML e verifique se o código está igual ao exemplo. Erros típicos: esquecer o </a> no final, ou usar aspas curvas em vez de aspas retas ".