Como crear firma HTML para mi correo : Guía definitiva + Plantilla ✔

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

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 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.

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! 😉

Cómo crear firma HTML para mi correo : Guía definitiva + Plantilla
Califica este post
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