L’image dynamique « bannière »
La bannière supérieure doit être éditable. Remplaçons-la par un composant « Image dynamique ». Pour un composant Image dynamique, l’utilisateur d’Express doit sélectionner une image, remplir une infobulle (Autre texte) et saisir un hyperlien. Au lieu d’utiliser un hyperlien fixe, cependant, nous allons créer un capteur pour l’hyperlien que l’utilisateur d’Express doit saisir. De cette façon, les clics sur la bannière pourront être mesurés.
1. Dans l’onglet Capteurs, créez un nouveau capteur et nommez-le « Bannière ». Il s’agit du nom utilisé dans les rapports. Sélectionnez la première option « Envoyer le contact vers un emplacement externe » et saisissez « http:// ». L’utilisateur Express peut compléter l’hyperlien restant.
2. Sélectionnez l’exemple de bannière « Soldes de printemps » et cliquez sur Retour. Laissez le curseur là où il est. Allez dans l’onglet Composants, sous « Dynamique », cliquez sur le composant « Image dynamique » et sélectionnez « Insérer nouveau ».
3. Nommez le composant « HERO_IMAGE ». Définissez l’alias « bannière ». Cet alias sera utilisé dans Express.
4. Si vous le souhaitez, dans l’onglet « Contenu par défaut », vous pouvez définir une URL d’image par défaut. L’image sera ajoutée par défaut à chaque nouveau bulletin d’information créé dans Express. Nous laisserons ce champ vide. Il en va de même pour le champ « Autre texte ».
5. Pour la taille de l’image, saisissez uniquement 640 dans le premier champ, laissez le deuxième vide. L’image sera toujours redimensionnée avec une largeur de 640 px. La hauteur peut être n’importe laquelle.
7. Définissez la cible sur « _blank ». C’est la façon habituelle de définir des hyperliens dans des e-mails. Lorsque l’e-mail est affiché dans le navigateur et que le lecteur clique sur ce lien, une nouvelle fenêtre s’ouvre. De cette façon, l’e-mail reste ouvert dans la fenêtre d’origine du navigateur.
8. Cliquez sur « OK ». Le composant « Image dynamique » est ajouté à l’e-mail sous la forme d’une Section dynamique et est répertorié sous « Utilisé dans cet e-mail » dans l’onglet Composants. Vous pouvez toujours faire un clic droit sur le composant Image dynamique sous « Utilisé dans cet e-mail » et sélectionner « Propriétés » pour modifier ses paramètres. Enregistrez votre e-mail.
Les composants Texte dynamique et HTML dynamique sont identiques. Dans Express, l’utilisateur peut saisir une simple ligne de texte ou un bloc HTML complet. Le contenu d’un composant Texte dynamique peut aussi être utilisé ailleurs dans le message avec le champ d’application DYNCONTENT (uniquement pour le composant Texte dynamique). Exemple : ~DYNCONTENT.MYTEXT~. Il peut également être utilisé comme contrainte pour une autre section dynamique.
Le code source inséré est <div id="MASECTION" macontenteditable="FALSE" maconstraint="" maparameter="HERO_IMAGE" matype="" mahidediv="true"</div>
Conseil : Pour une mise en page réactive, l’image qui sert d’exemple, et maintenant la section Image dynamique insérée, sont dans un DIV avec l’ID imgContainer. L’image qui se trouve dans le DIV se voit appliquer un style entre des balises de style dans la partie supérieure de l’e-mail :
<style type="text/css">
div#imgContainer img { border: none; display: inline-block; }
@media only screen and (max-width: 480px) { div#imgContainer img { width: 100% !important; height: auto !important; } }
</style>
<div id="imgContainer">
<div id="MASECTION" macontenteditable="FALSE" maconstraint="" maparameter="HERO_IMAGE" matype="" mahidediv="true"></div>
</div>
Généralement, le style est directement appliqué à l’image, mais étant donné que l’image est remplacée par la section dynamique, son style est lui aussi remplacé. Dans l’e-mail envoyé, cette section est une nouvelle fois remplacée par une nouvelle balise « a » et une balise « Image » basée sur le contenu que l’utilisateur d’Express a fourni.
