Créez votre propre bibliothèque d'éléments Drag & Drop / Créer un élément de texte |
Créer un élément de texte
Les éléments de texte permettent à l'utilisateur d'ajouter un bloc de texte dans son message. L'utilisateur peut modifier le texte en utilisant l'extension tinyMCE intégrée directement dans "L'Outil". Quand l'utilisateur clique sur le bouton "Éditer le texte", un module apparait pour permettre à l'utilisateur de:
- modifier la couleur du texte et la couleur de l'arrière-plan du texte
- aligner le texte
- déterminer la hauteur du bloc de texte
- cacher le texte pour les appareils mobiles
Le code suivant présente un élément de texte:
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>
Notez la classe table_container dans le conteneur. Elle est importante pour le bon fonctionnement de "L'Outil" et doit être utilisée seulement une fois par élément.
Vous remarquerez ici une rangée avec trois cellules. Les cellules externes servent de remplissage. La cellule de l'élément texte comporte des classes :
Classe |
Description |
table_container |
présente le conteneur du code de tout 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 |
é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 |
ChangeBgColor |
Permet à l'utilisateur de changer la couleur de fond. |
templateBgColor |
Permet à l'utilisateur d'appliquer une couleur de fond avec la palette thème. |
linked-bg |
Déclare à "L'Outil" que la couleur de fond est liée aux autres éléments contenant une classe "td-1" dans le présent conteneur (qui a une classe "table_container"). |
Notez que si vous avez plus d'une rangée, vous pouvez choisir d'appliquer la couleur de fond à toutes les rangées ou seulement quelques unes. Voyez l'exemple suivant:
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>
Notez que la première et la troisième rangée sont liées dans leur couleur de fond (voir la présence de la classe "row1" dans le 1ère et la 3e rangée). Cela signifie que si l'utilisateur change la couleur de fond de la première rangée, la troisième rangée sera elle aussi modifiée, mais pas la deuxième, et vice-versa.
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.
