• HOME
  • Blog
  • Tutorial: Cómo añadir enlaces de anclaje a los e-mail
Kelly Shetron
19 enero 2017
Tiempo de lectura: 8 min.

Tutorial: Cómo añadir enlaces de anclaje a los e-mail

¿Alguna vez has querido añadir un enlace de anclaje HTML a tu campaña de e-mail?

Los enlaces de anclaje en los mensajes de e-mail son increíblemente útiles para los boletines de noticias largos y con mucho contenido. Dan a tus suscriptores la posibilidad de desplazarse rápidamente por el texto saltando directamente a lo que quieren leer.

Veamos un ejemplo rápido de Mobile Marketing Watch, que utiliza enlaces de anclaje en la parte superior de su boletín diario para que los lectores puedan desplazarse rápidamente a cada sección.

El taller de hoy

¡Buenas noticias! Añadir un enlace de anclaje a tu campaña de e-mail es más fácil de lo que crees. Todo lo que necesitas es un conocimiento básico de la estructura del enlace HTML de tus enlaces de anclaje. Como veremos, un enlace de anclaje está formado por dos partes: el enlace URL y la etiqueta de anclaje propiamente dicha a la que el enlace «salta» en tu e-mail.

Veamos un ejemplo específico de un boletín; te mostraremos cómo replicar sus enlaces de anclaje usando el editor BEE, para que puedas ir siguiendo el procedimiento paso a paso.

256x218
Prueba la plataforma
Descubre todo lo que puedes hacer con MailUp.

Desde el desarrollo de integraciones hasta el apoyo estratégico, desde la creación de conceptos creativos hasta la optimización de resultados.

Nuestra inspiración: Un lindo ejemplo de enlaces de anclaje en e-mail

Vemos frecuentemente enlaces de anclaje bien usados en Lenny Letter, un boletín de noticias creado por la actriz/directora Lena Dunham y su mejor amiga/directora Jenni Konner. Lenny se centra principalmente en contenidos largos, ensayos e historias que hacen pensar, y proporciona ese contenido dentro del e-mail. El encabezado incluye unos enlaces de anclaje muy coloridos a cada una de las historias incluidas en el mensaje. Así se presentan los enlaces en la parte superior (comenzando con Jessica Grose y terminando con Lena Dunham):

Cada color se corresponde con la historia de la autora, de modo que si un lector quiere leer primero la historia de Kaitlyn Greenidge, por ejemplo, al tocar su nombre (el enlace de anclaje de color naranja), irá directamente a la sección con su historia (cuyo título «I Love Betty», también está en naranja). Hacer clic aquí para ver todo el boletín (acortado debido a su longitud).

Para empezar…

Ahora que estás familiarizado con el concepto de los enlaces de anclaje en los e-mail, nuestro recorrido te llevará a aprender cómo añadirlos en el editor BEE. Sigue los pasos y abre online el editor BEE.

Paso 1: Construye el e-mail

Para empezar, recrearemos el e-mail de Lenny en BEE. La cabecera es simple: usando un diseño básico de una sola columna, arrastra la imagen de Lenny y añade el texto (en Courier) debajo de ella. A continuación, arrastra una estructura de cuatro columnas para colocar los anclajes del comienzo.

Sigue añadiendo texto e imágenes para recrear las cabeceras, la introducción y la primera historia.

Después de formatar el color del texto, disponte a añadir los enlaces.

Paso 2: Elige el nombre del enlace de anclaje y su posición

Es el momento de dar nombre al primer anclaje y de colocarlo en la sección correspondiente del e-mail. En este paso, usaremos el bloque de contenido HTML personalizado en BEE (menú Contenido) para añadir nuestro anclaje (considéralo como un marcapáginas).

Arrastra y suelta el bloque de HTML en el punto al que quieres que lleve el enlace; en este caso directamente encima de la historia de Grose, titulada “Namaslay.”

Este es el aspecto del bloque HTML una vez colocado en su sitio, pero antes de añadir el código:

Para crear el anclaje, pega en una línea de código HTML en el campo de Propiedades de Contenido del bloque de HTML personalizado de la derecha: <a name=”grose”></a><br />

El nombre entre comillas (“grose”) puede ser cualquier otro, lo importante es que sea simple y fácil de recordar (idealmente una palabra), ya que es la palabra clave que utilizarás para crear los enlaces a esta etiqueta de anclaje.

Paso 3: Enlaza el anclaje

Ahora que has especificado la posición del anclaje, hay que enlazarlo con el texto de la cabecera. Solo hay que seleccionar “Jessica Grose” y elegir la opción Insertar/editar enlace en la barra de herramientas.

En el menú, enlaza al anclaje introduciendo #grose en el campo URL.

Para que el enlace funcione, es importante incluir el hashtag (#) antes del nombre, y asegurarse de que el nombre coincida con el elegido antes. Y, por supuesto, ¡cuanto más corto y simple sea el nombre, más fácil será recordarlo!

Ahora ya has creado las dos partes de tus enlaces de anclaje: el texto de anclaje y el enlace que lleva a él.

Clonar el icono: duplicar ese bloque de contenido HTML, copiarlo y arrastrarlo a la sección siguiente. Hecho esto, solo hay que actualizar el nombre entre comillas, y enlazar el texto de la parte superior a los nuevos anclajes que has creado.

Paso 4: Envía un e-mail de prueba para probar los enlaces de anclaje

Cuando recibas el e-mail, haz clic en los enlaces de anclaje y ya solo queda ver cómo se produce la magia, según muestra esta breve animación:

¡Listo! ¡De eso se trataba! ¡Funciona!

Clientes de e-mail que aceptan enlaces de anclaje

No todos los clientes de e-mail aceptan los enlaces de anclaje; esto hay que tenerlo presente al decidir si añadir o no una tabla de contenido a los boletines que envíes. En un futuro cercano, publicaremos algún estudio más sobre este tema. Por ahora, veamos un rápido reporte con algunos de los clientes de e-mail más populares (ver un reporte de clientes de e-mail por marketshare):

¿Usas enlaces de anclaje en el e-mail? ¡Pásate a Pro!

¿Hasta tratado de añadir enlaces de anclaje en tus e-mail? Dejando de lado las cuestiones de compatibilidad con clientes e-mail, añadir enlaces de anclaje a tu e-mail puede ser una táctica muy sencilla y eficaz para ayudar a tus suscriptores a recorrer tus contenidos y leerlos. Si todavía no usas MailUp, regístrate para una prueba gratuita, que te permitirá acceder a plantillas y características de diseño adicionales.

Share this article

80x80
Kelly Shetron

Crecí en Filadelfia, Estados Unidos, y tengo dos licenciaturas, en Inglés y en Economía. Me gusta reflexionar sobre cómo viven y trabajan las personas, sobre cómo se desarrollan los procesos creativos y sobre cómo interactuamos los unos con los otros. Colaborar en nuevos proyectos es mi combustible diario.

    Mucho contenido original, cero spam. Suscríbete al boletín