Concevoir des e-mails avec glisser-déposer

Vue d’ensemble

Le constructeur d’e-mails glisser-déposer de OneSignal vous permet de concevoir visuellement des e-mails responsifs, exactement comme ils apparaîtront dans les boîtes de réception des utilisateurs—sans écrire de HTML complet. Vous construisez 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

Ce guide vous guide à travers chaque composant et montre la façon recommandée de construire un e-mail du début à la fin.

Utilisez le constructeur d’e-mails glisser-déposer si vous voulez :

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 de l’équipe non techniques 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é (par défaut)

Suivez cet ordre pour de meilleurs résultats et réduire les problèmes de rendu :

Configurez les styles globaux dans Paramètres
Ajoutez la structure de mise en page en utilisant Lignes
Insérez des blocs de Contenu
Ajoutez la personnalisation et les liens
Ajoutez les liens de désabonnement (pour les e-mails marketing)
Enregistrez comme modèle ou envoyez

Une fois terminé, votre e-mail devrait :

Avoir une largeur de 600px ou moins
S’afficher clairement sur mobile et desktop
Inclure les liens de conformité nécessaires

Importez vos propres modèles

Si vous avez déjà des modèles d’e-mails HTML, vous pouvez les ajouter à OneSignal via :

Transfert de modèles d’e-mails
API Create Template
Copiez-collez le HTML dans l’Éditeur HTML

Paramètres

Les paramètres définissent la mise en page fondamentale et le style de votre e-mail. Ces valeurs se propagent vers les lignes et les blocs de contenu à moins d’être explicitement remplacées.

Paramètres de conception	Description
Largeur de la zone de contenu	Largeur de l’e-mail (pixels). Recommandé : `600px`.
Alignement de la zone de contenu	Aligne 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 `lang` HTML pour l’accessibilité. Par défaut en anglais.

Valeurs par défaut recommandées : Configurez autant de style que possible dans les paramètres pour assurer 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.

Utilisez les lignes pour contrôler la mise en page et l’espacement. Évitez de dépendre de blocs de contenu individuels pour les principales décisions de mise en page.

Supprimer et dupliquer des lignes

Sélectionnez la ligne et utilisez les icônes supprimer et dupliquer.

Lignes enregistrées

Cliquez sur l’icône de sauvegarde sur n’importe quelle ligne pour la réutiliser dans les modèles. Les mises à jour d’une ligne enregistrée peuvent éventuellement s’appliquer à tous les modèles qui l’utilisent.

Pour accéder aux lignes enregistrées, accédez à l’onglet Rows et ouvrez le menu déroulant des lignes enregistrées :

Catégories du menu déroulant :

Empty – modèles de ligne vides
My Saved Rows – lignes que vous avez enregistrées
Sample Rows – modèles préconçus par OneSignal

Propriétés de ligne

Cliquez sur le bord extérieur de la 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és de ligne	Description
Arrière-plan	Couleur ou image derrière la ligne. Recommandé : Définissez la couleur d’arrière-plan dans les paramètres pour la cohérence.
Bordures	Couleur, largeur et style de bordure.
Mise en page	Afficher ou masquer la ligne sur mobile ou desktop.
Colonnes	Ajouter, supprimer ou redimensionner les colonnes et ajuster le remplissage des colonnes.

Évitez d’utiliser des images d’arrière-plan dans les lignes. Le support des clients de messagerie est incohérent. Si une ligne ne contient qu’une image, utilisez plutôt un Bloc Image.

Contenu

Les blocs de contenu sont les éléments réels que les utilisateurs voient—texte, images, boutons, diviseurs et HTML. Glissez les blocs de contenu dans les colonnes de ligne. Ils s’adaptent automatiquement à la largeur de la colonne.

Règles de décision pour les blocs de contenu :

Utilisez les Blocs de Texte pour la plupart du texte.
Utilisez les Blocs d’Image pour les éléments visuels ou la typographie personnalisée.
Utilisez les Blocs HTML seulement quand vous avez besoin d’un style ou comportement avancé.

Polices personnalisées

L’éditeur glisser-déposer supporte les polices système par défaut. Pour utiliser des polices personnalisées, vous devez utiliser des blocs HTML.

Bloc HTML

<!-- Placez ceci dans un bloc HTML en haut de votre e-mail -->
<style type="text/css">
  /* Déclare Bebas Neue (charge seulement dans les clients qui supportent les polices web) */
  @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>

Valeurs par défaut recommandées : Utilisez les polices système pour le texte du corps, les polices personnalisées seulement pour les titres.

De nombreux clients de messagerie (y compris Gmail et Outlook pour Windows) ne chargent pas les polices web. Incluez toujours des polices de secours ou utilisez des images pour une typographie garantie.Pour “forcer” une police spécifique, envisagez d’utiliser des images avec la police souhaitée.

Images et vidéo

Vous pouvez télécharger des images sur le tableau de bord OneSignal pour les rendre accessibles à votre équipe. Modifiez et appliquez des effets d’image comme le recadrage, le filtrage et plus directement dans l’éditeur. Vous pouvez aussi utiliser des URL pour les images et vidéos. Assurez-vous qu’elles sont accessibles via l’URL fournie.

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 principales : 16:9 ou 2:1 (ex : 600×338 ou 600×300)
Images carrées : 1:1 (ex : 300×300) — bien pour les grilles de produits
Miniatures : 1:1 ou 4:3
Largeur maximale : 600–700px est standard (la plupart des clients e-mail)
Conception pour 2x pour les écrans Retina (ex : 1200px de large, affiché en 600px)

Taille de fichier :

Gardez les images individuelles sous 100–200KB
Taille totale de l’e-mail (y compris les images) sous 1MB
Plus petit = temps de chargement plus rapides et meilleure délivrabilité

Formats de fichier :

JPG : Meilleur pour les photos
PNG : Meilleur pour les graphiques, logos, transparence
GIF : Pour les animations simples (gardez la taille de fichier petite)
WebP : Pas encore largement supporté dans les e-mails — évitez

Autres conseils :

Incluez toujours le texte alt pour l’accessibilité et quand les images ne se chargent pas
Utilisez CSS en ligne pour le style (beaucoup de clients suppriment les balises <style>)
Évitez les images d’arrière-plan (support incohérent)
Testez entre les clients (Gmail, Outlook, Apple Mail rendent tous différemment)
- Outlook ignore souvent les dimensions d’image, donc définissez les attributs width et height en HTML

Liens

Le suivi des liens est activé par défaut. Le suivi multi-liens est disponible. Consultez Liens et Liens profonds pour plus de détails.

Liens de désabonnement

Tous les e-mails marketing doivent contenir un lien de désabonnement. Sans lien de désabonnement, vos e-mails ont plus de chances d’être marqués comme spam. Pour plus de détails, consultez Liens de désabonnement. OneSignal fournit un lien de désabonnement par défaut qui, lorsqu’utilisé, désabonnera l’Abonnement e-mail de l’utilisateur. Vous pouvez aussi inclure votre propre URL de désabonnement personnalisée si vous le souhaitez. Assurez-vous simplement de gérer correctement les abonnements e-mail (détails dans Créer une page de désabonnement personnalisée). Ajoutez le [unsubscribe_url] par défaut de OneSignal à votre e-mail via :

Bloc HTML : <a href="[unsubscribe_url]">Unsubscribe</a>
Sélectionnez votre texte et utilisez l’option Liens spéciaux dans l’éditeur, ou définissez [unsubscribe_url] dans le champ URL

Blocs HTML

Les blocs HTML permettent un balisage et un style personnalisés.

JavaScript n’est pas supporté
CSS en ligne recommandé
Certains clients suppriment les classes et IDs

Les blocs HTML sont le meilleur endroit pour le style avancé comme les remplacements de mode sombre. Consultez Meilleures pratiques de style de mode sombre.

Personnalisation

Utilisez les modèles liquid pour personnaliser les messages. Exemple : {{ first_name | default: "there" }}

Pour plus de détails, consultez Personnalisation de message et Utilisation de la syntaxe Liquid.

Emojis

Les emojis peuvent s’afficher différemment sur différentes plateformes d’e-mail.

Enregistrez votre travail

Vous pouvez enregistrer votre conception d’e-mail comme un modèle pour une utilisation future.

FAQ

Comment gérer le mode sombre ?

La plupart des e-mails s’affichent de manière acceptable en mode sombre, mais assurez-vous de tester. Pour un style de mode sombre avancé, utilisez des blocs HTML, consultez Meilleures pratiques de style de mode sombre.

Comment ajouter un lien de désabonnement personnalisé ?

Pour les détails, consultez Créer une page de désabonnement personnalisée.

Premiers pas et paramètres

Canaux de messagerie

Journeys

Audience et événements personnalisés

Analyses et intégrations

Confidentialité et sécurité

Concevoir des e-mails avec glisser-déposer

Vue d’ensemble