¿Alguna vez te has preguntado cómo se pueden enviar plantillas de correo electrónico coloridas y creativas? En este artículo, crearemos una plantilla de correo electrónico básica utilizando HTML y CSS. Estas plantillas de correo electrónico generalmente están diseñadas con fines de marketing y se distribuyen a través de campañas de correo electrónico.
El objetivo principal de enviar una plantilla de correo electrónico es alcanzar el número de Llamada a la acción (CTA). El diseño creativo de una plantilla de correo electrónico atrae a un cliente y puede obtener más CTA en la página de destino requerida.
Crear una plantilla de muestra
El envío de correos electrónicos de acuerdo con el esquema deseado puede ser un gran desafío. Esto se debe a que los diferentes navegadores poseen diferentes configuraciones y, por lo tanto, diferentes propiedades CSS principales. Por ejemplo, la propiedad «display: absolute» no funciona al enviar un correo electrónico a través de Gmail.
Del mismo modo, hay algunas otras precauciones que se deben tomar cuando se codifica una plantilla de correo electrónico. El primer y más importante paso para comenzar con las plantillas de correo electrónico es: se deben usar tablas HTML para construir la estructura básica de una plantilla de correo electrónico.
La creación de una tabla garantiza que el contenido enviado no se distorsione al reenviarlo o enviarlo mediante diferentes aplicaciones de correo electrónico.
Ejemplo: Para empezar
<!-- Create main outline within which email will be enclosed --> <body style="background-color:grey"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="550" bgcolor="white" style="border:2px solid black"> <tbody> <tr> <td align="center"> <br /> <table align="center" border="0" cellpadding="0" cellspacing="0" class="col-550" width="550"> <tbody> <!-- content goes here --> </tbody> </table> </td> </tr> </tbody> </table> </body>
Ahora, recuerde, las aplicaciones de correo electrónico solo admitirán el estilo en línea. Si especifica las propiedades en la etiqueta de estilo, la aplicación de correo electrónico no las tendrá en cuenta y no se aplicarán las propiedades especificadas.
Ejemplo:
<body style="background-color:grey"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="550" bgcolor="white" style="border:2px solid black"> <tbody> <tr> <td align="center"> <table align="center" border="0" cellpadding="0" cellspacing="0" class="col-550" width="550"> <tbody> <tr> <td align="center" style="background-color: #4cb96b; height: 50px;"> <a href="#" style="text-decoration: none;"> <p style="color:white;font-weight:bold;"> GeeksforGeeks </p> </a> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </body>
Se pueden crear más secciones utilizando las etiquetas < tr > y < td >. Ahora, ingresemos más información.
Ejemplo:
<!-- Complete Email template --> <body style="background-color:grey"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="550" bgcolor="white" style="border:2px solid black"> <tbody> <tr> <td align="center"> <table align="center" border="0" cellpadding="0" cellspacing="0" class="col-550" width="550"> <tbody> <tr> <td align="center" style="background-color: #4cb96b; height: 50px;"> <a href="#" style="text-decoration: none;"> <p style="color:white; font-weight:bold;"> GeeksforGeeks </p> </a> </td> </tr> </tbody> </table> </td> </tr> <tr style="height: 300px;"> <td align="center" style="border: none; border-bottom: 2px solid #4cb96b; padding-right: 20px;padding-left:20px"> <p style="font-weight: bolder;font-size: 42px; letter-spacing: 0.025em; color:black;"> Hello Geeks! <br> Check out our latest Blogs </p> </td> </tr> <tr style="display: inline-block;"> <td style="height: 150px; padding: 20px; border: none; border-bottom: 2px solid #361B0E; background-color: white;"> <h2 style="text-align: left; align-items: center;"> Design Patterns : A Must Skill to have for Software Developers in 2019 </h2> <p class="data" style="text-align: justify-all; align-items: center; font-size: 15px; padding-bottom: 12px;"> Design Patterns….??? I think you have heard this name before in programming… Yes, you might have heard this name before in programming if you are… </p> <p> <a href= "https://www.geeksforgeeks.org/design-patterns-a-must-skill-to-have-for-software-developers-in-2019/" style="text-decoration: none; color:black; border: 2px solid #4cb96b; padding: 10px 30px; font-weight: bold;"> Read More </a> </p> </td> </tr> </tbody> </table> </body>
Finalmente, puede agregar un pie de página que contenga enlaces de redes sociales, nombre de la empresa, información de contacto, etc.
Ejemplo:
<!-- Complete Email template --> <body style="background-color:grey"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="550" bgcolor="white" style="border:2px solid black"> <tbody> <tr> <td align="center"> <table align="center" border="0" cellpadding="0" cellspacing="0" class="col-550" width="550"> <tbody> <tr> <td align="center" style="background-color: #4cb96b; height: 50px;"> <a href="#" style="text-decoration: none;"> <p style="color:white; font-weight:bold;"> GeeksforGeeks </p> </a> </td> </tr> </tbody> </table> </td> </tr> <tr style="height: 300px;"> <td align="center" style="border: none; border-bottom: 2px solid #4cb96b; padding-right: 20px;padding-left:20px"> <p style="font-weight: bolder;font-size: 42px; letter-spacing: 0.025em; color:black;"> Hello Geeks! <br> Check out our latest Blogs </p> </td> </tr> <tr style="display: inline-block;"> <td style="height: 150px; padding: 20px; border: none; border-bottom: 2px solid #361B0E; background-color: white;"> <h2 style="text-align: left; align-items: center;"> Design Patterns : A Must Skill to have for Software Developers in 2019 </h2> <p class="data" style="text-align: justify-all; align-items: center; font-size: 15px; padding-bottom: 12px;"> Design Patterns….??? I think you have heard this name before in programming… Yes, you might have heard this name before in programming if you are… </p> <p> <a href= "https://www.geeksforgeeks.org/design-patterns-a-must-skill-to-have-for-software-developers-in-2019/" style="text-decoration: none; color:black; border: 2px solid #4cb96b; padding: 10px 30px; font-weight: bold;"> Read More </a> </p> </td> </tr> <tr style="border: none; background-color: #4cb96b; height: 40px; color:white; padding-bottom: 20px; text-align: center;"> <td height="40px" align="center"> <p style="color:white; line-height: 1.5em;"> GeeksforGeeks </p> <a href="#" style="border:none; text-decoration: none; padding: 5px;"> <img height="30" src= "https://extraaedgeresources.blob.core.windows.net/demo/salesdemo/EmailAttachments/icon-twitter_20190610074030.png" width="30" /> </a> <a href="#" style="border:none; text-decoration: none; padding: 5px;"> <img height="30" src= "https://extraaedgeresources.blob.core.windows.net/demo/salesdemo/EmailAttachments/icon-linkedin_20190610074015.png" width="30" /> </a> <a href="#" style="border:none; text-decoration: none; padding: 5px;"> <img height="20" src= "https://extraaedgeresources.blob.core.windows.net/demo/salesdemo/EmailAttachments/facebook-letter-logo_20190610100050.png" width="24" style="position: relative; padding-bottom: 5px;" /> </a> </td> </tr> <tr> <td style="font-family:'Open Sans', Arial, sans-serif; font-size:11px; line-height:18px; color:#999999;" valign="top" align="center"> <a href="#" target="_blank" style="color:#999999; text-decoration:underline;">PRIVACY STATEMENT</a> | <a href="#" target="_blank" style="color:#999999; text-decoration:underline;">TERMS OF SERVICE</a> | <a href="#" target="_blank" style="color:#999999; text-decoration:underline;">RETURNS</a><br> © 2012 GeeksforGeeks. All Rights Reserved.<br> If you do not wish to receive any further emails from us, please <a href="#" target="_blank" style="text-decoration:none; color:#999999;">unsubscribe</a> </td> </tr> </tbody></table></td> </tr> <tr> <td class="em_hide" style="line-height:1px; min-width:700px; background-color:#ffffff;"> <img alt="" src="images/spacer.gif" style="max-height:1px; min-height:1px; display:block; width:700px; min-width:700px;" width="700" border="0" height="1"> </td> </tr> </tbody> </table> </body>
Producción:
De esta manera, puede crear muchas plantillas hermosas. Si bien la codificación de correo electrónico con divs lo hace mucho más fácil y rápido, hay muchos problemas si codifica usando divs. Además, codificar la estructura usando tablas y filas de tablas es fácil y divertido.
Publicación traducida automáticamente
Artículo escrito por tanishkagupta1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA