Como escribir correos con HTML y CSS en Gmail

En algunas ocasiones queremos enviar correos mas formales publicitando algo o simplemente que el contenido del mensaje que queremos enviar sea vea más llamativo o simplemente diferente. ¿Te gustaría aprender a hacerlo? 🤔

En este caso te traigo la manera más sencilla de poder crear el contenido de tu mensaje en un correo con HTML y CSS, y además, a poder insertarlo y enviarlo de manera satisfactoria.

📝 El editor de código

Como probablemente el contenido de nuestro sitio web será sencillo o con una elaboración medianamente simple vamos a utilizar CodePen para poder ver los resultados del código que estamos escribiendo en tiempo real y rápido.

👀 Detalles a tener en cuenta

En este caso el CSS va a ir directamente incrustado en nuestro HTML, preferiblemente en línea con las etiquetas en lugar de en una etiqueta «<style>» global para que la compatibilidad con los posibles clientes de correo receptores esté más conseguida.

A continuación adjunto un ejemplo de lo que sería un fragmento de código con los estilos en línea:

<div class="container" style="background-color:#B1F8EE;width:fit-content;border-radius:10px;padding:15px">
  <h1 class="title" style="font-family:Arial">Hola! Encantado de saludarte 🤙</h1>
  <p class="description" style="font-family:Arial">Este sería el contenido de mi correo de prueba. Espero que te guste este pequeño y valioso tutorial.</p>
</div>

✉️ Añadiendo nuestro código a Gmail

Para continuar con esta parte lo único que necesitaremos será nuestro fragmento de código junto a las herramientas de desarrollador de nuestro navegador favorito. Los pasos a seguir serían los siguientes:

1. Accedemos a Gmail
2. Nos dirigimos al botón de redactar y en el campo de texto escribimos un texto orientativo, por ejemplo, «hola».
3. Click derecho sobre el texto e inspeccionamos elemento.
4. De nuevo click derecho sobre la palabra dentro del inspector y clicamos en «Editar HTML».
5. Por último solo tenemos que eliminar la palabra «hola» y pegar justo ahí todo nuestro código HTML.

¡Listo! 🤟🏼 Y con estos sencillos pasos ya lo único que te faltaría por hacer es enviar tu correo.

Espero que te haya resultado sencillo y útil esta manera tan sencilla de añadir contenido a tu correo con HTML y CSS. 😄