Maylen Cuevas
Robert Suarez
Quedo muy bacano.
Ana Milena Martínez Guerrero
Súper lindo 😊
Reto: Incluye los estilos al footer y comparte tu progreso en la sección de discusiones.
Maylen Cuevas
Robert Suarez
Quedo muy bacano.
Ana Milena Martínez Guerrero
Súper lindo 😊
Alejandro Lopez Ramírez
Así se ve mi plantilla
!Esquelto!Diseño
Martha Muñoz
Muy buen trabajo! :)
Vidalia Pedraza
Y el codigo? =(
Santiago Arismendy
Hola, en (font-family: xxx ) que fuentes puedo usar y cuales No puedo usar para que los clientes de correo funciones correctamente. Acabe de usar (font-family:Dejavu), al visualizar no genera errores pero al enviar por correo se cambia la fuente.
Mayra Lopez
Para que funcione las fuentes no comunes en otros navegadores y por ende en los correos ,debe estar instalada o ser llamada desde google fonts. Tu puedes usar cualquier fuente, ´si el ordenador no la encuentra, usa alguna por defecto.
Jorge Paiva
Eduardo Hidalgo Díaz Rugama
por defecto width y height como atributos usan pixeles.
Luis Lira
Cuando lo haces con estilos en línea siempre serán con con pixeles.
José Mauricio Osorio Corredor
Apunte:
Alejandro Lopez Ramírez

Daniel Augusto Melgarejo Gómez
Francisco Encabo Servián
¿Por qué el CTA es una imagen? ¿No se puede fabricar un botón?
Dani Ospina
Hola, 😄
la idea es que lo personalices y vaya en consonancia con la identidad de tu marca.
Francisco Encabo Servián
pues vaya idea, resulta que lo que da más problemas en los gestores de correo son los botones, algo que hubiera sido magnifico aprender en este curso. Pero nada, para eso ya están otros tutoriales ..... vaya.....
Juan Carlos Wilches Niño
en mi experiencia laboral siempre he tenido problemas con las fechas (24 de diciembre de 2019) y el texto que habla de una uRL como (++unejemplo.com++) y algunos dispositivos moviles y clientes de correo me los pinta de color azul y les agrega el estado de over. ¿Hay alguna manera para evitar que eso ocurra de manera predeterminda?
Anderson Víctoria Tejada
Hola, si estás haciendolo desde el codigo puedes colocarle una etiqueta de color al texto con el hipervinculo
Rubí Jiménez
¡Hola! Me ha gustado un montón el curso. Tengo una duda, ¿es buena práctica si al inicio del documento agrego los estilos con la etiqueta <style>? o es ¿mejor si lo hago directamente en html? Gracias :D :O
Martha Muñoz
Hola @rubijimenezmendoza, para la maquetación de emails la mejor práctica es manejar los estilos en línea con esto aseguras que el email se visualice correctamente en todos los clientes de correo. Con el uso de la etiqueta <style> se corre el riesgo que ese código sea ignorado por los preprocesadores de los clientes de correo, sobre todo por Gmail! Aquí puedes revisar la compatibilidad de la etiqueta <style>
Jeremy Bryan Icó Herrera
Angélica Echeverry
Pues lo hice exactamente a la profesora, y no se ve nada parecido. Lo hice de otro tema, repitiendo el video más de 20 veces y 2 veces el código, y no tienen nada de responsive mi resultado. Esperaba más explicación.
Sebastián Pascali Pasquale
funcionan mal los servidores no carga bien el video, queda pillado.
BEATA ALEKSIEJUK
Muchas gracias por el curso ! Aqui esta ejemplo del coreo ! https://github.com/beataaleksiejuk/Email
Luis Francisco Rascón Carrasco
Carlos Rodríguez
Wao, este curso es genial, he estado trabajando con css para web y no sabía la cantidad de trucos para los emails!
Anderson Víctoria Tejada
Aquí mi proyecto:
Y aquí el código:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=“http://www.w3.org/1999/xhtml”> <head> <meta charset="utf-8"> </head> <body style="margin 0 auto;"> <table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="dcdee2"> <!-- Header --> <tr> <td align="center" style="padding-top:20px; padding-bottom:20px;"><img src="Logo.png" alt="Harmony Logo" width="70" style="width: 70px height:auto; display: block"></img></td> </tr> <!-- Fin Header --> <!-- Contenido --> <tr> <td> <table width="100%" align="center" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="40514" height="50" align="center" style="padding-top:50px; padding-bottom:50px;"> <span style="color: white; font-size:19px; font-family:Montserrat">¡Hola, *Nombre*! Tenemos una oferta increible para ti.</span> </td> </tr> <tr> <!-- Contenido Destacado --> <td> <img src="Principalx2.jpg" alt="Imagen Principal" border="0" style="width:100%; height: auto; display:block;" ></img> </td> </tr> <!-- Fin Contenido Destacado --> <!-- Texto Principal --> <tr> <td align="center" height="50" style="padding-top:70px; padding-bottom:50px;" > <span style="color: #40514e; font-size:18px; font-family:Montserrat; font-weight:bold;"> 30% OFF en todos nuestros productos. ¿Te lo vas a perder? </span> </tr> <!-- Fin texto Principal --> <!-- Call to action -button --> <tr> <td align="center"> <img src="boton1.jpg" alt="Llevame a las ofertas" width="265px" style="width:260; height:auto; display:block; padding-top:40px; padding-bottom:60px;" ></img> </td> </tr> <!-- Fin call to action --> </table> </td> </tr> <!-- Fin Contenido --> <!-- Footer --> <tr> <td> <table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="7c8482"> <!-- Redes --> <tr> <td> <table width="100" align="center" cellpadding="0" cellspacing="0"> <tr align="center" > <td style="padding-top:30px; padding-bottom:10px;"><img src="facebook.png" alt ="Imagen Facebook" style="padding-right:10px;" ></img></td> <td style="padding-top:30px; padding-bottom:10px;"><img src="instagram.png" alt="Imagen Instagram" style="padding-left:10px;"></img></td> </tr> </table> </td> </tr> <!-- Fin redes --> <tr align="center"> <td style="padding-top:30px;padding-bottom:20px; color:#333033; font-family:Montserrat; font-size:18px; "> Enviado con ♥ por Harmony. </td> </tr> <tr align="center" > <td style="color: #333033; line-height:10px; font-family:Montserrat; font-size:10px; padding-top:20px; padding-bottom:20px;"> Te enviamos este contenido porque estas suscripto a nuestro boletín. <a href="#" >Puedes darte de baja aquí</a> </td> </tr> </table> </td> </tr> <!-- fin footer --> </table> </body> </html>
Me esta gustando muchisimo este curso :D
Así me quedo el email.
![](
Así es el codigo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> </head> <body style="margin:0 auto"> <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#1C3643"> <!--Header--> <tr> <td align="center" style="padding-top:20px;padding-bottom:20px;" > <a href="https://platzi.com/" target="_blank" border="0" style="text-decoration:none"> <img src="imagen/logo_platzi.png" alt="Escuela de formación Online" width="127" style="width:127;height:auto;display:block;"> </a> </td> </tr> <!--Fin header--> <!--contenido--> <tr> <td> <!--Contenido destacado--> <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#1C3643"> <tr> <td height="50" bgcolor="#172c36" style="font-family:Arial,sans-serif;font-size:18px;color: #ffffff; text-align:center"> Hola, *Nombre*</td> </tr> <tr> <td> <a href="https://platzi.com/clases/diseno-email/" target="_blank" border="0" style="text-decoration:none"> <img src="imagen/2x.jpg" alt="Nuevo curso de diseño y maquetación de emails" border="0" style="width:100%;height:auto;display:block;"> </a> </td> </tr> <tr> <td style="padding-top:30px; padding-bottom:20px; padding-left: 10px; padding-right: 10px; font-family: Arial, sans-serif; font-size: 25px; color: #ffffff; text-align: center; line-height:26px; "> Aprende cuáles son las herramientas necesarias y las buenas prácticas para ejecutar un email. </td> </tr> <tr> <td align="center" style="padding-top:20px;padding-bottom:20px;" > <a href="https://platzi.com/clases/diseno-email/" target="_blank" border="0" style="text-decoration:none"> <img src="imagen/CTA.PNG" alt="Quiero aprender ya" style="width:220px;height:auto;display:block;"> </a> </td> </tr> </table> <!--Fin contenido destacado--> </td> </tr> <!--Fin contenido--> <!--Footer--> <tr> <td> <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff"> <tr> <td> <table align="center" border="0" cellpadding="4" cellspacing="1" style="padding-top:20px;padding-bottom:20px;"> <!--Redes sociales--> <tr> <td> <a href="https://twitter.com/platzi" target="_blank" border="0" style="text-decoration:none"> <img src="imagen/TWT.png" alt="Twitter" style="width:48px;height:auto;display:block;"> </a> </td> <td> <a href="https://www.facebook.com/platzi/" target="_blank" border="0" style="text-decoration:none"> <img src="imagen/FB.png" alt="Facebook" style="width:48px;height:auto;display:block;"> </a> </td> <td> <a href="https://platzi.com/" target="_blank" border="0" style="text-decoration:none"> <img src="imagen/ENLACE.png" alt="Web" style="width:48px;height:auto;display:block;"> </a> </td> </tr> <!-- Fin Redes Sociales--> </table> </td> </tr> <!--Información de la marca--> <tr> <td style="padding-top:10px; padding-bottom:20px; padding-left: 10px; padding-right: 10px; font-family: Arial, sans-serif; font-size: 25px;text-align: center;"> Enviado con ♥ por Platzi </td> </tr> <!-- Fin Información de la marca--> <!--Legales--> <tr> <td style="padding-top:10px; padding-bottom:10px; padding-left: 10px; padding-right: 10px; font-family: Arial, sans-serif; font-size: 15px;text-align: center;"> Te enviamos este contenido porque haces parte de la comunidad Platzi. </td> </tr> <tr style="padding-top:10px; padding-bottom:30px; padding-left: 10px; padding-right: 10px; font-family: Arial, sans-serif; font-size: 15px;text-align: center;"> <td> Lamentamos que te vayas, pero puedes <a href="http://sendgrid.platzi.com/asm/unsubscribe/" target="_blank">darte de baja aquí.</a> </td> </tr> <!--Fin de legales--> </table> </td> </tr> <!--Fin footer--> </table> </body> </html>```
Uyyy, bueno es mi primera vez programando y realizando una campaña de email marketing, este email es de captación y cómo lead magnet estoy ofreciendo una asesoría gratuita ya sea online o presencial. El texto del contenido lo he dejado dentro de la imágen y no dentro del código, que opinas de esto??? Adjunto imagen y código!
<<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=“http://www.w3.org/1999/xhtml”> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> </head> <body style="margin: 0 auto;" <table width="100%" align="center" border="0" cellpadding= "0" cellspacing="0" bgcolor="#09205D" > <!-- Header --> <tr> <td align="center" style="padding-top: 20px;padding-bottom: 20px;"> <a href="https://workmate.com.co/" target="_blank" border= "0" style= "text-decoration: none"> <img src="images/workmate_logo.png" alt="workmate - su aliado tecnológico" > </a> </td> </tr> <!-- Fin Header --> <!-- Contenido --> <tr> <td> <Table width="100%" align="center" border="0" cellpadding= "0" cellspacing="0"> <tr> </a> <td height="50" bgcolor="#4A017D" style="font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #FFFFFF; text-align: center;">Hola, *Nombre* </td> </a> </tr> <tr> <td><img src="images/contenido_texto2x.jpg" alt="Obten una asesoría gratis" border= "0" style="width:100%; height:auto-display= block;"></td> </tr> <tr> <td> </tr> <tr> <td align="center" style="padding-top:20px;padding-bottom: 20px;"> <a href="https://workmatetechnology.youcanbook.me" target="_blank" border= "0" style= "text-decoration: none"> <img src="images/cta.png" alt="Agendar mi cita" width="220" style="width: 220px; height:auto; display:block;"> </td> </tr> </Table> </td> </tr> <!-- Fin contenido --> <!-- Footer --> <tr> <td> <Table width="100%" align="center" border="0" cellpadding="0" cellspacing="0"; bgcolor="#FFFFFF"> <tr> <td> <table align="center"; border="0"; cellpadding="4"; cellspacing="1"; style="padding-top: 20px;padding-bottom: 20px;"> <!--Redes sociales--> <tr> <td> <a href="http://bit.ly/Contacto_Workmate_Whatsapp" target="_blank" border= "0" style= "text-decoration: none"> <img src="images/wa_logo.png" alt="whatsapp" style=“width:40px;height:auto; display: block” > </td> <td> <a href="https://www.instagram.com/workmate.technology/" target="_blank" border= "0" style= "text-decoration: none"> <img src="images/ig_logo.png" alt="instagram" style=“width:40px;height:auto; display: block”> </td> <td> <a href="https://www.facebook.com/Workmate.Tec/" target="_blank" border= "0" style= "text-decoration: none"> <img src="images/fb_logo.png" alt="Facebook" style=“width:40px;height:auto; display: block”> </td> <td> <img src="images/yt_logo.png" alt="Youtube" style=“width:40px;height:auto; display: block”> </td> </tr> <!-- Fin Redes Sociales--> </table> </td> </tr> <!--Información de la marca--> <tr> <td style="padding-top:10px; padding-bottom:20px; padding-left: 10px; padding-right: 10px; font-family: Arial, sans-serif; font-size: 18px;text-align: center;"> Enviado por 🤝 Workmate Technology. </td> </tr> <!-- Fin Información de la marca--> <!--Legales--> <tr> <td style="padding-top:10px; padding-bottom:20px; padding-left: 10px; padding-right: 10px; font-family: Arial, sans-serif; font-size: 12px;text-align: center;">Te enviamos este mensaje por ser parte de nuestra lista de contactos. </td> </tr> <tr> <td style="padding-top:0px; padding-bottom:20px; padding-left: 10px; padding-right: 10px; font-family:Arial, Helvetica, sans-serif; font-size: 12px; text-align: center;"> si no deseas recibir estos mensajes...<a href="https://gmail.us20.list-manage.com/unsubscribe?u=78634ecb91280e4dfeecf73fc&id=39fc833e07">darte de baja</a> </td> </tr> <!--Fin de legales--> </Table> </td> </tr> <!-- Fin Footer --> </table> </body> </html> >
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> </head> <body style="margin: 0 auto;"> <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#1c3643"> <!-- Header --> <!-- Inicio Logo --> <tr> <td align="center" style="padding-top: 20px; padding-bottom: 20px;"> <a href="http://sgtnetworks.com" target="_blank" border="0" style="text-decoration: none;"> <img src="images/logo.png" width="127" style="width: 127px; height: auto; display:block;" alt="Sona Green Technologies - Lider en infraestructura Cisco"></a> </td> </tr> <!-- Fin Logo --> <!-- Fin Header --> <!-- Contenido --> <tr> <td > <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0"> <!-- Inicio Saludo --> <tr> <td height="20" bgcolor="#172c36" style="font-family: arial,sans-serif;font-size: 20px;color: #ffffff; text-align: center;">Hola, *Nombre*</td> </tr> <!-- Fin Saludo --> <!-- Inicio Imagen Destacado --> <tr> <td> <a href="https://www.cisco.com/c/m/en_us/solutions/enterprise-networks/solution-builder.html?oid=caten018587" target="a_blank" style="text-decoration: none;"> <img src="images/contenido.png" alt="¡Qué necesita su red?" border="0" style="width: 100%;height: auto;display: block;"> </a> </td> </tr> <!-- Fin Imagen Destacado --> <!-- Inicio Texto Destacado --> <tr> <td style="padding-bottom: 20px;padding-top: 30px;padding-left: 10px;padding-right: 10px; font-family: arial,sans-serif;font-size: 20px;line-height: 26px; color: #ffffff; text-align: center;">Responda dos preguntas y cree una solución que pueda ayudarlo a cumplirla</td> </tr> <!-- Fin Texto Destacado --> <!-- Inicio CTA --> <tr> <td align="center" style="padding-top: 20px; padding-bottom: 20px;"><a href="https://www.cisco.com/c/m/en_us/solutions/enterprise-networks/solution-builder.html?oid=caten018587" target="a_blank" border="0" width="220" style="text-decoration: none; width: 220px"> <img src="images/CTA.png" alt="Realizar test de examen de Red"> </a> </td> </tr> <!-- Fin CTA --> </table> </td> </tr> <!-- Fin Contenido --> <!-- Footer--> <tr> <td> <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff"> <!-- Inicio Redes Sociales --> <tr> <td> <table width="20%" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="padding-top: 10px; padding-bottom: 10px;"> <tr> <td><a href="https://www.facebook.com/Sona-Green-Tech-112390463449415/?view_public_for=112390463449415" target="a_blank" style="text-decoration: none;"><img src="images/face.png"></a></td> <td><a href="https://twitter.com/tw_sona" target="a_blank" style="text-decoration: none;"><img src="images/Twitter.png"></a></td> <td><a href="https://www.linkedin.com/company/sona-green-tech/about/?viewAsMember=true" target="a_blank" style="text-decoration: none;"><img src="images/Linkedin.png"></a></td> <td><a href="https://www.youtube.com/channel/UCR5fyMD7O4e4hLzL5CCUYHQ?disable_polymer=true" target="a_blank"><img src="images/Youtube.png"></a></td> </tr> </table> </td> </tr> <!-- Fin Redes Sociales --> <!-- Inicio Info Marca --> <tr> <td style="text-decoration: none;" align="center" style="padding-top: 20px; padding-bottom: 20px;"><img src="images/sona.png" alt="Enviado desde Sona Green Technologies"></td> </tr> <!-- Fin Info Marca --> <!-- Inicio Legal --> <tr> <td style="padding-bottom: 0px;padding-top: 0px;padding-left: 1px;padding-right: 0px; font-family: arial,sans-serif;font-size: 10px;line-height: 26px; color: black; text-align: center;">Te enviamos este contenido porque haces parte de los Clientes Premium de Sona. </td> </tr> <tr> <td style="padding-bottom: 0px;padding-top: 0px;padding-left: 1px;padding-right: 0px; font-family: arial,sans-serif;font-size: 10px;line-height: 26px; color: black; text-align: center;">Lamentamos que te vayas, pero puedes darte de baja <a style="text-decoration: none;" href="https://sona.us20.list-manage.com/unsubscribe?u=55135afb9cefa68f72742ad69&id=c009f6d09a&e=[UNIQID]&c=981799468b" target="a_blank"> aquí.</a></td> </tr> <!-- Fin Legal --> </table> </td> </tr> <!-- Footer--> </table> </body> </html>```