timer ~ 13 min. leídos
53780 vistas
valóralo
19 mayo 2021

Cómo añadir hipervínculos y enlaces de anclaje en los correos electrónicos con Stripo

Stripo / Blog / Cómo añadir hipervínculos y enlaces de anclaje en los correos electrónicos con Stripo

El poder de los enlaces en los correos electrónicos no puede ser sobrevalorado.

Navegan a los destinatarios dentro de un correo electrónico si es largo, llevan a los destinatarios de nuestros correos electrónicos a las páginas necesarias en nuestro sitio web, incluyendo la página de pago, a los vídeos necesarios en Youtube, etc.

Todo esto hace que los enlaces sean útiles para nuestros destinatarios, lo que tiene un impacto positivo en el CTR.

Los enlaces también nos permiten rastrear las actividades de los destinatarios dentro de un correo electrónico y medir la eficacia de una determinada campaña de correo electrónico.

En este post, estudiaremos los tipos de enlaces y mostraremos las formas de añadirlos a los correos electrónicos.

Tipos de enlaces en los correos electrónicos

Hay varios tipos principales:

Hipervínculos visuales y botones en los correos electrónicos

Un hipervínculo en los correos electrónicos, también conocido como enlace, nos lleva de un correo electrónico a un sitio web o nos lleva entre páginas dentro de un sitio, o a ciertas imágenes y otros archivos multimedia.

Según las estadísticas proporcionadas por eSputnik, Según las estadísticas proporcionadas por eSputnik, el ESP que utilizamos, un boletín promocional medio contiene 20 hipervínculos. ¿Le parecen demasiados? En absoluto. De hecho, todas las pestañas del menú, cada una de las imágenes, cada uno de los botones CTA utilizados en un mensaje de correo electrónico deberían tener un enlace.

Veamos el mapa de clics de nuestro boletín de San Valentín, proporcionado por nuestro ESP:

Hipervínculos en correos electrónicos_Haga clic en Mapa

(estadísticas reales, pero el contenido real del correo electrónico fue sustituido por el inventado)

El 26% de los suscriptores hicieron clic en el banner. El mismo número de personas hizo clic en el botón CTA.

Nota: un botón CTA no es más que un hipervínculo bellamente diseñado en un correo electrónico.

Aun así, ¿por qué añadir tantos hipervínculos en los correos electrónicos, y por qué añadirlos a cada imagen que se va a utilizar? Algunos clientes hacen clic en todo lo que ven y les gusta en el correo electrónico. Por esta razón, recomendamos añadir el mayor número posible de detalles en los que se pueda hacer clic en el correo electrónico.

Hipervínculos para los perfiles de las redes sociales en los correos electrónicos

Es importante que los clientes te sigan en las redes sociales. Allí compartimos noticias, actualizaciones, próximas ventas, etc. Normalmente van tras el CTA "Síguenos en las redes sociales". Pero no siempre..

Hipervínculos en correos electrónicos _ La opción Síguenos en redes sociales

Anima a los destinatarios a visitar esas páginas desde tus correos electrónicos.

Hipervínculos en los correos electrónicos para compartir en las redes sociales

Permite que los usuarios compartan algunos fragmentos de tus correos electrónicos en las redes sociales para que tu marca se haga viral.

Permíteles compartir historias divertidas, citas, elementos de diseño interesantes, su puntuación si has integrado un juego en un correo electrónico, o permíteles compartir todo el correo electrónico.

Hipervínculos en correos electrónicos_La opción de compartir en redes sociales

(Fuente: Correo Electrónico from de Stripo)

Este bloque suele ir después del CTA "Compartir en Facebook."

Los enlaces Mailto en los correos electrónicos

Debemos permitir que los usuarios se pongan en contacto con nosotros cuando lo necesiten y de la forma que les resulte más cómoda.

Si prefieren el correo electrónico, no está bien hacer que resalten tu dirección de correo electrónico, la copien y luego vayan a su buzón de correo electrónico y empiecen a redactar un mensaje allí.

Añade la opción "Envíanos un correo electrónico" con el enlace "mailto" en el pie de página de tu correo electrónico

Enlaces de Mailto en correos electrónicos_Stripo

(Fuente: plantilla de Stripo)

Los usuarios hacen clic en este enlace en el correo electrónico para iniciar un nuevo mensaje destinado a ti. Incluso puede establecer la línea de asunto.

Hipervínculos para la copia en los correos electrónico

Tenemos que añadir la copia en el cuerpo del correo electrónico: tanto para las campañas de promoción como para las de activación. Es fácil añadir hipervínculos al texto de un correo electrónico. No es necesario tener conocimientos de códigos ni de HTML. ¡Es muy fácil!

Para que los enlaces en el texto sean llamativos, deben contener más de 3 palabras, empezar con las palabras clave y ser descriptivos.

Hipervínculos en correos electrónicos_Vínculos en texto

(Fuente: Correo electrónico de Chris Cillizza, The Point, CNN)

Enlaces de anclaje en los correos electrónicos

Los enlaces de anclaje en los correos electrónicos están diseñados para llevar a los lectores a párrafos específicos dentro del correo electrónico. Al utilizar enlaces de anclaje en los boletines electrónicos, permite a los destinatarios saltarse algunas partes de los correos electrónicos para llegar directamente a las necesarias sin tener que desplazarse una y otra vez. Cuando tu correo electrónico sea lo suficientemente largo, asegúrate de insertar enlaces de anclaje, y tus clientes lo agradecerán.

(Fuente: Correo Electrónico de Mercedes-Benz)

Cómo añadir un enlace en el correo electrónico con Stripo

Entonces, ¿dónde se añaden los enlaces en los correos electrónicos? Todo depende directamente del objetivo que tengan tus boletines. Pero los más generales se añaden a todas y cada una de las imágenes, a las pestañas del menú, a nuestra información de contacto, a nuestras cuentas de redes sociales, a las invitaciones a encuestas, a los vídeos e incluso a los mapas.

Añadir enlaces a los botones CTA

Los botones CTA no deben ser aburridos: hazlos coloridos y brillantes. Pueden tener la forma que quieras. También puedes aplicar el efecto hover, conocido como animación CSS a tus botones con Stripo.

Hipervínculo de correo electrónico en HTML Correo electrónico_Botón CSS

Cómo añadir un hipervínculo a un botón CTA en los correos electrónicos con Stripo:

  • tira del bloque "Botón" exactamente donde lo necesitas en el correo electrónico;

  • dale un nombre;

  • establecer el color del texto;

  • establecer la fuente y el tamaño del texto;

  • establecer el color del botón;

  • pegar el enlace;

  • ¡hecho!

Cómo agregar un hipervínculo en un correo electrónico con Stripo

14 min. leídos

82281 vistas 4.3

Buenas Prácticas de Email de Llamado a la Acción Leer

Añadir un hipervínculo a su vídeo

En uno de los artículos, mostramos cómo añadir enlaces a los vídeos en los correos electrónicos con Stripo.

Stripo Cómo agregar hipervínculos y enlaces de anclaje en correos electrónicos_Video en correos electrónicos

Para su comodidad, en pocas palabras, lo duplicaré aquí.

Cómo añadir un hipervínculo a tu vídeo en los correos electrónicos con Stripo:

  • arrastra una estructura de 1 columna en tu plantilla de correo electrónico;

  • arrastra el bloque básico Video en ella;

  • haz doble clic en él en tu plantilla para activar el panel de configuración;

  • en el panel de configuración, pega tu enlace al vídeo en Youtube o Vimeo.

Hipervínculos en correos electrónicos_Vínculos a videos_Seminario web

Es importante tener en cuenta:

Nuestro editor recuperará e insertará automáticamente los campos la siguiente información en los campos respectivos:

  • imagen en miniatura;

  • el texto alternativo;

  • el color del botón de "play.”

¡Su vídeo de correo electrónico está listo para funcionar!

Agregar los enlaces mailto al bloque de información de contacto

Permita que sus clientes comiencen a escribirle correos electrónicos con un solo clic.

Hipervínculos en correos electrónicos_Enlaces de Mailto

(Fuente: Correo Electrónico de Boden)

Cómo añadir enlaces mailto a la información de contacto con Stripo:

  • añade una nueva estructura a tu correo electrónico;

  • tira del bloque "Texto" en cada contenedor;

  • ingresa tu texto. Ingresé "Contáctenos";

  • resaltalo y luego haz clic en el icono "Enlace" en la barra de herramientas;

Agregar enlaces de Mailto en correos electrónicos con Stripo

  • en el panel de configuración, establezca "mailto" como Tipo de enlace;

  • inserte una dirección de correo electrónico específica;

Cómo agregar un enlace mailto en correos electrónicos

  • introduce tu línea de asunto, si quieres que esos correos electrónicos vayan con uno.

Cómo agregar un enlace Mailto en correos electrónicos_Configuración de línea de asunto

Añadir enlaces a los iconos de las redes sociales

Queda a tu discreción dónde ubicar los enlaces a tus perfiles de redes sociales. Sin embargo, definitivamente tienen que estar en los correos electrónicos. Algunas marcas los añaden en el menú, sin embargo la gran mayoría de las marcas los ponen en el pie de página.

Hipervínculo en correos electrónicos_Linsk to Social Media en pies de página de correo electrónico

(Fuente: Correo Electrónico de Pinpointe)

Cómo añadir enlaces a los iconos de las redes sociales con Stripo:

Forma 1. Pegando enlaces
  • arrastra el bloque "Social" en tu plantilla;

  • haz doble clic en él para activar el panel de configuración;

  • inserta los enlaces a las respectivas cuentas de medios sociales;

  • hacer clic en "Más" para introducir el texto alternativo;

Hipervínculos en correos electrónicos_Cómo agregar enlaces a perfiles sociales con Stripo

  • Cambia la combinación de colores de los iconos sociales, su forma y tamaño.

Enlaces en correos electrónicos_Diseño de iconos de redes sociales en correos electrónicos con Stripo

Si quieres añadir los iconos que no están en la lista, por favor, encuentra los detalles sobre "Cómo añadir iconos de medios sociales”.

Forma 2. Rellenando tu perfil para añadir tus redes sociales a los correos electrónicos con 1 clic

Si quieres añadir los perfiles de las redes sociales a tus correos electrónicos aún más rápido al crear una nueva campaña de correo electrónico, rellena tu perfil de Stripo. Al iniciar un nuevo correo electrónico, sólo tienes que arrastrar el bloque "Social" a tu plantilla - el diseño, y los enlaces adecuados a tus páginas de medios sociales se establecerán automáticamente.

Vínculos en correos electrónicos_Completar perfil para agregar vínculos a cuentas de redes sociales con un clic

Añade perfiles de redes sociales a tus correos electrónicos con 1 clic
Únete a Stripo
Forma 3. Arrastrando el módulo de contenido a tu correo electrónico para añadir todas las redes sociales a los correos electrónicos con 1 clic

Si no te apetece rellenar tu perfil con Stripo, simplemente guarda el módulo con la información de contacto/pie de correo electrónico en tu biblioteca de contenido personal. Y cada vez que decidas hacer una nueva plantilla de nuevo - sólo tendrás que tirar de este bloque en tu plantilla. Ya está hecho.

Vínculos en correos electrónicos_Completar perfil para agregar vínculos a cuentas de redes sociales con un clic

Para obtener información más detallada sobre los módulos de contenido y las formas de utilizarlos, por favor, consulte la entrada del blog que se da a continuación.

5 min. leídos

62233 vistas 3

Módulos de Contenido Stripo: ¿Qué Son Y Por Qué Los Necesitas? Leer

Añadir los enlaces para compartir en redes sociales

Este tipo de enlace permite compartir partes o correos enteros nuestros.

Enlaces en correos electrónicos_Compartir en redes sociales

(Fuente: Correo Electrónico de CNN Reliable Sources)

Cómo añadir enlaces de Compartición Social a los correos electrónicos con Stripo:

  • arrastra el bloque Social a tu plantilla;

  • elige los iconos de medios sociales necesarios;

  • diséñalos;

  • establece "Compartir" como tipo de enlace;

Cómo agregar enlaces para compartir en redes sociales_Stripo

  • en el campo de entrada "Vista previa", pega el enlace a la versión web de la plantilla, o simplemente al elemento que quieres que los usuarios compartan.

Habilitar el intercambio social en correos electrónicos_Stripo

Para el manual sobre cómo obtener el enlace a la "versión web" de tu correo electrónico, consulta la publicación del blog que se da a continuación.

7 min read

29315 views 3.7

Preview and Send Test Email in Stripo Leer

Añadir enlaces a las pestañas del menú

Los menús suelen ayudarnos a llevar a los destinatarios de los correos electrónicos a un sitio web.

Por lo tanto, es necesario insertar los enlaces correspondientes.

Stripo Agregar enlaces en correos electrónicos Ejemplos del menú con enlaces por espacio

(Source: Email from Gap)

Cómo añadir un enlace a las pestañas del menú con Stripo:

  • arrastra una estructura/fila de 1 o 2 columnas en nuestro email;

  • arrastra en el bloque de Menú;

  • haz doble clic en él para activar el panel de configuración para futuros trabajos con este elemento;

  • selecciona el tipo de menú - enlaces (el más común), iconos, o enlaces e iconos;

Enlaces en los menús de correo electrónico_Stripo

  • diseña las pestañas del menú;

  • dar un nombre a cada pestaña del menú

  • pega un enlace a cada pestaña del menú.

Agregar enlaces a menús_Stripo

Para tu información: en el panel de configuración, las pestañas del menú se llaman "Elementos”.

Añadir enlaces de anclaje en los correos electrónicos

Como hemos dicho anteriormente, cuando tus correos electrónicos son demasiado largos, es mejor utilizar enlaces de anclaje, ya que nos ayudan a navegar a los destinatarios dentro del correo electrónico y los llevan directamente a la sección que más les interesa, sin necesidad de desplazarse una y otra vez.

Ejemplo de enlaces de anclaje en correos electrónicos_Gmail

Cómo añadir enlaces de anclaje en los correos electrónicos con Stripo

Forma 1. Activando la opción "Añadir enlace de anclaje". No requiere ningún trabajo con el código
  • construye la barra de menú/navegación de la forma que hemos mostrado arriba;

  • proporciona a cada pestaña un nombre claro;

  • elige el elemento con el que quieres enlazar la pestaña del menú;

  • en el panel de configuración, activa la opción "Añadir un enlace de anclaje" para este elemento en particular;

  • dale un nombre;

Anclar enlaces en correos electrónicos_Habilitar la opción

  • ahora ve a la pestaña de menú necesaria;

  • en el panel de configuración, establezca "Ancla" como tipo de enlace y elija el nombre de ancla necesario;

Cómo crear enlaces de anclaje en correos electrónicos con Stripo

  • done.

Agregue enlaces de anclaje en correos electrónicos rápidamente
Únete a Stripo
Forma 2. Trabajando con el código de correo electrónico
  • construye la barra de menú de navegación en un encabezado de correo electrónico;

Cómo crear un enlace en el menú Email_Building para enlaces de anclaje

  • oloca el bloque HTML en tu correo electrónico exactamente encima de la sección a la que quieres llevar a tus destinatarios, una vez que hagan clic en la pestaña del menú respectivo;

Stripo Agregar enlaces de anclaje_Arrastrar bloque HTML

  • haz doble clic en este bloque en tu correo electrónico para abrir el editor de código HTML;

Stripo Agregar enlaces de anclaje en el editor de código de correos electrónicos

  • en el editor de código, sustituya la línea existente por este elemento de código:

<a name="yourlabel"></a>

Donde "yourlabel" representa el nombre del párrafo con el que vas a conectar el enlace de anclaje. En mi ejemplo, es "música". De hecho, puedes llamarlo como quieras, pero por favor, no introduzcas ningún "espacio" ni ningún carácter de servicio en él, sólo una única palabra entre comillas;

Creación de enlaces de anclaje_Agregar bloque HTML

  • Ahora, para vincular este párrafo con la pestaña del menú respectivo, tenemos que hacer doble clic en el elemento del menú respectivo en la cabecera del correo electrónico;

  • una vez que el menú se resalta/activa (como se muestra a continuación), abrir el editor de código haciendo clic en el botón "editor de código" (lo hacemos para trabajar directamente con esta parte particular del correo electrónico):

Stripo Agregar enlaces de anclaje en correos electrónicos Abriendo el editor de código

  • en el editor de código, después de la etiqueta "href=" donde normalmente añadimos hipervínculos, hay que insertar este elemento "#suetiqueta". El elemento de código que inserté después de la etiqueta "href=" tenía este aspecto "#música.”

Stripo trabajando con el editor de correo electrónico HTML para insertar enlaces de Andhor

  • hay que hacer lo mismo con todas las pestañas del menú para anclarlas con los respectivos elementos de correo electrónico.

Es necesario incluir el hashtag " # " después de la etiqueta "href=", correcta "etiqueta" que utilizó para su ancla. Todas las demás etiquetas, como el cierre </a> Stripo añadirá por su cuenta.

Forma 3. Trabajando con el código del email, versión 2

Cuando tu correo electrónico está terminado, necesitas:

  • encontrar el lugar al que necesitas dirigir a los usuarios cuando hagan clic en el enlace de anclaje;

  • hacer doble clic en este elemento para activarlo;

  • abrir el editor de código (como se muestra arriba);

  • pegar este ejemplo de código <a name="yourlabel"></a> en el código del elemento necesario. "Yourlabel" representa el nombre de la sección necesaria;

Adición de enlaces de anclaje_Camino 2

  • ir ahora a la pestaña del menú que se supone que dirige a los usuarios a la sección mencionada;

  • hacer clic en él en la plantilla para activar;

  • en el panel de configuración, cambiar el tipo de enlace de "sitio" a "otro". Lo hacemos para evitar que cualquier ESP añada el elemento "https://" al código del correo electrónico;

Agregar enlaces de anclaje_Cambiar el tipo de enlace en el panel de configuración

  • insertar el nombre de la sección precedido de un hashtag. En nuestro caso, es #suetiqueta ;

Adición de etiquetas a enlaces de anclaje

  • ¡hecho!

Es importante tener en cuenta:

Los enlaces anclajes no funcionan en el editor. Para comprobarlos, envía un correo electrónico de prueba o abre el enlace "Ver en el navegador" en una nueva pestaña.

Comprobación de enlaces de anclaje

Soporte de enlaces de anclaje en los correos electrónicos:

Soporte de enlaces de anclaje

Importante:

Los enlaces anclajes no funcionan en los correos electrónicos HTML de AMP porque el validador de código de AMP no permite " # " y " nombre " en la etiqueta <a>.

Comentarios finales

Los enlaces son una parte integral de cada boletín de correo electrónico, ya que navegan a nuestros destinatarios y nos ayudan a seguir la actividad de los usuarios. Y hemos mostrado cómo añadirlos a varios elementos del correo electrónico.

Pero tenga en cuenta que no puede probar los enlaces mientras trabaja con el editor. Para ello es necesario enviar un correo electrónico de prueba.

Que tus destinatarios estén siempre satisfechos con los boletines que envías, que hagan clic en los enlaces que contienen tus emails. Nuestras características técnicas únicas y las plantillas de correo electrónico estructuradas de forma ordenada le facilitarán este proceso.

Si tiene alguna pregunta o duda, envíenos un correo electrónico a contact@stripo.email o deje un comentario a continuación.

Construye correos electrónicos útiles en poco tiempo con Stripo

Te podría interesar

anterior siguiente
banner9
06 junio · 15 min. leídos
Los 10 mejores creadores de plantillas de correo electrónico para 2022

¿Todos los creadores de plantillas de correo electrónico parecen iguales? Ahora estás confundido sobre cuál elegir para tus campañas de correo electrónico, ¿no es así? No es de extrañar, ya que hay muchos. Vamos a hacer un estudio de los constructores más populares para encontrar sus características distintivas para ayudarle a encontrar el mejor constructor de correo electrónico HTML para sus necesidades actuales. Intentaré crear una plantilla en todos estos editores con los mismos archivos multimedia para ver si los...

Diseño Marketing Plantillas
24 mayo · 18 min. leídos
Los mejores tipos de letra para el correo electrónico: Consejos y trucos de uso

Una de las preocupaciones más llamativas en el proceso de producción del correo electrónico es la elección del tipo de letra adecuado. El peso, la altura, la anchura, el color, la forma, el espaciado... ¿Todo es importante? Sí, lo es, pero también una de las cosas más cruciales es elegir la fuente que sea legible. En este post, vamos a mostrarle cómo elegir la mejor fuente profesional para el correo electrónico. Diseñe elegantes correos electrónicos con Stripo en un abrir...

Diseño Plantillas
Greatest Examples of GIF animations in Emails_Cover Image
27 octubre 2021 · 10 min. leídos
16 grandes ejemplos de GIFs animados en correos electrónicos

Los GIFs en los correos electrónicos serán de gran utilidad si quieres mostrar tu producto, llamar la atención de los usuarios sobre ciertos elementos, o simplemente decorar ligeramente tu texto. En este artículo, hemos proporcionado algunos de los mejores ejemplos de animación gif en correos electrónicos. Ejemplos de GIFs animados en correos electrónicos Aquí tienes una recopilación de los mejores ejemplos con GIFs en correos electrónicos. Cada GIF cumple su misión. 1. Adidas (Fuente: Correo electrónico de Adidas) Adidas utilizó...

Diseño Marketing
08 abril 2021 · 17 min. leídos
Los 14 mejores ejemplos de diseño de firmas de correo electrónico

Las buenas firmas de correo electrónico nos ayudan a construir nuestro negocio y a causar una buena impresión a los clientes. Dado que es el último elemento que la gente ve en los correos electrónicos, debemos hacer que nuestras firmas personales sean creativas y memorables. Examinemos los mejores ejemplos de firmas de correo electrónico y su uso apropiado en correos electrónicos y plantillas de boletines para correo electrónico. Cabe mencionar que todos los tipos de negocios requieren firmas de correo electrónico...

Diseño Marketing Plantillas
Mantente siempre atento/a a las últimas noticias de marketing de correo electrónico, guías, artículos e instrucciones