Insert links on images
This tutorial shows you how to turn an image into a clickable link within a page or blog post. It's useful for creating graphic buttons, promotional images that lead to a specific section, or shortcuts to featured developments.
Mapaprop's visual editor does not allow adding links directly on images. To do this you need to use HTML Mode. Don't worry: if you follow the steps exactly, you don't need to know how to code.
What you'll achieve
An image that, when clicked, takes the visitor to another page on your website or to an external URL.
Step 1 — Insert the image as usual
From the page or post editor:
- Go to the Image Library tab.
- Upload the image you want to use (or use an existing one).
- Copy the image URL.
- Return to the Content Editing tab.
- Press the 🖼 Image button on the toolbar and paste the URL.
- The image appears inserted in the content.
Step 2 — Turn on HTML Mode
In the editor toolbar, press the </> button (the last group of icons).
A warning appears. Press Accept to continue.
The editor switches to a dark background with monospaced text: you're now viewing the HTML code of the content.
Step 3 — Find the image in the code
Look for the line that corresponds to the image you inserted. It will look something like:
<img src="https://s3.amazonaws.com/mapaprop-images/website-images/1004/245/3204.jpg">
Image tags always start with <img and end with >. The image URL is inside the src="..." attribute.
Step 4 — Wrap the image with a link
Add <a href="TARGET_URL"> before the <img ...> tag and </a> after it. For example, if you want the image to lead to the page /pagina/emprendimiento-x:
<a href="/pagina/emprendimiento-x"><img src="https://s3.amazonaws.com/mapaprop-images/website-images/1004/245/3204.jpg"></a>
What URL to use in href
| Destination type | Example |
|---|---|
| Another page on your site | /pagina/la-empresa |
| A blog post | /blog/mi-publicacion |
| Internal search result | /buscar/departamentos-en-palermo |
| External site | https://www.facebook.com/suempresa |
For external links, it's a good idea to add target="_blank" so the link opens in a new tab and the visitor doesn't leave your site:
<a href="https://www.facebook.com/suempresa" target="_blank"><img src="..."></a>
Step 5 (optional) — Align and add spacing to the image
If you want the image to float to the left with text wrapping around it, add a style attribute to the <img> tag:
<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>
| CSS style | What it does |
|---|---|
float:left; | The image floats to the left, text wraps around it |
float:right; | Same but to the right |
margin-right:10px; | Leaves 10 pixels of space to the right of the image |
margin-bottom:10px; | Leaves 10 pixels of space below the image |
width:300px; | Forces the image width to 300 pixels |
You can combine several styles by separating them with ; (semicolon).
Step 6 — Save the page
- Press the
</>button again to go back to the visual editor (or stay in HTML Mode, it makes no difference). - Press Save.
- Open your website in a new tab and check that the image is clickable.
If the image doesn't show up, go back to HTML Mode and check that the code matches the example. Common mistakes: forgetting the closing </a>, or using curly quotes instead of straight quotes ".