Dentro de las herramientas existentes en posicionamiento de marca, la implementación de una firma digital personalizada dentro de la estructura de un correo y su uso recurrente en el ámbito profesional, empresarial, de negocios, académico y político permite trasladar los conceptos de branding al receptor del correo.
La firma digital nos permite instrumentalizar la comunicación de la marca dentro de los diferentes usos cotidianos que hacemos del correo electrónico, otorgando al usuario un referente de validez en su comunicación con el receptor del correo, del mismo modo esta herramienta permite su uso en marketing segmentado por usuario y su posición en los diferentes hitos del journey de compra utilizando metodologías de marketing.
La construcción de la firma digital se realizará mediante la implementación del preprocesador PUG
de HTML
el cual permitirá modularizar y aportar a HTML
de cualidades de lenguajes de programación. Para modificar el contenido del la firma digital haremos uso de las variables
, mixins
, includes
y extends
declaradas en el archivo template.pug
que permitirán extender los componentes contenidos. La siguiente guía mostrará como modificar el código de la firma digital.
:: Estructura de carpetas y archivos
Repository/
|
├── signing.html
├── README.md
└── templates/
|
├── head.pug
├── signing.pug
└── template.pug
-
Las imágenes contienen una dinámica de intercambio respondiendo a las dimensiones de la pantalla en la que se visualice, la imagen del usuario no deberá superar los
150x150px
y en una visualización mayor a600px
la podremos modificar en laLn 23, Col 128
del archivosigning.pug
detro de./templates/
, al cambiar la url en la propiedadbackground: url( ... );
del elemento<img>
que lo contiene. La imagen que se visualice en dimensiones de pantalla menor a600px
se modificaran en laLn 7, Col 1155
del archivohead.pug
detro de./templates/
, al cambiar la url en la propiedadbackground: url( ... );
de la clase.userimage{ ... }
que la contiene. -
La imagen de la compañía no deberá superar los
140x75px
y se modificara en laLn 31, Col 54
del archivosigning.pug
detro de./templates/
, al cambiar el atributosrc=' ... '
del elemento<img>
que la contiene. -
Las variables contendrán los
datos
yurl's
de imágenes que se pueden modificar con base en la siguiente estructura:
-var user = ["first name","[space]last name ","[space]surname", "position", "working area", "company legal name"]
-var contact = ["phone number(s)","email", "web site","address" ]
-var icon = ["phone__icon","email__icon","web site__icon","address__icon" ]
-var social = ["social__icon_1","social__icon_2", "social__icon_3","social__icon_4"]
-var terms = ["short_terms_of_service"]
- Una vez personalizado el contenido, compilaremos el archivo
HTML
ejecutando por consola la siguiente instrucción cada vez que el archivo cambie:
pug -w ./templates/signing.pug -o ./ -P
El archivo se creará en la raíz del repositorio con el nombre signing.html
y se podrá incrustar como firma digital desde diversos gestores de correo electrónico multiplataforma que permiten adjuntar una firma desde un archivo HTML
.
Si tiene una sugerencia que mejoraría esto, forkea
el repositorio y cree una solicitud de extracción. Cualquier contribución que hagas es muy apreciada.
-
Fork
al proyecto -
Cree una rama
feature
(git checkout -b feature/NewFeature
) -
Confirme sus cambios (
git commit -m 'Hola! agregue una nueva característica'
) -
Push
a la rama (git push origin feature/NewFeature
) -
Abrir un
Pull Request
.
Construido bajo la licencia MIT. Consulte LICENSE para obtener más información.
Your feedback 💚 is always appreciated!
@erwindevdesign