// modèles d'emails
Templates d'e-mail HTML gratuits
Parcourez des templates d'e-mail HTML responsives prêts à l'emploi. Prévisualisez et copiez le HTML pour newsletters, e-mails de bienvenue, promotions et messages transactionnels.
Newsletter
Clean newsletter template with header, content sections, and footer.
Source 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
Choisissez un template
Sélectionnez parmi les templates de newsletter, e-mail de bienvenue, promotionnel ou transactionnel conçus pour une utilisation réelle.
- 02
Prévisualisez et personnalisez
Prévisualisez le template rendu dans un iframe et examinez le HTML source pour comprendre la structure.
- 03
Exportez le HTML
Copiez le code HTML complet en un clic et collez-le directement dans votre plateforme e-mail.
// fonctionnalités
Why Use HTML Email Templates
Design responsive
Chaque template utilise des mises en page à base de tableaux qui s'affichent correctement sur toutes les tailles d'écran et appareils.
Testé sur Gmail et Outlook
Les templates respectent les meilleures pratiques de compatibilité des clients de messagerie pour un rendu cohérent partout.
Code propre
Les CSS inline et les structures de tableaux sémantiques produisent un code HTML d'e-mail léger et maintenable.
Compatible mode sombre
Les choix de couleurs et les ratios de contraste fonctionnent bien dans les clients de messagerie en mode clair et sombre.
Mobile d'abord
Conçus avec les lecteurs mobiles à l'esprit, garantissant la lisibilité sur les petits écrans sans défilement horizontal.
Confidentialité avant tout
Tous les templates se chargent et s'affichent dans votre navigateur. Aucune donnée n'est collectée ni envoyée à des serveurs externes.
// cas d'utilisation
Who Uses HTML Email Templates
Designers d'e-mail
Utilisez comme points de départ pour des designs d'e-mail personnalisés, économisant des heures de travail sur les mises en page à base de tableaux.
Marketeurs
Lancez rapidement des campagnes de newsletter et promotionnelles avec des templates responsives prêts à l'emploi.
Développeurs
Copiez le code HTML source propre comme base pour la génération programmatique d'e-mails dans les applications.
Agences
Livrez des templates d'e-mail professionnels aux clients plus rapidement en utilisant des bases pré-construites et testées.