Quand vous construisez votre propre modèle, nous faisons le maximum pour valider votre code et nous assurer que le résultat soit conforme aux normes du secteur. Veuillez toutefois noter que nous soumettre votre design et nous laisser le construire pour vous est la seule manière de garantir cette conformité et la possibilité pour Emarsys de vous aider à résoudre tous les problèmes éventuellement posés ensuite par ces modèles. Pour plus d'informations, voir Commander un modèle d'email à Emarsys.
Pour des exemples de code live, consultez le modèle pré-constuit Emarsys dans l'éditeur de style et regardez comment construire une structure de variables, quelles variables peuvent être configurées pour chaque élément de contenu et comment les nommer.
Pour créer votre propre modèle, procédez comme suit :
- Ouvrez le menu Canaux et sélectionnez Campagnes email.
- Cliquez sur Créer un email.
N'oubliez pas de choisir Éditeur basé sur les blocs si l'on vous donne le choix de l'éditeur. - Sur la page Vos modèles, cliquez sur l'une des deux options pour Créer un modèle.
- Suivez les onglets sur la gauche dans l'ordre, de haut en bas. Ils sont décrits plus en détail ci-dessous.
Les modèles d'emails supprimés peuvent être restaurés. En savoir plus.
Éditeur de trames
Sur l'onglet Éditeur de trames , vous sélectionnez le type de document pour l'email et ajoutez le code HTML fournissant la mise en page de base de votre campagne email.
Un HTML de trame basique contient deux caractères de remplissage : #style# et #body#. Il s'agit d'éléments obligatoires du code HTML de la trame. #style# correspond au code que vous avez fourni dans l'Éditeur de style et #body# représente les blocs que vous avez insérés dans votre modèle.
Éditeur de style
C'est dans l' Éditeur de style que vous collez le CSS qui déterminera le style de votre email.
Blocs de conenu
Une fois que vous avez créé votre trame et votre style, vous pouvez commencer à créer les Blocs de contenu. Vous devriez créer un bloc pour chaque élément dans votre email, y-compris l'en-tête et le footer.
- Chaque Bloc de contenu doit commencer par un élément au niveau du bloc, par ex. <div>...</div> ou <table>...</table> ou <tr>...</tr>. C'est l'engin de Validation de modèle d'email qui définit l'élément au niveau du bloc requis.
- Pour insérer des espaces dans la version texte des emails VCE, utilisez des espaces plutôt que des onglets dans le code HTML. Évitez d'utiliser des onglets car ils entraîneront des espaces manquants entre les mots dans les textes.
Afin de maintenir la meilleure performance du système, essayez de limiter le nombre des blocs dans un modèle à 30.
Pour créer un bloc de contenu, cliquez sur Créer un nouveau bloc puis collez-y votre code HTML. Il apparaîtra immédiatement visible dans le panneau d'aperçu.
Quand vous aurez créé tous vos blocs de contenu, vous pourrez alors les sélectionner dans la colonne sur la gauche.
Les blocs y sont listés par ordre alphabétique. Vous pouvez utiliser des préfixes numériques pour déterminer l'ordre d'affichage (tel que montré ci-dessus), de sorte qu'il reflète l'ordre dans lequel ils apparaîtront dans l'email.
Pour créer la vue par défaut, insérez les blocs dans le modèle, soit en cliquant sur Insérer dans le modèle sur le bloc lui-même avant de cliquer sur Insérer ou faire glisser le bloc ici, soit simplement en le faisant glisser dans le zone de largage Insérer ou faire glisser un bloc ici .
Si vous cliquez là-dessus sur un bloc dans le panneau d'aperçu, vous le retirez de l'aperçu. Si vous cliquez là-dessus sur un bloc dans la liste de Blocs de contenu sur la gauche, vous le supprimez complètement du modèle.
Contenu modifiable - l'attribut e-editable
Le contenu que vous ajoutez à votre modèle est fixé par défaut et sera le même pour toutes vos campagnes.
Cependant, si certains de vos contenus doivent être mis à jour campagne par campagne, il est recommandé de les laisser ouverts à la modification. Marquez les éléments que vous voulez rendre modifiables en incluant e-editable dans la balise d'élément ainsi qu'un identifiant unique. D e cette manière, vous pouvez vous assurer que seules sont modifiables les parties du modèle dont vous souhaitez autoriser la modification. Vous pouvez rendre modifiable n'importe quel texte, image ou lien.
<td e-editable="leadText">
Get 10% off!
</td>Veuillez noter ce qui suit :
- Chaque identifiant modifiable en ligne (e-editable) doit être unique au sein de chaque bloc de contenu. Il est aussi possible d'utiliser le même identifiant pour plus de blocs. Cependant, si vous avez deux ou plus d'éléments avec le même identifiant et que vous modifiez le contenu de seulement l'un des éléments dans l'éditeur de texte, cela écrasera automatiquement le contenu des éléments ayant le même identifiant. Les autres blocs ayant les mêmes identifiants uniques ne seront pas affectés.
- Ainsi, par exemple, dans le cas de la fonction multilingue , vous devez utiliser des balises
e-editableuniques pour chaque version linguistique, comme le montre l'exemple de code ci-dessous :
<e-language locales="en-US">
<span e-editable="editable_name_en">Link EN</span>
</e-language>
<e-language locales="hu-HU">
<span e-editable="editable_name_hu">Link HU</span>
</e-language>Parfois avoir le même identifiant peut être utile, par exemple si vous voulez fournir un lien vers la même URL à plus d'un endroit dans un bloc. Avoir le même identifiant pour les balises de lien garantira qu'elles pointent toujours vers le même endroit.
Exemple de deux CTA avec deux liens modifiables en ligne (e-editable) :
<tr>
<td align="center">
<a href="https://mypage.com/1.html" e-editable="ctaurl1" target="_blank" title="Call
to action" class="cta-big">
<span e-editable="cta1">SHOP NOW CTA1</span>
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="https://mypage.com/2.html" e-editable="ctaurl2" target="_blank" title="Call
to action" class="cta-big">
<span e-editable="cta2">SHOP NOW CTA2</span>
</a>
</td>
</tr>La balise <span> est nécessaire pour les liens texte, avec un attribut modifiable en ligne (e-editable) unique.
Exemple d'image e-ditable avec un lien e-ditable :
<a href="https://mypage.com" e-editable="bannerurl" target="_blank" title="Banner url">
<img src="http://mypage.com/image.png" e-editable="bannerimage" width="600px" alt="Banner image">
</a>Si vous souhaitez rendre une image modifiable et accessible par un lien dans le même temps, vous devez placer la balise <img> à l'intérieur de la balise <a> et vous ne pouvez placer aucun autre élément entre les deux, comme montré ci-dessus.
Assurez-vous de ne pas imbriquer de balises avec l'attribut e-editable les unes dans les autres.
Cela peut entraîner divers problèmes, tels que l'impossibilité de mettre à jour le nom de l'analyse dans l'onglet Liens.
Tous ces cas-là doivent être corrigés au niveau du modèle pour corriger toutes les campagnes construites sur ce modèle.
Font exception à cette règle les balises <span></span> à l'intérieur de balises <a><a/>.
Contenu facultatif - l'attribut e-optional
Si vous pensez que vous aurez régulièrement besoin de blocs au contenu similaire mais pas identique, vous pouvez définir des éléments au sein de ce bloc comme facultatif. Cela signifie que vous pouvez concevoir un bloc à éléments multiples, puis sélectionner dans la campagne les éléments à utiliser, économisant ainsi l'effort de créer un bloc unique à chaque permutation. Il faut pour ce faire ajouter l'attribut e-optional.
<e-optional name="Shop now CTA">
<tr>
<td align="center">
<a href="" e-editable="shopnowctaurl" target="_blank" title="Shop now CTA" class="cta-big">
<span e-editable="shopnowcta">Shop now</span>
</a>
</td>
</tr>
</e-optional>Comme pour la caractéristique modifiable en ligne (e-editable), chaque identifiant de nom sélectionnable en ligne (e-optional) doit être unique au sein de chaque bloc de contenu. C'est ce qui vous permet d'activer ou de désactiver l'élément dans l'éditeur de contenu. Si vous avez le même identifiant de nom e-optional pour plus d'un élément, alors en désactiver un dans l'éditeur de texte désactivera automatiquement tous les autres à l'intérieur de ce bloc. Les autres blocs ayant les mêmes identifiants uniques ne seront pas affectés.
Exemple d'un bloc de contenu avec trois éléments facultatifs :
<e-optional name="Headline">
<tr>
<td align="center" class="lh">
<span e-editable="Headline" class="h1">BIG DISCOUNT!</span>
</td>
</tr>
</e-optional>
<e-optional name="Copy">
<tr>
<td align="center" class="copy-text">
<span e-editable="copy" class="la-copy">Don't miss it, get it now.</span>
</td>
</tr>
</e-optional>
<e-optional name="Shop now CTA">
<tr>
<td align="center" class="dpt20lr10">
<table cellpadding="0" cellspacing="0" border="0" class="olbg1">
<tr>
<td align="center" class="oltd1">
<a href="" e-editable="shopnowurl" target="_blank" title="Shop now CTA" class="cta-big">
<span e-editable="shopnowcta">Shop now</span>
</a>
</td>
</tr>
</table>
</td>
</tr>
</e-optional>Dans cet exemple, le bloc a un en-tête, un peu de texte et un bouton Call-to-Action (CTA). Dans l'éditeur de contenu vous pourrez décider d'en utiliser un, deux ou les trois.
Comme vous pouvez le voir, vous pouvez toujours utiliser l'attribut e-editable à l'intérieure de l'attribut e-optional.
Mobile first
Alors que le mobile conquiert une part toujours plus grande du marché du e-commerce, il vous faut être sûr que tous vos emails marketing rendent bien sur les appareils mobiles. Tous les modèles Emarsys sont optimisés pour mobile par défaut (sauf explicitement demandé qu'il en aille autrement), mais l'Éditeur basé sur les blocs fournit aussi une fonctionnalité simple pour cacher des sections sur mobile, afin de définir des images et des aperçus mobiles personnalisés.
Si vous construisez vos propres modèles, cet article peut vous aider à faire en sorte que votre design d'email rende aussi bien sur mobile que sur un appareil de bureau : HTML personnalisé et optimisé pour mobile
Variables
Si vous construisez beaucoup de modèles, vous pouvez utiliser les variables dans votre HTML et votre CSS pour faciliter la personnalisation de vos campagnes email. Vous pouvez définir les valeurs (strings, couleurs, etc.) de ces variables pour chaque modèle sur l'onglet Variables . Par exemple, vous pouvez modifier la police ou la couleur d'arrière-plan d'un modèle à l'autre. Pour plus d'informations sur la définition de variables, voir Paramétrer des variables de modèle d'email.
Au fur et à mesure que vous attribuez une valeur à chaque variable, vous pouvez voir le résultat immédiatement dans le panneau d'aperçu.
Ajouter des polices de caractères
Pour des raisons de conformité, vous pouvez utiliser
• des polices sous licence, ou bien
• des polices hébergées localement et embarquées hors-ligne.
Même si certaines polices web en ligne ont prouvé qu'elles fonctionnaient, nous ne les prenons pas en charge pour des raisons de protection des données relatives aux transferts de données en-dehors de l'Espace Économique Européen.
Il y a deux méthodes pour ajouter des polices personnalisées à un modèle :
- Si vous utilisez une police personnalisée accessible en ligne, vous pouvez en copier et coller la forme dans l' Éditeur de Style.
- Si vous disposez du fichier de police (formats .woff ou .woff2 uniquement), vous pouvez construire votre propre forme de police et l'ajouter à l' Éditeur de Style.
1. Ajouter une forme de police personnalisée à un modèle
Vous pouvez ajouter des polices personnalisées en collant la forme de police directement dans l' Éditeur de Style se votre modèle. Les instructions ci-dessous vous montrent comment ajouter une police personnalisée.
- Ouvrez le modèle à modifier, puis ouvrez l' Éditeur de style.
- Allez à la page polices.
- Recherchez et sélectionnez les polices que vous voulez utiliser dans votre modèle.
- Copiez l'URL mise en relief et collez-la dans une fenêtre de navigateur.
- Dans le navigateur, copiez la forme de police /* latin */.
- Dans l' Éditeur de style, collez la forme de police et enregistrez le modèle.
- La prochaine fois que vous créerez une campagne pour ce modèle, vous verrez la nouvelle police en haut de la liste de polices dans votre barre de formatage de texte.