Créez votre propre bibliothèque d'éléments Drag & Drop / Créer un élément Image |
Créer un élément Image
Les éléments d'image permettent à l'utilisateur d'ajouter un bloc d'image à son message. Cet élément peut être combiné avec un élément de texte. Quand l'utilisateur clique sur l'image, un module apparait pour lui permettre de;
- définir le texte alternatif (alt);
- masquer une ou plusieurs images sur des appareils mobiles;
- aligner l'image;
- changer la couleur de l'arrière-plan de l'image image;
- déterminer les dimensions de l'image;
- ajouter un lien à l'image ainsi que des paramètres Google Analytics.:
Le code suivant présente un élément image :
1 <table class="table_container" cellpadding="0" cellspacing="0" width="700">
2 <tbody>
3 <tr>
4 <td width="700">
5 <table cellpadding="0" cellspacing="0" style="table-layout:fixed;">
6 <tbody>
7 <tr>
8 <td align="center" class="column editable-img ChangeImgBgColor" width="700" valign="top">
9 <a href="" data-href="your_url" data-utm-term="utm-term" data-utm-content="utm-content">
10 <img src="your_image_url.jpg" width="700" align="center" alt="" style="max-width:100% !important; display: block; border: 0;" data-max-width="700" />
11 </a>
12 </td>
13 </tr>
14 </tbody>
15 </table>
16 </td>
17 </tr>
18 </tbody>
19 </table>
À partir de cet example, on peut observer que l'élément d'image comporte des classes :
Classe |
Description |
table_container |
présente le conteneur de tout le code de l'élément (recommandé). |
column |
utilisée pour le design responsive. Cette classe place la cellule en block avec 100% de largeur. Si vous voulez masquer l'élément pour les petits appareils, vous devriez utiliser la classe "hide-small". |
editable-img |
établit que l'élément est un élément de texte. Cette classe devrait être utilisée avec les éléments de texte et ne devrait jamais être combinée avec une autre classe maîtresse |
ChangeImgBgColor |
Permet à l'utilisateur de changer la couleur de fond de la cellule du bloc image. |
Vous remaquerez aussi que nous avons utilisé des attributs personnalisés:
Attribut |
Description |
data-href |
La valeur de cet attribut sera attribuée ultérieurement à l'attribut de lien "href" de l'image lorsque l'utilisateur utilisera son message dans la section créer un message. |
data-utm-term et data-utm-content |
Ces attributs servent de paramètres pour le suivi des URL de campagnes dans Google Analytics. |
data-max-width |
La valeur de cet attribut est la largeur maximale que l'utilisateur peut attribuer à l'image en utilisant les modules de "L'Outil". Rappelez-vous que la largeur d'un message est de 700px. |
Permettez-nous de vous offrir ces gabarits que vous pouvez télécharger. Éditez-en le contenu avec votre éditeur préféré puis téléchargez le nouveau fichier dans la section Bibliothèque de documents de votre compte eFlyerMaker.
