Templates für den Editor optimieren

Templates für den Editor optimieren

Drag & Drop aktivieren

Drag & Drop ermöglicht es, Elemente aus dem Elemente-Pool in den Inhaltsbereich zu ziehen oder zu verschieben. Um Drag & Drop zu aktivieren, muss das [ELEMENT] und der umschließende [CONTAINER] als HTML-Block-Level-Element definiert werden. Am besten ist dafür das <div>-Tag geeignet, da dieses keine Abstände bzw. Formatierungen aufweist. Es ist möglich, diese Block-Level-Elemente ausschließlich im Editor anzuzeigen.

Beispiel: Drag & Drop aktivieren
  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]

Inline-Editing aktivieren

Damit ein Text direkt im Inhaltsfenster bearbeitet werden kann, muss der dazugehörige [INPUT] von einem der folgenden Typen sein: span, h1, h2, h3, h4 oder p

Beispiel: Drag & Drop aktivieren
  1. [INPUT name='text' label='Text' type='span' rows='2' default='Headline' required='true']

Element-Vorschaubilder hinzufügen

Im Elemente-Pool lässt sich für jedes Element ein Vorschaubild hinterlegen:

Elemente-Pool

Dazu muss am [ELEMENT] mit dem Attribut preview='...' die URL der gewünschten Grafik übergeben werden:

Beispiel: Vorschaubild am Element
  1. [ELEMENT name='article' preview='https://example.com/images/elem-preview.png']...[/ELEMENT]

Die Anzeigegröße der Vorschaubilder beträgt 64×48 Pixel. Format: Png. Für eine scharfe Darstellung auf hochauflösenden Displays, kann die Grafik in höherer Auflösung hinterlegt werden.
Benutze unseren Generator, um Vorschaubilder aus Fontawesome-Icons zu erzeugen:


Mehrsprachige Templates/Labels verwenden

Wenn Ihre Template von deutsch- und englischsprachigen Benutzern verwendet wird, ist es möglich die Bezeichnungen sämtlicher Container, Elemente, Blöcke und Inputs im Editor in der entsprechenden Sprache darzustellen.

Info
Die Sprache der Mailingwork-Oberfläche wird im Menü Eigene Einstellungen/Tab Systemeinstellungen geändert.

Anstelle des Attributes labelmüssen dazu die beiden Attribute label_de und label_en verwendet werden.
Template Quellcode
Editor-Ansicht
Template Quellcode
Beispiel: Mehrsprachige Label

  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-Ansicht
Sprache: Deutsch
Aufbau EN

Sprache: Englisch
Aufbau EN
Lerne im nächsten Schritt, welche speziellen Funktionen dir in E-Mail-Templates bereitstehen.