¿Qué son los Hooks en WordPress?
Cuando trabajamos en desarrollo web, particularmente dentro de WordPress, los «hooks» son una herramienta indispensable para poder trabajar de forma eficiente con este CMS. Pero,…
Como escribir correos con HTML y CSS en Gmail
27/10/2022
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:
- Accedemos a Gmail
- Nos dirigimos al botón de redactar y en el campo de texto escribimos un texto orientativo, por ejemplo, «hola».
- Click derecho sobre el texto e inspeccionamos elemento.
- De nuevo click derecho sobre la palabra dentro del inspector y clicamos en «Editar HTML».
- 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. 😄
