Passer au contenu principal

​
Vue d’ensemble

Le générateur d’e-mails glisser-déposer de OneSignal vous permet de concevoir visuellement des e-mails exactement comme ils apparaîtront dans les boîtes de réception de vos utilisateurs. Il se compose de trois composants principaux :
  • Paramètres – configurations globales qui s’appliquent à l’ensemble de votre message
  • Lignes – conteneurs structurels pour disposer le contenu horizontalement
  • Contenu – blocs individuels tels que des images, du texte et des boutons
Ce guide vous guidera à travers chaque composant et comment les utiliser pour créer votre e-mail. Pour des détails sur les fonctionnalités supplémentaires :

​
Importez vos propres modèles

Vous avez déjà des modèles d’e-mails ? Vous pouvez les ajouter à votre application OneSignal avec les options suivantes :
  1. Transfert de modèles d’e-mails
  2. API Create Template
  3. Copiez-collez votre HTML dans l’éditeur HTML

​
Paramètres

Les paramètres contrôlent le style de base et la mise en page de votre message. Ces paramètres se propagent vers les lignes et les blocs de contenu à moins d’être explicitement remplacés.

L'image montre les paramètres du générateur

Paramètres de conceptionDescription
Content area widthLargeur de l’e-mail en pixels. La valeur par défaut est 600px.
Content area alignmentAlignez le contenu à gauche ou au centre.
Background colorCouleur d’arrière-plan derrière la zone de contenu.
Content area background colorCouleur d’arrière-plan dans la zone de contenu.
Default fontPolice appliquée dans tout l’e-mail sauf personnalisation au niveau de la ligne ou du contenu. Les polices personnalisées nécessitent du HTML.
Link colorCouleur pour tout le texte des hyperliens.
LanguageDéfinit l’attribut lang en HTML pour l’accessibilité. Par défaut en anglais.

​
Lignes

Les lignes sont les blocs de construction horizontaux de la mise en page de votre e-mail. Chaque ligne peut contenir plusieurs colonnes et blocs de contenu. Faites simplement glisser et déposez des lignes dans l’éditeur d’e-mails pour les ajouter.

L'image montre la possibilité d'utiliser plusieurs lignes

Chaque ligne et ses colonnes peuvent remplacer les paramètres globaux, vous donnant un contrôle granulaire sur la conception et la réactivité.

​
Supprimer et dupliquer des lignes

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

L'image montre la possibilité de supprimer et de dupliquer des lignes

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

Comment enregistrer une ligne

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

Sélectionner une ligne enregistrée

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 une ligne pour modifier les propriétés. Assurez-vous de voir le mot “Row” lorsque vous survolez la ligne. Sinon, vous sélectionnerez le bloc Contenu.
Propriétés de ligneDescription
BackgroundsCouleur ou image d’arrière-plan derrière la zone de contenu. Recommandé : Définissez la couleur d’arrière-plan dans Paramètres pour la cohérence. S’il n’y a pas de contenu cliquable, envisagez d’utiliser un bloc Image au lieu d’une image d’arrière-plan de ligne.
BordersCouleur, largeur et style de bordure.
LayoutPersonnalisez ou masquez la ligne sur mobile vs bureau.
ColumnsAjoutez, supprimez, ajustez les colonnes dans la ligne, ajoutez plus de blocs Contenu. Ajustez le remplissage spécifique à la colonne.

​
Contenu

Les blocs de contenu représentent le cœur de votre message — images, texte, boutons et plus encore. Faites glisser un bloc de contenu dans une colonne de ligne et il s’ajustera à la largeur. Chaque bloc a ses propres paramètres comme le remplissage, la taille de police et l’alignement.

Sélection des blocs de contenu glisser-déposer pour concevoir votre e-mail

​
Polices personnalisées

Si vous avez besoin d’une police qui ne se trouve pas dans les paramètres, vous pouvez ajouter des polices personnalisées en utilisant le bloc HTML. Par exemple : 
<!-- Paste 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;">
  Welcome!
</h1>
<p style="font-family:Arial, Helvetica, sans-serif; font-size:16px; margin:12px 0 0;">
  Thanks for subscribing.
</p>
Comment utiliser dans l’éditeur glisser-déposer :
  1. Ajoutez un bloc HTML en haut de votre e-mail et collez l’extrait.
  2. Si vous voulez plus de titres avec Bebas Neue, soit :
    • Utilisez des blocs HTML supplémentaires et copiez le même style h1, ou
    • Utilisez un bloc texte et définissez son CSS Inline sur font-family:'Bebas Neue', Arial, Helvetica, sans-serif;.
De nombreux clients de messagerie (par ex., Gmail, Outlook pour Windows) ne chargent pas les polices web. Ils reviendront automatiquement à Arial/Helvetica à partir de la pile ci-dessus.Pour “forcer” une police spécifique, envisagez d’utiliser des images avec la police souhaitée à la place et ajoutez l’image à l’e-mail. Cela permet plus de contrôle dans certains cas.

​
Images et vidéo

Les images téléchargées sont accessibles à toute votre équipe. Modifiez et appliquez des effets aux images comme le recadrage, le filtrage et plus directement dans l’éditeur. Les URL vers des images et des vidéos peuvent être utilisées. Assurez-vous qu’elles sont disponibles via l’URL fournie.

​
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 auront plus de chances d’être marqués comme spam. Consultez Liens de désabonnement pour plus de détails. OneSignal fournit un lien de désabonnement par défaut qui, lorsqu’il est utilisé, désabonnera l’abonnement e-mail de l’utilisateur. Vous pouvez également inclure votre propre URL de désabonnement personnalisée si vous le souhaitez. Assurez-vous simplement de gérer correctement l’abonnement e-mail (détails dans Créer une page de désabonnement personnalisée). Ajoutez le [unsubscribe_url] par défaut de OneSignal dans vos e-mails via :
  • Bloc HTML : <a href="[unsubscribe_url]">Unsubscribe</a>
  • Sélectionnez votre texte et utilisez l’option Special links dans l’éditeur ou définissez [unsubscribe_url] dans le champ URL

Ajout du lien de désabonnement à votre e-mail

​
Blocs HTML

Ajoutez du HTML personnalisé avec des blocs HTML. JavaScript n’est pas pris en charge. Le CSS inline est recommandé. Certains clients de messagerie suppriment les attributs de classe ou d’ID.
Les blocs HTML personnalisés sont le meilleur endroit pour ajouter des styles avancés tels que des remplacements en mode sombre. Consultez Meilleures pratiques de style en mode sombre pour obtenir des conseils.
<div style="background: red;">This now has custom styling!</div>

​
Personnalisation

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

L'image montre l'utilisation de la substitution de balise

Plus de détails :

​
Emojis

Les emojis peuvent s’afficher différemment selon les plateformes d’e-mail.

L'image montre comment les emojis s'affichent sur différents clients d'e-mail

​
Enregistrez votre travail

Vous pouvez enregistrer votre conception d’e-mail en tant que modèle pour une utilisation future.

L'image montre comment enregistrer en tant que modèle

​
FAQ

​
Comment puis-je tenir compte du mode sombre ?

La plupart des e-mails s’afficheront correctement en mode sombre et clair, mais nous recommandons de tester ! Pour des conseils supplémentaires, consultez Meilleures pratiques de style en mode sombre.

​
Comment puis-je ajouter un lien de désabonnement personnalisé ?

Consultez Créer une page de désabonnement personnalisée pour plus de détails.

​
Articles connexes