Crear una firma para el correo con HTML

Curso de HTML

30.  
31.  
33.  
35.  
48.  

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Índice:

  1. Opciones para crear nuestra firma personalizada en el correo electrónico
    1. Opcion 1: Herramientas online
    2. Opción 2: Comprar una plantilla
    3. Opción 3: Opción 3: Usar mi plantilla
  2. Usar la firma

Aunque es muy probable que tu gestor de correo electrónico (gmail, outlook o el que uses) te permita definir la firma de tu correo electrónico, en esta pequeña guía voy a ir un poco más allá. El diseño de la firma de mi correo electrónico tiene una tipografía personalizada, las imágenes que yo he escogido en las posiciones que yo he escogido, y una estructura de dos columnas que he podido hacer con unos mínimos retoques de código.

Inicialmente, vamos a ver como personalizar la firma del correo electrónico con uno de los múltiples servicios gratuitos para este fin que existen en internet. Luego, nos vamos a remangar un poco y vamos a ver como hacer la firma con HTML, utilizando una pantilla de HTML cuyo enlace de descarga tienes más abajo.

Concretamente, la firma del mail de la que estoy hablando es la que puedes ver en la siguiente foto, en la que se me ve caracterizado como Terminator.

Para poder tener la firma de nuestros sueños, yo te propongo las siguientes tres opciones:

Firma personalizada del correo electrónico con HTML

Opciones para crear nuestra firma personalizada en el correo electrónico

Opcion 1: Herramientas online

Existen varias páginas web para generar firmas online. Si realizas las siguiente búsqueda, encontrarás muchas de ellas: make your own email signature. Tras dedicarle un tiempo de investigación para encontrar la que más me gustaba, escogí mysignature.io.

Utilizar estos sitios web es tan fácil como rellenar los datos que quieres que aparezcan en la firma, seleccionar una plantilla, seleccionar lo que has hecho y pegarlo en gmail o el gestor de correo que uses.

Al final del artículo veremos donde se pega la firma en el caso de gmail.

Firma de correo electrónico personalizada

Opción 2: Comprar una plantilla HTML con la firma del correo

Aunque podrías crear la firma del correo electrónico con HTML desde cero, he optado por descargar una plantilla y proceder a modificarla mínimamente para conseguir el diseño final que busco.

Puedes hacerte con varios paquetes de plantillas HTML de firmas electrónicas mediante este enlace a envato.

Después de comprarla tendrás que editar un poco su código para poder cambiar su contenido. Simplemente hay que modificar un poco su HTML, aunque esta opción no es muy seductora para mucha gente.

Opción 3: Usar mi plantilla

La plantilla que podrás descargar en el siguiente enlace es la correspondiente a la que aparece en la parte superior del artículo.

Editar el código fuente de la plantilla

Las siguientes instrucciones son aplicables tanto si quieres modificar una plantilla descargada de Envato, como si quieres modificar la plantilla que yo uso en mis mails.

Ya te adelanto que para poder editar mínimamente la plantilla de la firma de correo electrónico, necesitarás unos conocimientos mínimos de HTML. Casualmente tengo un curso de HTML en mi página web ٩(^‿^)۶.

Si sabes algo de HTML, modificar los textos de la plantilla que hacen alusión a mi persona y sustituirlos por textos con tus datos será una tarea trivial.

El problema es la imagen. Esa que en mi plantilla me he puesto caracterizado de Terminator. Para que gmail detecte que que esa foto procede de una fuente segura, debemos almacenar la foto, obviamente, en una fuente segura. ¿Y qué es una fuente segura para gmail?. Pues el propio Google Drive. Tendremos que almacenar la foto en google drive y generar una url pública que será lo que pongamos en el atributo src de la imagen.

Para obtener esta url:

1 – Estando dentro de Google drive, pulsaremos con el botón derecho sobre la imagen ⟶ Share ( compartir ) ⟶ Get Shareable link ⟶ Copy Link.

2 – Le pasamos la url copiada a la siguiente aplicación web: https://sites.google.com/site/gdocs2direct/ y copiamos de nuevo la url que es generada.

3 – Esta es la url de la imagen que debemos utilzar en nuestro correo. He hecho este proceso tanto para la imagen de terminator como para las de compartir en las redes sociales.

Debes tener en cuenta que para que se vean especialmente nítidas, tanto la imagen de la firma como las de los iconos sociales son ligeramente al tamaño final que utilicé en el diseño.

También debes tener en cuenta que el gestor de correo de Gmail no soporta el estilo font-face.

Cómo enlazar con imágenes que tienes almacenadas en Google Drive

Usar la firma del correo electrónico obtenida

Una vez que hayas conseguido montar tu firma de correo electrónico, basta con que selecciones el resultado en el navegador y lo pegues en el cuadro de texto que tu gestor de correo electrónico reserva para definir la firma.

En Gmail

Engranaje de ajustes ⟶ See all settings → Pestaña General ⟶ hacemos scroll hacia abajo para pegar nuestra firma).

En Mailbird:

Hamburguesa de ajustes → Configuración → Identidades → Editar una firma existente.

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.