LinkedIn ● Instagram ● Twitter

Email Signature Easy - Vol.1

En este Snippts crearemos una Firma de Correo con logotipo y Nombre con la finalidad de dar una vista mas profesional a tu correo electrónico.

`Ventajas`

Puede copiar el código y pegar en el cliente de correo de su preferencia
No es una imagen, por lo cual no tiene peso al momento de visualizarlo tu contacto.
Facilidad para editar los campos.

`Desventajas`

Es necesario alojar la imagen de su logo en un servicio de terceros como: Google Drive, Dropbox, IMGUR o servidor propio.

Comenzamos 🚀

Copiamos el Codigo Signature
Creamos un nuevo archivo y lo guardamos como Signature.html
Modificamos el archivo signature.html (poner sus datos propios)

Explicando el Código

En esta sección se divide en 2 partes el código la primera parte damos un poco de estilos en generar a la tabla y agregamos una fuente.

La segunda parte del código tenemos la estructura de la firma en la cual podrás editar y sustituir el contenido de los campos (NOMBRE, PROFESION, TEL:, WHATSAPP, EMAIL, SKYPE, WEB.), por los datos que ustedes quieren mostrar en su firma.

Código Signature

<style>
body {
  @import url(https://fonts.googleapis.com/css2?family=Montserrat&display=swap);
}

table {
  border: none;
  width: auto;
  border-collapse: collapse;
}

td {
  text-align: left;
}
</style>
<table aling="left" border="0" cellspacing="0" cellspadding="0" border-collapse="collapse" ;>
<tr>
  <td valign="middle"
    style="padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 5px; border-top: 0; border-bottom: 0; border-left: 0; border-right: solid 3px #3c77ff;">
    <img id="preview-image-url" width="240"
      src="https://dl.dropboxusercontent.com/s/quu0vqgw9xw7ikb/logoDA-firm.png?dl=0">
  </td>

  <td style="padding-top: 0; padding-bottom: 0; padding-left: 10px; padding-right: 0px;">
    <table aling="left" border="0" cellspacing="0" cellspadding="0" border-collapse="collapse" ;>
      <tr>
        <td colspan="0"
          style="padding-bottom: 0px; color: #3c77ff; font-size: 34px; font-family: 'Montserrat', sans-serif;">
          <strong>David</strong>&nbsp;Aguilera &nbsp;&nbsp;
        </td>
      </tr>

      <tr>
        <td colspan="2"
          style="padding-bottom: 0px; color: #1e2940; font-size: 18px;  font-family: 'Montserrat', sans-serif;">
          <strong>Front-End Developer | Consultor TI</strong>
        </td>
      </tr>

      <tr>
        <td valign="top"
          style="vertical-align: top; color: #4C494D; font-size: 14px; font-weight: 400; font-family: 'Montserrat', sans-serif;">
          <span style="color: #3c77ff;">Tel:</span>&nbsp;123 456 7890&nbsp;&nbsp;&nbsp;&nbsp;<span
            style="color: #3c77ff;">WhatsApp:&nbsp;</span>098 765 4321
        </td>
      </tr>

      <tr>
        <td valign="top"
          style="vertical-align: top; color: #4C494D; font-size: 14px; font-weight: 400; font-family: 'Montserrat', sans-serif;">
          <span style="color: #3c77ff;">Email:&nbsp;</span><a href="mailto:[email protected]"
            style="color: #4C494D; text-decoration: none; font-size: 15px;">[email protected]</a>
          <span style="color: #3c77ff;">&nbsp;Skype:&nbsp;</span><a href="https://join.skype.com/invite/z3DJHhQvkWeD"
            style="color: #4C494D; text-decoration: none; font-siza: 15px;">davermx</a>
        </td>
      </tr>

      <tr>
        <td colspan="3"
          style="padding-top: 0px; color: #3F51B5; font-size: 14px; font-weight: 400; font-family: 'Montserrat', sans-serif;">
          <span style="color: #3c77ff;">Web</span>:&nbsp;<a href="https://daguilera.com.mx/"
            style=" color: #4C494D; text-decoration: none; font-size: 15px;">https://daguilera.com.mx</a>
        </td>
      </tr>
    </table>
  </td>
</tr>
</table>

Clic para ver los campos a modificar

Cada campo esta explicado en 2 partes:

La primera es la vista como debe de quedar el contenido del campo.
La segunda sección es el código que se va a modificar. importante solo modificar exactamente el contenido del campo (Ejem: Nombre, Profesion, Tel:, Whatsapp, Email, Skype, Web.)

David Aguilera

<strong>David</strong>&nbsp; Aguilera &nbsp;&nbsp;

Front-End Developer | Consultor TI

<strong>Front-End Developer | Consultor TI</strong>

Tel: 123 456 789

&nbsp;123 456 7890 &nbsp;&nbsp;&nbsp;&nbsp;

WhatsApp: 098 765 4321

WhatsApp:&nbsp;</span>098 765 4321

Email: [email protected]

<a href="mailto:[email protected]" style="color: #4C494D; text-decoration: none; font-size: 15px;">[email protected]</a>

* Aquí se modifica 2 veces la dirección de correo: 
1.- en mailto:
2.- en [email protected]

Skype: Davermx

<a href="https://join.skype.com/invite/z3DJHhQvkWeD" style="color: #4C494D; text-decoration: none; font-siza: 15px;">davermx</a>

Web: https://daguilera.com.mx

<a href="https://daguilera.com.mx/" style=" color: #4C494D; text-decoration: none; font-size: 15px;">https://daguilera.com.mx</a>

* Aquí se modifica 2 veces la dirección web.
1.- en href=""
2.- en https://

Copiar la Firma a tu Cliente de Correo

Una vez terminado de modificar el archivo Signature.html realizamos los siguientes pasos

Abrir el archivo Signature.html en su navegador
se debe de ver algo asi. ( con los nuevos datos )

seleccionamos toda la firma y la copiamos
abren su cliente de correo y buscan la seccion de firma.
pegamos la firma y guardamos.

Creamos un nuevo correo y se visualizara lo siguiente:

Vista Previa 🔎

Listo!!! Ahora cuentas con un correo profesional de verdad.

Si te sirvió, picale a Stars, también puedes darle Fork o mandame un tuit y dime como podemos mejorarlo. ✌️

Davermx/Email Signature Vol.1.md