Si utilizas el correo electrónico como un medio de comunicación en tu empresa, entonces seguro que te interesa mantener la identidad de tu empresa en cada email que envías. Existen muchas maneras de conseguirlo, pero una de las más efectivas es a través de la firma en email.
Personalizar una firma para que aparezca en cada uno de los correos electrónicos que envías tiene mucha más importancia de la que puede parecer, no solo es un método eficiente para fortalecer la identidad de tu empresa.
Por este motivo, en este artículo te voy a enseñar cómo crear una firma de email de manera sencilla, para que la puedas anexar a tus correos corporativos:
✅ EN ESTE ARTÍCULO APRENDERÁS:
¿Qué es la firma de un correo electrónico y para qué sirve?
La firma de un email o correo electrónico es un trozo de texto informativo que se compone de nuestros datos personales y principales métodos de contacto (teléfono, email, sitio web, etc.) que suele añadirse al final de un correo electrónico.
De esta forma, los destinatarios serán siempre conscientes de quién es el remitente del email.
Podemos decir que se trata de una extensión de nuestra identidad de marca y una manera directa con la que podemos «imprimir» nuestra identidad en los emails que enviamos, además de aportar algunos otros beneficios importantes que te comentaré más adelante.
La firma suele también conocerse como «pie de página» del email, debido a que se encuentra al final de los mensajes, y generalmente se programa para que aparezca de manera automática en cada mensaje, por lo que no es necesario insertarla cada que redactemos un nuevo mensaje.
Como consejo: las firmas guardan cierto parecido con las tarjetas de presentación corporativas, por lo que, si tu empresa tiene tarjetas de presentación, no es mala idea utilizar estas como modelo base para diseñar tu firma.
Claro está que no se trata solo de colocar tu nombre o el de tu empresa.
La firma de email debe cumplir con ciertos requisitos, que en este caso vendría a ser la información mínima que debes agregar.
¿Qué información debe contener una firma de email corporativo?
El aspecto y contenido de una firma es libre, la información, así como el estilo y diseño que se utilice dependerá totalmente de nosotros.
Sin embargo, existe un mínimo de información que debemos agregar para que esta pueda cumplir con su verdadero propósito y podamos aprovechar al máximo sus beneficios.
› La información que debes incluir sí o sí en tu firma de correos es:
- Nombre y apellido
- Cargo que desempeñas en la empresa
- Dirección de la empresa
- Teléfono de contacto
- Correo electrónico (ya sea de la empresa o personal, no siempre se ve incluido, sobre todo si se trata de un sistema de mensajes automatizado)
- Sitio web (si la empresa posee uno, como por ejemplo ismaelruizg.com)
Aunque todo lo anterior es, como te he indicado, el mínimo de información que debe contener tu firma de email, por supuesto, existen otros datos que serían de gran beneficio.
Entre ellos podemos destacar:
- Logo de la empresa (muy recomendado, hasta el punto en que es casi obligatorio para darle profesionalidad)
- Formas de contacto adicionales (como redes sociales o Skype)
- Información adicional (que sea de relevancia para tus clientes, como consejos o información útil sobre tus servicios o de seguridad)
¿Por qué es importante tener una firma en tu email?
Este tipo de información para una empresa al menos, no son solo una opción, se han convertido en una necesidad y en un elemento que te puede traer muchos beneficios a mediano y largo plazo.
El primer motivo por el que necesitas implementar una firma en tu correo electrónico es porque le da profesionalidad.
Y, además de ello, ofrece un gran soporte a tu identidad corporativa, ayudándote a ganar la confianza de quienes reciben tus emails.
Y como ya te he comentado, crear una firma de email profesional te aporta varios beneficios, entre los que podemos destacar:
» Deja una buena impresión
Depende mucho del diseño, pero una firma bien hecha es capaz de dejar una muy buena impresión en los lectores.
Esto te ayudará mucho en campañas de Email Marketing, ya que a tus suscriptores les será mucho más fácil recordarte.
Es una excelente oportunidad para destacar por sobre la competencia.
» Puedes ofrecer otros canales de contacto
Añadiendo tus redes sociales o cualquier otro medio de contacto como el número de teléfono, le estás facilitando a tus suscriptores y clientes la posibilidad de contactarte a través de otros canales más directos y que quizás se les facilite más.
Esto aumentará las probabilidades de que se comuniquen contigo.
» Es otra manera de comunicar información importante
¿Alguna vez has recibido algún correo cuyo pie de página posea información importante como medidas de seguridad o consejos puntuales?
Bueno, tu puedes hacer lo mismo, en tu firma siempre habrá espacio para dar algunos tips o consejos de seguridad a quienes reciben tus mensajes.
Algo bastante útil para empresas que manejan servicios digitales y suelen usar sistemas automatizados de correo.
¿Cómo crear la firma en HTML del correo corporativo paso a paso?
Si has leído la palabra “HTML” y te has asustado, no te preocupes, que no es tan complicado como parece.
Sí, estaremos usando un poco de código, pero será solo algo muy básico, por lo que no tendrás que preocuparte mucho por ello.
Claro está que, si te da algo de miedo trabajar con código, lo mejor será contratar a algún profesional o usar herramientas, como las que te mostraré más adelante.
Pero, ¿por qué usar código HTML para las firmas? Sencillo, es mucho más versátil ya que se puede utilizar en cualquier plataforma de correo electrónico, te ofrece diversas posibilidades y te ahorrará molestias de compatibilidad. Dicho esto, comencemos.
1. Abre bloc de notas
Lo primero que necesitas hacer es abrir el clásico programa Bloc de Notas o Notepad que seguro tendrás instalado en tu ordenador.
Si no, no te preocupes, cualquier editor de texto funciona.
Personalmente te recomiendo usar un editor de código, porque te hará la vida más fácil, pero no es obligatorio.
2. Configura tu documento para que sea HTML
Una vez que tengas tu documento abierto, tendrás que configurarlo para que adquiera el formato HTML.
Hacerlo es muy sencillo y solo necesitarás escribir este código base:
<!doctype html> <html> <head> <meta charset=”UTF-8”> <title>FIRMA</title> </head> </html>
3. Comienza a crear tu firma
Como te comentaba, el diseño puede variar, depende mucho de lo que quieras, por lo que mientras más elaborada quieras la firma del email, más conocimientos sobre HTML necesitas.
Pero siempre puedes hacer un trabajo elegante de forma sencilla, y en este caso lo haremos con ayuda de una tabla.
› Para insertar una tabla en HTML necesitarás 3 atributos, que son:
- <table></table>: Te permite insertar una tabla
- <tr></tr>: Con este atributo defines las filas
- <td></td>: Con este atributo defines las columnas
Para este ejemplo, usaré una sola fila con dos columnas para que no sea tan complicado.
La estructura base quedaría así:
<table> <tr> <td> </td> <td> </td> </tr> </table>
4. Damos vida a la tabla
Una vez que tengas la estructura base de la tabla, será momento de darle un poco de color, ahora, aquí es dónde comienza a complicarse la cosa si no tienes los conocimientos básicos, pero no te preocupes que es fácil de aprender.
En este caso los atributos que utilizaremos son los siguientes:
- Width: Con este le daremos el ancho, en este caso usaremos 600px
- Border: Definir un borde entre celdas
- Cellspacing: Con este atributo se determina el espaciado de las celdas de la tabla
- Cellpadding: Con este atributo definimos el margen entre celdas
- Style: Para darle estilo y color a la tabla. Usando el atributo Border aquí le dará un marco a la tabla.
- Solid: Para definir un color para el marco de la tabla, debe ir acompañado con el código hexadecimal del color que desees.
La etiqueta quedaría de esta manera:
<table width=”600” border=”0” cellspacing=”0” cellpadding=”0” style=”border: 1px solid #428bca”></table>
5. Configuremos las columnas
Vamos aumentando la dificultad, y en este paso necesitaremos configurar las columnas tal como hicimos con la tabla.
Por lo tanto, el código a usar será un poco más complejo, pero no te preocupes, que no es nada muy difícil.
Para este ejemplo no tenemos que modificar la única fila, por lo que puedes olvidarte de ella y solo dejar la etiqueta base.
Para darle vida a nuestra firma HTML, solo necesitamos concentrarnos en las etiquetas <td>.
› Los atributos que utilizaremos serán:
- Width: Nuevamente usamos el atributo para definir el ancho, pero en este caso, tenemos que considerar el ancho máximo de la tabla, que es 600 y dividir ambas columnas de modo que ocupen dicho espacio.
- Height: Este atributo hace referencia a la altura de la columna, puedes usar la que necesites, pero en este caso iré a por 180px.
- Align: La alineación horizontal del texto y de la imagen
- Valign: La alineación vertical del texto y de la imagen
- Style: En este caso añadiremos algunos atributos nuevos como padding-left para margen izquierdo; Font-family para definir las fuentes del texto; Font-size para el tamaño; y lign-height para interlineado, entre otros.
› Con los atributos aclarados, las dos columnas que usaremos quedarían de la siguiente manera:
Nuestra primera columna la usaremos para el logo, por lo que su tamaño será menor, de apenas unos 170px:
<td width=”170” height=”180” style=”border:1px solid #428bca; border-right: none; border-left: none;” align=”right” valign=”center”></td>
Mientras que nuestra segunda etiqueta será más amplia, de unos 430px, en ella añadiremos el texto:
<td width="430" height="180" style="padding-left:25px; font-family: Helvetica, Arial, sans-serif; font-size:13px; border:1px solid #428bca; border-left: none; border-right: none; line-height:16px;" valign="center">
Ya con esto tendremos nuestras columnas listas para rellenar, y es lo que haremos a continuación.
6. Rellenar las columnas con nuestra información
Para el ejemplo usaremos la información básica que te he colocado al principio, además del logo y algunos iconos.
Los atributos y etiquetas en este caso serán aún más complicados, ya que incluyen enlaces e imágenes.
› Los que tienes que conocer para crear tu firma de email son:
- <a href=”url”></a>: Con esta etiqueta podemos añadir un enlace
- <p></p>: Esta etiqueta lo que hace es definir un párrafo, por cada etiqueta de estas que coloques, añadirás un párrafo. Lo que escribas en ellas aparecerá como texto en tu firma
- Target=”_blank”: Este se utiliza con el propósito de indicarle a los enlaces que al clicar en ellos, se abra la nueva página en otra ventana.
- <Img src=”url”>: Esta etiqueta nos ayudará a anexar una imagen. Si se utiliza entre la etiqueta <a></a> podemos añadir un enlace a la imagen.
- Style: Nuevamente con esta etiqueta añadiremos estilo a nuestras columnas, los nuevos atributos a destacar en este paso incluyen text-align para alinear el texto; text-decoration para añadir o eliminar decorados al texto; y color para darle color al texto.
- <b></b>: Con esta etiqueta podemos poner un texto en negritas, solo hace falta agregarla alrededor de la palabra que queremos resaltar.
- <i></i>: Similar a <b></b> pero en este caso para utilizar cursivas.
– Primera columna
Esta es la más fácil, ya que solo consiste en insertar una imagen con el logo de nuestra imagen que esté enlazado a nuestro sitio web. Quedaría algo así:
<a href="[ENLACE DE TU SITIO WEB]" target="_blank"><img src="[URLIMAGEN DE TU LOGO]" width="150" height="180" style="padding-top:10px; padding-bottom:10px;"></a>
– Segunda columna
En el caso de la segunda columna es necesario añadir texto, por lo que es un poco más largo, y haremos uso de las etiquetas <p></p> para definir el número de párrafos.
Los primeros dos párrafos corresponden a nuestro nombre, que irá en grande y resaltado en negritas, seguido por el nombre de la empresa y el cargo que desempeñamos en ella.
Las etiquetas quedarían de esta manera:
<p style="font-size:20px; text-align: center; line-height: 0; padding-top: 15px;"><b>[TU NOMBRE]</b></p> <p style="font-size: 11px; padding-bottom: 30px; line-height: 0; text-align: center;"><i>[NOMBRE DE LA EMPRESA] · [CARGO QUE OCUPAS]</i></p>
Por si te lo preguntas, · es un atributo que nos permite añadir un punto para separar el texto.
Luego de esto vendrían dos párrafos más con información, estos separadas un poco de las anteriores, en ellas estarán la dirección de tu empresa, tu teléfono y tu correo electrónico.
En código quedaría de la siguiente manera:
<p>[DIRECCIÓN DE LA EMPRESA]</p> <p>[TU TELÉFONO] · [TU EMAIL]<br></p>
A diferencia de los primeros párrafos, estos dos no tienen muchas modificaciones, lo que resulta en un código bastante sencillo.
El siguiente párrafo contendrá la dirección de tu sitio web y estará enlazado, por lo que el código vendría a ser algo así:
<p><a href="[ENLACE A TU SITIO WEB]" style="text-decoration: none; color: orange;">[TU WEB]</a></p>
Usamos el atributo text-decoration para eliminar el subrayado del enlace, y el atributo color para cambiarlo de azul a naranja.
Finalmente añadiremos un pequeño párrafo simple, seguido de lo más complejo, un párrafo con tres iconos de redes sociales que enlazarán a nuestros perfiles.
Quedaría algo así:
<p><b>Síguenos en:</b></p> <p style="text-align: center;"><a href="[ENLACE A TU PÁGINA DE FACEBOOK]" target="_blank"><img src="[URL IMAGEN LOGO FACEBOOK]" width="30" height="30"></a> <a href="[ENLACE A TWITTER]" target="_blank"><img src="[URL IMAGEN LOGO TWITTER]" width="30" height="30"></a> <a href="[ENLACE A LINKEDIN]" target="_blank"><img src="[URL IMAGEN LOGO LINKEDIN]" width="30" height="30"></a></p>
Como ves, el primer párrafo no es nada complejo, pero el siguiente incluye tres iconos diferentes, los cuales se insertan de forma similar al icono de la primera columna.
Algo a destacar en este último párrafo es que los atributos width y height limitan el tamaño de los iconos a un cuadrado de 30 píxeles para mantener uniformidad.
7. Paso final: junta los códigos
Llegados a este paso ya el código estará listo, al menos por partes separadas, aunque si tienes conocimientos de programación seguro que habrás construido el código a medida que seguías este tutorial.
Pero, en caso de que seas un novato total, te dejo el orden en el que debes organizar el código, incluyendo etiquetas de apertura y cierre:
<!doctype html> <html> <head> <meta charset=”UTF-8”> <title>FIRMA</title> </head> <table> <tr> <td> … </td> <td> … </td> </tr> </table> </html>
Utilizando esa estructura ya podrás crear una firma de email con HTML de forma sencilla.
En caso de que utilices un software de programación, notarás que es mucho más fácil escribir el código, ya que estos programas completan automáticamente las etiquetas, sobre todo si se trata de etiquetas básicas como las que se utilizaron en el ejemplo.
Mejores herramientas para crear una firma para tu correo electrónico
Ahora, para finalizar, si de verdad no tienes nada de experiencia y no quieres complicarte mucho escribiendo código, puedes recurrir a herramientas online para crear firmas de email en HTML, pero sin usar código; algo así como vendría a ser WordPress para el diseño web. Te voy a recomendar dos, que son bastante completas y que te van a ayudar a crear tu firma de correo electrónico en muy poco tiempo.
» Email Signature Generator de HubSpot
Email Signature Generator de HubSpot es una herramienta gratuita que puedes utilizar para crear tus firmas de email de forma visual, con una interfaz bastante intuitiva y fácil de usar que te permitirá crear diseños muy variados.
Puedes subir directamente tus imágenes y utilizar algunas plantillas para no tener que hacer las firmas de correo desde cero.
» HTMLsig
HTMLsig es una plataforma de pago con la que puedes hacer múltiples firmas de manera rápida y sencilla, destaca por su facilidad y utilidad, además de que cuenta con una gran variedad de funciones específicamente utilizadas para la creación de firmas HTML.
Es una buena alternativa, y no es muy costosa.
Puedes probar la herramienta con una firma de correo gratis, que podrás modificar durante los primeros 30 días.
Conclusión
Además de estas dos alternativas, también es posible encontrar plantillas de firmas de email HTML en Internet, por lo que, si te apetece, puedes probar a buscar, quizás encuentras alguna que te guste.
También tienes permitido utilizar la de este ejemplo, solo tienes que modificar las partes del código que están encerradas en corchete con tu información ¡No te olvides de eso!
Recuerda que, en el caso de las imágenes, necesitarás subirlos a un hosting o servicio de almacenamiento de imágenes para que se puedan visualizar.
Y tú, ¿ya tienes tu firma de email en HTML o en texto plano para tus correos corporativos?
Imagen principal (sign)By Shutterstock.
Si no es así, ¿a qué esperas? Créala ya mismo y potencia la identidad de tu marca en todos los ámbitos posibles, incluyendo tus mensajes de correo.
