// plantillas de email
Plantillas de Email HTML Gratuitas
Navega por plantillas de email HTML responsivas prediseñadas. Previsualiza y copia el HTML para boletines, emails de bienvenida, promociones y mensajes transaccionales.
Newsletter
Clean newsletter template with header, content sections, and footer.
Código Fuente HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Newsletter</title>
</head>
<body style="margin:0;padding:0;background-color:#f4f4f5;font-family:Arial,Helvetica,sans-serif;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f4f4f5;">
<tr>
<td align="center" style="padding:40px 20px;">
<table role="presentation" width="600" cellpadding="0" cellspacing="0" style="background-color:#ffffff;border-radius:8px;overflow:hidden;">
<!-- Header -->
<tr>
<td style="background-color:#16a34a;padding:30px 40px;text-align:center;">
<h1 style="margin:0;color:#ffffff;font-size:28px;font-weight:bold;">Your Newsletter</h1>
<p style="margin:8px 0 0;color:#bbf7d0;font-size:14px;">Monthly updates and insights</p>
</td>
</tr>
<!-- Main Content -->
<tr>
<td style="padding:40px;">
<h2 style="margin:0 0 16px;color:#18181b;font-size:22px;">Featured Article</h2>
<p style="margin:0 0 20px;color:#52525b;font-size:15px;line-height:1.6;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<a href="#" style="display:inline-block;background-color:#16a34a;color:#ffffff;text-decoration:none;padding:12px 24px;border-radius:6px;font-size:14px;font-weight:bold;">Read More</a>
<hr style="margin:30px 0;border:none;border-top:1px solid #e4e4e7;">
<h2 style="margin:0 0 16px;color:#18181b;font-size:22px;">More Stories</h2>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td style="padding:12px 0;border-bottom:1px solid #f4f4f5;">
<h3 style="margin:0 0 4px;color:#18181b;font-size:16px;">Story Title One</h3>
<p style="margin:0;color:#71717a;font-size:13px;">Brief description of the first story goes here.</p>
</td>
</tr>
<tr>
<td style="padding:12px 0;border-bottom:1px solid #f4f4f5;">
<h3 style="margin:0 0 4px;color:#18181b;font-size:16px;">Story Title Two</h3>
<p style="margin:0;color:#71717a;font-size:13px;">Brief description of the second story goes here.</p>
</td>
</tr>
<tr>
<td style="padding:12px 0;">
<h3 style="margin:0 0 4px;color:#18181b;font-size:16px;">Story Title Three</h3>
<p style="margin:0;color:#71717a;font-size:13px;">Brief description of the third story goes here.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="background-color:#f4f4f5;padding:24px 40px;text-align:center;">
<p style="margin:0;color:#71717a;font-size:12px;">You received this email because you subscribed to our newsletter.</p>
<p style="margin:8px 0 0;color:#71717a;font-size:12px;"><a href="#" style="color:#16a34a;">Unsubscribe</a> | <a href="#" style="color:#16a34a;">View in browser</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>// how it works
How to Use HTML Email Templates
- 01
Elige una Plantilla
Selecciona entre plantillas de boletín, email de bienvenida, promocional o transaccional diseñadas para uso real.
- 02
Previsualiza y Personaliza
Previsualiza la plantilla renderizada en un iframe y revisa el HTML fuente para comprender la estructura.
- 03
Exporta el HTML
Copia el código HTML completo con un clic y pégalo directamente en tu plataforma de email.
// características
Why Use HTML Email Templates
Diseño Responsivo
Cada plantilla usa diseños basados en tablas que se renderizan correctamente en todos los tamaños de pantalla y dispositivos.
Probadas en Gmail y Outlook
Las plantillas siguen las mejores prácticas de compatibilidad con clientes de email para una renderización consistente en todas partes.
Código Limpio
El CSS en línea y las estructuras de tabla semánticas producen código de email HTML ligero y mantenible.
Listas para Modo Oscuro
Las opciones de color y las relaciones de contraste funcionan bien tanto en clientes de email en modo claro como oscuro.
Primero Móvil
Diseñadas pensando en los lectores móviles, garantizando legibilidad en pantallas pequeñas sin desplazamiento horizontal.
Privacidad ante Todo
Todas las plantillas se cargan y renderizan en tu navegador. No se recopilan datos ni se envían a servidores externos.
// casos de uso
Who Uses HTML Email Templates
Diseñadores de Email
Úsalas como puntos de partida para diseños de email personalizados, ahorrando horas de trabajo con diseños basados en tablas.
Profesionales del Marketing
Lanza campañas de boletines y promocionales rápidamente con plantillas responsivas listas para usar.
Desarrolladores
Copia el código HTML limpio como base para la generación programática de email en aplicaciones.
Agencias
Entrega plantillas de email profesionales a los clientes más rápido usando bases prediseñadas y probadas.