> ## Documentation Index > Fetch the complete documentation index at: https://documentation.onesignal.com/llms.txt > Use this file to discover all available pages before exploring further. # Concevoir des e-mails avec glisser-déposer > Créez des e-mails responsifs visuellement avec le Constructeur d'E-mails Drag and Drop de OneSignal — paramètres, lignes, blocs de contenu, personnalisation et liens de conformité. ## 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](./design-emails-with-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 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 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 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 **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 HTML block theme={null}

Bienvenue !

Merci de vous être abonné.

``` 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 ` ``` 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. ```html email-header theme={null} ``` ```html email-body theme={null} ``` ```html email-button theme={null} ``` 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**](./templates) 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](./create-custom-unsubscribe-page) 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](./templates). ### 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](./email-template-forwarding) 2. Utilisez l'[API Créer un modèle](/reference/create-template) pour télécharger du HTML par programmation 3. Copiez-collez votre HTML directement dans l'[Éditeur HTML](./design-emails-with-html) ## Pages associées Guide complet pour envoyer des e-mails avec OneSignal. Contrôle HTML complet, remplacements du mode sombre et style avancé. Enregistrez et réutilisez des conceptions d'e-mails entre les campagnes. Ajoutez des liens de désabonnement par défaut ou personnalisés pour la conformité. Personnalisez les e-mails avec des tags, la syntaxe Liquid et du contenu dynamique. Testez les lignes d'objet, le contenu et les horaires d'envoi pour optimiser l'engagement.