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.
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.
Cette section est destinée aux utilisateurs avancés qui sont familiers avec le code HTML.
Passez en vue Mobile. Voir à ce propos cette section.
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>
Revenez à la vue mobile pour vérifier que votre contenu s'affiche correctement et enregistrez vos modifications.
Essayons de convertir cet email, créé dans l’ancien éditeur, en modèle Concepteur d’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.
Effectuez un glisser-déposer des composants de structure reflétant la disposition de notre email.
Répétez cette opération autant de fois que nécessaire. Nous devons créer 11 composants de structure.
Insérez un composant HTML dans chaque composant de structure.
Pour chaque section, cliquez sur Afficher le code source.
Insérez la section HTML.
Cliquez sur Enregistrer.
Vous pouvez maintenant vérifier le rendu de votre email.
Insérez des éléments CSS pour vous assurer que votre email convient à un affichage sur mobile.
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.