Diseño y Maquetación de Emails con Mailchimp

Clase 36 de 36 • Curso de Diseño y Maquetación para Emails

Contenido del curso

Introducción y planeación

Primer proyecto: cómo usar Mailchimp para tu estrategia

Segundo proyecto: Diseño de emails

Tercer proyecto: maquetación de email de promoción en técnica escalable

Cuarto proyecto: maquetación de newsletter en técnica responsive

Cierre

36
Diseño y Maquetación de Emails con Mailchimp
Viendo ahora

Tomar examen

Resumen

Has llegado al final del curso, recuerda tomar el examen y si tienes alguna duda déjala en la sección de discusiones.

Comentarios

Sebastian Pérez Quintero

student•

Super interesante el curso, y muy bien explicado por la profe Martha, todo muy claro!

Martha Muñoz

student•

Maravilloso! Si tienes alguna duda en la practica estaré muy pendiente.

Julián Cárdenas

student•

La verdad muy bueno esta desactualizado pero excelente

Emanuel Franco

student•

Es verdad! la profe explica hasta el mínimo detalle de las cosas importantes por lo que se hace muy amena la asimilación de los contenidos.

Martha Muñoz

student•

Gracias, estaré muy pendiente si tienes alguna duda en la practica, así es como se aprende más!

Ivan Torres Junca

student•

Me queda una duda grandisima y es, ¿Cómo es el manejo de lso mails para en el dark mode de los dispositivos, ahi como los debemos implementar o diseñar?

Kevin Salvador Casas

student•

Si has visto un email que sea responsivo a dark mode (yo no los he visto), lo que recomiendo es que entres al código fuente del correo desde un navegador. Hay herramientas como HTML Inserter que permiten insertar HTML en un correo. Si tu editas un mensaje que vas a reenviar puedes extraer el contenido HTML y revisarlo O directamente con la herramienta de inspeccionar de tu navegador favorito

Andrés Felipe Chaparro Grimaldo

student•

Excelente curso y muy bien explicado por la profe...los tips y datos que explico geniales!

Martha Muñoz

student•

Qué maravilla! Estaré muy pendiente si tienes alguna duda al momento de ejecutar.

Erick Lucio

student•

A la fecha del 2024 esta casi desactualizado este curso, igual lo veo bien para ver las tracticas de hace años pero hace falta una actualizacion urgente en plataformas mas nuevas, sugiero Klaviyo para e-commerce

Julián Cárdenas

student•

Lo mismo siento

José Mauricio Osorio Corredor

student•

Se nota un excelente manejo del tema y muy buena pedagogía por parte de la profesora. Un abrazo y ojalá nos des un curso actualizado de email marketing

Alejandro Lopez Ramírez

student•

¡Excelente! muchas gracias. Aprendí montones

Martha Muñoz

student•

Me alegra un montón! Igual si tienes alguna duda extra en la practica estaré muy pendiente.

Catalina Rivas

student•

Me encanto este curso, super detallado, ameno, me hizo ver todo lo que estaba haciendo mal antes de realizar este curso, lo recomiendo ampliamente :)

Martha Muñoz

student•

Qué buena noticia! Igual si tienes alguna duda extra en la practica estaré muy pendiente.

Usuario anónimo

user•

Excelente curso a implementarlo ya :)

Martha Muñoz

student•

Gracias, me avisas si tienes alguna duda en la implementación.

Andrés Perdomo

student•

Muchas gracias por todo lo enseñado Profe :D ahora solo toca practicar, practicar y practicar :D

La clase con más practica que aquí he tomado ^^

Laura Mejia Rodríguez

student•

¡Hola! Martha muchas gracias... muy buen curso... tengo una duda... quiero enviar mi plantilla html desde mi servidor, ya lo subi, pero al poner el enlace en el clientte de correo ,claro esta que se muestra el enlace solamente.. me puedes decir como puedo enviar mi correo y se muestre al llegar al usuario. te dejo el enlace. saludos

Julián Cárdenas

student•

Excelente curso! falta actualizarlo tanto en herramientas como ESP, como funcionalidades entre otra serie de cosas pero estuvo genial!

Karen Andrea Vargas Falla

student•

demasiado desactualizado este cursooooo

Kenell Rivera Quiñonez

student•

Gracias Profesora y a toda la comunidad Platzi por permitirme llevar el curso gratuito de 72 horas. Muchas gracias!!!

Nestor Mauricio Rojas Rozo

student•

Martha, toda mi gratitud. Todo comprendido!

Robert Albert Rodríguez Martínez

student•

Excelente curso. Muy buena pedagogía y absoluto dominio del tema demostrado por la profesora Muñoz. Mis felicitaciones.

Christian Rene Fiorentino

student•

Excelente curso, muy bien dado. Muchas gracias Martha!!!!

Henry David Castillo Montoya

student•

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>

Martha Muñoz

student•

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!

Hugo Martinez Moreno

student•

Gracias Martha!, muy buen curso!

Alberth Fabian Perez Mendivelso

student•

Muy buen curso, la información recopilada a lo largo de estos videos vale oro!. Muchas 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;">
	<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>

Diseño y Maquetación de Emails con Mailchimp

Introducción y planeación

Diseño y Maquetación de Emails para Marketing Digital

Ventajas del Email Marketing y Estrategias de Optimización

Tipos de Emails y Estrategias de Marketing Digital

Técnicas de Desarrollo de Emails: Código, Builders y Frameworks

Estrategias de Email Marketing: Optimización y Segmentación

Primer proyecto: cómo usar Mailchimp para tu estrategia

Creación de tu primera campaña en Mailchimp

Diseño de Email de Bienvenida en Mailship

Creación de listas de contactos en Mailchimp

Personalización de Campañas en Mailchimp: Segmentación y Diseño

Envío de Emails de Prueba y Finales en Mailchimp

Análisis de Reportes de Campañas en Mailchimp

Creación de Formularios Modales con Mailship para Suscripciones

Incorporación de Formularios de Suscripción en Landing Pages

Automatización de Correos de Bienvenida en Mailship

Segundo proyecto: Diseño de emails

Diseño de Emails Escalables y Responsivos

Buenas prácticas en diseño de emails para marketing

Diseño y Maquetación de Emails Promocionales en Photoshop

Diseño de Newsletters en Photoshop: Guía de Tres Columnas

Diseño de Emails Responsivos en Photoshop y Preparación para Código

Tercer proyecto: maquetación de email de promoción en técnica escalable

Maquetación de Emails Promocionales Escalables en Photoshop

Buenas prácticas en diseño y maquetación de emails

Creación de Plantillas de Email HTML Compatibles con Todos los Clientes

Inserción de Imágenes y Enlaces en Plantillas de Email HTML

Estilos CSS para Plantillas de Email Escalables

Creación de Campañas Promocionales en Mailchimp

Cuarto proyecto: maquetación de newsletter en técnica responsive

Diseño de Newsletters Responsivos en HTML5

Creación de Newsletter HTML con Imágenes y Links

Media Queries para Diseño Responsive en Email Marketing

Estilos CSS para Contenedores Responsivos en Plantillas de Email

Estilos CSS para Plantillas Responsivas de Email

Técnicas Avanzadas de Responsive Design para Móviles

Incorporación de Web Fonts en Plantillas de Correo Electrónico

Código condicional en correos para compatibilidad con Outlook

Pruebas de Envío de Plantillas Responsive con PutsMail

Estrategias para Integrar Videos en Emails de Forma Efectiva

Cierre

Diseño y Maquetación de Emails con Mailchimp