Create Drag & Drop element / Create button element |
Create button element
Button elements allow the user to add a button block in his email message. This element can be combined with text and image elements. When the user clicks on the button element a module will appear to allow the user to:
- align the button;
- format the button's text;
- set the button's background color and button's text color;
- add a link and Google Analytics parameters.
The following code is a button element:
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>
A Button element is composed of 3 rows. In addition to the master class that determines the button element "editable-btn", you should add a new class to the table container of the button ""btn-table"".
left side |
button top side |
right side |
left side |
button |
right side |
left side |
button bottom side |
right side |
In this example we used the following classes:
Class |
Description |
table_container |
presents the table container of all the element's code (recommended). |
btn-table |
presents the button container (recommended). |
column |
used for responsive design. It makes the cell at 100% width and display it as a block. |
hide-small |
used to hide an element in a small devices. |
editable-btn |
present the button. This class should be used with a button element and should not be combined with any other master classes (see the list of master classes). |
btn-side |
presents the left and right side of the button (recommended). |
The attributes used are as follow:
Attribute |
Description |
data-type |
added for each row. |
data-btn-num |
used to identify a button, it should be unique inside the ".table_container" table. Note that the value of this attribute (myBtnId) should be used as a class in the left and right sides adding -L and -R respectively (myBtnId-L and myBtnId-R). |
data-max-width |
determines the maximum value that the button can have. Keep in mind that the message's maximum width is 700px; |
We offer you some templates that you can download. Edit the template's content using your favorite IDE then upload the file in the "Document Library" section of your eFlyerMaker account.
See also:
