firma email

Cómo crear firma HTML para mi correo : Guía definitiva + Plantilla

Cómo crear firma HTML para mi correo : Guía definitiva + Plantilla
5 (100%) 3 votes

Hoy vamos a hablar de una utilidad que es fundamental a la hora de cuidar nuestra imagen corporativa. Como bien sabéis cada detalle a la hora de perfilar nuestro negocio cuenta. Cada punto de nuestro negocio suma y ha de ser cuidado al detalle. Es por eso que hoy vamos a tratar el tema de la firma HTML para nuestros emails corporativos.

Si has oído bien, HTML, es decir, código. pero no te preocupes gracias a esta sencilla guía simplemente tendrás que hacer un copia y pega y a funcionar. Sobretodo busco que no te asustes al ver código ya que no es tan complicado y hablaremos de un HTML básico.

Cómo bien sabrás según el gestor de correo electrónico que usemos para nuestra empresa a veces podremos hacer una firma llamativa sin necesidad de código (Outlook). Sin embargo, si usamos otros gestores como Webmail nos pedirán HTML en nuestra firma.

Vamos a ver todas y cada una de las variables para que este tema te quede resulto cuanto antes, por lo tanto vamos a ello!

Configurar firma de correo electrónico en Outlook

Como os he comentado antes hacer una firma de correo Outlook mediante un editor simple tipo word nos permite configurar una firma sin necesidad de usar HTML. Pra ello el proceso es simple.

Primero configuramos nuestra cuenta de email en:

Herramientas > Configuración de cuenta > Nueva

Posteriormente y con la cuenta ya creada haremos clic en:

Herramientas > Opciones > Formato de correos > Firmas

Una vez dentro seleccionaremos la cuenta de email asociada a la firma que vamos a configurar y simplemente tendremos que ir maquetándola como un simple Word. En ella podremos añadir enlaces, imágenes, etc. Un solución rápida y sencilla para vuestra empresa.

Firma HTML : Guía paso a paso

Vamos con el código que es lo que nos interesa. Para llevar a cabo este proceso simplemente tendrás que hacer lo siguiente:

  1. Copia y pega el código tal cual te lo facilitaré en un bloc de notas
  2. Modifica los datos que aparecen entre corchetes “[]”
  3. Después de la propiedad src pon el enlace de la imagen correspondiente
  4. Modifica los enlaces de las redes sociales y de tu página web
  5. Copia el código HTML modificado en tu programa de emails

FIRMA HTML

Una vez dadas las siguientes directrices os presento el código con el que trabajaremos:

Código HTML

<!doctype html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Firma HTML</title>
</head>
<table width=”600″ border=”0″ cellspacing=”0″ cellpadding=”0″ style=”border:1px solid #ffa300;”>
<tr>
<td width=”170″ height=”170″ style=”border:1px solid #ffa300; border-right: none; border-left: none;” align=”right” valign=”top”>
<a href=”[ENLACE DE TU SITIO WEB]” target=”_blank”><img src=”[URLIMAGEN DE TU LOGO]” width=”150″ height=”180″ style=”padding-top:15px;”></a>
</td>
<td width=”430″ height=”170″ style=”padding-left:25px; font-family: Helvetica, Arial, sans-serif; font-size:13px; border:1px solid #ffa300; border-left: none; border-right: none; line-height:16px;” valign=”bottom”>
<p style=”font-size:18px;”><b>[TU NOMBRE]</b></p>
<p style=”line-height:19px;”>[TU TELÉFONO] &middot; [TU EMAIL] &middot; [TU WEB]<br></p>
<p><b>Síguenos en:</b></p>
<p><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 GOOGLE PLUS]” target=”_blank”><img src=”[URL IMAGEN LOGO GOOGLE PLUS]” width=”30″ height=”30″></a></p>
</td>
</tr>
</table>
</html>

Con este código conseguiremos una firma de este tipo:

Herramientas gratuitas para crear tu firma HTML

Si en cuanto veis código HTML os asustáis y veis que esto no es lo vuestro no os preocupeis. Tengo una solución con las tres B Buena, Bonita y Barata. A continuación os voy a presentar 3 herramientas GRATUITAS que harán el trabajo de escribir código vosotros. Simplemente tendréis que diseñar la firma con un maquetador sencillo y copiar el código en vuestro gestor de emails.

HTMLSIG

Esta herramienta en su versión gratuita nos permite crear nuestra firma HTML de manera sencilla. Esta firma podrá ser editada durante los primeros 30 días, si luego deseamos editarla tendremos que pasar por caja. Simplemente introduciremos los datos en la herramienta, elegiremos una plantilla y voilá! firma HTML lista.

NEWOLDSTAMP 

El proceso es el mismo que el anterior. Tenéis una columna en la que introducir los datos personales de vuestra firma y en la otra columna tendréis que elegir la plantilla a utilizar para vuestra firma HTML.

WISESTAMP

Otra herramienta más que nos facilitará la tarea de crear firmas HTML. Personalmente lo más llamativo de esta herramienta es la vista previa a tiempo real que nos ofrece. De esta manera podremos ir viendo como va progresando nuestra firma HTML. Como plus a las anteriores nos permite incluir APPS a nuestra firma. Quizás, el mayor inconveniente respecto a las anteriores herramientas es que está aplicación tiene un menor número de plantillas.

Usar imágenes como firma HTML

Si finalmente decidimos que con HTML es todo demasiado complicado y tiene mucho código podemos optar por usar directamente una imagen que creemos.

Raro es la persona que hoy en día no tiene unos dominios básicos de diseño en Word, PowerPoint o simplemente los programas de diseño típicos como Photoshop, Ilustrator o Paint.

Si finalmente te decides por meter en la firma una imagen simplemente tendrás que subir tu firma (gráfica) a tu servidor y a continuación pegar el siguiente código HTML en la firma:

Código HTML

<!doctype html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Firma HTML</title>
</head>
<table width=”600″ border=”0″ cellspacing=”0″ cellpadding=”0″ style=”border:1px solid #ffa300;”>
<tr>
<td ><img src=”RUTA DE LA IMAGEN EN TU SERVIDOR”/></td>
</tr>
</table>
</html>

Si aún no os queda claro como podéis empezar a maquetar vuestra firma HTML os dejo este vídeo que os lo explicará más detalladamente. En el os explica como hacer u

¿Es necesaria tener una firma HTML?

Lógicamente no es necesario tener una firma HTML maquetada. Sin embargo si ya descuidamos estos puntos corporativos en nuestra empresa o business mal. La falta de profesionalidad que proyectamos con una firma plana en nuestro email es enorme.

Además con este sencillo código ya no tendrás excusas para tener tu propia firma corporativa en tus emails. Por fin podrás ponerte ese puesto de CEO que tanto deseabas de forma chula.

Consejos para crear una firma bonita HTML

El diseño no es lo más importante de una firma. Sin embargo, como siempre digo todo lo que vemos por internet entra por los ojos y tener una firma bonita HTML que destaque ayudará a tu negocio.

A continuación os doy unas pautas para crear una buena firma HTML:

  1. Se conciso, de nada sirve poner un montón de información irrelevante.
  2. Cuida el diseño pero recuerda “menos es más”.
  3. Destaca tus datos de contacto. Escríbelos tamaño de letra mayor.
  4. Siempre usa tu logotipo en tu firma, esa es realmente tu firma personal.

Ejemplos de firmas originales y elegantes

A continuación os muestro un par de ejemplos de lo que podría ser vuestra firma HTML:

Conclusiones sobre tu firma HTML

Yo siempre soy partidario de código ya que es a lo que me dedico y es con lo que puedo hacer infinidad de cosas que con las herramientas gratuitas no conseguiría. Sin embargo, si no tienes conocimiento de HTML te recomendaría al principio usar las herramientas gratuitas que te he mencionado o Outlook. Si finalmente necesitas una firma más profesional y menos estándar no dudes en contactarme.

De todas maneras si teneis alguna duda ponerla en los comentarios y os ayudaré con vuestra firma.

Nos leemos! 😉

  • Hola Borja, tuve un pequeño problema con las comillas que usaste y Sublime, las cambié por las sencillas inglesas y muy bien!
    He customizado algunas cositas y te dejo para que veas que cool quedó.

    Muchas gracias <3

    Firma HTML


    hola@carochan.comhttps://carochan.com
    Sígueme en:



    • BorjaAV

      Gran trabajo Caro!

      Para los saltos de línea te aconsejo que uses las etiquetas párrafo o

      De esta manera la información quedará correctamente maquetada

      Un saludo!

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa su navegación esta aceptando nuestra política de cookies. ACEPTAR
Aviso de cookies