Create Drag & Drop element / Create image element |
Create image element
Image elements allow the user to add an image block in his email message. This element can be combined with a text element. When the user click on the image element a module will appear to allow user to:
- set the image's source;
- set an alternative text (alt);
- hide image on mobile devices;
- align image;
- change image's background color;
- determine the image's dimensions;
- add image link and google analytics parameters.
The following code is an image element:
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>
From the example we can observe that the image element has some classes :
Class |
Description |
table_container |
presents the table container of all element codes (recommended). |
column |
used for the responsive design. It makes the cell at 100% width and displays it as a block. If you want to hide the image for smaller devices use the class "hide-small" instead. |
editable-img |
determines that the element is an image element. This class should be used with an image element and should not be combined with any other master classes (see the list of master classes). |
ChangeImgBgColor |
allows the user to modify the image cell background color. |
Notice here that we used some custom attributes:
Attribute |
Description |
data-href |
the value of this attribute will be assigned to the image link href attribute later when the user uses his message in the create message section. |
data-utm-term and data-utm-content |
these attributes are the Google Analytics parameters for campaign tracking URL. |
data-max-width |
the value of this attribute is the image's maximum width that the user can set using the Builder modules. Keep in mind that the width of the message 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:
