Passer au contenu principal

​
Vue d’ensemble

Le Constructeur d’E-mails Drag and Drop de OneSignal vous permet de concevoir visuellement des e-mails responsifs exactement comme ils apparaissent dans les boîtes de réception des destinataires — sans écrire de HTML complet. Vous créez des e-mails en utilisant trois composants principaux :
  • Paramètres – styles globaux et mise en page appliqués à tout l’e-mail
  • Lignes – conteneurs de mise en page horizontaux qui contrôlent la structure et la responsivité
  • Contenu – blocs individuels comme le texte, les images, les boutons et le HTML
Les sections ci-dessous couvrent chaque composant et l’ordre recommandé pour créer un e-mail.
Utilisez le Constructeur d’E-mails Drag and Drop si vous souhaitez :
  • Concevoir des e-mails visuellement sans gérer de HTML complet (blocs HTML disponibles)
  • Réutiliser des lignes ou des modèles entre les campagnes
  • Permettre aux membres non techniques de l’équipe de modifier le contenu en toute sécurité
Si vous avez besoin d’un contrôle HTML complet, de polices personnalisées partout ou d’une logique de mode sombre avancée, utilisez plutôt l’Éditeur HTML.

​
Flux de construction recommandé

Suivez cet ordre pour de meilleurs résultats et moins de problèmes de rendu :
  1. Configurez les styles globaux dans Paramètres
  2. Ajoutez la structure de mise en page à l’aide de Lignes
  3. Insérez des blocs de Contenu
  4. Ajoutez la personnalisation et les liens
  5. Ajoutez un lien de désabonnement (pour les e-mails marketing)
  6. Enregistrez comme modèle ou envoyez
Une fois terminé, votre e-mail devrait :
  • Ne pas dépasser 600px de largeur
  • S’afficher correctement sur mobile et ordinateur
  • Inclure les liens de conformité obligatoires
Erreurs courantes causant des problèmes de rendu ou de délivrabilité :
  • Lien de désabonnement manquant — obligatoire pour les e-mails marketing. Sans lui, les fournisseurs de messagerie sont plus susceptibles de signaler votre e-mail comme spam.
  • E-mail plus large que 600px — entraîne un défilement horizontal sur mobile et casse les mises en page dans de nombreux clients.
  • Images de fond dans les lignes — Outlook et plusieurs clients mobiles ne les affichent pas. Utilisez des blocs Image à la place.
  • Pas de polices de secours — les polices web personnalisées ne se chargent que dans quelques clients. Déclarez toujours des polices système comme secours.
  • Images trop volumineuses — les e-mails de plus de 1 Mo se chargent lentement et peuvent être bloqués. Les images individuelles doivent faire moins de 200 Ko.

​
Paramètres

Les paramètres définissent la mise en page fondamentale et les styles de votre e-mail. Ces valeurs se propagent aux lignes et blocs de contenu sauf si elles sont explicitement remplacées.
Global settings panel in the Drag and Drop Editor
Paramètre de conceptionDescription
Largeur de la zone de contenuLargeur de l’e-mail en pixels. Recommandé : 600px.
Alignement de la zone de contenuAligner le contenu à gauche ou au centre.
Couleur d’arrière-planCouleur derrière la zone de contenu.
Couleur d’arrière-plan de la zone de contenuCouleur à l’intérieur de la zone de contenu.
Police par défautAppliquée à tout le texte sauf si remplacée. Les polices personnalisées nécessitent du HTML.
Couleur des liensCouleur par défaut pour tous les liens.
LangueDéfinit l’attribut HTML lang pour l’accessibilité. Par défaut en anglais.
Valeur par défaut recommandée : Configurez le maximum de styles possible dans Paramètres pour garantir la cohérence et réduire les remplacements par bloc.

​
Lignes

Les lignes définissent la mise en page horizontale de votre e-mail. Chaque ligne peut contenir une ou plusieurs colonnes, et chaque colonne peut contenir des blocs de contenu. Glissez et déposez les lignes dans l’éditeur pour construire votre structure.
Adding rows to structure an email
Utilisez les lignes pour contrôler la mise en page et l’espacement. Évitez de dépendre de blocs de contenu individuels pour les décisions de mise en page principales.

​
Lignes enregistrées

Les lignes enregistrées vous permettent de réutiliser des en-têtes, des pieds de page ou des sections répétées entre les e-mails et les modèles. Cliquez sur l’icône d’enregistrement sur une ligne pour l’enregistrer.
Saving a row for reuse
Accédez aux lignes enregistrées depuis Rows > Saved rows.
Selecting a saved row
Catégories de lignes enregistrées :
  • Empty – modèles de ligne vides
  • My Saved Rows – lignes créées par vous ou votre équipe
  • Sample Rows – exemples OneSignal

​
Propriétés de ligne

Cliquez sur le bord extérieur d’une ligne pour modifier les paramètres au niveau de la ligne.
Si vous voyez Contenu au lieu de Ligne au survol, vous avez sélectionné un bloc de contenu. Cliquez sur le bord du conteneur extérieur jusqu’à ce que l’étiquette indique Ligne.
Propriété de ligneDescription
Arrière-plansCouleur ou image derrière la ligne. Recommandé : définissez la couleur d’arrière-plan dans Paramètres pour la cohérence.
BorduresCouleur, largeur et style de la bordure.
Mise en pageAfficher ou masquer les lignes sur mobile ou ordinateur.
ColonnesAjouter, supprimer ou redimensionner les colonnes et ajuster le rembourrage des colonnes.
Supprimer/DupliquerSélectionnez une ligne et utilisez les icônes supprimer ou dupliquer pour la retirer ou la copier.
Évitez d’utiliser des images de fond dans les lignes. La prise en charge des clients de messagerie est incohérente. Si la ligne ne contient qu’une image, utilisez plutôt un Bloc Image.

​
Contenu

Les blocs de contenu sont les éléments que voient les destinataires — texte, images, boutons, séparateurs et HTML. Faites glisser un bloc de contenu dans une colonne de ligne. Il s’adapte automatiquement à la largeur de la colonne.
Available content blocks
Règles de décision pour les blocs de contenu :
  • Utilisez les blocs de Texte pour la plupart du contenu.
  • Utilisez les blocs d’Image pour les éléments visuels ou la typographie personnalisée.
  • Utilisez les blocs HTML uniquement lorsque vous avez besoin d’un style ou d’un comportement avancé.

​
Polices personnalisées

L’Éditeur Drag and Drop prend en charge les polices système par défaut. Pour utiliser des polices personnalisées, vous devez utiliser un bloc HTML.
HTML block
<!-- Place this into a HTML block at the top of your email -->
<style type="text/css">
  /* Declare Bebas Neue (only loads in clients that support web fonts) */
  @font-face {
    font-family: 'Bebas Neue';
    font-style: normal;
    font-weight: 400;
    src: url('https://fonts.gstatic.com/s/bebasneue/v9/JTUSjIg69CK48gW7PXoo9Wlhzg.ttf') format('truetype');
  }
</style>

<h1 style="font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
           font-size:36px; line-height:1.2; margin:0; text-transform:uppercase;">
  Bienvenue !
</h1>
<p style="font-family:Arial, Helvetica, sans-serif; font-size:16px; margin:12px 0 0;">
  Merci de vous être abonné.
</p>
De nombreux clients de messagerie (dont Gmail et Outlook pour Windows) ne chargent pas les polices web. Utilisez les polices système pour le corps du texte et réservez les polices personnalisées aux titres uniquement. Incluez toujours des polices de secours ou utilisez des images pour une typographie garantie.

​
Images et vidéo

Téléchargez des images directement sur le tableau de bord OneSignal pour que votre équipe puisse les réutiliser. L’éditeur prend en charge le recadrage, le filtrage et d’autres effets. Vous pouvez également référencer des images et vidéos hébergées en externe par URL — assurez-vous que chaque URL est accessible publiquement.

​
Tailles d’image recommandées pour l’e-mail

  • Images d’en-tête/bannière : 3:1 ou 4:1 (ex. : 600×200 ou 600×150)
  • Images hero : 16:9 ou 2:1 (ex. : 600×338 ou 600×300)
  • Images carrées : 1:1 (ex. : 300×300) — idéal pour les grilles de produits
  • Miniatures : 1:1 ou 4:3
  • Largeur maximale : 600–700px est le standard (la plupart des clients de messagerie)
  • Concevez en 2x pour les écrans Retina (ex. : 1200px de large, affiché en 600px)
  • Gardez les images individuelles sous 100–200 Ko
  • Taille totale de l’e-mail (images incluses) sous 1 Mo
  • Des images plus petites signifient des temps de chargement plus rapides et une meilleure délivrabilité
  • JPG — meilleur pour les photos
  • PNG — meilleur pour les graphiques, logos et images avec transparence
  • GIF — pour les animations simples (gardez la taille du fichier petite)
  • WebP — pas encore largement pris en charge dans les e-mails ; à éviter
  • Incluez toujours un texte alternatif pour l’accessibilité et lorsque les images ne se chargent pas
  • Utilisez du CSS en ligne pour les styles (de nombreux clients suppriment les balises <style>)
  • Évitez les images de fond (prise en charge incohérente entre clients)
  • Testez sur plusieurs clients — Gmail, Outlook et Apple Mail s’affichent tous différemment
  • Outlook ignore souvent les dimensions des images, alors définissez les attributs width et height en HTML

​
Liens

OneSignal active le suivi des liens par défaut et prend en charge le suivi de plusieurs liens.

Liens

Configurez le suivi des liens, le suivi multi-liens et les analyses de clics pour les e-mails.

Deep linking

Dirigez les destinataires vers des écrans spécifiques de votre application depuis les liens d’e-mail.

​
Liens de désabonnement

Tous les e-mails marketing doivent contenir un lien de désabonnement. Les e-mails sans lien ont plus de chances d’être signalés comme spam par les fournisseurs de messagerie. Lorsqu’un destinataire clique sur le lien de désabonnement par défaut de OneSignal, son Abonnement e-mail est automatiquement défini comme désabonné. Ajoutez la balise [unsubscribe_url] à votre e-mail en utilisant l’une ou l’autre méthode :

Liens de désabonnement

Exigences de conformité et comment OneSignal gère les désabonnements.

Page de désabonnement personnalisée

Remplacez le flux de désabonnement par défaut par votre propre page personnalisée.

​
Blocs HTML

Utilisez des blocs HTML lorsque vous avez besoin d’un contrôle que les blocs de contenu drag and drop ne peuvent pas fournir :
  • Remplacements du mode sombre — ajoutez du CSS prefers-color-scheme. Voir Style du mode sombre ci-dessous.
  • Polices personnalisées — déclarez des règles @font-face avec des piles de secours.
  • Mises en page avancées — grilles multi-colonnes, contenu conditionnel ou balisage spécifique à Outlook.
JavaScript n’est pas pris en charge dans les e-mails. Utilisez du CSS en ligne — de nombreux clients suppriment les balises <style>, les classes et les IDs.

​
Personnalisation

Utilisez les modèles Liquid pour insérer du contenu spécifique à l’abonné comme les noms, les tags ou les valeurs de secours. Exemple : {{ first_name | default: "there" }}
Using Liquid templating to personalize messages

Personnalisation des messages

Variables de personnalisation disponibles et comment les utiliser.

Utilisation de la syntaxe Liquid

Conditions, filtres, boucles et modèles Liquid avancés.

​
Mode sombre

La plupart des e-mails s’affichent correctement en mode sombre sans modification. Cependant, les e-mails avec des couleurs de marque, des logos sur des fonds blancs ou des sections colorées nécessitent souvent des ajustements.

​
Ai-je besoin d’un style de mode sombre ?

Ajoutez des remplacements de mode sombre si votre e-mail comprend l’un des éléments suivants :
  • Sections aux couleurs de marque — les couleurs saturées deviennent agressives en mode sombre et nuisent à la lisibilité
  • Logos ou icônes sur des fonds blancs/clairs — le fond peut s’inverser tandis que l’image reste claire, la rendant invisible
  • Texte sur des fonds colorés — les fonds inversés peuvent contraster avec les couleurs de texte non inversées
  • Boutons d’appel à l’action — les fonds de boutons peuvent s’inverser vers des couleurs inattendues
Si votre e-mail est principalement du texte avec un style minimal, le rendu par défaut est généralement acceptable.

​
Prévisualiser le mode sombre dans l’éditeur

Utilisez le bouton Mode Prévisualisation pour obtenir un aperçu général du rendu en mode sombre. Cet aperçu est une approximation — le rendu réel varie selon le fournisseur de messagerie (voir le tableau de comportement des clients ci-dessous).
Preview mode in the Drag and Drop Editor
Light and dark mode toggle in the Drag and Drop Editor

​
Comment les clients de messagerie gèrent le mode sombre

Chaque client de messagerie applique le mode sombre différemment. Vous ne pouvez pas contrôler ce comportement directement, mais vous pouvez concevoir des e-mails qui s’affichent bien dans tous les modes.
ClientComportementRespecte le CSS prefers-color-scheme ?
Apple Mail (iOS/macOS)Inversion totale des couleursOui
Gmail (apps iOS/Android)Inversion partielle — change les fonds clairs mais pas toutes les couleursNon
Gmail (Web)Pas de rendu en mode sombreN/A
Outlook (Windows)Inversion totale avec le moteur de rendu WordNon — ignore la plupart des remplacements CSS
Outlook (Mac/iOS)Inversion partielleOui
Yahoo MailInversion partielleNon
Samsung MailInversion totaleNon
Échecs courants du mode sombre à surveiller :
  • Logos qui disparaissent — un logo sombre sur un PNG transparent devient invisible sur un fond sombre. Ajoutez un contour blanc ou clair, ou utilisez une version avec un fond clair intégré.
  • Texte illisible — le texte sombre sur fond clair peut rester sombre après l’inversion du fond. Associez toujours les remplacements de couleur de texte aux remplacements de fond.
  • Couleurs de marque en conflit — les couleurs de marque saturées qui ressortent sur blanc deviennent agressives sur des fonds sombres. Testez des alternatives désaturées ou atténuées.
  • Boutons invisibles — les boutons CTA avec du texte sombre sur un fond aux couleurs de la marque peuvent perdre en contraste après une inversion partielle.
Conseils de conception :
  • Évitez le blanc pur (#FFFFFF) et le noir pur (#000000). Utilisez des blancs cassés et des gris foncés pour réduire l’impact des clients avec inversion totale.
  • Utilisez des PNG transparents avec précaution. Ils se fondent bien avec n’importe quelle couleur de fond, mais les logos sombres sur des fonds transparents deviennent invisibles en mode sombre. Ajoutez un contour clair ou utilisez une version avec un fond intégré pour les logos.
  • Sur les images comportant du texte, contournez le texte sombre en blanc pour garantir la lisibilité. Pour le texte blanc sur fond sombre, contournez en noir.

​
Style du mode sombre avec drag and drop

Si seulement quelques éléments s’affichent mal en mode sombre, vous pouvez les remplacer par des blocs HTML et remplacer le style directement à l’aide de classes CSS et de déclarations !important.
1

Ajoutez un bloc HTML en haut de votre e-mail

Faites glisser un bloc HTML dans la première ligne de votre e-mail.
Adding an HTML block to the top of your email
2

Ajoutez du CSS pour le mode sombre

Collez ce qui suit dans le bloc HTML. La media query prefers-color-scheme: dark applique les styles uniquement lorsque le client de messagerie du destinataire est en mode sombre.
HTML block
<meta name="color-scheme" content="light dark" />
<meta name="supported-color-schemes" content="light dark" />
<style>
  :root {
    color-scheme: light dark;
  }

  @media (prefers-color-scheme: dark) {
    .email-body {
      background-color: #1a1a1a !important;
      color: #f0f0f0 !important;
    }

    .email-header {
      background-color: #2d2d2d !important;
    }

    .email-button {
      background-color: #0a84ff !important;
    }
  }
</style>
3

Remplacez le contenu problématique par des blocs HTML

Remplacez les blocs de contenu qui ne s’affichent pas correctement en mode sombre par des blocs HTML utilisant les classes CSS définies ci-dessus.
<div class="email-header" style="background-color: #f5f5f5; padding: 0; text-align: center;">
  <img src="https://dashboard.onesignal.com/assets/email/your-email-strategy-starts-here.jpg"
       alt="Your email strategy starts here"
       width="600"
       style="display: block; width: 100%; max-width: 600px; height: auto;" />
</div>
Revenez en mode prévisualisation pour vérifier que les styles du mode sombre sont correctement appliqués.

​
Enregistrez votre travail

Enregistrez votre conception d’e-mail comme un modèle pour une utilisation future.
Save email as a template

​
FAQ

​
Comment ajouter un lien de désabonnement personnalisé ?

Remplacez le [unsubscribe_url] par défaut par votre propre URL. Vous êtes responsable de la mise à jour du statut d’Abonnement e-mail dans OneSignal lorsqu’un destinataire se désabonne. Consultez Créer une page de désabonnement personnalisée pour les détails de configuration.

​
Pourquoi mon e-mail s’affiche-t-il différemment dans Outlook ?

Outlook sur Windows utilise le moteur de rendu de Microsoft Word, qui ne prend pas en charge le CSS moderne. Les problèmes courants incluent max-width ignoré, les images de fond réduites à néant et les polices web absentes. Testez spécifiquement dans Outlook et utilisez du CSS en ligne avec des attributs explicites width et height sur les images.

​
Quelle est la taille maximale d’un e-mail ?

Gardez la taille totale de l’e-mail (HTML + images) sous 1 Mo. Les e-mails de plus de 102 Ko de HTML sont tronqués par Gmail, qui masque le contenu sous un lien “Afficher le message entier”. Optimisez les images et supprimez le code inutilisé pour rester sous ce seuil.

​
Puis-je réutiliser des parties d’un e-mail dans plusieurs campagnes ?

Oui. Enregistrez n’importe quelle ligne comme Ligne Enregistrée en cliquant sur l’icône d’enregistrement sur la ligne. Les lignes enregistrées apparaissent sous Rows > My Saved Rows et peuvent être glissées dans n’importe quel e-mail. Pour la réutilisation d’e-mails complets, enregistrez l’ensemble de la conception comme un modèle.

​
Comment prévisualiser mon e-mail avant de l’envoyer ?

Utilisez le bouton Aperçu dans la barre d’outils supérieure pour voir comment votre e-mail s’affiche sur ordinateur et mobile. Pour envoyer un test en direct, cliquez sur Envoyer un e-mail de test et saisissez une adresse de destinataire. Les e-mails de test sont livrés dans la boîte de réception afin que vous puissiez vérifier le rendu, les liens et la personnalisation dans de vrais clients de messagerie.

​
Les emojis fonctionnent-ils dans les e-mails ?

Oui, mais ils s’affichent différemment selon les clients de messagerie. Outlook sur Windows est le plus incohérent — les emojis peuvent apparaître sous forme de contours en noir et blanc ou de carrés. Si les emojis font partie de votre ligne d’objet ou de votre texte CTA, testez sur plusieurs clients avant d’envoyer.

​
Comment importer un modèle HTML d’e-mail existant ?

Vous pouvez importer des modèles HTML existants dans OneSignal de trois façons :
  1. Transférez l’e-mail à OneSignal en utilisant le Transfert de modèles d’e-mail
  2. Utilisez l’API Créer un modèle pour télécharger du HTML par programmation
  3. Copiez-collez votre HTML directement dans l’Éditeur HTML

​
Pages associées

Vue d'ensemble des e-mails

Guide complet pour envoyer des e-mails avec OneSignal.

Concevoir des e-mails avec HTML

Contrôle HTML complet, remplacements du mode sombre et style avancé.

Modèles d'e-mails

Enregistrez et réutilisez des conceptions d’e-mails entre les campagnes.

Liens de désabonnement

Ajoutez des liens de désabonnement par défaut ou personnalisés pour la conformité.

Personnalisation des messages

Personnalisez les e-mails avec des tags, la syntaxe Liquid et du contenu dynamique.

Test AB

Testez les lignes d’objet, le contenu et les horaires d’envoi pour optimiser l’engagement.