Show Menu
SUJETS×

Conversion du contenu des courriers électroniques de l’éditeur hérité

Début de travail avec le concepteur de courrier électronique et de création de modèles et de fragments réutilisables à partir de votre code HTML de courrier électronique créé dans l’éditeur hérité.
Cette section est destinée aux utilisateurs avancés qui sont familiers avec le code HTML.
Cette utilisation vous permet de créer un modèle de concepteur de courrier électronique à l’aide d’un courrier électronique HTML et de le diviser en composants HTML dans le concepteur de courrier électronique.
Tout comme le mode de compatibilité, un composant HTML est modifiable avec des options limitées : vous ne pouvez effectuer qu'une édition statique.

Préparation du contenu de votre courrier électronique

  1. Sélectionnez un courrier électronique HTML.
  2. Identifiez les sections pour diviser le courrier électronique HTML.
  3. Découpez les différents blocs de votre code HTML.

Créer votre structure de courriel

  1. Open the Email Designer to create an empty email content.
  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 .
  3. Ajouter autant de composants de structure que vous en avez. Voir à ce propos la section Editer la structure de l'email .

Ajouter contenu HTML

  1. Ajouter un composant HTML à chaque composant de structure. Voir à ce propos la section Ajouter des fragments et des composants de contenu .
  2. Copiez-collez votre code HTML dans chaque composant.

Gérer le style de votre courrier électronique

  1. Switch to Mobile view . 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>
    
    
    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.

Utilisation

Essayons de convertir ce courrier électronique, créé dans l’éditeur hérité, en Email Designer modèle.

Identifier la section de votre courrier électronique

Nous pouvons identifier 11 sections dans ce courriel.
Pour identifier l’élément qui est la section du code HTML, vous pouvez la sélectionner.
Pour afficher la version HTML du courrier électronique, cliquez sur Show source .

Créer un modèle de courrier électronique et sa structure

  1. Effectuez un glisser-déposer Structure components reflétant la disposition de notre courrier électronique.
  2. Répétez cette opération autant de fois que nécessaire. Nous devons créer 11 composants structuraux.

Insertion de composants de contenu HTML

  1. Insérez un HTML component dans chaque Structure component .
  2. Pour chaque section, cliquez sur Show source code .
  3. Insérez la section HTML.
  4. Clics Save .
Vous pouvez désormais vérifier le rendu de votre courrier électronique.

Gestion des styles en fonction de la vue mobile

  1. Insérez des éléments CSS pour vous assurer que votre adresse électronique convient à la vue mobile.
  2. Passez au code source et copiez-collez votre section de style dans une nouvelle section de style.
Pour plus d’informations à ce sujet, reportez-vous à la section Gérer le style de votre courrier électronique .
Votre message électronique hérité est désormais disponible dans le concepteur de messages électroniques.