Créez votre propre bibliothèque d'éléments Drag & Drop / Créer un élément Bouton |
Créer un élément Bouton
Les éléments de bouton permettent à l'utilisateur un bloc avec bouton à son message. Cet élément peut être combiné avec des éléments de texte et image. Quand l'utilisateur clique sur l'élément de bouton, un module apparait pour lui permettre de:
- aligner le bouton;
- formater le texte du bouton;
- définir la couleur de l'arrière-plan du bouton ainsi que la couleur du texte du bouton;
- ajouter un lien au bouton ainsi que des paramètres Google Analytics.
Le code suivant est présente un élément bouton :
1 <table class="table_container" cellpadding="0" cellspacing="0" width="700">
2 <tbody>
3 <tr>
4 <td>
5 <table class="btn-table" cellpadding="0" cellspacing="0" width="100%">
6 <tbody>
7 <tr data-type="btn-top" valign="top">
8 <td valign="top" width="175" class="hide-small myBtnId-L" style="font-size:1px;"></td>
9 <td valign="top" align="center" height="10" bgcolor="#3498DB" class="column btn-side" data-btn-num="myBtnId" style="font-size:1px;"></td>
10 <td valign="top" width="175" class="hide-small myBtnId-R" style="font-size:1px;"></td>
11 </tr>
12 <tr data-type="btn" valign="top">
13 <td valign="top" width="175" class="hide-small myBtnId-L"></td>
14 <td valign="top" align="center" width="350" bgcolor="#3498DB" class="column editable-btn " data-user-align="center" data-btn-num="myBtnId" data-max-width="700" style="">
15 <a style="color:#FFFFFF;text-decoration:none;font-family:Helvetica,Arial,sans-serif; font-size:18px; mso-line-height-rule: exactly; line-height:110%;" href="" class="editable-btn-link " target="_blank">Confirmation</a>
16 </td>
17 <td valign="top" width="175" class="hide-small myBtnId-R"></td>
18 </tr>
19 <tr data-type="btn-bottom" valign="top">
20 <td valign="top" width="175" class="hide-small myBtnId-L" style="font-size:1px;"></td>
21 <td valign="top" align="center" height="10" bgcolor="#3498DB" class="column btn-side " data-btn-num="myBtnId" style="font-size:1px;"> </td>
22 <td valign="top" width="175" class="hide-small myBtnId-R" style="font-size:1px;"></td>
23 </tr>
24 </tbody>
25 </table>
26 </td>
27 </tr>
28 </tbody>
29 </table>
Un élément de bouton est composé de trois rangées. En plus de la classe maîtresse qui détermine l'élément bouton "editable-btn", vous devriez ajouter une autre classe au conteneur du bouton ""btn-table"".
left side |
button top side |
right side |
left side |
button |
right side |
left side |
button bottom side |
right side |
Dans cet exemple, nous avons utilisé les classes suivantes :
Classe |
Description |
table_container |
présente le conteneur de tout le code de l'élément (recommandé). |
btn-table |
présente le conteneur du bouton (recommandé). |
column |
utilisée pour le design responsive. Cette classe place la cellule en block avec 100% de largeur. |
hide-small |
utilisée pour masquer un élément sur de plus petits appareils. |
editable-btn |
présente le bouton. Cette classe devrait être utilisée avec un élément bouton et ne devrait jamais être combinée avec une autre classe maîtresse |
btn-side |
présente les côtés gauche et droit du bouton (recommandé). |
Les attributs utilisés sont les suivants :
Attribut |
Description |
data-type |
ajouté pour chaque rangée. |
data-btn-num |
utilisé pour identifier un bouton, cet attribut devrait être unique dans un même conteneur ".table_container". Notez que la valeur de cet attribut (myBtnId) devrait être utilisée comme une classe dans le côté gauche et droit en ajoutant -L et -R respectivement (myBtnId-L et myBtnId-R). |
data-max-width |
détermine la valeur maximale que la largeur du bouton peut avoir. Rappelez-vous que la largeur maximale du 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.
