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
4.4 (88.57%) 7 votes

Hoy vamos a hablar de una utilidad que es fundamental a la hora de cuidar nuestra imagen corporativa.

Como bien sabréis cada detalle a la hora de perfilar la imagen de nuestro negocio. Cada punto de nuestro negocio suma y ha de ser cuidado al detalle. Por ello, hoy vamos a hablar sobre como crear una 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. Sobretodo busco que no te asustes al ver código ya que no es tan complicado y vamos a utilizar un HTML muy básico.

Algunos gestores de correo electrónico nos permiten crear nuestra firma sin necesidad de utilizar HTML como Outlook. Sin embargo, si usamos otros gestores profesionales como Webmail nos pedirán HTML para crear nuestra firma. De ahí la necesidad de utilizar un mínimo de HTML aunque no tengamos ni idea.

En este post vamos a tratar ambas versiones, tanto para que consigas crear una firma de correo con HTML o sin el.

Vamos con ello!

Configurar firma de correo electrónico en Outlook

Como os he comentado anteriormente hacer una firma de correo con Outlook es muy sencillo gracias al editor tipo word que nos permite configurar nuestra firma sin necesidad de utilizar HTML. Para ello seguiremos el siguiente proceso:

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 crear un firma de email simple.

Firma HTML : Guía paso a paso

Vamos con el código HTML que es lo que nos interesa. Para crear nuestra firma de email simplemente tendrás que seguir los siguientes pasos:

  1. Copia y pega el código tal cual te lo facilito en un Documento de notas.
  2. Modifica los datos que aparecen entre corchetes “[]” con los de tu empresa.
  3. En la propiedad src pon el enlace correspondiente de tu empresa o proyecto.
  4. Corrige los enlaces de las redes sociales y de tu página web.
  5. Copia el código de la firma HTML en tu programa de email.

Si directamente no sabes por donde empezar con el código HTML puedes descargarte directamente el código para crear tu propia firma HTML en el siguiente enlace oculto. Desbloquealo!

FIRMA HTML

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 alternativa, los maquetadores de firmas online.

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 de email podrá ser editada durante los primeros 30 días, si luego deseamos editarla tendremos que pagar.

Para crear nuestra firma 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 crear vuestra firma HTML.

WISESTAMP

Otra herramienta más que nos facilitará la tarea de crear firmas HTML.

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.

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 podemos optar por usar directamente una imagen como firma para nuestro email.

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. Con ellos podemos hacer auténticas maravillas para nuestra firma.

Si finalmente te decides por utilizar como 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 una firma de email elegante con HTML.

¿Es necesario 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 mal. La falta de profesionalidad que proyectamos con una firma plana o descuidada 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.

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 utilizar las herramientas gratuitas que te he mencionado o en su defecto el maquetador de 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! 😉

Información sobre el artículo
Como crear firma HTML para mi correo : Guía definitiva + Plantilla ✔
Nombre del artículo
Como crear firma HTML para mi correo : Guía definitiva + Plantilla ✔
Descripción
En este post te doy las claves para que tu mismo crees tu propia firma html de manera profesional con código o con herramientas gratuitas.
Autor
Editor
Borja Aranda Vaquero
Imagen editor
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