Create Drag & Drop element / Create text element |
Create text element
Text elements allow the user to add a text block in his email message. The user can modify the text using the tinyMCE plugin integrated with "The Builder". When the user clicks on the edit text element icon a module will appear to allow the user to:
- modify the text and text background color;
- align text;
- determine the text container's height;
- hide the text for small devices.
The following code presents a text element:
1 <table class="table_container" cellpadding="0" cellspacing="0" width="700">
2 <tbody>
3 <tr>
4 <td width="20" class="td-1" bgcolor="#FFFFFF"> </td>
5 <td class="column editable ChangeBgColor templateBgColor linked-bg" data-linked-to="td-1" width="660" align="left" valign="top" bgcolor="#FFFFFF" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
6 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
7 </td>
8 <td width="20" class="td-1" bgcolor="#FFFFFF"> </td>
9 </tr>
10 </tbody>
11 </table>
Note the table_container class in the table container. It is important for "the Builder"s good functionality and must be used only once for each element.
We notice here one row with three cells. The outer cells act as padding. The text cell element in the middle has some classes :
Class |
Description |
table_container |
presents the table container of all the element's code (should be used). |
column |
used for the responsive design. It makes the cell a 100% width and displays it as a block. If you want to hide the element unto smaller devices use the class "hide-small" instead. |
editable |
determines that the element is a text element. This class should be used with a text element and should not be combined with any other master classes (see the list of master classes). |
ChangeBgColor |
allows the user to change the background color. |
templateBgColor |
allows the user to apply theme colors. |
linked-bg |
tell the builder that the background color is linked to other elements with a class "td-1" inside the current table (which has a class "table_container"). |
Note that if you have more than one row you can choose to apply background color to all rows or to some of them. Take a look at this example:
1 <table class="table_container" cellpadding="0" cellspacing="0" width="700">
2 <tbody>
3
4 <!-- First row -->
5 <tr>
6 <td width="20" class="row1" bgcolor="#FFFFFF"> </td>
7 <td class="column editable ChangeBgColor templateBgColor linked-bg" data-linked-to="row1" width="660" align="left" valign="top" bgcolor="#FFFFFF" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
8 TEXT1
9 </td>
10 <td width="20" class="row1" bgcolor="#FFFFFF"> </td>
11 </tr>
12
13 <!-- Second row -->
14 <tr>
15 <td width="20" class="row2" bgcolor="#FFFFFF"> </td>
16 <td class="column editable ChangeBgColor templateBgColor linked-bg" data-linked-to="row2" width="660" align="left" valign="top" bgcolor="#FFFFFF" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
17 TEXT2
18 </td>
19 <td width="20" class="row2" bgcolor="#FFFFFF"> </td>
20 </tr>
21
22 <!-- Third row -->
23 <tr>
24 <td width="20" class="row1" bgcolor="#FFFFFF"> </td>
25 <td class="column editable ChangeBgColor templateBgColor linked-bg" data-linked-to="row1" width="660" align="left" valign="top" bgcolor="#FFFFFF" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
26 TEXT3
27 </td>
28 <td width="20" class="row1" bgcolor="#FFFFFF"> </td>
29 </tr>
30 </tbody>
31 </table>
Note that the first and third rows are linked for background color (notice the presence of the class "row1" in the first and third rows). It means that when the user changes the first row's background color, the third row will be affected but not the second one and vice versa.
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:
