Seguro te han llegado correos de empresas grandes y ves que al final tienen una firma donde la imagen, texto e iconos de redes sociales están separado.
Estas firmas son creadas en HTML y en algunas plataformas como Webmail ( Rouncube ) son más fáciles de manipular / crear que en el Gmail, no te preocupes, aquí te dejamos el código casi listo para que puedas crear la tuya.
Cómo hacer una firma HTML para correo
Con un poco de trabajo y paciencia es posible crear esta firma, la paciencia para ordenar los elementos y que se mantengan en su sitio mientras vamos editando…
En esta ocación implementaremos tablas anidadas que iremos adaptando con espaciado, fondos, imagenes y textos con enlazado.
El código lo puedes modificar en cualquier editor HTML online o el de tu preferencia, una vez terminado los llevarás hasta el correo final.
¿ Porque necesitas una firma en HTML ?
Aquí dos factores importantes, Marcar la diferencia ante otras marcas / empresas al tener una firma profesional.
Lo segundo, la comodidad para los usuarios que leen tus mails, esto último ya que tendrán la facilidad de hacer clic en todos los elementos que estén en la firma y así no tendrán que tipear desde una imagen estática.
Plantillas HTML para firma de correo gratis
Importante, antes de comenzar es necesario crear y cargar a un servidor público todas las imagenes que se añadiran a la firma, nuestra recomendación es hacerla al tamaño que ya quedará definido, aunque igual en el código se puede redimensionar.
Cargamos la imagen de la persona
Es importante que esta imagen tenga un peso bajo para que cargue rápido, menos de 100 kb estaría bien ( probamos con un GIF de 5 Mb y tardó unos 3 seg. en cargar… )
<table class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: large; font-family: Verdana;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<table class="sc-gPEVay eQYmiW" style="vertical-align: middle; font-size: large; font-family: Verdana;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="vertical-align: middle;">
<table class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: large;" cellspacing="0" cellpadding="0">
<tbody>
<!-- /* Agregamos el enlace de la imagen */-->
<tr>
<td class="sc-TOsTZ kjYrri" style="text-align: center;"><img decoding="async" class="sc-cHGsZl bHiaRe" style="max-width: 190px; display: block;" title="Saman" role="presentation" src="https://samanproducciones.com/wp-content/uploads/2023/01/hugoborges.png" alt="Saman" width="190"/></td>
</tr>
<tr>
<td height="0"></td>
</tr>
<tr>
<td style="text-align: center;"></td>
</tr>
</tbody>
</table>
</td>
<td width="0">
<div></div>
</td>
Nombre y Cargo de la persona
Puedes quitar el background-color si deseas que sea transparente, el tamaño de la letra lo modificas en font-size.
Debajo hace un espaciado antes y despues de la barra azul de separación.
<!-- Creamos el título y cargo-->
<td style="padding: 0px; vertical-align: top; background-color:#f2f2f2;">
<h5 class="sc-fBuWsC eeihxG" style="margin: 7px 10px 0px 30px; font-size: 25px; color: #000000;">Hugo Borges</h5>
<h5 class="sc-fMiknA bxZCMx" style="margin: 5px 10px 0px 30px; color: #000000; font-size: 14px; line-height: 8px;">CEO y Proyect Manager</h5>
<!-- Definimos el espacio entre el texto y la barra azul -->
<table class="sc-gPEVay eQYmiW" style="margin: 0px 10px 0px 30px; vertical-align: -webkit-baseline-middle; font-size: large; font-family: Montserrat; width: 100%;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="8"></td>
</tr>
<tr>
<td class="sc-jhAzac hmXDXQ" style="width: 70%; border-bottom: 3px solid #b2b2b2b2; border-left: 5px; display: block;" height="3"></td>
</tr>
<tr>
<td height="10"></td>
</tr>
</tbody>
</table>
Datos de contacto
Aquí se crean 2 columnas y 2 filas para agregar el número ( con enlace para marcado directo ) y correo de contacto
<!-- Creamos los iconos y texto de contacto -->
<table class="sc-gPEVay eQYmiW" style="margin: 0px 20px 0px 30px; vertical-align: -webkit-baseline-middle; font-size: large;" cellspacing="0" cellpadding="0">
<tbody>
<tr style="vertical-align: middle;">
<td style="vertical-align: middle;" width="30">
<table class="sc-gPEVay eQYmiW" style=" vertical-align: -webkit-baseline-middle; font-size: large; " cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="vertical-align: bottom;"><span class="sc-jlyJG bbyJzT" style="display: block;"><img decoding="async" class="sc-iRbamj blSEcj" style="display: block;" src="https://smartds.com.pe/wp-content/uploads/2023/01/TELEFONO.png" width="25" /></span></td>
</tr>
</tbody>
</table>
</td>
<td style="padding: 0px; line-height: 10px; color: #000000;"><a class="sc-gipzik iyhjGb" style="text-decoration: none; color: #000000; font-family: Montserrat; font-size: 12px;" href="tel:932472498">+51 932 472 498 </a></td>
</tr>
<tr style="vertical-align: middle; ">
<td style="vertical-align: middle; " width="30">
<table class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: large; font-family: Montserrat;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="8"></td>
</tr>
<tr>
<td style="vertical-align: bottom;"><span class="sc-jlyJG bbyJzT" style="display: block;"><img decoding="async" class="sc-iRbamj blSEcj" style="display: block;" src="https://smartds.com.pe/wp-content/uploads/2023/01/CORREO.png" width="25" /></span></td>
</tr>
</tbody>
</table>
</td>
<td style="padding: 0px; line-height: 10px; color: #000000; "><a class="sc-gipzik iyhjGb" style="text-decoration: none; color: #000000; font-family: Montserrat; font-size: 12px;" href="hola@samanproducciones.com">hola@samanproducciones.com</a></td>
</tr>
<tr>
<td height="8"></td>
</tr>
</tbody>
</table>
Enlazado de Redes sociales
Por último creamos la sección de las redes sociales con sus enlaces y usamos target _blank para que se abra en otra pestaña o ventana.
<!-- Cerramos con los iconos de redes sociales-->
<table class="sc-gPEVay eQYmiW" style=" margin: 0px 5px 5px 30px ;vertical-align: -webkit-baseline-middle; font-size: large;" cellspacing="0" cellpadding="0">
<tbody>
<tr style="text-align: center;">
<td><a class="sc-hzDkRC kpsoyz" style="display: inline-block; padding: 0px;" href="https://www.facebook.com/smartds.oficial" target="_blank" rel="noopener"><img decoding="async" class="sc-bRBYWo ccSRck" display: block; title="Facebbok icon" src="https://smartds.com.pe/wp-content/uploads/2023/01/FB.png" alt="Facebbok " width="27"></a></td>
<td width="8">
<div></div>
</td>
<td><a class="sc-hzDkRC kpsoyz" style="display: inline-block; padding: 0px;" href="https://instagram.com/smartds.oficial" target="_blank" rel="noopener"><img decoding="async" class="sc-bRBYWo ccSRck" display: block; title="Instagram icon" src="https://smartds.com.pe/wp-content/uploads/2023/01/DG.png" alt="Instagram" width="27"></a></td>
<td width="8">
<div></div>
</td>
<td><a class="sc-hzDkRC kpsoyz" style="display: inline-block; padding: 0px;" href="https://www.linkedin.com/company/smart-digital-solutions-per%C3%BA" target="_blank" rel="noopener"><img decoding="async" class="sc-bRBYWo ccSRck" display: block; title="Linkedin icon" src="https://smartds.com.pe/wp-content/uploads/2023/01/link.png" alt="Linkedin" width="27"></a></td>
<td width="8">
<div></div>
</td>
<td><a class="sc-hzDkRC kpsoyz" style="display: inline-block; padding: 0px;" href="https://smartds.com.pe/" target="_blank" rel="noopener"><img decoding="async" class="sc-bRBYWo ccSRck" display: block; title="Web icon" src="https://smartds.com.pe/wp-content/uploads/2023/01/WEB.png" alt="Web" width="27"></a></td>
<td width="0">
<div></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="0"></td>
</tr>
</tbody>
</table>
Cómo pasar una firma de HTML a Gmail o Outlook
Esta es la parte más sencilla, aquí es un copy and paste ( sí, sólo eso ) nos vamos a la herramienta donde editamos el código:
- Sombremos todo el diseño
- Presionas Ctrl+C o Clic Derecho->Copiar
- Ve a Gmail
- Abre el panel de Configuración y haz clic en Ver todos los ajutes
- Busca Firma de Correo en el apartado General
- Busca Firma en el apartado General
- Presiona Ctrl+V o Clic derecho->Pegar
- Ve hasta el final y presiona en Guardar cambios.
