Contenido del curso
José Luis Segura Combariza
Giuseppe Ramirez
Juan Pablo Grover Pinto
Hugo Martinez Moreno
Henry Eduardo Hilario Rojas
Aarón González
Aarón González
Rolando Ceballos
Cesar Eduardo Velazco Medel
Cesar Eduardo Velazco Medel
David Aguilera
Jorge Isaac Vasquez Sanchez
Martha Muñoz
Valeria Montiel
David Aguilera
Henry David Castillo Montoya
Martha Muñoz
Manuel Vidaurre
Henry David Castillo Montoya
Martha Muñoz
Jose Antonio Pinto Gimeno
Jose Antonio Pinto Gimeno
Henry Eduardo Hilario Rojas
Henry Giovanny Guzmán Ordoñez
Karen Gómez
Valeria Montiel
Marcos Alvarado
¿Cuál es la diferencia o el impacto que genero hacerlo en HTML o usando solo templates regulares?
Hola, José Luis. En HTML puedes usar etiquetas semánticas, con los templates tendrías que ver como están construidos por dentro. :D
Hola como estan espero que bien saben tengo el siguiiente problema, hice un mail de bienvenida pero me sale mas visualizado en hotmail (outlook ) y en el programa outlook 2016, pero en gmail no que es lo que hice mal agradecere que me lo digan gracias le dejo el codigo
Gracias
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--[if !mso]><!--> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!--<![endif]--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> /* @import url('https://fonts.googleapis.com/css?family=Lato'); */ @media screen and (max-width: 480px) { .two-column .column, .three-column .column { max-width: 100% !important; } .two-column img { max-width: 100% !important; } .three-column img { max-width: 50% !important; } *[class="hide"] {display:none !important;} *[class="txt-mobile"] {font-size:18px !important; line-height:125% !important; padding-right:20px !important; padding-left:20px !important; } } @media screen and (min-width: 481px) and (max-width: 640px) { .three-column .column { max-width: 33% !important; } .two-column .column { max-width: 50% !important; } } </style> <!--[if (gte mso 9)|(IE)]> <style type="text/css"> table {border-collapse: collapse !important;} </style> <![endif]--> </head> <body style="margin: 0 auto;"> <!--inicio de la tabla principal--> <table align="center" width="100%" bgcolor="#ffffff" style="max-width:600px;" border="0" cellspacing="0" cellpadding="0" > <tr> <!--inicio head--> <td align="center" style="padding-top:20px;padding-right:0;padding-bottom:20px;padding-left:0;" > <a href="http://www.recargasatodocolor.cl" target="_blank" border="0" style="text-decoration: none;" > <img src="https://www.recargasatodocolor.cl/img_mb/Banner_head.png" alt = "Tiemda de recarga de tintas en Puerto Montt" width="600" border="0" style="max-width: 600px; height: auto; display:block;" > </a> </td> </tr> <!--fin head--> <tr> <!--inicio Usuario--> <td align="center" width="100%" height="50px" bgcolor="#f0f3f4" style="padding-top: 5px; padding-left: 0; padding-right: 0; padding-bottom: 5px; font-family: Arial, sans-serif; font-size:20px; line-height: 20px; color:#000000; text-align: center;"> Usuario </td> </tr> <!--fin usuario--> <tr> <!--inicio Cont_princ--> <td align="center" style="padding-left: 0; padding-right: 0; padding-top: 5px; padding-top: 5px; "> <a href="https://www.recargasatodocolor.cl" target="_blank" border="0" style="text-decoration: none"> <img src="https://www.recargasatodocolor.cl/img_mb/ctd_principal.gif" alt=" -Recargasa todo color - " width="100%" border="0" style="max-width: 600px; height: auto; display: block"> </a> </td> </tr> <!--Fin cont_princ--> <tr> <td class="three-column" style="padding-top:10px;padding-right:0;padding-bottom:10px;padding-left:0;text-align:center;font-size:0;" > <!--[if (gte mso 9)|(IE)]> <table width="100%" style="border-spacing:0;" > <tr> <td width="200" valign="top" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" > <![endif]--> <!-- columna izquierda --> <table class="column" width="100%" style="max-width:200px;display:inline-block;" valign="top" border="0" cellspacing="0" cellpadding="0" > <!-- img 1--> <tr> <td align="center" style="padding-left: 5px; padding-right: 5px; padding-top: 10px; padding-top: 10px; "> <a href="https://www.recargasatodocolor.cl" target="_blank" border="0" style="text-decoration: none"> <img src="https://www.recargasatodocolor.cl/img_mb/cont_seg1.png" alt=" -Recargasa todo color - " width="190" border="0" style="width: 190; max-width: 190px; height: auto;"> </a> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td><td width="200" valign="top" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" > <![endif]--> <!-- columna centro --> <table class="column" width="100%" style="max-width:200px;display:inline-block;" valign="top" border="0" cellspacing="0" cellpadding="0" > <tr> <td align="center" style="padding-left: 5px; padding-right: 5px; padding-top: 10px; padding-top: 10px; "> <a href="https://www.recargasatodocolor.cl" target="_blank" border="0" style="text-decoration: none"> <img src="https://www.recargasatodocolor.cl/img_mb/cont_segun2.png" alt=" -Recargasa todo color - " width="190" border="0" style="width: 190; max-width: 190px; height: auto;"> </a> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td><td width="200" valign="top" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" > <![endif]--> <!-- columna centro --> <table class="column" width="100%" style="max-width:200px;display:inline-block;" valign="top" border="0" cellspacing="0" cellpadding="0" > <!-- mg 3--> <tr> <td align="center" style="padding-left: 5px; padding-right: 5px; padding-top: 10px; padding-top: 10px; "> <a href="https://www.recargasatodocolor.cl" target="_blank" border="0" style="text-decoration: none"> <img src="https://www.recargasatodocolor.cl/img_mb/cont_segun3.png" alt=" -Recargasa todo color - " width="190" border="0" style="width: 190; max-width: 190px; height: auto;"> </a> </td> </tr> <!-- fin img 3--> </table> </td> </tr> <!--Fin COnt_seg--> <!--inicio footer--> <tr> <td> <table align="center" width="100%" style="max-width:600px;;text-align:center;" border="0" cellspacing="0" cellpadding="0"> <tr> <!--inicio Siguenos--> <td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;font-family:Arial,sans-serif;color:#000000;font-size:20px;text-align:center;"> <p> Siguenos</p> </td> <!--fin siguenos--> </tr> <tr> <!--inicio RRSS--> <td align="center" bgcolor="#ffffff" style="padding-top:5px;padding-right:0;padding-bottom:5px;padding-left:0;" > <table width="100%" align="center" bgcolor="#ffffff" style="width:100%;max-width:300px;" valign="top" border="0" cellspacing="0" cellpadding="0"> <tr> <td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" > <!-- redes sociales --> <table align="center" width="100%" style="max-width:200px;;text-align:center;" border="0" cellspacing="0" cellpadding="0"> <tr> <td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;" > <a href="https://www.facebook.com/A-todo-color-recargas-309078506363458/" target="_blank" border="0" style="text-decoration:none;" > <img src="http://www.recargasatodocolor.cl/img_mb/ico_face.png" width="50" alt="Facebook" border="0" style="width:100%;max-width:50px;height:auto;" /> </a> </td> </tr> </table> </td> <!--fin face--> <!--inicio twitter--> <td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" > <!-- redes sociales --> <table align="center" width="100%" style="max-width:200px;;text-align:center;" border="0" cellspacing="0" cellpadding="0"> <tr> <td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;" > <a href="https://twitter.com/recargasatodoc1"target="_blank" border="0" style="text-decoration:none;" > <img src="http://www.recargasatodocolor.cl/img_mb/ico_twitter.png" width="50" alt="Facebook" border="0" style="width:100%;max-width:50px;height:auto;" /> </a> </td> </tr> </table> </td> <!--fin twitter--> <!--inicio Instagram--> <td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" > <!-- redes sociales --> <table align="center" width="100%" style="max-width:200px;;text-align:center;" border="0" cellspacing="0" cellpadding="0"> <tr> <td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;" > <a href="https://www.instagram.com/recargasatodocolor/"target="_blank" border="0" style="text-decoration:none;" > <img src="http://www.recargasatodocolor.cl/img_mb/ico_insta.png" width="50" alt="Facebook" border="0" style="width:100%;max-width:50px;height:auto;" /> </a> </td> </tr> </table> </td> <!--Fin Instagram--> </tr> </table> </td> </tr> <!--Fin RSRS--> <!--inicio aspecto legal--> <tr> <td align="center" style="padding-top:20px;padding-right:10px;padding-bottom:0;padding-left:10px;font-family:Arial,sans-serif;color:#1c3643;font-size:14px;text-align:center;">> <p style=" color: black; font-size: 12px;"> Servicio de envio de correo Publicitario por <a href="http://www.mounkey.cl">Mounkey EIRL </a><br /> Sino desea usted recibir mas mail promocionales o publicitario por favor haga <a href="mailto:mailing@mounkey.cl">click aqui</a> con el asunto "No deseo mas Mail ". </p> </td> </tr> <!--Fin aspecto legal--> </table> </td> </tr> </table> <!--Fin de la tabla principal--> </body> </html>
Para que las imágenes se vean correctamente[actualmente están en mi ordenador o local] tendría que tener un server donde alojar las mismas, caso contrario obtendré un error, alguna solución tipo google drive?
Hola, una consulta, como hago para que se vean mis imágenes en la prueba de envío, llega bien los correos pero no están las imagenes, Saludos
🤔 ¿Nos pueden compartir una imagen de tu código para poder guiarte de forma más precisa?
🤔 ¿Nos pueden compartir una imagen de tu código para poder guiarte de forma más precisa?
Tuve un problema, en Gmail los textos no aparecen (en outlook se ve genial) y no esconde las imagenes de los blogs en la parte inferior. alguien sabe si hay una forma de mostrar los textos?
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Lato&display=swap'); @media screen and (max-width: 480px) { .two-column .column, .three-column .column { max-width: 100% !important; } .two-column img { max-width: 100% !important; } .three-column img { max-width: 50% !important; } *[class="hide"] { display: none !important; } *[class="txt-mobile"] { font-size: 18px !important; line-height: 125% !important; } } @media screen and (min-width: 481px) and (max-width: 640px) { .three-column .column { max-width: 33% !important; } .two-column .column { max-width: 50% !important; } } </style> </head> <body style="margin:0 auto;"> <!-- Outlook 2017 + (mso) Outlook 2000, 2002 y2003 (IE) Todas las versiones (gte mso 9) | (IE) --> <!-- [if (version outlook)] <style type="text/css"> <! [enif]--> <!-- [if (gte mso 9) | (IE)] <style type="text/css"> table {border-collapse !important;} <style> <! [enif]--> <table align="center" width="100%" bgcolor="#ffffff" style="max-width:600px" border="0" cellspacing="0" cellpadding="0"> <!-- Header --> <tr> <!-- logo --> <td align="center" style="padding-top:20px;padding-right:0;padding-bottom:20px;padding-left:0;"> <a href="https:platzi.com/" target="_blank" border="0" style="text-decoration:none;"> <img src="https://static.platzi.com/media/public/uploads/logo-platzi_0db3106c-686e-42d0-a25d-50b7e324d495.png" alt="Platzi - Escuela online de formacion en tecnología" width="127" style="max-width:127px;height:auto;display:block;"> </a> </td> <!-- logo --> </tr> <!-- Fin Header --> <!-- Contenido --> <tr> <!-- Imagen Destacada --> <td align="center" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;"> <a href="https://platzi.com/cursos/diseno-email/" target="_blank" border="0" style="text-decoration:none;"> <img src="https://static.platzi.com/media/public/uploads/curso-email-html-2x_ddac7c12-7820-4440-8531-b13fea5814a5.jpg" alt="NUEVO curso de diseño y maquetación de Emails" border="0" width="100%" style="max-width:600px;height:auto;display:block;"> </a> </td> </tr> <tr> <!-- 2 columnas --> <td class="two-column" align="center" style="padding-top:20px;padding-right:0;padding-bottom:0;padding-left:0;text-align:center;font-size:0;"> <!-- columna Iquierda --> <table class="column" width="100%" style="max-width:300px;display:inline-block" valign="top" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="padding-top:10px;padding-right:10;padding-bottom:10px;padding-left:10px;"> <!-- curso 1 --> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <!-- curso 1 imagen --> <td style="padding-top:0; padding-right:0;padding-bottom:0;padding-left:0;"> <a href="https://platsi.com/cursos/email-marketing/" target="_blank" border="0" style="text-decoration:none;"> <img src="https://static.platzi.com/media/public/uploads/curso-marketing_a500ec4f-86f3-4833-9ec1-7e62b7739794.jpg" alt="Curso de Email Marketing" width="100%" border="0" style="max-width:280px;height:auto;"> </a> </td> </tr> <tr> <td height="60" style="height:60px; padding-top:10px;padding-right:0;padding-bottom:10px; padding-left:10px;font-size:16px;font-family:'Lato';Arial,sans-serif;line-height:20px;text-align:left"> <b>Curso de Email Marketing,</b> aprende a potenciar las campañas de tu empresa y fidelizar a tus clientes. </td> </tr> <tr> <td height="30" style="height:30px; padding-top:10px;padding-right:10px;padding-bottom:10px; padding-left:10px;background-color:#98ca3f;font-size:18px;font-family:Arial,sans-serif;color:#ffffff;border-radius:6px"> <a href="https://platsi.com/cursos/email-marketing/" target="_blank" border="0" style="text-decoration:none;font-size:18px;font-family:'Lato';Arial,sans-serif;color:#ffffff;"> Estudiar ahora </a> </td> </tr> </table> </td> </tr> </table> <table class="column" width="100%" style="max-width:300px;display:inline-block" valign="top" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="padding-top:10px;padding-right:10;padding-bottom:10px;padding-left:10px;"> <!-- curso 2 --> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <!-- curso 2 imagen --> <td style="padding-top:0; padding-right:0;padding-bottom:0;padding-left:0;"> <a href="https://platsi.com/cursos/email-marketing/" target="_blank" border="0" style="text-decoration:none;"> <img src="https://static.platzi.com/media/public/uploads/curso-analytics_03a867ae-5291-4b37-a525-ad3d0af6ad35.jpg" alt="Curso de Email Marketing" width="100%" border="0" style="max-width:280px;height:auto;"> </a> </td> </tr> <tr> <td height="60" style="height:60px; padding-top:10px;padding-right:0;padding-bottom:10px; padding-left:10px;font-size:16px;font-family:'Lato';Arial,sans-serif;line-height:20px;text-align:left"> <b>Curso Profesional de Google Analytics,</b> aprende cómo analizar y medir el desempeño de tu sitio web. </td> </tr> <tr> <td height="30" style="height:30px; padding-top:10px;padding-right:10px;padding-bottom:10px; padding-left:10px;background-color:#98ca3f;font-size:18px;font-family:Arial,sans-serif;color:#ffffff;border-radius:6px"> <a href="https://platsi.com/cursos/email-marketing/" target="_blank" border="0" style="text-decoration:none;font-size:18px;font-family:'Lato';Arial,sans-serif;color:#ffffff;"> Estudiar ahora </a> </td> </tr> </table> </td> </tr> </table> </td> <!-- fin 2 columnas --> </tr> <tr> <!-- 3 columnas --> <td class="three-column" style="padding-top:10px;padding-right:0;padding-bottom:40px;padding-left:0;text-align:center;font-size:0;"> <!-- [if (gte mso 9) | (IE)] <style type="text/css"> table {width="100%"} style="border-spacing:0;" <tr> <td width="200" valign="top" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;"> <style> <! [enif]--> <!-- columna Isquierda --> <table class="column" width="100%" style="max-width:200px;display:inline-block;" valign="top" border="0" cellspacing="0" cellpadding="0"> <tr> <td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;"> <!-- Blog 1 --> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <!-- blob 1 - image --> <td class="hide" style="height:40px; padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;font-size:16px;font-family:'Lato';Arial,sans-serif;color:#0a8ecd;line-height:0;"> <a href="https://platsi.com/blog/herramientas-gratuitas-el-crecimiento-de-mi-emprendimiento/" target="_blank" border="0" style="text-decoration:none;"></a> <img src="https://static.platzi.com/media/public/uploads/blog1_49cc3058-049e-48fb-9631-e6626838239e.jpg" alt="Siete herramientas gratuitas para impulsar tu emprendimiento." border="0" width="180" style="max-width:180px;height:auto;"> </a> </td> <!-- blob 1 - image --> </tr> <tr> <!-- blob 1 - Texto --> <td class="txt-mobile" hight="40" style="height: 40px; padding-top:10px;padding-right:0;padding-bottom:10px;padding-left:0;font-size:16px;font-family:'Lato';Arial,sans-serif;line-height:18px;"> Siete herramientas gratuitas para impulsar tu emprendimiento. </td> <!-- blob 1 - Texto --> </tr> <tr> <!-- blob 1 - CTA --> <td class="txt-mobile" hight="20" style="height:20px; padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;font-size:16px;font-family:'Lato';Arial,sans-serif;color:#0a8ecd;line-height:0;"> <a href=" https://platsi.com/blog/herramientas-gratuitas-el-crecimiento-de-mi-emprendimiento/" target="_blank " border="0 " style="text-decoration:none;font-size:16px;font-family:Arial,sans-serif;color:#0a8ecd;line-height:0;"> Leer más </a> </td> <!-- blob 1 - CTA --> </tr> </table> </td> </tr> </table> <!-- [if (gte mso 9) | (IE)] <style type="text/css"> </td><td width="200" valign="top" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;"> <style> <! [enif]--> <!-- Columna del Centro --> <table class="column" width="100%" style="max-width:200px;display:inline-block;" valign="top" border="0" cellspacing="0" cellpadding="0"> <tr> <td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;"> <!-- Blog 2 --> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <!-- blob 2 - image --> <td class="hide" style="height:40px; padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;font-size:16px;font-family:'Lato';Arial,sans-serif;color:#0a8ecd;line-height:0;"> <a href="https://platsi.com/blog/herramientas-gratuitas-el-crecimiento-de-mi-emprendimiento/" target="_blank" border="0" style="text-decoration:none;"></a> <img src="https://static.platzi.com/media/public/uploads/blog2_ebe7dccd-3054-4810-b147-b1d9a0b3b686.jpg" alt="Siete herramientas gratuitas para impulsar tu emprendimiento." border="0" width="180" style="max-width:180px;height:auto;"> </a> </td> <!-- blob 2 - image --> </tr> <tr> <!-- blob 2 - Texto --> <td class="txt-mobile" hight="40" style="height: 40px; padding-top:10px;padding-right:0;padding-bottom:10px;padding-left:0;font-size:16px;font-family:'Lato';Arial,sans-serif;line-height:18px;"> Siete herramientas gratuitas para impulsar tu emprendimiento. </td> <!-- blob 2 - Texto --> </tr> <tr> <!-- blob 2 - CTA --> <td class="txt-mobile" hight="20" style="height:20px; padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;font-size:16px;font-family:'Lato';Arial,sans-serif;color:#0a8ecd;line-height:0;"> <a href=" https://platsi.com/blog/herramientas-gratuitas-el-crecimiento-de-mi-emprendimiento/" target="_blank " border="0 " style="text-decoration:none;font-size:16px;font-family:Arial,sans-serif;color:#0a8ecd;line-height:0;"> Leer más </a> </td> <!-- blob 2 - CTA --> </tr> </table> </td> </tr> </table> <!-- [if (gte mso 9) | (IE)] <style type="text/css"> </td><td width="200" valign="top" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;"> <style> <! [enif]--> <!-- Columna derecha --> <table class="column" width="100%" style="max-width:200px;display:inline-block;" valign="top" border="0" cellspacing="0" cellpadding="0"> <tr> <td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;"> <!-- Blog 3 --> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <!-- blob 3 - image --> <td class="hide" style="height:40px; padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;font-size:16px;font-family:'Lato';Arial,sans-serif;color:#0a8ecd;line-height:0;"> <a href="https://platsi.com/blog/herramientas-gratuitas-el-crecimiento-de-mi-emprendimiento/" target="_blank" border="0" style="text-decoration:none;"></a> <img src="https://static.platzi.com/media/public/uploads/blog3_06e1260a-bcec-4162-9d58-fdae640354f7.jpg" alt="Siete herramientas gratuitas para impulsar tu emprendimiento." border="0" width="180" style="max-width:180px;height:auto;"> </a> </td> <!-- blob 3 - image --> </tr> <tr> <!-- blob 3 - Texto --> <td class="txt-mobile" hight="40" style="height: 40px; padding-top:10px;padding-right:0;padding-bottom:10px;padding-left:0;font-size:16px;font-family:'Lato';Arial,sans-serif;line-height:18px;"> Siete herramientas gratuitas para impulsar tu emprendimiento. </td> <!-- blob 3 - Texto --> </tr> <tr> <!-- blob 3 - CTA --> <td class="txt-mobile" hight="20" style="height:20px; padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;font-size:16px;font-family:'Lato';Arial,sans-serif;color:#0a8ecd;line-height:0;"> <a href="https://platsi.com/blog/herramientas-gratuitas-el-crecimiento-de-mi-emprendimiento/" target="_blank " border="0 " style="text-decoration:none;font-size:16px;font-family:Arial,sans-serif;color:#0a8ecd;line-height:0;"> Leer más </a> </td> <!-- blob 3 - CTA --> </tr> </table> <!-- [if (gte mso 9) | (IE)] <style type="text/css"> </td> </tr> </tabele> <style> <! [enif]--> </td> <!-- Fin 3 columnas --> </tr> </table> <!-- Fin de del contenido segundario --> <!-- Footer --> <tr> <td> <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#e6e6e6"> <!-- Redes --> <tr> <td> <table align="center" border="0" cellpadding="5" cellspacing="1" Style="padding-top:20px;padding-bottom:10px;"> <tr> <td> <a href="https://www.facebook.com/platzi/" target="_blank" border="0" style="text-decoration:none;"> <img src="https://static.platzi.com/media/public/uploads/ic-facebook_986a12f8-59b5-413e-963f-11f68e3112c4.png" alt="Visista nuestro Facebook"> </a> </td> <td> <a href="https://twitter.com/PlatziTeam" target="_blank" border="0" style="text-decoration:none;"> <img src="https://static.platzi.com/media/public/uploads/ic-twitter_0738c3a6-7538-4bb3-b3f1-f5ee65680d83.png" alt="Visita nuestro Twitter"> </a> </td> <td> <a href="https://www.instagram.com/platzi/" target="_blank" border="0" style="text-decoration:none;"> <img src="https://static.platzi.com/media/public/uploads/ic-instagram_c42ce7fd-46a3-4305-ac8c-34d1d74c7452.png" alt="Visita nuestro Instagram"> </a> </td> <td> <a href="https://www.youtube.com/channel/UC55-mxUj5Nj3niXFReG44OQ" target="_blank" border="0" style="text-decoration:none;"> <img src="https://static.platzi.com/media/public/uploads/ic-youtube_1ceba32d-f951-4a60-953d-350379302e0e.png" alt="Visita nuestro canal de Youtube"> </a> </td> </tr> </table> </td> </tr> <tr> <td style="padding-top:20px;padding-left:10px;padding-right:10px;font-family:Arial,sans-serif;font-size:16px;line-height:26px;color:#000000;text-align:center ">Enviado con <span style="color:#3edf53; ">♥</span> por Platzi</td> </tr> <tr> <td style="padding-top:10px;padding-bottom:20px;padding-left:10px;padding-right:10px;font-family:Arial,sans-serif;font-size:12px;line-height:26px;color:#000000;text-align:center ">Te enviamos este contendio porque estas suscrito a nuestro boletín</td> </tr> </table> </td> </tr> </td> </tr> </table> <!-- Fin Footer --> </body> </html>```
Te recomiendo que todo tu css lo pongas inline, por que algunos servicios de correo no leen de manera correcta lo que se encuentra en la etiqueta <style>; ademas tienes un error de dedo en dicha etiqueta cuando la inicias; tienes <styletype="text/css"> (debería ser <style type="text/css">), ese espacio que falta podría generarte un problema...
Veo que justo ese espacio te falta en todas las etiquetas donde incrustaste estilos...
Compañeros tengo ciertas dudas, mi archivo funciona bien en todos los clientes de correo solo en outlook 2016 no funciona las 2 columnas, se dividen una abajo de otra en tamaña desktop. los botones ocupan todo el ancho.
Y ahora veo el archivo responsive.html tiene codigo que no se explico en la clase. alguien sabe como ajustar el archivo para outlook sin que se descuadre los otro clientes de correo.? concidero que no se toco mucho el tema del outlook que es lo que mas se usa.
saludos
Hola profe, hice unas pruebas de mi HTML directamente en Litmus y los previews se ven bien en todas clientes, excepto en Outlook 2016 (Windows 7) y Outlook 2019 (Windows 10). En ambos, se ve mal; ya sea teniendo o no el código condicional que agregamos en la clase anterior. Le agradezco me ayude a ver qué puede estar mal, ya que en mi empleo nos piden maquetar emails para clientes y le ponen mucho foco a la visualización de emails en dichos clientes.
Por acá dejo las screenshots:
Hola @jorgeisaacvasquezsanchez, con Outlook siempre se va a tener una relación de amor y odio, es el cliente de correo más problemático. La solución más óptima es hacer el template lo más sencillo posible, preferiblemente escalable y con eso se asegura la correcta visualización del email. Para el diseño responsive se deben hacer varios prueba y error para ver qué funciona mejor, te recomiendo usar el atributo margin o cellpadding.
Outlook se debe manejar de manera puntual de acuerdo a los objetivos de la campaña y qué versión se va a soportar de acuerdo a los usuarios finales. Por ejemplo, para un cliente particular que manejaba el envío interno, fue necesario crear las plantillas en .otf
Hola, todo muy bien con las pruebas de gmail pero cuando abro mi outlook esta mal, no se si sea por el tiempo en el que el curso fue realizado y puede que ya haya algunos cambios. Y en versión móvil también se visualiza mal tanto en outlook como gmail. :(
tengo el mismo problema con todos los clientes, gmail. icloud, hotmail. todos se visualizan bien, pero si lo visualizo en outlook 2016 se rompe el diseño, todo se descuadra, en la s 2 columnas una pasa abajo de la otra y el boton ocupa toda la pantalla. es un relajo alquien sabe como atrrglar eso. gracias y saludos
hola profe, me gustaría centrar los logos de la parte de abajo en la tabla que esta a dos columnas, pero no lo logro hacerlo, cual es mi error el otro problema es que los logos finales tendrán diferentes tamaños :S
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--[if !mso]><!--> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!--<![endif]--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Lato'); @media screen and (max-width: 480px) { .two-column .column, .three-column .column { max-width: 100% !important; } .two-column img { max-width: 100% !important; } .three-column img { max-width: 50% !important; } *[class="hide"] {display:none !important;} *[class="txt-mobile"] {font-size:18px !important; line-height:125% !important; padding-right:20px !important; padding-left:20px !important; } } @media screen and (min-width: 481px) and (max-width: 640px) { .three-column .column { max-width: 33% !important; } .two-column .column { max-width: 50% !important; } } </style> <!--[if (gte mso 9)|(IE)]> <style type="text/css"> table {border-collapse: collapse !important;} </style> <![endif]--> </head> <body style="margin:0 auto;"> <table align="center" width="100%" bgcolor="#ffffff" style="max-width:600px;" border="0" cellspacing="0" cellpadding="0" > <!-- Header --> <!-- logo --> <tr> <td align="center" bgcolor="#feee00" style="padding-top:20px;padding-right:0;padding-bottom:20px;padding-left:0;" > <a href="https://www.qhubocali.com" target="_blank" border="0" style="text-decoration:none;" > <img src="https://www.qhubocali.com/wp-content/uploads/2019/02/logo_para_mailing.png" alt="Logo Q´hubo cali" width="294" border="0" style="max-width:294px;height:auto;display:block;" /> </a> </td> </tr> <!-- logo --> <!-- Fin Header --> <!-- Contenido --> <!-- separador --> <tr> <td height="20" bgcolor="#5ea6e8" style="height:20px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" ></td> </tr> <!-- separador --> <!-- Estructura a 2 columnas) --> <tr> <td class="two-column" align="center" style="padding-top:10px;padding-right:0;padding-bottom:0;padding-left:0;text-align:center;font-size:0;" > <!-- columna izquierda --> <table class="column" width="100%" style="max-width:300px;display:inline-block;" valign="top" border="0" cellspacing="0" cellpadding="0" > <tr> <td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;" > <!-- curso 1 --> <table width="100%" border="0" cellspacing="0" cellpadding="0" > <tr> <!-- curso 1 - imagen --> <td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" > <a href="https://www.qhubocali.com/asi-paso/este-es-el-mensaje-que-envio-el-juez-que-fue-atacado-a-bala/" target="_blank" border="0" style="text-decoration:none;" > <img src="https://www.qhubocali.com/wp-content/uploads/2019/02/Estas-son-las-emotivas-palabras-del-juez-tras-su-atentado_Para_Mailing.png" alt="Este es el mensaje que envió el juez que fue atacado a bala" width="100%" border="0" style="max-width:280px;height:auto; border-radius:5px 5px 0px 0px" /> </a> </td> <!-- curso 1 - imagen --> </tr> <tr> <!-- curso 1 - texto --> <td height="80" bgcolor="#ff040f" style="height:60px;padding-top:20px;padding-right:15px;padding-bottom:90px;padding-left:15px; border-radius:0px 0px 6px 6px;font-family:'Lato',Arial,sans-serif;font-size:24px;line-height:26px;color:#ffffff;text-align:center;" > Este es el mensaje que envió el juez que fue atacado a bala. </td> <!-- curso 1 - texto --> </tr> </table> <!-- curso 1 --> </td> </tr> </table> <!-- Fin columna izquierda --> <!-- columna derecha --> <table class="column" width="100%" style="max-width:300px;display:inline-block;" valign="top" border="0" cellspacing="0" cellpadding="0" > <tr> <td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;" > <!-- curso 1 --> <table width="100%" border="0" cellspacing="0" cellpadding="0" > <tr> <!-- curso 1 - imagen --> <td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" > <a href="https://www.qhubocali.com/con-la-gente/historia-del-dia/las-sanciones-mas-polemicas-del-codigo-de-policia/" target="_blank" border="0" style="text-decoration:none;" > <img src="https://www.qhubocali.com/wp-content/uploads/2019/02/Las-multas-mas-polemicas-del-codigo-de-Policia_para_mailing.png" alt="Las sanciones más polémicas del Código de Policía" width="100%" border="0" style="max-width:280px;height:auto; border-radius:5px 5px 0px 0px" /> </a> </td> <!-- curso 1 - imagen --> </tr> <tr> <!-- curso 1 - texto --> <td height="80" bgcolor="#ff8125" style="height:60px;padding-top:20px;padding-right:15px;padding-bottom:90px;padding-left:15px; border-radius:0px 0px 6px 6px;font-family:'Lato',Arial,sans-serif;font-size:24px;line-height:26px;color:#ffffff;text-align:center;" > Las sanciones más polémicas del Código de Policía. </td> <!-- curso 1 - texto --> </tr> </table> <!-- curso 1 --> </td> </tr> </table> <!-- Fin columna derecha --> <!-- Fin de estructura a 2 columnas) --> <!--------------------------> <!-- Estructura a 2 columnas) --> <tr> <td class="two-column" align="center" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;text-align:center;font-size:0;" > <!-- columna izquierda --> <table class="column" width="100%" style="max-width:300px;display:inline-block;" valign="top" border="0" cellspacing="0" cellpadding="0" > <tr> <td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;" > <!-- curso 1 --> <table width="100%" border="0" cellspacing="0" cellpadding="0" > <tr> <!-- curso 1 - imagen --> <td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" > <a href="https://www.qhubocali.com/zona-rosa/daniela-legarda-cuenta-como-vivio-la-perdida-de-su-hermano/" target="_blank" border="0" style="text-decoration:none;" > <img src="https://www.qhubocali.com/wp-content/uploads/2019/02/Daniela-Legarda-llora-a-su-hermano_para_Mailing.png" alt="Este es el mensaje que envió el juez que fue atacado a bala" width="100%" border="0" style="max-width:280px;height:auto; border-radius:5px 5px 0px 0px" /> </a> </td> <!-- curso 1 - imagen --> </tr> <tr> <!-- curso 1 - texto --> <td height="80" bgcolor="#fa5b87" style="height:60px;padding-top:20px;padding-right:15px;padding-bottom:90px;padding-left:15px; border-radius:0px 0px 6px 6px;font-family:'Lato',Arial,sans-serif;font-size:24px;line-height:26px;color:#ffffff;text-align:center;" > Daniela Legarda cuenta como vivió la pérdida de su hermano. </td> <!-- curso 1 - texto --> </tr> </table> <!-- curso 1 --> </td> </tr> </table> <!-- Fin columna izquierda --> <!-- columna derecha --> <table class="column" width="100%" style="max-width:300px;display:inline-block;" valign="top" border="0" cellspacing="0" cellpadding="0" > <tr> <td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;" > <!-- curso 1 --> <table width="100%" border="0" cellspacing="0" cellpadding="0" > <tr> <!-- curso 1 - imagen --> <td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" > <a href="https://www.qhubocali.com/deportes/futbol-internacional/atletico-le-gano-2-0-a-la-juventus-de-cristiano/" target="_blank" border="0" style="text-decoration:none;" > <img src="https://www.qhubocali.com/wp-content/uploads/2019/02/Noche-negra-para-Cristiano_Boleting.png" alt="Las sanciones más polémicas del Código de Policía" width="100%" border="0" style="max-width:280px;height:auto; border-radius:5px 5px 0px 0px" /> </a> </td> <!-- curso 1 - imagen --> </tr> <tr> <!-- curso 1 - texto --> <td height="80" bgcolor="#69b631" style="height:60px;padding-top:20px;padding-right:15px;padding-bottom:90px;padding-left:15px; border-radius:0px 0px 6px 6px;font-family:'Lato',Arial,sans-serif;font-size:24px;line-height:26px;color:#ffffff;text-align:center;" > Atlético le ganó 2-0 a la Juventus de Cristiano Ronaldo. </td> <!-- curso 1 - texto --> </tr> </table> <!-- curso 1 --> </td> </tr> </table> <!-- Fin columna derecha --> <!-- Fin de estructura a 2 columnas) --> <!--------------------------> <!-- separador --> <tr> <td height="10" style="height:10px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" ></td> </tr> <!-- separador --> <!-- Footer --> <tr> <td align="center" bgcolor="#f4f4f4" style="padding-top:30px;padding-right:0;padding-bottom:40px;padding-left:0;" > <table width="100%" align="center" bgcolor="#f4f4f4" style="width:100%;max-width:600px;" valign="top" border="0" cellspacing="0" cellpadding="0"> <tr> <td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" > <!-- redes sociales --> <table align="center" width="100%" style="max-width:200px;;text-align:center;" border="0" cellspacing="0" cellpadding="0"> <tr> <td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;" > <a href="https://facebook.com/Qhubocalioficial/" target="_blank" border="0" style="text-decoration:none;" > <img src="http://impre.tech/email/news/ic-facebook.png" width="30" alt="Facebook" border="0" style="width:100%;max-width:30px;height:auto;" /> </a> </td> <td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;" > <a href="https://twitter.com/QhuboCaliOfi" target="_blank" border="0" style="text-decoration:none;" > <img src="http://impre.tech/email/news/ic-twitter.png" width="30" alt="Twitter" border="0" style="width:100%;max-width:30px;height:auto;" /> </a> </td> <td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;" > <a href="https://www.instagram.com/qhubocali/" target="_blank" border="0" style="text-decoration:none;" > <img src="http://impre.tech/email/news/ic-instagram.png" width="30" alt="Instagram" border="0" style="width:100%;max-width:30px;height:auto;" /> </a> </td> <td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;" > <a href="http://www.youtube.com/c/QhuboCali" target="_blank" border="0" style="text-decoration:none;" > <img src="http://impre.tech/email/news/ic-youtube.png" width="30" alt="YouTube" border="0" style="width:100%;max-width:30px;height:auto;" /> </a> </td> </tr> </table> <!-- redes sociales --> </td> </tr> <!-- info marca --> <tr> <td align="center" style="padding-top:20px;padding-right:10px;padding-bottom:0;padding-left:10px;font-family:'Lato',Arial,sans-serif;color:#1c3643;font-size:16px;text-align:center;"> Enviado con <span style="color:#98ca3f;font-size:18px;">♥</span> por Platzi </td> </tr> <!-- info marca --> <!-- legales --> <tr> <td align="center" style="padding-top:30px;padding-right:10px;padding-bottom:10px;padding-left:10px;font-family:'Lato',Arial,sans-serif;color:#666666;font-size:14px;text-align:center;"> Te enviamos este contenido porque haces parte de la comunidad Platzi. </td> </tr> <tr> <td align="center" style="padding-top:0;padding-right:10px;padding-bottom:0;padding-left:10px;font-family:'Lato',Arial,sans-serif;color:#666666;font-size:14px;text-align:center;" > Lamentamos que te vayas, pero puedes <a href="https://platzi.com/contacto/" target="_blank" border="0" style="text-decoration:underline;color:#0a8ecd;">darte de baja aquí</a>. </td> </tr> <!-- legales --> </table> </td> </tr> <!-- Fin Footer --> <!--------------------------> <tr> <!-- 2 columnas) --> <td class="two-column" align="center" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;text-align:center;font-size:0;" > <!-- columna izquierda --> <table class="column" width="100%" style="max-width:300px;display:inline-block;" valign="top" border="0" cellspacing="0" cellpadding="0" > <tr> <td align="center" style="padding-top:20px;padding-right:0;padding-bottom:20px;padding-left:0;" > <a href="https://platzi.com/" target="_blank" border="0" style="text-decoration:none;" > <img src="http://impre.tech/email/news/logo-platzi.png" alt="Platzi - Escuela online de formación en tecnología" width="127" border="0" style="max-width:127px;height:auto;display:block;" /> </a> </td> </tr> </table> <!-- columna derecha --> <table class="column" width="100%" style="max-width:300px;display:inline-block;" valign="top" border="0" cellspacing="0" cellpadding="0" > <tr> <td align="center" style="padding-top:20px;padding-right:0;padding-bottom:20px;padding-left:0;" > <a href="https://platzi.com/" target="_blank" border="0" style="text-decoration:none;" > <img src="http://impre.tech/email/news/logo-platzi.png" alt="Platzi - Escuela online de formación en tecnología" width="127" border="0" style="max-width:127px;height:auto;display:block;" /> </a> </td> </tr> </table> <!-- curso 2 --> </td> </tr> <!--------------------------> </table> </body> </html>
Hola @davidcastillod para centrar esos dos logos puedes usar el mismo layout de las redes sociales, usas la estructura de 3 columnas y en la columna del centro, haces una tabla anidada con 2 columnas, una para cada logo, de esta forma te quedan centrados. Si le medida de los dos logos es mayor al ancho de la celda contenedora (200px), puedes jugar con los anchos de las 3 columnas pero que en total te den 600px, ejemplo: col 1 (150px), col 2 (300px), col 3 (150px). Me cuentas cómo te va!
Podrías usar también en el TD padre del IMG la etiqueta align="center" (ojo: todo el contenido de ese TD se alineara conforme al valor puesto). Y como comentario, no uses tantos media querys o que el tema de la adaptación de tu email se base en usar media querys ya que algunos clientes de correo no los soportan. Puede que te funcione en GMAIL pero OUTLOOK ni lo lea.
Como se puede hacer si lo que se necesita es que la caja que contiene a los textos sea de igual tamaño aunque en uno haya mas texto que en otro
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--[if !mso]><!--> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!--<![endif]--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Lato'); @media screen and (max-width: 480px) { .two-column .column, .three-column .column { max-width: 100% !important; } .two-column img { max-width: 100% !important; } .three-column img { max-width: 50% !important; } *[class="hide"] {display:none !important;} *[class="txt-mobile"] {font-size:18px !important; line-height:125% !important; padding-right:20px !important; padding-left:20px !important; } } @media screen and (min-width: 481px) and (max-width: 640px) { .three-column .column { max-width: 33% !important; } .two-column .column { max-width: 50% !important; } } </style> <!--[if (gte mso 9)|(IE)]> <style type="text/css"> table {border-collapse: collapse !important;} </style> <![endif]--> </head> <body style="margin:0 auto;"> <table align="center" width="100%" bgcolor="#ffffff" style="max-width:600px;" border="0" cellspacing="0" cellpadding="0" > <!-- Header --> <!-- logo --> <tr> <td align="center" style="padding-top:20px;padding-right:0;padding-bottom:20px;padding-left:0;" > <a href="https://platzi.com/" target="_blank" border="0" style="text-decoration:none;" > <img src="http://impre.tech/email/news/logo-platzi.png" alt="Platzi - Escuela online de formación en tecnología" width="127" border="0" style="max-width:127px;height:auto;display:block;" /> </a> </td> </tr> <!-- logo --> <!-- Fin Header --> <!-- Contenido --> <!-- contenido destacado --> <tr> <td align="center" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" > <a href="https://platzi.com/" target="_blank" border="0" style="text-decoration:none;" > <img src="http://impre.tech/email/news/curso-email-html-2x.jpg" alt="NUEVO Curso de Diseño y Maquetación de Emails" width="100%" border="0" style="max-width:600px;height:auto;display:block;" /> </a> </td> </tr> <!-- contenido destacado --> <!-- separador --> <tr> <td height="20" style="height:20px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" ></td> </tr> <!-- separador --> <tr> <!-- 2 columnas) --> <td class="two-column" align="center" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;text-align:center;font-size:0;" > <!-- columna izquierda --> <table class="column" width="100%" style="max-width:300px;display:inline-block;" valign="top" border="0" cellspacing="0" cellpadding="0" > <tr> <td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;" > <!-- curso 1 --> <table width="100%" border="0" cellspacing="0" cellpadding="0" > <tr> <!-- curso 1 - imagen --> <td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" > <a href="https://platzi.com/cursos/email-marketing/" target="_blank" border="0" style="text-decoration:none;" > <img src="http://impre.tech/email/news/curso-marketing-2x.jpg" alt="Curso de Marketing" width="100%" border="0" style="max-width:280px;height:auto;" /> </a> </td> <!-- curso 1 - imagen --> </tr> <tr> <!-- curso 1 - texto --> <td height="60" style="height:60px;padding-top:10px;padding-right:0;padding-bottom:10px;padding-left:0;font-family:'Lato',Arial,sans-serif;font-size:16px;line-height:20px;color:#333333;text-align:left;" > <b>Curso de Email Marketing</b>, aprende a potenciar las campañas de tu empresa y fidelizar a tus clientes. </td> <!-- curso 1 - texto --> </tr> <tr> <!-- curso 1 - cta --> <td height="40" style="height:40px;padding-top:5px;padding-right:10px;padding-bottom:5px;padding-left:10px;background-color:#98ca37;border-radius:6px;font-family:'Lato',Arial,sans-serif;font-size:18px;color:#ffffff;text-align:center;" > <a href="https://platzi.com/cursos/email-marketing/" target="_blank" border="0" style="text-decoration:none;font-family:'Lato',Arial,sans-serif;color:#ffffff;" > Estudiar ahora </a> </td> <!-- curso 1 - cta --> </tr> </table> <!-- curso 1 --> </td> </tr> </table> <!-- columna derecha --> <table class="column" width="100%" style="max-width:300px;display:inline-block;" valign="top" border="0" cellspacing="0" cellpadding="0" > <tr> <td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;" > <!-- curso 2 --> <table width="100%" border="0" cellspacing="0" cellpadding="0" > <tr> <!-- curso 2 - imagen --> <td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" > <a href="https://platzi.com/cursos/google-analytics/" target="_blank" border="0" style="text-decoration:none;" > <img src="http://impre.tech/email/news/curso-analytics.jpg" alt="Curso Profesional de Google Analytics" width="100%" border="0" style="max-width:280px;height:auto;" /> </a> </td> <!-- curso 2 - imagen --> </tr> <tr> <!-- curso 2 - texto --> <td height="60" style="height:60px;padding-top:10px;padding-right:0;padding-bottom:10px;padding-left:0;font-family:'Lato',Arial,sans-serif;font-size:16px;line-height:20px;color:#333333;text-align:left;" > <b>Curso Profesional de Google Analytics</b>, aprende cómo analizar y medir el desempeño de tu sitio web. y algo mas que te voy a enseñae, esto será una prueba para mirar que pasa si hay mucho mas textos de lo previsto </td> <!-- curso 2 - texto --> </tr> <tr> <!-- curso 2 - cta --> <td height="40" style="height:40px;padding-top:5px;padding-right:10px;padding-bottom:5px;padding-left:10px;background-color:#98ca37;border-radius:6px;font-family:'Lato',Arial,sans-serif;font-size:18px;color:#ffffff;text-align:center;" > <a href="https://platzi.com/cursos/google-analytics/" target="_blank" border="0" style="text-decoration:none;font-family:'Lato',Arial,sans-serif;color:#ffffff;" > Estudiar ahora </a> </td> <!-- curso 2 - cta --> </tr> </table> <!-- curso 2 --> </td> </tr> </table> </td> <!-- fin 2 columnas --> </tr> <tr> <!-- 3 columnas --> <td class="three-column" style="padding-top:10px;padding-right:0;padding-bottom:10px;padding-left:0;text-align:center;font-size:0;" > <!--[if (gte mso 9)|(IE)]> <table width="100%" style="border-spacing:0;" > <tr> <td width="200" valign="top" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" > <![endif]--> <!-- columna izquierda --> <table class="column" width="100%" style="max-width:200px;display:inline-block;" valign="top" border="0" cellspacing="0" cellpadding="0" > <tr> <td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;" > <!-- blog1 --> <table width="100%" border="0" cellspacing="0" cellpadding="0" > <tr> <!-- blog 1 - imagen --> <td class="hide" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" > <a href="https://platzi.com/blog/herramientas-gratuitas-para-el-crecimiento-de-mi-emprendimiento/" target="_blank" border="0" style="text-decoration:none;" > <img src="http://impre.tech/email/news/blog1.jpg" alt="Siete herramientas gratuitas para impulsar el crecimiento de tu emprendimiento" width="180" border="0" style="width:100%;max-width:180px;height:auto;" /> </a> </td> <!-- blog 1 - imagen --> </tr> <tr> <!-- blog 1 - texto --> <td class="txt-mobile" style="padding-top:10px;padding-right:0;padding-bottom:10px;padding-left:0;font-family:'Lato',Arial,sans-serif;font-size:16px;line-height:20px;color:#333333;text-align:center;"> Siete herramientas gratuitas para impulsar tu emprendimiento </td> <!-- blog 1 - texto --> </tr> <tr> <!-- blog 1 - cta --> <td class="txt-mobile" style="padding-top:5px;padding-right:0;padding-bottom:0;padding-left:0;font-family:'Lato',Arial,sans-serif;font-size:16px;line-height:0;color:#0a8ecd;"> <a href="https://platzi.com/blog/herramientas-gratuitas-para-el-crecimiento-de-mi-emprendimiento/" target="_blank" border="0" style="font-family:'Lato',Arial,sans-serif;color:#0a8ecd;text-decoration:none;" > Leer más </a> </td> <!-- blog 1 - cta --> </tr> </table> <!-- blog 1 --> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td><td width="200" valign="top" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" > <![endif]--> <!-- columna centro --> <table class="column" width="100%" style="max-width:200px;display:inline-block;" valign="top" border="0" cellspacing="0" cellpadding="0" > <tr> <td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;" > <!-- blog 2 --> <table width="100%" border="0" cellspacing="0" cellpadding="0" > <tr> <!-- blog 2 - imagen --> <td class="hide" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" > <a href="https://platzi.com/blog/como-llegar-a-tus-clientes-y-potenciales-consumidores-a-traves-del-email-marketing/" target="_blank" border="0" style="text-decoration:none;" > <img src="http://impre.tech/email/news/blog2-2x.jpg" alt="¿Cómo llegar a tus clientes y potenciales consumidores a través del email marketing?" width="180" border="0" style="width:100%;max-width:180px;height:auto;" /> </a> </td> <!-- blog 2 - imagen --> </tr> <tr> <!-- blog 2 - texto --> <td class="txt-mobile" style="padding-top:10px;padding-right:0;padding-bottom:10px;padding-left:0;font-family:'Lato',Arial,sans-serif;font-size:16px;line-height:20px;color:#333333;text-align:center;"> ¿Cómo llegar a tus clientes a través del Email Marketing? </td> <!-- blog 2 - texto --> </tr> <tr> <!-- blog 2 - cta --> <td class="txt-mobile" style="padding-top:5px;padding-right:0;padding-bottom:0;padding-left:0;font-family:'Lato',Arial,sans-serif;font-size:16px;line-height:0;color:#0a8ecd;"> <a href="https://platzi.com/blog/como-llegar-a-tus-clientes-y-potenciales-consumidores-a-traves-del-email-marketing/" target="_blank" border="0" style="font-family:'Lato',Arial,sans-serif;color:#0a8ecd;text-decoration:none;" > Leer más </a> </td> <!-- blog 2 - cta --> </tr> </table> <!-- blog 2 --> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td><td width="200" valign="top" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" > <![endif]--> <!-- columna derecha --> <table class="column" width="100%" style="max-width:200px;display:inline-block;" valign="top" border="0" cellspacing="0" cellpadding="0" > <tr> <td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;" > <!-- blog 3 --> <table width="100%" border="0" cellspacing="0" cellpadding="0" > <tr> <!-- blog 3 - imagen --> <td class="hide" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" > <a href="https://platzi.com/blog/como-evitar-errores-al-enviar-una-campana-de-email-marketing/" target="_blank" border="0" style="text-decoration:none;" > <img src="http://impre.tech/email/news/blog3.jpg" alt="Cómo evitar errores al enviar una campaña de Email Marketing" width="180" border="0" style="width:100%;max-width:180px;height:auto;" /> </a> </td> <!-- blog 3 - imagen --> </tr> <tr> <!-- blog 3 - texto --> <td class="txt-mobile" style="padding-top:10px;padding-right:0;padding-bottom:10px;padding-left:0;font-family:'Lato',Arial,sans-serif;font-size:16px;line-height:20px;color:#333333;text-align:center;"> Cómo evitar errores al enviar una campaña de Email Marketing </td> <!-- blog 3 - texto --> </tr> <tr> <!-- blog 3 - cta --> <td class="txt-mobile" style="padding-top:5px;padding-right:0;padding-bottom:0;padding-left:0;font-family:'Lato',Arial,sans-serif;font-size:16px;line-height:0;color:#0a8ecd;"> <a href="https://platzi.com/blog/como-evitar-errores-al-enviar-una-campana-de-email-marketing/" target="_blank" border="0" style="font-family:'Lato',Arial,sans-serif;color:#0a8ecd;text-decoration:none;" > Leer más </a> </td> <!-- blog 3 - cta --> </tr> </table> <!-- blog 3 --> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]--> </td> </tr> <!-- contenido complementario 2 (3 columnas) --> <!-- Fin Contenido --> <!-- separador --> <tr> <td height="40" style="height:40px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" ></td> </tr> <!-- separador --> <!-- Footer --> <tr> <td align="center" bgcolor="#f4f4f4" style="padding-top:30px;padding-right:0;padding-bottom:40px;padding-left:0;" > <table width="100%" align="center" bgcolor="#f4f4f4" style="width:100%;max-width:600px;" valign="top" border="0" cellspacing="0" cellpadding="0"> <tr> <td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" > <!-- redes sociales --> <table align="center" width="100%" style="max-width:200px;;text-align:center;" border="0" cellspacing="0" cellpadding="0"> <tr> <td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;" > <a href="https://www.facebook.com/platzi" target="_blank" border="0" style="text-decoration:none;" > <img src="http://impre.tech/email/news/ic-facebook.png" width="30" alt="Facebook" border="0" style="width:100%;max-width:30px;height:auto;" /> </a> </td> <td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;" > <a href="https://twitter.com/platzi" target="_blank" border="0" style="text-decoration:none;" > <img src="http://impre.tech/email/news/ic-twitter.png" width="30" alt="Twitter" border="0" style="width:100%;max-width:30px;height:auto;" /> </a> </td> <td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;" > <a href="https://www.instagram.com/platzi/" target="_blank" border="0" style="text-decoration:none;" > <img src="http://impre.tech/email/news/ic-instagram.png" width="30" alt="Instagram" border="0" style="width:100%;max-width:30px;height:auto;" /> </a> </td> <td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;" > <a href="https://www.youtube.com/channel/UC55-mxUj5Nj3niXFReG44OQ" target="_blank" border="0" style="text-decoration:none;" > <img src="http://impre.tech/email/news/ic-youtube.png" width="30" alt="YouTube" border="0" style="width:100%;max-width:30px;height:auto;" /> </a> </td> </tr> </table> <!-- redes sociales --> </td> </tr> <!-- info marca --> <tr> <td align="center" style="padding-top:20px;padding-right:10px;padding-bottom:0;padding-left:10px;font-family:'Lato',Arial,sans-serif;color:#1c3643;font-size:16px;text-align:center;"> Enviado con <span style="color:#98ca3f;font-size:18px;">♥</span> por Platzi </td> </tr> <!-- info marca --> <!-- legales --> <tr> <td align="center" style="padding-top:30px;padding-right:10px;padding-bottom:10px;padding-left:10px;font-family:'Lato',Arial,sans-serif;color:#666666;font-size:14px;text-align:center;"> Te enviamos este contenido porque haces parte de la comunidad Platzi. </td> </tr> <tr> <td align="center" style="padding-top:0;padding-right:10px;padding-bottom:0;padding-left:10px;font-family:'Lato',Arial,sans-serif;color:#666666;font-size:14px;text-align:center;" > Lamentamos que te vayas, pero puedes <a href="https://platzi.com/contacto/" target="_blank" border="0" style="text-decoration:underline;color:#0a8ecd;">darte de baja aquí</a>. </td> </tr> <!-- legales --> </table> </td> </tr> <!-- Fin Footer --> </table> </body> </html>
Hola @davidcastillod para que todas las cajas de textos sean de igual tamaño, debes asignar el mismo height a todos los contenedores, usando el atributo height="" de la celda.
Alguien tiene los mismos problemas que yo? En Gmail no se respetan ni los espacios ni los textos. Y en outlook, tanto en la estructura de 2 columnas como en las de 3 columnas, me añade 2 px por lado y por tanto me descuadra el diseño. Aunque llevo trasteando unos días, no consigo resultados. Aquí os dejo mi codigo.
Buenas tardes, no si s
<!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'> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Lato&display=swap'); @media screen and (max-width: 480px) { .two-columns .column, .three-columns .column{ max-width: 100% !important; } .two-columns img{ max-width: 100% !important; } .three-columns img { max-width: 80% !important; } *[class="hide"] { display:none !important;} *[class="txt-mobile"] {font-size:18px !important; line-height: 125% !important;} } @media screen and (min-width: 481px) and (max-width: 640px) { .three-columns .column { max-width: 33% !important; } .two-columns .column { max-width: 50% !important; } } </style> </head> <body style="margin:0 auto;"> <!-- [if (gte mso9)|(IE)] <style type="text/css"> <table style="border-collapse: collapse !important;"> </style> <! [endif]--> <table align="center" width="100%" bgcolor="#ffffff" style="max-width: 600px;" border="0" cellpadding="0" cellspacing="0"> <tr> <!--Header--> <td align="center" style="padding-top:20px;padding-right:0;padding-bottom:20px;padding-left:0;"> <a href="http://www.tpgimeno.com" target="blank" style="text-decoration:none;"> <img src="http://tpgimeno.com/marketing/camp1/logotipo.jpg" alt="TpGimeno - Blog sobre tecnología" border="0" style="max-width:200px; height:auto; display:block;"> </a> </td> <!-- Fin del Header --> </tr> <tr> <!-- Contenido --> <td align="center" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;"> <table align="center" width="100%" bgcolor="#414c8b" style="max-width:600px;" border="0" cellpadding="0" cellspacing="0"> <tr> <!-- Columna con la descripción --> <td style="padding-top:20;padding-right:50; width:50%; padding-bottom:20;padding-left:50;text-align:left;font-family:'Lato';font-size:26px;color:#ffffff;"> <a href="http://www.tpgimeno.com" target="_blank" style="text-decoration: none;font-family:'Lato';font-size:26px;color:#ffffff;"> Nuevo<br> Tutorial sobre como exprimir tu smartphone </a> </td> <!-- Fin Columna descripción --> <!-- Columna imagen principal --> <td style="padding-top:20;padding-right:20;padding-bottom:20;padding-left:20; text-align:center;"> <img src="http://tpgimeno.com/marketing/camp1/imagen1.jpg" alt="Tutorial sobre como exprimir tu smartphone" > </td> <!-- Fin Columna imagen principal --> </tr> </table> </td> <!-- Fin del Contenido --> </tr> <tr> <!-- Estructura a 2 columnas --> <td class="two-columns" width="100%" align="center" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;text-align:center;font-size:0;"> <!-- [if (gte mso 9)|(IE)] <style type="text/css"> <table width="100%" style="border-spacing:0;"> <tr> <td width="300px" valign="top" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;"> </style> <! [endif]--> <!-- Columna Izquierda --> <table class="column" bgcolor="#414c8b" width="100%" valign="top" border="0" cellpadding="0" cellspacing="0" style="max-width:300px;display:inline-block;"> <tr> <td align="center" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;"> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td align="center" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;"> <a href="http://www.tpgimeno.com" target="_blank" border="0" style="text-decoration:none;"> <img src="http://tpgimeno.com/marketing/camp1/imagen2.jpg" alt="Consejos para sacar el máximo partido a tu smartphone" style="max-width:280px;height:auto;"> </a> </td> </tr> <tr> <td height="1200px" align="center" style="height:120px;padding-top:20px;padding-right:10px;padding-bottom:0;padding-left:10px;font-size:16px;line-height:20px;text-align:left;color:#ffffff;font-family:'Lato';"> Este gesto se ha convertido en algo muy habitual en nuestras vidas. <b>Pero sabemos sacarle provecho?</b> </td> </tr> <tr> <td align="center" height="40px" style="height:40px;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;border-radius:6px;background-color:#70a83b;font-size:20px;color:#ffffff;font-family:'Lato';"> <a href="http://www.tpgimeno.com" target="_blank" style="text-decoration:none;font-size:20px;color:#ffffff;font-family:'Lato';"> Quiero saber más! </a> </td> </tr> </table> </td> </tr> </table> <!-- Fin de Columna izquierda --> <!-- [if (gte mso 9)|(IE)] <style type="text/css"> </td><td width="300px" valign="top" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;"> </style> <! [endif]--> <!-- Columna Derecha --> <table class="column" align="center" bgcolor="#414c8b" width="100%" valign="top" border="0" cellpadding="0" cellspacing="0" style="max-width: 300px;display:inline-block;color:#ffffff;font-family:'Lato';"> <tr> <td align="center" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;"> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td align="center" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;"> <a href="http://www.tpgimeno.com" target="_blank" style="text-decoration:none;color:#ffffff;"> <img src="http://tpgimeno.com/marketing/camp1/imagen3.jpg" alt="La nueva vida 'Social'" style="max-width: 280px;height:auto;"> </a> </td> </tr> <tr> <td height="120px" align="center" style="height:120px;padding-top: 20px;padding-right:10px;padding-bottom:0;padding-left:10px;font-size:16px;line-height:20px;text-align:left;color:#ffffff;font-family:'Lato';"> Las relaciones sociales han cambiado, la forma de mantenernos en contacto ha evolucionado. <b>Las Redes sociales</b> </td> </tr> <tr> <td align="center" height="40px" style="height:40px;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;border-radius:6px;background-color:#70a83b;font-size:20px;color:#ffffff;font-family:'Lato';"> <a href="http://www.tpgimeno.com" target="_blank" style="text-decoration:none;color:#ffffff;font-family:'Lato';"> Quiero saber más! </a> </td> </tr> </table> </td> </tr> </table> <!-- [if (gte mso9)|(IE)] <style type="text/css"> </td> </tr> </table> </style> <! [endif]--> <!-- Fin Columna derecha --> </td> <!-- Fin de la estructura a 2 columnas --> </tr> <tr> <!-- Estructura a 3 columnas --> <td class="three-columns" bgcolor="#414c8b" align="center" style="padding-top:10px;padding-right:0;padding-bottom:0;padding-left:0;text-align:center;font-size:0;"> <!-- [if (gte mso 9)|(IE)] <style type="text/css"> <table width="100%" style="border-spacing:0 !important;border-collapse: collapse !important;"> <tr> <td width="200px" valign="top" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;"> </style> <! [endif]--> <!-- Columna 1 --> <table class="column" valign="top" border="0" align="center" width="100%" cellpadding="0" cellspacing="0" style="max-width: 200px; display:inline-block;"> <tr> <td align="center" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;"> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td class="hide" align="center" style="padding-top:20px;padding-right:0;padding-bottom:0;padding-left:0;"> <a href="http://www.tpgimeno.com" target="_blank"> <img src="http://tpgimeno.com/marketing/camp1/imagen4.jpg" alt="Apps útiles" style="max-width:180px;height:auto;"> </a> </td> </tr> <tr> <td class="txt-mobile" align="center" valign="top" height="100px" style="height:100px;padding-top:20px;padding-right:0;padding-bottom:0;padding-left:0;color:#ffffff;font-family:'Lato';font-size:14px;"> Algunas aplicaciones han pasado a ser parte de nuestras vidas. </td> </tr> <tr> <td class="txt-mobile" align="center" style="padding-top:20px;padding-right:0;padding-bottom:0;padding-left:0;color:#70a83b;font-family:'Lato';font-size:14px;font-weight:bold;"> <a href="http://www.tpgimeno.com" target="_blank" style="text-decoration:none;color:#70a83b;font-family:'Lato';font-size:14px;font-weight:bold;"> MÁS INFO </a> </td> </tr> </table> </td> </tr> </table> <!-- Fin Columna 1 --> <!-- [if (gte mso9)|(IE)] <style type="text/css"> </td><td width="200px" valign="top" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;"> </style> <! [endif]--> <!-- Columna 2 --> <table class="column" valign="top" border="0" align="center" width="100%" cellpadding="0" cellspacing="0" style="max-width: 200px; display:inline-block;"> <tr> <td align="center" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;"> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td class="hide" align="center" valign="top" style="padding-top:20px;padding-right:0;padding-bottom:0;padding-left:0;"> <a href="http://www.tpgimeno.com" target="_blank"> <img src="http://tpgimeno.com/marketing/camp1/imagen5.jpg" alt="Foto y Video móvil" style="max-width:180px;height:auto;"> </a> </td> </tr> <tr> <td class="txt-mobile" align="center" valign="top" height="100px" style="height:100px;padding-top:20px;padding-right:0;padding-bottom:0;padding-left:0;color:#ffffff;font-family:'Lato';font-size:14px;"> Existen terminales que no tienen nada que envidiar de las cámaras de foto o video profesionales. </td> </tr> <tr> <td class="txt-mobile" align="center"style="padding-top:20px;padding-right:0;padding-bottom:0;padding-left:0;color:#70a83b;font-family:'Lato';font-size:14px;font-weight:bold;"> <a href="http://www.tpgimeno.com" target="_blank" style="text-decoration:none;color:#70a83b;font-family:'Lato';font-size:14px;font-weight:bold;"> MÁS INFO </a> </td> </tr> </table> </td> </tr> </table> <!-- Fin Columna 2 --> <!-- [if (gte mso9)|(IE)] <style type="text/css"> </td><td width="200px" valign="top" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;"> </style> <! [endif]--> <!-- Columna 3 --> <table class="column" valign="top" border="0" align="center" width="100%" cellpadding="0" cellspacing="0" style="max-width: 200px; display:inline-block;"> <tr> <td align="center" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;"> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td class="hide" align="center" valign="top" style="padding-top:20px;padding-right:0;padding-bottom:0;padding-left:0;"> <a href="http://www.tpgimeno.com" target="_blank"> <img src="http://tpgimeno.com/marketing/camp1/imagen6.jpg" alt="Música accesible" style="max-width:180px;height:auto;"> </a> </td> </tr> <tr> <td class="txt-mobile" align="center" valign="top" height="100px" style="height:100px;padding-top:20px;padding-right:0;padding-bottom:0;padding-left:0;color:#ffffff;font-family:'Lato';font-size:14px;"> Escuchar música nunca había sido tan fácil y variado. Existe una gran variedad de plataformas para disfrutarla. </td> </tr> <tr> <td class="txt-mobile" align="center"style="padding-top:20px;padding-right:0;padding-bottom:0;padding-left:0;color:#70a83b;font-family:'Lato';font-size:14px;font-weight:bold;"> <a href="http://www.tpgimeno.com" target="_blank" style="text-decoration:none;color:#70a83b;font-family:'Lato';font-size:14px;font-weight:bold;"> MÁS INFO </a> </td> </tr> </table> </td> </tr> </table> <!-- [if (gte mso9)|(IE)] <style type="text/css"> </td> </tr> </table> </style> <! [endif]--> <!-- Fin Columna 3 --> </td> <!-- Fin de la estructura a 3 columnas --> </tr> <tr> <!-- Footer --> <td> <table class="footer" width="100%" align="center" border="0" bgcolor="#b9c2f4" cellpadding="0" cellspacing="0"> <tr> <td> <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" style="padding-top:20;padding-bottom:20;"> <tr align="center"> <td align="right"> <a href="https://www.facebook.com/TpGimeno-109936083730561/" target="_blank" border="0" style="text-decoration:none;"> <img src="http://tpgimeno.com/marketing/camp1/ic-facebook.jpg" alt="Facebook"> </a> </td> <td> <a href="https://twitter.com/tpgimeno" target="_blank" border="0" style="text-decoration:none;"> <img src="http://tpgimeno.com/marketing/camp1/ic-twitter.jpg" alt="Twitter"> </a> </td> <td align="left"> <a href="https://www.instagram.com/tpgimeno/" target="_blank" border="0" style="text-decoration:none;"> <img src="http://tpgimeno.com/marketing/camp1/ic-instagram.jpg" alt="Instagram"> </a> </td> </tr> </table> </td> </tr> <tr> <td style="padding-top:20;padding-bottom:20;padding-left:10;padding-right:10;font-family:'Lato';font-size:20;color:#050505;text-align:center;"> TpGimeno.com - info@tpgimeno.com </td> </tr> <tr> <td style="padding-top:20;padding-bottom:20;padding-left:10;padding-right:10;font-family:Arial, Helvetica, sans-serif;font-size:16px;color:#000000;text-align:center;"> Te envío este contenido porque formas parte de la comunidad TpGimeno. Si quieres dejar de recibir estos emails pulsa <a href="" border="0" style="text-decoration: none;color:#000000;">aquí</a> </td> </tr> </table> </td> <!-- Fin del Footer --> </tr> </table> <!-- [if (gte mso9)|(IE)] <style type="text/css"> </table> </style> <! [endif]--> </body> </html>``` i alguien tiene los mismos problemas que yo. En Gmail no se respetan ni los espacios ni los textos. Y en outlook, tanto en la estructura de 2 columnas como en las de 3 columnas, me añade 2 px por lado y por tanto me descuadra el diseño. Aunque llevo trasteando unos días, no consigo resultados. Aquí os dejo mi codigo.
Hola, una consulta, como hago para que se vean mis imágenes en la prueba de envío, llega bien los correos pero no están las imagenes, Saludos
Hombre eso sucede porque las imágenes que contiene el email están configuradas como guardadas desde el PC. Lo que debería hacer para que funcione es subir las imágenes a un dominio publico y direccionarlas sobre el HTML. Lo puede hacer con el HTML de monkey, pues ahí quedan cargadas al hacer el proceso que Martha explicó. La otra es subir las imágenes a su gmail, y tomar la URL que arroja(esta no estoy seguro que funcione) y ponerla en el HTML.
Hola, a mi no me reconoce las imagenes en el envió, por qué pasa eso?
Hola Karen eso sucede por que tus imágenes están guardadas en tu computadora, lo que debes hacer es cargarlas en alguna pagina web que te proporcione un link para que puedas enlazarlas con tu código, es muy sencillo te recomiendo Postimages. Saludos. :)
Hola. Una pregunta. En las cajas que tienen la imagen, el texto y el boton. Como hago para que si quiero dejar solo el texto, el mismo texto quede alineado arriba. En la tabla esta el atributo valign="top" paro no queda alineado el contenido. Esta bien poner vertical-align: top para alinearlo?. Gracias.
<td class="two-column" align="center" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;text-align:center;font-size:0;" > <!-- columna izquierda --> <table class="column" width="100%" style="max-width:300px;display:inline-block;" valign="top" border="0" cellspacing="0" cellpadding="0" > <tr> <td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;" > <!-- curso 1 --> <table width="100%" border="0" cellspacing="0" cellpadding="0" > <tr> <!-- curso 1 - imagen --> <td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" > <a href="https://platzi.com/cursos/email-marketing/" target="_blank" border="0" style="text-decoration:none;" > <img src="images/curso-marketing-2x.jpg" alt="Curso de Marketing" width="100%" border="0" style="max-width:280px;height:auto;" /> </a> </td> <!-- curso 1 - imagen --> </tr> <tr> <!-- curso 1 - texto --> <td height="60" style="height:60px;padding-top:10px;padding-right:0;padding-bottom:10px;padding-left:0;font-family:'Lato',Arial,sans-serif;font-size:16px;line-height:20px;color:#333333;text-align:left;" > <b>Curso de Email Marketing</b>, aprende a potenciar las campañas de tu empresa y fidelizar a tus clientes. </td> <!-- curso 1 - texto --> </tr> <tr> <!-- curso 1 - cta --> <td height="40" style="height:40px;padding-top:5px;padding-right:10px;padding-bottom:5px;padding-left:10px;background-color:#98ca37;border-radius:6px;font-family:'Lato',Arial,sans-serif;font-size:18px;color:#ffffff;text-align:center;" > <a href="https://platzi.com/cursos/email-marketing/" target="_blank" border="0" style="text-decoration:none;font-family:'Lato',Arial,sans-serif;color:#ffffff;" > Estudiar ahora </a> </td> <!-- curso 1 - cta --> </tr> </table> <!-- curso 1 --> </td> </tr> </table> <!-- columna derecha --> <table class="column" width="100%" style="max-width:300px;display:inline-block;" valign="top" border="0" cellspacing="0" cellpadding="0" > <tr> <td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;" > <!-- curso 2 --> <table width="100%" border="0" cellspacing="0" cellpadding="0" > <tr> <!-- curso 2 - imagen --> <td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" > <a href="https://platzi.com/cursos/google-analytics/" target="_blank" border="0" style="text-decoration:none;" > <img src="images/curso-analytics.jpg" alt="Curso Profesional de Google Analytics" width="100%" border="0" style="max-width:280px;height:auto;" /> </a> </td> <!-- curso 2 - imagen --> </tr> <tr> <!-- curso 2 - texto --> <td height="60" style="height:60px;padding-top:10px;padding-right:0;padding-bottom:10px;padding-left:0;font-family:'Lato',Arial,sans-serif;font-size:16px;line-height:20px;color:#333333;text-align:left;" > <b>Curso Profesional de Google Analytics</b>, aprende cómo analizar y medir el desempeño de tu sitio web. </td> <!-- curso 2 - texto --> </tr> <tr> <!-- curso 2 - cta --> <td height="40" style="height:40px;padding-top:5px;padding-right:10px;padding-bottom:5px;padding-left:10px;background-color:#98ca37;border-radius:6px;font-family:'Lato',Arial,sans-serif;font-size:18px;color:#ffffff;text-align:center;" > <a href="https://platzi.com/cursos/google-analytics/" target="_blank" border="0" style="text-decoration:none;font-family:'Lato',Arial,sans-serif;color:#ffffff;" > Estudiar ahora </a> </td> <!-- curso 2 - cta --> </tr> </table> <!-- curso 2 --> </td> </tr> </table> </td>```
