Optimize templates for the editor

Optimize templates for the editor

Enable Drag & Drop

Drag & Drop makes it possible to drag or move elements from the element pool into the content area. To enable Drag & Drop, the [ELEMENT] and the enclosing [CONTAINER] must be defined as HTML block-level element. The <div> tag is best suited for this, as it has no spacing or formatting. It is possible to display these block-level elements exclusively in the editor.

Example: Enable Drag & Drop
  1. [CONTAINER name='content' label='Inhalt' type='div' attributes='class="my-article-container"' editor-only='true']
  2.   [ELEMENT name='article' label='Artikel - Text mit Headline' type='div' default='true']
  3.   <table cellspacing="0" cellpadding="0" width="640" align="center">
  4.     <tr>
  5.       <td>
  6.         [BLOCK name='headline' label='Headline']
  7.         <h1>[INPUT name='text' label='Text' type='span' rows='2' default='Headline' required='true']</h1>[/BLOCK]

  9.         <p>[INPUT name='text' label='Text' type='span' rows='8' default='Das ist der Artikeltext.']</p>
  10.       </td>
  11.     </tr>
  12.   </table>
  13.   [/ELEMENT]
  14. [/CONTAINER]

Enable Inline Editing

For a text to be edited directly in the content window, the associated [INPUT] must be of one of the following types: span, h1, h2, h3, h4, or p

Example: Enable Inline Editing
  1. [INPUT name='text' label='Text' type='span' rows='2' default='Headline' required='true']

Add Element Preview Images

In the element pool, a preview image can be added for each element:

Elemente-Pool

To do this, the URL of the desired graphic must be passed to the [ELEMENT] with the attribute preview='...':

Example: Preview image on the element
  1. [ELEMENT name='article' preview='https://example.com/images/elem-preview.png']...[/ELEMENT]

The display size of the preview images is 64×48 pixels. Format: PNG. For a sharp display on high-resolution displays, the graphic can be stored in higher resolution.
Use our generator to create preview images from FontAwesome icons:


Using Multilingual Templates/Labels

If your template is used by German-speaking and English-speaking users, it is possible to display the labels of all containers, elements, blocks and inputs in the editor in the corresponding language.

Info
The language of the Mailingwork interface is changed in the menu Own Settings/Tab System Settings.

Instead of the attribute label, the two attributes label_de and label_en must be used.
Template Source Code
Editor-View
Template Source Code
Example: Multilingual labels

  1. [CONTAINER name='content' label_de='Inhalt' label_en='Content']

  3.   [ELEMENT  name='article'
  4.             label_de='Artikel - Text mit Headline'
  5.             label_en='Article - text with headline'
  6.             default='true']
  7.   ...
  8.   [/ELEMENT]

  10. [/CONTAINER]
Editor-View
Language: German
Aufbau DE

Language: English
Aufbau EN
In the next step, learn which special functions are available to you in email templates.