E-mail marketing
Design

Modèles de newsletter : téléchargements gratuits, conseils de design et meilleurs exemples (2026)

Téléchargez des modèles de newsletter gratuits et trouvez l’inspiration. Modèles HTML responsives, bonnes pratiques de design et exemples pour chaque secteur.

Set Noa
Set Noa
Mis à jour
0 visites · 7 j
newsletter templates
Modèles de newsletter?

Téléchargez des modèles de newsletter gratuits et appliquez les bons conseils de design. Brevo inclut des modèles responsives et personnalisables dans son offre gratuite, sans code.

En savoir plus

TL ;DR : Un bon modèle de newsletter est responsive sur mobile, sur une seule colonne, fidèle à la marque et construit autour d’un seul CTA clair. Brevo inclut plus de 40 modèles responsives gratuits dans son éditeur drag-and-drop, sans aucun code. Canva, Stripo et BEEFree sont de solides alternatives pour les fichiers de design.

Un excellent modèle de newsletter fait le gros du travail pour votre e-mail marketing. Il rend votre contenu professionnel, guide les lecteurs vers votre CTA et fonctionne parfaitement sur chaque appareil et chaque client de messagerie.

Ce guide couvre tout sur les modèles de newsletter : où les obtenir gratuitement, comment en concevoir d’efficaces et des exemples pour chaque secteur.

Ce qui fait un excellent modèle de newsletter

Éléments essentiels

  1. Design responsive sur mobile, plus de 60 % des e-mails sont ouverts sur mobile
  2. Hiérarchie visuelle claire, guidez l’œil du titre vers le CTA
  3. Cohérence de marque, couleurs, polices et emplacement du logo
  4. Mise en page sur une seule colonne, meilleure lisibilité sur tous les appareils
  5. CTA visible, une seule action claire par e-mail
  6. Texte de pré-en-tête, prolongez votre objet dans la boîte de réception
  7. Lien de désabonnement, exigé par la loi (CAN-SPAM, RGPD)

Anatomie d’un modèle

┌─────────────────────────┐
│  Logo / En-tête marque  │
├─────────────────────────┤
│  Image principale       │
├─────────────────────────┤
│  Titre                  │
│  Corps de texte (2-3 l.)│
│  [Bouton CTA]           │
├─────────────────────────┤
│  Section de contenu 2   │
│  [CTA secondaire]       │
├─────────────────────────┤
│  Pied de page / Réseaux │
│  Lien de désabonnement  │
└─────────────────────────┘
Modèles Tajo

Quatre mises en page, en direct

Chaque panneau ci-dessous est le HTML réel du modèle, dans un cadre à une largeur réelle. Réduisez la largeur à 375 px et regardez les colonnes s'empiler.

Suit votre thème — changez-le dans l'en-tête pour voir l'autre.

Lire le HTML de The Letter 6 Ko, sans build 
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>The Letter</title>
<style>
  body { margin:0; padding:0; width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
  table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
  img { border:0; outline:none; line-height:100%; -ms-interpolation-mode:bicubic; display:block; }
  a { text-decoration:underline; }
  @media only screen and (max-width:620px) {
    .wrap { width:100% !important; }
    .stack { display:block !important; width:100% !important; max-width:100% !important; }
    .gutter { padding-left:20px !important; padding-right:20px !important; }
    .cta { display:block !important; width:100% !important; box-sizing:border-box !important; text-align:center !important; }
    .h1 { font-size:26px !important; line-height:32px !important; }
    .thumb { width:100% !important; height:auto !important; max-width:100% !important; }
    /* A digest row is the one two-column layout that should NOT stack: the
       thumbnail shrinks and stays beside the headline, because a roundup is
       read by scanning and a full-width decorative image per story destroys
       that. */
    .row-thumb { width:80px !important; }
    .row-thumb img { width:80px !important; height:80px !important; }
    .hide-sm { display:none !important; }
  }
@media (prefers-color-scheme: dark) {

    .d-bg { background-color:#151515 !important; }
    .d-card { background-color:#1c1c1c !important; }
    .d-ink { color:#f2f2f2 !important; }
    .d-mute { color:#a8a8a8 !important; }
    .d-rule { border-color:#3a3a3a !important; }
  }
</style>
</head>
<body class="d-bg" style="margin:0;padding:0;background-color:#f0efec;">
<span style="display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">La citation que vous gardez dans votre application de notes travaille plus dur que votre calendrier éditorial.</span><span style="display:none;font-size:1px;color:#fefefe;">&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;</span>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-bg" style="background-color:#f0efec;">
  <tr><td align="center" style="padding:32px 12px;">
    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" class="wrap d-card" style="width:600px;max-width:600px;background-color:#ffffff;">

      <tr><td style="padding:0;">
        <img src="/_astro/letter-masthead.BcPkHvz4.png" width="600" height="250" alt="Bandeau Meridian Press : arcs bleus concentriques traversés par une bande diagonale" style="width:100%;height:auto;max-width:600px;">
      </td></tr>

      <tr><td class="gutter" style="padding:36px 88px 0 88px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <p class="d-mute" style="margin:0 0 6px 0;font-size:13px;line-height:18px;letter-spacing:.08em;text-transform:uppercase;color:#6b6b6b;">Meridian Press · Numéro 47</p>
      </td></tr>

      <tr><td class="gutter" style="padding:0 88px;font-family:Georgia,'Times New Roman',Times,serif;">
        <h1 class="h1 d-ink" style="margin:0 0 20px 0;font-size:34px;line-height:42px;font-weight:400;color:#141414;">L'archive est le produit</h1>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Il y a trois semaines, j'ai cherché un texte écrit en 2019 et je ne l'ai pas trouvé. Ni sur le site, ni dans l'export, ni dans la recherche de la plateforme. Mille deux cents numéros, et le seul index qui fonctionnait était ma mémoire.</p>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">C'est ce que personne ne vous dit sur six ans de newsletter. Envoyer est facile. Conserver ne l'est pas.</p>
      </td></tr>

      <tr><td class="gutter" style="padding:8px 88px 28px 88px;">
        <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
          <tr><td class="quote" style="border-left:3px solid #0084d1;padding:4px 0 4px 0;padding-left:20px;font-family:Georgia,'Times New Roman',Times,serif;">
            <p class="d-ink" style="margin:0;font-size:19px;line-height:30px;font-style:italic;color:#141414;">Tout ce que vous publiez est un dépôt. Presque personne ne construit le retrait.</p>
          </td></tr>
        </table>
      </td></tr>

      <tr><td class="gutter" style="padding:0 88px;font-family:Georgia,'Times New Roman',Times,serif;">
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Cette semaine, j'ai donc reconstruit le catalogue en véritable archive, avec étiquettes, recherche plein texte et URL permanentes. Neuf jours de travail. Le nombre d'abonnés n'a pas bougé. Le temps passé sur le site a triplé.</p>
        <p class="d-ink" style="margin:0 0 28px 0;font-size:18px;line-height:30px;color:#242424;">Tout est ci-dessous, y compris ce qui n'a pas marché.</p>
      </td></tr>

      <tr><td class="gutter" style="padding:0 88px 36px 88px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <a href="https://example.com" style="font-size:17px;line-height:24px;font-weight:600;color:#0084d1;text-decoration:underline;">Lire le numéro complet &rarr;</a>
      </td></tr>

      <tr><td class="gutter d-rule" style="padding:0 88px;border-top:1px solid #e4e2de;"></td></tr>

      <tr><td class="gutter" style="padding:24px 88px 40px 88px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:22px;color:#6b6b6b;">Écrit à la main chaque jeudi. Répondez, je vous lis.</p>
        <p class="d-mute" style="margin:0;font-size:13px;line-height:20px;color:#8a8a8a;">Meridian Press, 14 Harbour Lane, Bristol BS1 4TT<br>
        <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Se désabonner</a> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Voir dans le navigateur</a></p>
      </td></tr>

    </table>
  </td></tr>
</table>
</body>
</html>

Sources de modèles de newsletter gratuits

1. Brevo (recommandé)

L’offre gratuite de Brevo inclut plus de 40 modèles de newsletter responsives intégrés à l’éditeur drag-and-drop. Catégories disponibles :

  • E-mails de bienvenue
  • Annonces produit
  • Résumés hebdomadaires
  • Invitations à des événements
  • Campagnes saisonnières

Avantages : gratuit, responsive, facile à personnaliser, aucun HTML requis Pour commencer : Créer un compte Brevo gratuit

2. Canva

Canva propose des modèles compatibles e-mail que vous personnalisez avec son outil de design.

3. Stripo

Stripo propose plus de 1 100 modèles d’e-mail responsives gratuits, exportables vers n’importe quel ESP.

4. BEEFree

BEE propose un éditeur de modèles gratuit avec des designs professionnels.

Comparatif des sources de modèles gratuits

SourceModèles gratuitsÉditeur sans codeExport vers tout ESPIdéal pour
Brevo40+ responsivesOuiNatif (intégré)Concevoir et envoyer de bout en bout
CanvaNombreux designsOuiExport manuelMarketeurs orientés visuel
Stripo1 100+OuiOuiVariété et flexibilité d’ESP
BEEFreeGrande bibliothèqueOuiOuiDesign de modèles autonome

Si vous voulez un seul endroit pour concevoir, personnaliser et envoyer, Brevo est la voie la plus directe. Si vous avez seulement besoin de fichiers de design à déposer dans un autre outil, Stripo et BEEFree ont les bibliothèques les plus larges.

Bonnes pratiques pour vos modèles de newsletter

Design

  • Largeur maximale de 600 px pour la compatibilité des clients de messagerie
  • Taille de police du corps de texte entre 14 et 16 px
  • Privilégiez les boutons CTA plutôt que les liens texte (zone de touche d’au moins 44 × 44 px)
  • Limitez-vous à 2 ou 3 couleurs de votre palette de marque
  • Utilisez des polices web sûres (Arial, Georgia, Verdana) avec des solutions de repli

Disposition du contenu

  • Pyramide inversée : le contenu le plus important d’abord
  • Lecture en F : informations clés à gauche
  • Espace blanc : ne tassez pas le contenu, laissez-le respirer
  • Ratio image/texte : 40 % d’images, 60 % de texte (pour la délivrabilité)

Technique

  • Ajoutez toujours un texte alternatif aux images
  • Testez sur les clients : Gmail, Outlook, Apple Mail, Yahoo
  • Gardez la taille totale de l’e-mail sous 100 Ko pour un chargement rapide
  • Utilisez du CSS en ligne pour un rendu cohérent

Modèles de newsletter par type

1. Modèle de newsletter de bienvenue

Objectif : faire une bonne première impression Éléments clés : présentation de la marque, proposition de valeur, ce que le lecteur peut attendre, CTA rapide

2. Modèle de résumé hebdomadaire

Objectif : revue régulière de contenus Éléments clés : sections curées, brefs résumés, liens « lire la suite »

3. Modèle d’annonce produit

Objectif : lancer un nouveau produit ou une nouvelle fonctionnalité Éléments clés : visuel produit, bénéfices clés, tarif, CTA d’achat

4. Modèle promotionnel

Objectif : générer des ventes avec une offre Éléments clés : code de réduction, visuels produit, urgence, CTA d’achat

5. Modèle éducatif

Objectif : apporter de la valeur et construire la confiance Éléments clés : astuces ou tutoriels, mise en page épurée, CTA discret

Créer votre newsletter dans Brevo

  1. Inscrivez-vous à l’offre gratuite de Brevo
  2. Choisissez un modèle dans la bibliothèque ou partez de zéro
  3. Personnalisez en drag-and-drop : logo, couleurs, blocs de contenu
  4. Prévisualisez sur desktop et mobile
  5. Testez en vous envoyant l’e-mail à vous-même et à vos collègues
  6. Programmez ou envoyez immédiatement

L’éditeur de Brevo enregistre vos modèles personnalisés pour les réutiliser, et vous pouvez constituer des bibliothèques de modèles aux couleurs de votre marque pour votre équipe.

Conseils pour plus d’engagement

  • Personnalisez la salutation et le contenu selon les segments
  • Testez en A/B différentes mises en page pour trouver ce qui fonctionne (guide des tests A/B)
  • Restez lisible, les lecteurs passent en moyenne 11 secondes par e-mail
  • Un seul CTA principal, ne donnez pas trop de choix au lecteur
  • Cadence régulière, entraînez les lecteurs à attendre et ouvrir vos e-mails

Connecter les modèles aux données clients

Un modèle soigné ne vaut que par l’audience qu’il atteint. Les équipes qui tirent le plus de leurs newsletters connectent leurs données boutique à leur outil d’e-mail, pour que chaque envoi soit ciblé, pas générique. Tajo synchronise les clients, produits et commandes Shopify vers Brevo, de sorte que le même modèle puisse être personnalisé par segment : une mise en page de bienvenue pour les nouveaux abonnés, une annonce produit pour les anciens acheteurs de cette catégorie, ou une offre de réactivation pour les clients inactifs. Le modèle reste cohérent, le contenu et l’audience s’adaptent automatiquement.

Étapes suivantes

  1. Commencez avec l’offre gratuite de Brevo et explorez sa bibliothèque de modèles
  2. Lisez notre guide de design de newsletter pour des conseils avancés
  3. Consultez nos exemples de newsletter pour vous inspirer
  4. Configurez votre première campagne e-mail

Questions fréquemment posées

Où trouver des modèles de newsletter gratuits ?
Brevo inclut des dizaines de modèles de newsletter gratuits et responsives dans son éditeur drag-and-drop, sans compétences en design. Vous trouverez aussi des modèles gratuits sur Canva, Stripo et BEEFree.
Qu'est-ce qui fait un bon modèle de newsletter ?
Un bon modèle de newsletter est responsive sur mobile, présente une hiérarchie visuelle claire, utilise vos couleurs de marque, comprend un CTA visible, se charge rapidement et fonctionne sur tous les clients de messagerie (Gmail, Outlook, Apple Mail).
Faut-il des compétences en HTML pour créer un modèle de newsletter ?
Non. Les plateformes modernes comme Brevo proposent des éditeurs drag-and-drop qui produisent des modèles responsives sans une ligne de code. Vous personnalisez couleurs, mises en page, images et polices de manière visuelle.
À quelle fréquence envoyer une newsletter ?
Choisissez une cadence que vous pouvez tenir dans la durée. Un rythme prévisible, hebdomadaire ou mensuel, entraîne vos lecteurs à attendre et ouvrir vos e-mails, ce qui compte plus que la fréquence brute.
Partager cet article:
Retour à tous les articles

Demandez un accès anticipé

Indiquez votre prénom ainsi qu’une adresse e-mail ou un numéro de téléphone. Nous vous recontacterons pour vous communiquer les modalités d’accès à Tajo.

détection automatique
Obtenir Brevo