Plantillas de correo electrónico transaccional de código abierto

Cuando está configurando una nueva cuenta de SendGrid, crear un conjunto de plantillas de correo electrónico para su cuenta es una de las tareas más importantes que debe completar. Si planea enviar correo electrónico a través de nuestra API para su aplicación o servicio, lo más probable es que necesite varios tipos diferentes de plantillas de correo electrónico. Algunos de los más comunes son restablecimientos de contraseña, confirmaciones por correo electrónico y recibos.

Si bien hay una amplia selección de plantillas de correo electrónico prefabricadas en la web, no siempre es fácil encontrar un conjunto que sea fácil de personalizar para que coincida con su marca.

También es importante probar minuciosamente las plantillas en clientes de correo electrónico comunes. Este proceso puede llevar mucho tiempo y ralentizar el proceso de configuración de su cuenta SendGrid y comenzar a enviar correos electrónicos.

Me di cuenta de que el equipo de SendGrid podría brindar valor a nuestros clientes mediante la creación de un conjunto de plantillas de correo electrónico de código abierto que los usuarios podrían aprovechar para cubrir estos casos de uso común. Las plantillas no solo son fáciles de personalizar, ¡sino que estará listo y enviando rápidamente!

Nuestro conjunto de plantillas, que llamamos "Pegar", cubre 5 casos de uso:

• Restablecimientos de contraseña
• Confirmación de correo electrónico
• cartas de bienvenida
• Ingresos
• Resúmenes (diarios, semanales o mensuales)

Descarga las plantillas en GitHub

Para comenzar con nuestras plantillas Pegar, diríjase a GitHub y clone el repositorio o descargue la carpeta de plantillas Pegar. También vale la pena mencionar que estas plantillas se encuentran en un repositorio de código abierto de plantillas de correo electrónico al que otros usuarios de SendGrid ayudaron a contribuir durante nuestro último Hacktoberfest.

Personalización de las plantillas de pegado

Una vez que tenga una copia local de las plantillas Pegar, ábralas en su editor de código preferido (recomiendo VSCode o Atom; ambos son gratuitos).

Recomendaría comenzar con base.html ya que contiene la mayoría de los componentes reutilizables que se encuentran en muchas de las otras plantillas. Todas estas plantillas comparten una estructura común para el HTML y, aunque hay algunos estilos básicos en el documento, la mayoría de los estilos se encuentran en línea.

A medida que revisa el HTML, notará muchos comentarios HTML para indicar dónde comienzan y terminan los bloques. Estas son notas importantes que lo ayudarán a medida que explora las plantillas y comienza a modificarlas.

También notará estilos en elementos HTML para colores de fondo, tipografía, espaciado, etc. Lo animo a que experimente con ellos para tener una idea de cómo cambian la apariencia de estas plantillas.

Agrega tu logo a las plantillas

Una de las primeras cosas que querrá hacer es reemplazar el logotipo de Pegar plantillas por el suyo propio. Puede encontrar rápidamente el bloque del logotipo buscando su comentario HTML, indicando su lugar de inicio:

Dentro de este bloque, querrá ubicar la etiqueta de anclaje (<a> ) y cambiar el HREF a su URL. La plantilla debe estar vinculada a la página de inicio de SendGrid de forma predeterminada.

Después de ajustar la URL, reemplacemos el logotipo de Pegar por el tuyo. Recomendaría tener su logotipo almacenado en algún lugar al que pueda vincularse fácilmente, como su servidor web o un CDN. Una vez que haya reemplazado el logotipo src, ajuste los estilos en línea para que el ancho/alto sea correcto; esto dependerá de la relación de aspecto de su logotipo. De forma predeterminada, el logotipo de Pegar tiene un cuadrado de 48 px, por lo que hemos establecido los estilos de ancho en 48 px.

Ejemplo:

En este ejemplo, se hace referencia a la URL del logotipo Pegar junto con algunos estilos de ancho para configurarlo en el tamaño deseado de 48 px. Ajuste estos valores para su propio logotipo para asegurarse de que se vea nítido.

Personalización de colores de fondo

Como se mencionó anteriormente, el color de fondo se establece en una variedad de bloques para establecer el estilo predeterminado de las plantillas de pegado (grises y blancos). Puede cambiar esto fácilmente (y debería hacerlo) para que coincida con los colores de su marca.

La forma más fácil de saltar entre estos estilos es usar su editor para buscar los estilos en línea, el color de fondo y el color de fondo. El valor de estas propiedades se puede reemplazar con valores hexadecimales (p. ej., #000000) o nombres de colores (p. ej., negro). A medida que trabaja con estos cambios, es fácil controlar las cosas si abre una de las plantillas en su navegador preferido y actualiza a medida que realiza los cambios.

Ejemplo:

En este ejemplo, la etiqueta del cuerpo tiene un estilo con un color de fondo gris claro. Este valor de color y otros dentro de la plantilla deben personalizarse para que coincidan con su marca.

Personalización de botones

Los botones son uno de los componentes de interfaz más comunes en las plantillas de correo electrónico. Los usará como una llamada a la acción, destacando la acción más importante que desea que realice un usuario, como confirmar su dirección de correo electrónico.

De forma predeterminada, los botones de Pegar tienen el estilo de bloques azules con un radio de borde sutil para redondear las esquinas. Personalizar estos botones para que coincidan con su marca es similar a las modificaciones que ya hemos realizado en el color de fondo de nuestra plantilla. Busque el bloque usando el comentario HTML que hemos agregado para usted:

Tenemos varias celdas de tabla que tienen fondos blancos aplicados (#ffffff) para crear el bloque alrededor del botón, pero querrá encontrar la celda de tabla que tiene los siguientes estilos a continuación.

Ejemplo:

En este ejemplo, <td> tiene un bgcolor que se usa para establecer el color del botón, junto con un border-radius para redondear sutilmente las esquinas. Experimente con estos estilos para lograr una apariencia única para sus botones que coincida con su marca.

La segunda parte de nuestro botón es el ancla (<a> ) dentro de la celda de la tabla que se muestra arriba.

Este ancla controla la URL donde irá su botón cuando se haga clic, pero también los estilos de texto para la etiqueta. Puede ajustar los estilos para ajustar la etiqueta según sus preferencias y lo que coincida con su marca.

Personalización de la tipografía

De forma predeterminada, las plantillas Pegar se cargan en la fuente web, Source Sans Pro, a través de Google Fonts. Puede usar una fuente web diferente de la colección de Google o usar el conjunto estándar de fuentes que se encuentra en la mayoría de las computadoras en la actualidad (Arial, Georgia, Times, etc.).

Si planea usar una fuente web diferente, consulte mi publicación de consejos y trucos de desarrollo de correo electrónico para obtener algunos consejos útiles. Asegúrese de buscar en el HTML cualquier estilo en línea que haga referencia a la familia de fuentes y ajuste según sus preferencias.

Ejemplo:

En este ejemplo, <td> tiene un estilo de familia de fuentes configurado para usar Source Sans Pro, con algunas fuentes más estándar en caso de que la fuente web no se cargue.

Pensamientos finales

Espero que estos consejos lo ayuden a personalizar estas plantillas para que se ajusten a su marca y lo ayuden a utilizar la plataforma de SendGrid. En el futuro, espero expandir nuestro repositorio de plantillas de correo electrónico con más plantillas, pero también con una herramienta de creación que hará que el proceso de personalización sea mucho más rápido.

Si encuentra algún problema en el camino, envíe un problema en el repositorio de GitHub y, si desea contribuir, envíe una solicitud de extracción. ¿Buscas más plantillas para experimentar? Pruebe las plantillas de correo electrónico HTML receptivas gratuitas de SendGrid.