Conversion du contenu des emails de l’ancien éditeur

Ouvrez le Concepteur d’email et créez des modèles et des fragments réutilisables à partir du code HTML de l’email créé dans l’ancien éditeur.

Ce cas pratique permet de créer un modèle de Concepteur d’email à l’aide d’un email HTML et de le diviser en différents composants HTML dans le Concepteur d’email.

REMARQUE

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.

IMPORTANT

Cette section est destinée aux utilisateurs avancés qui sont familiers avec le code HTML.

Préparer le contenu de vos emails

  1. Sélectionnez un email HTML.
  2. Identifiez les sections pour diviser l’email HTML en plusieurs blocs.
  3. Découpez les différents blocs de votre code HTML.

Créer votre structure d’email

  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. Pour plus d'informations, consultez la section Modifier les styles d’un email.
  3. Ajoutez autant de composants de structure que vous avez de sections. Pour plus d'informations, consultez la section Editer la structure de l'email.

Ajouter du contenu HTML

  1. Ajoutez un composant HTML à chaque composant de structure. Pour plus d'informations, consultez la section Ajouter des fragments et des composants de contenu.
  2. Copiez votre code HTML et collez-le dans chaque composant.

Gérer le style de votre email

  1. Passez en vue Mobile. Voir à ce propos cette section.

  2. 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>
    REMARQUE

    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>

  3. Revenez à la vue mobile pour vérifier que votre contenu s'affiche correctement et enregistrez vos modifications.

Cas pratique

Essayons de convertir cet email, créé dans l’ancien éditeur, en modèle Concepteur d’email.

Identifier la section de votre email

Nous pouvons identifier 11 sections dans cet email.

Pour identifier l’élément correspondant à la section du code HTML, vous pouvez le sélectionner.

Pour afficher la version HTML de l’email, cliquez sur Afficher la source.

Créer le modèle d’email et sa structure

  1. Effectuez un glisser-déposer des composants de structure reflétant la disposition de notre email.

  2. Répétez cette opération autant de fois que nécessaire. Nous devons créer 11 composants de structure.

Insérer les composants du contenu HTML

  1. Insérez un composant HTML dans chaque composant de structure.

  2. Pour chaque section, cliquez sur Afficher le code source.

  3. Insérez la section HTML.

  4. Cliquez sur Enregistrer.

Vous pouvez maintenant vérifier le rendu de votre email.

Gestion des styles en fonction de la vue mobile

  1. Insérez des éléments CSS pour vous assurer que votre email convient à un affichage sur mobile.

  2. Passez en mode code source, copiez votre section de style et collez-la dans une nouvelle section de style.

Pour plus d’informations à ce sujet, voir la section Gérer le style de votre email.

Votre ancien email est maintenant disponible dans le Concepteur d’email.

Sur cette page