Concevoir des e-mails avec glisser-déposer

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 :

Configurez les styles globaux dans Paramètres
Ajoutez la structure de mise en page à l’aide de Lignes
Insérez des blocs de Contenu
Ajoutez la personnalisation et les liens
Ajoutez un lien de désabonnement (pour les e-mails marketing)
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 — Panneau des paramètres globaux dans l'Éditeur Drag and Drop

Paramètre de conception	Description
Largeur de la zone de contenu	Largeur de l’e-mail en pixels. Recommandé : `600px`.
Alignement de la zone de contenu	Aligner le contenu à gauche ou au centre.
Couleur d’arrière-plan	Couleur derrière la zone de contenu.
Couleur d’arrière-plan de la zone de contenu	Couleur à l’intérieur de la zone de contenu.
Police par défaut	Appliquée à tout le texte sauf si remplacée. Les polices personnalisées nécessitent du HTML.
Couleur des liens	Couleur par défaut pour tous les liens.
Langue	Dé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 — Ajout de lignes pour structurer un e-mail

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 — Enregistrer une ligne pour la réutiliser

Accédez aux lignes enregistrées depuis Rows > Saved rows.

Selecting a saved row — Sélectionner une ligne enregistrée

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 ligne	Description
Arrière-plans	Couleur ou image derrière la ligne. Recommandé : définissez la couleur d’arrière-plan dans Paramètres pour la cohérence.
Bordures	Couleur, largeur et style de la bordure.
Mise en page	Afficher ou masquer les lignes sur mobile ou ordinateur.
Colonnes	Ajouter, supprimer ou redimensionner les colonnes et ajuster le rembourrage des colonnes.
Supprimer/Dupliquer	Sé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 — Blocs de contenu disponibles

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

Ratios d'aspect

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)

Taille de fichier

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é

Formats de fichier

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

Conseils généraux

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 :

Editor (Special links)
HTML block

Sélectionnez le texte que vous souhaitez transformer en lien de désabonnement.
Cliquez sur l’icône de lien dans la barre d’outils.
Choisissez Special links > Unsubscribe.

Adding the unsubscribe link using Special links in the editor — Ajout du lien de désabonnement en utilisant Special links dans l'éditeur

Collez ce qui suit dans un bloc HTML :

<a href="[unsubscribe_url]">Unsubscribe</a>

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 — Utilisation des modèles Liquid pour personnaliser les 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.

Client	Comportement	Respecte le CSS `prefers-color-scheme` ?
Apple Mail (iOS/macOS)	Inversion totale des couleurs	Oui
Gmail (apps iOS/Android)	Inversion partielle — change les fonds clairs mais pas toutes les couleurs	Non
Gmail (Web)	Pas de rendu en mode sombre	N/A
Outlook (Windows)	Inversion totale avec le moteur de rendu Word	Non — ignore la plupart des remplacements CSS
Outlook (Mac/iOS)	Inversion partielle	Oui
Yahoo Mail	Inversion partielle	Non
Samsung Mail	Inversion totale	Non

É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.

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

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>

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>

<div class="email-body" style="background-color: #ffffff; color: #333333; padding: 24px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.5;">
  <p style="margin: 0 0 16px;">Hi {{ first_name | default: 'there' }}!</p>
  <p style="margin: 0 0 16px;">Ready to craft a stunning email? Here's how to get started:</p>
  <ul style="margin: 0 0 16px; padding-left: 20px;">
    <li style="margin-bottom: 8px;"><strong>Drag &amp; drop simplicity:</strong> Add text, images, and buttons to your email.</li>
    <li style="margin-bottom: 8px;"><strong>Build smarter with Saved Rows:</strong> Create reusable headers and footers for consistent branding.</li>
    <li style="margin-bottom: 8px;"><strong>Test &amp; preview:</strong> Verify your email on every device before sending.</li>
  </ul>
</div>

<div class="email-body" style="background-color: #ffffff; padding: 0 24px 24px; text-align: center;">
  <a class="email-button" href="https://example.com"
     style="background-color: #0066cc; color: #ffffff; padding: 14px 32px;
            text-decoration: none; border-radius: 4px; display: inline-block;
            font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold;">
    Get Started
  </a>
</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 — Enregistrer l'e-mail comme modèle

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 :

Transférez l’e-mail à OneSignal en utilisant le Transfert de modèles d’e-mail
Utilisez l’API Créer un modèle pour télécharger du HTML par programmation
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.

​Vue d’ensemble

​Flux de construction recommandé

​Paramètres

​Lignes

​Lignes enregistrées

​Propriétés de ligne

​Contenu

​Polices personnalisées

​Images et vidéo

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

​Liens

Liens

Deep linking

​Liens de désabonnement

Liens de désabonnement

Page de désabonnement personnalisée

​Blocs HTML

​Personnalisation

Personnalisation des messages

Utilisation de la syntaxe Liquid

​Mode sombre

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

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

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

​Style du mode sombre avec drag and drop

​Enregistrez votre travail

​FAQ

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

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

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

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

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

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

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

​Pages associées

Vue d'ensemble des e-mails

Concevoir des e-mails avec HTML

Modèles d'e-mails

Liens de désabonnement

Personnalisation des messages

Test AB

Vue d’ensemble

Flux de construction recommandé

Paramètres

Lignes

Lignes enregistrées

Propriétés de ligne

Contenu

Polices personnalisées

Images et vidéo

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

Liens

Liens de désabonnement

Blocs HTML

Personnalisation

Mode sombre

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

Prévisualiser le mode sombre dans l’éditeur

Comment les clients de messagerie gèrent le mode sombre

Style du mode sombre avec drag and drop

Enregistrez votre travail

FAQ

Comment ajouter un lien de désabonnement personnalisé ?

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

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

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

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

Les emojis fonctionnent-ils dans les e-mails ?

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

Pages associées