Cómo arreglar los enlaces azules de Gmail para un sueño de correo electrónico hecho realidad

Publicado: 2021-07-16

¿Se siente frustrado por los enlaces azules aparentemente aleatorios y ajenos a la marca cuando realiza pruebas de control de calidad en su correo electrónico que de otro modo sería perfecto en Gmail? Estado allí. Hecho eso. ¿Las buenas noticias? No hiciste nada malo. Desde 2017, Gmail convierte automáticamente parte de su copia, como direcciones de correo electrónico, números de teléfono, direcciones físicas y horarios, en elementos en los que se puede hacer clic, que a veces los vuelve azules. Y como se abre el segundo cliente de correo electrónico más popular con más del 30% de los correos electrónicos, según nuestros datos, no puede ignorar Gmail.

A pesar de qué son los enlaces azules y por qué, necesita que su correo electrónico se parezca a lo que se aprobó. O al menos que los enlaces estén en la marca. Afortunadamente, eliminar el estilo predeterminado no es tan difícil. Le mostraremos cómo se crean los enlaces azules y qué puede hacer para cambiarlos para que coincidan con el diseño de su correo electrónico. Todo mientras mantiene los enlaces fáciles de usar para su audiencia de Gmail.

¿Sus correos electrónicos tienen enlaces azules?

Siempre sepa cuándo los clientes de correo electrónico actualizan su procesamiento de correo electrónico con las vistas previas de correo electrónico de Litmus. Obtenga una vista previa de sus correos electrónicos en todos los dispositivos y clientes de correo electrónico populares, incluido Gmail, y detecte los errores antes de enviarlos.

Más información →

Tenga en cuenta la accesibilidad

Primero, es importante recordar que los enlaces azules tienen un propósito importante. Hacen que sea más conveniente para sus suscriptores actuar en su correo electrónico, por ejemplo, navegar a una ubicación que haya incluido o darle una llamada rápida. Ambos son excelentes para la usabilidad y la accesibilidad.

bluelinks — Sí, también teníamos algunos enlaces azules en nuestros correos electrónicos.

Sin embargo, estos enlaces automáticos pueden venir con el estilo predeterminado: subrayado y azul. Esto puede entrar en conflicto con el diseño de su correo electrónico e incluso hacer que su correo electrónico sea menos accesible si los enlaces están en un color de fondo que no contrasta bien con ellos.

pie de página — El enlace azul aquí apenas se nota

Por lo tanto, querrá conservar la funcionalidad del enlace, pero modifíquelo para que coincida mejor con el diseño de su correo electrónico y sea legible.

La anatomía de un correo electrónico roto (segunda edición)

Cuidado: hay otros culpables de un correo electrónico roto

¿Los errores de correo electrónico te hacen estremecer? Los enlaces azules son solo una de las formas en que su correo electrónico puede verse roto. Sumérjase en lo que puede dañar su correo electrónico y los consejos y trucos para mantenerse fiel.

Revelar problemas comunes y correcciones →

Tres formas de cambiar el color del enlace azul en Gmail

Para cambiar el color del enlace azul, debe comprender por qué sucede. Cuando Gmail detecta una dirección o número de teléfono en un correo electrónico, automáticamente agrega una declaración de estilo adicional, que formatea cualquier enlace en el correo electrónico como azul si no tiene estilos en línea adjuntos:

.ii a[href] { color: #15c; }

La clase .ii se refiere a la clase dada al div que contiene todo el correo electrónico en Gmail. El a [href] es un selector de atributos CSS. Esto declara que cualquier enlace en la clase .ii debe ser de color azul.

Las direcciones y los números de teléfono no suelen estar vinculados en los correos electrónicos. Sin embargo, Gmail los reconoce y los convierte en un enlace, te guste o no. Como estos enlaces se crean sobre la marcha, no tienen ningún estilo en línea adjunto y, por lo tanto, se utiliza el estilo predeterminado anterior.

Hay tres métodos que puede utilizar para evitar que los enlaces se vuelvan azules, dependiendo de si desea que estos enlaces se vean iguales o diferentes a los otros enlaces en su correo electrónico.

Opción 1: utilice el método <span>

El método <span> es la técnica más sencilla para evitar que los números de teléfono y las direcciones se vuelvan azules en Gmail. Es perfecto si desea estilizarlos de manera diferente a sus otros enlaces mientras mantiene su funcionalidad. Así es cómo:

Envuelva el número de teléfono o la dirección en un <span> </span>
Dale a <span> una clase, por ejemplo: <span class = ”contact”> </span>
Declare la clase en la sección <style> de su correo electrónico para estilizar el número de teléfono o la dirección como desee
¡Lucro!

Aquí hay un ejemplo del HTML donde aparece la dirección en el correo electrónico:

<span class="contact">675 Massachusetts Ave.<br />Cambridge, MA 02139, USA</span>

Y aquí hay un ejemplo de declaración de estilo para la clase "contacto" en el bloque <style> en el <head> de su correo electrónico donde configuramos el enlace en negro (# 000000) y subrayado:

<style type="text/css">
    .contact a {color: #000000!important; text-decoration: underline!important;}
</style>

Cambie el color negro en nuestro código de ejemplo cambiando el # 000000 por un código hexadecimal de color que se ajuste a su marca. Si no desea que su enlace esté subrayado, cambie el subrayado en su código a ninguno.

La creación de un <span> con un nombre de clase alrededor de la dirección o el número de teléfono le da algo a lo que apuntar usando CSS. Solo apuntar al <span> en sí mismo no aplicará estilo al enlace. Solo aplicará estilo al texto desvinculado, mientras que el enlace dentro de <span> seguirá teniendo el estilo azul predeterminado. Por lo tanto, para orientar el enlace dentro del intervalo, la declaración de estilo incluye el nombre de la clase y "a".

Esto es especialmente bueno para los números de teléfono si desea agregar <a href=”tel:XXX-XXXX”> directamente a los números de teléfono, pero no desea que el número de teléfono intente abrir una aplicación de teléfono en el escritorio. Y luego tienes que ocultar y mostrar contenido para escritorio frente a dispositivo móvil. Simplemente omita el dolor de cabeza y aproveche el hecho de que un cliente de correo electrónico finalmente está haciendo algo para ayudarlo.

Opción 2: anular todos los estilos de enlaces

Otra opción es establecer su propio estilo predeterminado que se aplicará a todos los enlaces en un correo electrónico. Esta opción es perfecta si desea que los enlaces de su dirección o número de teléfono tengan el mismo aspecto que sus otros enlaces y, al mismo tiempo, conserven la funcionalidad que les ofrece Gmail.

Agregue esta declaración de estilo específica de Gmail a su bloque <style> en el <head> de su correo electrónico, así:

<style type="text/css">
    u + #body a {
    	  color: inherit;
    	  text-decoration: none;
    	  font-size: inherit;
    	  font-family: inherit;
    	  font-weight: inherit;
    	  line-height: inherit;
    }
</style>

Luego, agregue el ID "cuerpo" a la etiqueta del cuerpo:

<body id="body">
</body>

El subrayado "u" es un método de orientación para Gmail. Convierte el tipo de documento en una etiqueta de subrayado, y Gmail es el único cliente que se comporta de esta manera. Por lo tanto, usar la etiqueta de subrayado con el selector de hermanos adyacente de un div o id / class en ese div en CSS es un método único para apuntar solo a clientes de Gmail (al menos por el momento). En este ejemplo, usamos una identificación de "cuerpo".

Con este método, si desea que los enlaces de su correo electrónico tengan estilos ligeramente diferentes, deberá agregarlos en línea a esos enlaces específicos, ya que esta técnica anterior aplicará el estilo a todos los enlaces como se ha definido en la declaración de estilo.

Sin embargo, hay una pequeña advertencia con este método.

No funciona cuando los usuarios de Gmail tienen las imágenes desactivadas de forma predeterminada y luego las habilitan. Esto se debe a un error en Gmail que cambia incorrectamente el estilo una vez que se habilitan las imágenes. El desarrollador de correo electrónico Remi Parmentier tiene más detalles sobre este error.

Opción 3: agregue la etiqueta <a> y conviértalos en enlaces usted mismo

Al vincular de forma proactiva los elementos que Gmail vincularía automáticamente, tendrá más control sobre sus estilos y colores. Esta opción es perfecta si también desea cambiar el lugar al que se vincula el contenido , Tal vez tenga una página de contacto en su sitio web a la que preferiría llevar a los suscriptores en lugar de que abran automáticamente la aplicación de navegación de su teléfono o lo llamen instantáneamente directamente.

<a style="color:#4B525D; text-decoration:none;" href="https://www.litmus.com/contact-us/">675 Massachusetts Ave.<br />Cambridge, MA 02139, USA</a>

En el ejemplo anterior, la dirección física tiene un estilo de color gris sin subrayado y está vinculada a la página de contacto de nuestro sitio web. Esto evitará que Gmail aplique su estilo y funcionalidad predeterminados.

Adiós, enlaces azules de Gmail

Con cualquiera de nuestros tres métodos, los enlaces azules ya no alterarán el diseño de su correo electrónico y harán que parezca roto en Gmail. Y eso es genial, porque los correos electrónicos rotos pueden dañar el compromiso y las conversiones (y definitivamente no quieres eso).

¿Tiene preguntas sobre nuestros métodos? ¿O tienes otra solución para compartir? Háganos saber en los comentarios a continuación.

Cree correos electrónicos de marca y sin errores con Litmus

Vea cómo se ven sus correos electrónicos (no más enlaces azules, ¿verdad?) En más de 90 clientes de correo electrónico, aplicaciones y dispositivos, incluido Gmail. Dile adiós a los correos electrónicos rotos. ¡Uf!

Inicie su prueba gratuita →

Publicado originalmente el 13 de octubre de 2017 por Jaina Mistry. Última actualización el 16 de julio de 2021.

¡Comparte, gracias!

Lo que necesita saber para administrar los 3 tipos de suscriptores de correo electrónico inactivos

Aprenda a acercarse a los suscriptores inactivos en función del tipo de suscriptor de correo electrónico inactivo que sean para que pueda crear una estrategia de reenganche eficaz.
Lee mas

Nuestros ejemplos y estrategias de marketing por correo electrónico favoritos para el día de los solteros

Los correos electrónicos del Día del Soltero se están poniendo de moda en todo el mundo (no solo en China). Vea 8 ejemplos de correo electrónico para inspirar su campaña y estrategias para comenzar a planificar.
Lee mas

Matriz holística de métricas de correo electrónico: ¿está viendo el panorama completo?

Vea la imagen completa del rendimiento del marketing por correo electrónico con métricas de correo electrónico integrales a corto y largo plazo. Y cree campañas de mayor rendimiento hoy.
Lee mas

Cómo sacar los correos electrónicos del Black Friday y Cyber Monday (BF / CM) del parque

Destaque y convierta suscriptores con estas estrategias probadas y verdaderas para los correos electrónicos del Black Friday Cyber Monday y ejemplos perfectos en los que inspirarse.
Lee mas

Representación de correo electrónico de Outlook: cómo aprendí a dejar de preocuparme y a amar Outlook

¿Me pregunto por qué sus correos electrónicos se ven mal en Outlook? Obtenga información sobre los problemas de visualización y visualización del correo electrónico que puede enfrentar y cómo solucionarlos para lograr la perfección del correo electrónico.
Lee mas