Insertar links en imágenes
Este tutorial le enseña a convertir una imagen en un link clickeable dentro de una página o publicación del blog. Es útil para crear botones gráficos, imágenes promocionales que llevan a una sección específica, o accesos directos a emprendimientos destacados.
El editor visual de Mapaprop no permite agregar links sobre imágenes directamente. Para hacerlo es necesario usar el Modo HTML. No se preocupe: si sigue los pasos al pie de la letra, no necesita saber programar.
Lo que va a lograr
Una imagen que, al hacer clic, lleva al visitante a otra página de su sitio web o a una URL externa.
Paso 1 — Inserte la imagen como siempre
Desde el editor de una página o publicación:
- Vaya a la solapa Biblioteca de imágenes.
- Suba la imagen que quiere usar (o use una ya existente).
- Copie la URL de la imagen.
- Vuelva a la solapa Edición de contenido.
- Presione el botón 🖼 Imagen del toolbar y pegue la URL.
- La imagen aparece insertada en el contenido.
Paso 2 — Active el Modo HTML
En el toolbar del editor, presione el botón </> (el último grupo de íconos).
Aparece una advertencia. Presione Aceptar para continuar.
El editor cambia a fondo oscuro con texto monoespaciado: está viendo el código HTML del contenido.
Paso 3 — Identifique la imagen en el código
Busque la línea que corresponde a la imagen que insertó. Será algo similar a:
<img src="https://s3.amazonaws.com/mapaprop-images/website-images/1004/245/3204.jpg">
Las etiquetas de imagen siempre empiezan con <img y terminan con >. La URL de la imagen está dentro del atributo src="...".
Paso 4 — Envuelva la imagen con un link
Agregue <a href="LA_URL_DESTINO"> antes de la etiqueta <img ...> y </a> después. Por ejemplo, si quiere que la imagen lleve a la 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>
Qué URL usar en href
| Tipo de destino | Ejemplo |
|---|---|
| Otra página de su sitio | /pagina/la-empresa |
| Una publicación del blog | /blog/mi-publicacion |
| Resultado de búsqueda interna | /buscar/departamentos-en-palermo |
| Sitio externo | https://www.facebook.com/suempresa |
Para links externos, conviene agregar target="_blank" para que el link se abra en una pestaña nueva y el visitante no abandone su sitio:
<a href="https://www.facebook.com/suempresa" target="_blank"><img src="..."></a>
Paso 5 (opcional) — Alinear y dar espacio a la imagen
Si quiere que la imagen flote a la izquierda con el texto envolviéndola, agregue un atributo style a la etiqueta <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 | Qué hace |
|---|---|
float:left; | La imagen flota a la izquierda, el texto la envuelve |
float:right; | Igual pero a la derecha |
margin-right:10px; | Deja 10 píxeles de espacio a la derecha de la imagen |
margin-bottom:10px; | Deja 10 píxeles de espacio debajo de la imagen |
width:300px; | Forza el ancho de la imagen a 300 píxeles |
Puede combinar varios estilos separándolos con ; (punto y coma).
Paso 6 — Guarde la página
- Presione el botón
</>otra vez para volver al editor visual (o quédese en Modo HTML, da igual). - Presione Guardar.
- Abra su sitio web en una pestaña nueva y verifique que la imagen sea clickeable.
Si la imagen no se ve, vuelva al Modo HTML y revise que el código esté igual al ejemplo. Errores típicos: olvidar el </a> al final, o usar comillas raras (curvas) en lugar de comillas rectas ".