Show Menu
SUJETS×

Démarrage rapide : création de contenu d'email

Le Concepteur d'email propose quatre méthodes pour créer des emails.
Vous pouvez créer un email à partir de zéro :
  • Vous pouvez créer un email à partir d'un canevas vierge en ajoutant facilement la structure et les composants de contenu et en personnalisant leur contenu pour envoyer rapidement une diffusion. Vous pouvez également gérer entièrement les éléments de style. Pour plus d'informations, consultez la documentation de prise en main rapide ou la documentation complète .
  • Vous pouvez créer un email à partir d'un modèle d'usine. Pour ce faire, sélectionnez un modèle et créez votre contenu d'email à partir de celui-ci. En savoir plus
Vous pouvez également créer un email avec du contenu existant :
  • Vous pouvez convertir du contenu HTML existant (créé en externe ou dans l'ancien éditeur). En savoir plus
  • Vous pouvez importer du contenu HTML existant directement en mode de compatibilité. En savoir plus

Sans contenu existant

Création d'un email à partir de zéro

Vous pouvez facilement créer un email, ajouter des composants et personnaliser leur contenu pour envoyer rapidement une diffusion. Vous pouvez adapter les options de style à votre contenu, si nécessaire. Pour plus d'informations sur la gestion des paramètres de style et les attributs intégrés, voir Editer les styles d'un email .

Ajout d'un objet

Les objets sont obligatoires lors de l'envoi d'un email. Pour plus d'informations, voir Définition de l'objet d'un email .
  1. Créez un email.
  2. Fermez la page d'accueil.
  3. Accédez à l'onglet Propriétés de la page d'accueil du Concepteur d'email (accessible par le biais de l'icône Accueil) et renseignez la section Objet.

Ajout de composants de structure

Les composants de structure définiront la disposition de votre email. Pour plus d'informations, voir Définition de la structure d'un email .
Dans les composants Structure, faites glisser et déposez les composants de la disposition que vous souhaitez utiliser.
Vous pouvez sélectionner différentes dispositions de contenu qui s'ajouteront à votre email.

Ajout de composants de contenu

Vous pouvez ajouter plusieurs composants de contenu à votre email, tels que des images, du texte et des boutons. Pour plus d'informations, voir Composants du contenu .
  • Image
  1. Dans Composants du contenu , faites glisser et déposez l'image dans l'un de vos composants de structure.
  2. Cliquez sur Parcourir .
  3. Sélectionnez votre fichier image sur votre ordinateur.
  • Texte avec personnalisation
  1. Dans Composants du contenu , faites glisser et déposez le texte dans l'un de vos composants de structure.
  2. Cliquez sur le composant et saisissez votre texte.
  3. Pour ajouter un champ de personnalisation, cliquez sur Insérer un champ de personnalisation dans la barre d'outils.
  4. Sélectionnez le champ dont vous avez besoin, tel que Prénom.
  • HTML
  1. Dans Composants du contenu , faites glisser et déposez le code HTML dans l'un de vos composants de structure.
  2. Cliquez sur Afficher le code source .
  3. Saisissez votre contenu HTML.
  4. Cliquez sur Enregistrer .
Si vous maîtrisez le langage HTML, vous pouvez copier-coller le code HTML du pied de page d'origine à l'aide du composant de contenu Html . Voir à ce propos la section A propos des composants de contenu .

Application d'un style à votre composant d'email

Vous pouvez ajuster le style de votre email, par exemple en modifiant la marge intérieure d'un composant. Pour plus d'informations sur la gestion des paramètres de style et les attributs intégrés, voir Editer les styles d'un email .
  1. Cliquez sur votre composant de texte .
  2. Sur la droite, dans la palette, accédez à Marge intérieure .
  3. Cliquez sur l'icône représentant un verrou pour interrompre la synchronisation entre les paramètres supérieur et inférieur ou droit et gauche.
  4. Ajustez la marge intérieure selon vos besoins.
  5. Cliquez sur Enregistrer .
Vous pouvez maintenant enregistrer et envoyer votre email.

Créer du contenu à partir d'un modèle d'usine

Vous pouvez créer un email à partir de modèles d'usine, tels que des messages d'accueil de client, des newsletters et des emails de réengagement, puis les personnaliser.
  1. Créez un email et ouvrez son contenu. Voir à ce propos Créer un email .
  2. Cliquez sur l'icône Accueil pour accéder à la page d'accueil du Concepteur d'email .
  3. Cliquez sur l'onglet Modèles .
  4. Choisissez un modèle HTML d'usine. Les différents modèles présentent de multiples combinaisons de plusieurs types d'éléments. Par exemple, les modèles 'Contour progressif' possèdent des marges, tandis que les modèles 'Astro' en sont dépourvus. Voir à ce propos la section Modèles de contenu .
  5. Accédez à l'onglet Propriétés de la page d'accueil du Concepteur d'email (accessible par le biais de l'icône Accueil) et renseignez la section Objet.
  6. Vous pouvez associer ces éléments afin de créer plusieurs variantes d'emails. Par exemple, vous pouvez dupliquer une section d'email en sélectionnant un composant de structure et en cliquant sur Dupliquer dans la barre d'outils contextuelle.
  7. Vous pouvez déplacer les éléments au moyen de la flèche bleue située à gauche de façon à faire glisser un composant de structure au-dessus ou en dessous d'un autre. Voir à ce propos la section Editer la structure de l'email .
  8. Vous pouvez également déplacer des composants afin de modifier l'organisation de chaque élément de structure. Voir à ce propos la section Ajouter des fragments et des composants de contenu .
  9. Modifiez le contenu de chaque élément selon vos besoins : images, texte et liens.
  10. Adaptez les options de style à votre contenu, si nécessaire. Voir à ce propos la section Editer les styles d'un email .

Avec du contenu existant

Si vous voulez créer un framework de fragments et de modèles modulaires qui peuvent être associés afin d'être réutilisés dans plusieurs emails, vous devriez envisager de convertir le code HTML de votre email en modèle de Concepteur d'email.

Convertir un contenu HTML

Ce cas pratique présente comment convertir rapidement le code HTML d'un email en composants du Concepteur d'email.
Cette section est destinée aux utilisateurs qui maîtrisent le code HTML.
De la même manière que le mode de compatibilité, un composant HTML est éditable avec des options limitées : vous pouvez uniquement effectuer l'édition locale.
En dehors du Concepteur d'email, veillez à ce que le code HTML d'origine soit divisé en sections réutilisables.
  1. Ouvrez le Concepteur d'email pour créer un contenu d'email vide.
  2. Définissez les attributs au niveau du corps : les couleurs de fond, la largeur, etc. Voir à ce propos la section Editer les styles d'un email .
Si tel n'est pas le cas, divisez les différents blocs de votre code HTML. Par exemple, voici une section clairement identifiée :
<!-- 3 COLUMN w/CTA (SCALED) -->
<table width="100%" align="center" cellspacing="0" cellpadding="0" border="0" role="presentation" style="max-width:680px;">
<tbody>
<tr>
<td class="padh10" align="center" valign="top" style="padding:0 5px 20px 5px;">
<table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
<tbody>
<tr>
...
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- //3 COLUMN w/CTA (SCALED) -->

Une fois tous vos blocs identifiés, répétez la procédure suivante dans le Concepteur d'email pour chaque section de votre email existant :
  1. Ajoutez un composant de structure. Voir à ce propos la section Editer la structure de l'email .
  2. Ajoutez un composant HTML. Voir à ce propos la section Ajouter des fragments et des composants de contenu .
  3. Copiez votre code HTML et collez-le dans ce composant.
  4. Passer en vue Mobile. Voir à ce propos cette section .
    La vue en responsive design est endommagée, car il manque votre CSS.
  5. Pour résoudre cela, passez en mode de code source, copiez votre section de style et collez-la dans une nouvelle section de style. Par exemple :
    <style type="text/css">
    a {text-decoration:none;}
    body {min-width:100% !important; margin:0 auto !important; padding:0 !important;}
    img {line-height:100%; text-decoration:none; -ms-interpolation-mode:bicubic;}
    ...
    </style>
    
    
    Veillez à ajouter votre style après cette opération dans une autre balise de style personnalisée.
    Ne modifiez pas le CSS généré par le Concepteur d'email :
    • <style data-name="default" type="text/css">(##)</style>
    • <style data-name="supportIOS10" type="text/css">(##)</style>
    • <style data-name="mediaIOS8" type="text/css">(##)</style>
    • <style data-name="media-default-max-width-500px" type="text/css">(##)</style>
    • <style data-name="media-default--webkit-min-device-pixel-ratio-0" type="text/css">(##)</style>
  6. Revenez à la vue mobile pour vérifier que votre contenu s'affiche correctement et enregistrez vos modifications.

Import et édition d'un email HTML

Lorsque vous téléchargez un contenu, il doit contenir des balises spécifiques pour être entièrement compatible et éditable à l'aide de l'éditeur WYSIWYG du Concepteur d'email.
Si tout ou partie du code HTML téléchargé n'est pas conforme avec le balisage attendu, le contenu est alors chargé en "mode de compatibilité", ce qui limite les possibilités d'édition via l'interface utilisateur.
Lorsqu'un contenu est chargé en mode de compatibilité, vous pouvez toujours effectuer les modifications suivantes via l'interface utilisateur (les actions indisponibles sont masquées) :
  • changer le texte ou changer une image,
  • insérer des liens et des champs de personnalisation,
  • éditer quelques options de style dans le bloc HTML sélectionné
  • Définir du contenu conditionnel
D'autres modifications telles que l'ajout de nouvelles sections à votre email ou des styles sophistiqués doivent être effectuées directement dans le code source de l'email via le mode HTML. Bien que le mode de compatibilité ne vous permette pas d'utiliser la fonction de glisser-déposer, il garantit les mêmes fonctionnalités que l'ancien éditeur.
Pour plus d'informations sur la conversion d'un email existant en email compatible avec le Concepteur d'email, voir cette section .