Templates strukturieren

Templates strukturieren

Um dem Benutzer bei der Mailing- bzw. Landingpage-Erstellung eine einfache und intuitive Handhabung zu ermöglichen, ist eine gut aufgebaute Template-Struktur essenziell. Im Folgenden ist beschrieben, wie du das erreichen kannst.

Container definieren

Um das Template zu gliedern, kann der Inhalt in Abschnitte unterteilt werden. Diese Abschnitte werden im Editor gekennzeichnet. Beispielsweise ist eine Unterteilung in Einleitung, Hauptteil und Footer denkbar. Später wird es damit beispielsweise möglich sein, die Inhalte des Hauptteils zu einem automatischen Inhaltsverzeichnis hinzuzufügen.

Wir erstellen die Abschnitte Header, Footer und Hauptteil mittels des [CONTAINER]-Tags.

Template Quellcode
Editor-Ansicht
Template Quellcode
Beispiel: Container erstellen
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Mein Template</title>
  5.     <meta charset="UTF-8">
  6. </head>
  7. <body>
  8. [CONTAINER name='header' label='Header']...[/CONTAINER]

  10. [CONTAINER name='main' label='Hauptteil']...[/CONTAINER]

  12. [CONTAINER name='footer' label='Footer']...[/CONTAINER]
  13. </body>
  14. </html>
Editor-Ansicht
Darstellung der Struktur im Mailing-/Landingpage-Aufbau:


Im Elemente-Pool des Editors kann nach Containern gefiltert werden. Da sich Container gleichen Namens mehrfach verwenden lassen, ist es wichtig, einen Container mit bereits verwendeten Namen nur dann erneut zu verwenden, wenn dieser die gleichen Elemente wie der erste Container enthält.

Elemente definieren

Innerhalb der Container werden die Elemente mit dem [ELEMENT]-Tag hinzugefügt. Die Elemente können beispielsweise Artikel von einem bestimmten Typ, Grafiken oder Tabellen enthalten. Im Header wollen wir im Beispiel einen Banner- und ein Editorial-Element bereitstellen.

Template Quellcode
Editor-Ansicht
Template Quellcode
Beispiel: Headerbanner und Editorial definieren

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Mein Template</title>
  5.     <meta charset="UTF-8">
  6. </head>
  7. <body>
  8. [CONTAINER name='header' label='Header']
  9.   [ELEMENT name='headerbanner' label='Headerbanner' default='true']...[/ELEMENT]
  10.   [ELEMENT name='editorial' label='Editorial' default='true']...[/ELEMENT]
  11. [/CONTAINER]

  13. [CONTAINER name='main' label='Hauptteil']...[/CONTAINER]

  15. [CONTAINER name='footer' label='Footer']...[/CONTAINER]
  16. </body>
  17. </html>
Editor-Ansicht
Darstellung der Struktur im Mailing-/Landingpage-Aufbau:


Mit den Tags [TOP]...[/TOP], [BETWEEN]...[/BETWEEN], und [BOTTOM]...[/BOTTOM] lassen sich innerhalb des Containers besondere Anweisungen hinzufügen, beispielsweise um ein Abstand zwischen aufeinanderfolgenden Elementen darzustellen.

Beispiel: Abstand zwischen Elementen hinzufügen
  1. [CONTAINER name='header' label='Header']
  2.   [BETWEEN]<br/><br/>[/BETWEEN]
  3.   [ELEMENT name='headerbanner' label='Headerbanner' default='true']...[/ELEMENT]
  4.   [ELEMENT name='editorial' label='Editorial' default='true']...[/ELEMENT]
  5. [/CONTAINER]

Elemente befüllen

Im nächsten Schritt erstellen wir den Template-Quellcode für die eben definierten Elemente Headerbanner und Editorial. Der Quellcode setzt setzen sich aus HTML-Tags und MWML-Tags zusammen.

Beispiel: Headerbanner

Das Element Headerbanner soll eine editierbare, verlinkbare Grafik sowie eine optionale Bildunterschrift enthalten. Für das Bild verwenden wir einen Bild-Input. Dies erzeugt im Mailing-/Landingpage-Editor unter anderem Eingabefelder für die Bild-URL und die Link-URL. Mit dem Parameter default_href wird die Standard-Bild-URL definiert, mit default_url die Standard-Link-URL. In der Ausgabe wird ein <img ... />-Tag erzeugt, welches von a-Tags umschlossen wird, wenn eine Link-URL angegeben ist.

Template Quellcode
Editor-Ansicht
Ausgabe Quellcode
Template Quellcode
Element 1: Headerbanner

  1. [ELEMENT name='headerbanner' label='Headerbanner' default='true']
  2. <!-- Headerbanner -->
  3. <table cellspacing="0" cellpadding="0" width="640" align="center">
  4.     <tr>
  5.         <td>[INPUT  type='a_img'
  6.                     name='image'
  7.                     label='Bild'
  8.                     default_src='https://login.mailingwork.de/placeholder/placeholder/image/640x200'
  9.                     default_href='https://example.com/' /]</td>
  10.     </tr>
  11.     [BLOCK name='caption' label='Bildunterschrift']
  12.     <tr>
  13.         <td>[INPUT  type='span'
  14.                     name='text'
  15.                     label='Text'
  16.                     default='Das ist die Bildunterschrift'
  17.                     rows='2'
  18.                     required='true' /]</td>
  19.     </tr>[/BLOCK]
  20. </table>
  21. [/ELEMENT]
Editor-Ansicht

Durch Klick auf Headerbanner öffnet sich ein Fenster zum Bearbeiten des Elements. Dieses enthält die Einstellungen für das Bild und die Bildunterschrift.


Ausgabe Quellcode
Erzeugte Ausgabe des Headerbanner-Elements mit den Standard-Werten:

  1. <!-- Headerbanner -->
  2. <table cellspacing="0" cellpadding="0" width="640" align="center">
  3.     <tr>
  4.         <td><a target="_blank" href="https://example.com/" content="4176480"><img alt="" src="https://login.mailingwork.de/placeholder/placeholder/image/640x200"/></a></td>
  5.     </tr>
  6.     <tr>
  7.         <td><span>Das ist die Bildunterschrift</span></td>
  8.     </tr>
  9. </table>
​

Beispiel: Editorial

Das Element Editorial soll eine Anrede, einen Einleitungstext, einen Call-To-Action-Link und eine Signatur enthalten können. Je nachdem, welcher Grad an Freiheit gestattet werden soll, gibt es zwei Möglichkeiten, den Baustein zu strukturieren:

Statisches Editorial
Modulares Editorial
Statisches Editorial
Der Aufbau des Elements ist fest vorgegeben. Beispielsweise wenn es eine (optionale) Headline, einen (optionalen) Text und einen (optionalen) Button geben soll und diese Komponenten immer in der vorgegebenen Reihenfolge angezeigt werden sollen.
Modulares Editorial
Soll die Anzahl und die Reihenfolge der Artikel-Inhalte dynamisch sein, empfiehlt sich eine modulare Struktur aufzubauen. Beispielsweise, wenn unterhalb des Textes ein (oder mehrere) Buttons hinzufügbar sein sollen, auf welche wiederum ein Text folgen kann.

Statisches Editorial

Bei einer statischen Struktur werden die [BLOCK]- und [INPUT /]-Tags direkt innerhalb des [ELEMENT]-Tags hinzugefügt.

Template Quellcode
Editor-Ansicht
Ausgabe Quellcode
Template Quellcode
Beispiel: statisches Editorial

  1. [ELEMENT name='editorial' label='Editorial' default='true']
  2. <!-- Editorial -->
  3. <table cellspacing="0" cellpadding="0" width="640" align="center">

  5. <!-- Headline -->
  6. [BLOCK name='content' label='Inhalt' independent='true']
  7. <tr>
  8.   <td>[INPUT  name='headline'
  9.               label='Headline 1'
  10.               type='h1'
  11.               default='Headline 1'
  12.               rows='2'
  13.               required='true' /]</td>
  14. </tr>[/BLOCK]

  16. <!-- Text -->
  17. [BLOCK name='content' label='Inhalt' independent='true']
  18.   <tr>
  19.     <td>[INPUT  name='text'
  20.                 label='Text'
  21.                 type='span'
  22.                 default='Das ist der Artikeltext'
  23.                 required='true' /]</td>
  24.   </tr>[/BLOCK]

  26. <!-- Button -->
  27. [BLOCK name='content' label='Inhalt' independent='true']
  28.   <tr>
  29.     <td>[INPUT  type='a'
  30.                 name='button'
  31.                 label='Button'
  32.                 attributes='class="btn"' 
  33.                 default_href='#'
  34.                 default_text='Weiterlesen'
  35.                 required='true' /]</td>
  36.   </tr>[/BLOCK]

  38. </table>
  39. [/ELEMENT]
Editor-Ansicht
Durch Klick auf "Editorial" öffnet sich das Fenster zum Bearbeiten des Elements.


Ausgabe Quellcode
Erzeugte Ausgabe des Editorial-Elements mit den Standard-Werten:

  1. <!-- Editorial -->
  2. <table cellspacing="0" cellpadding="0" width="640" align="center">

  4.   <!-- Headline -->
  5.   <tr>
  6.     <td><h1>Headline 1</h1></td>
  7.   </tr>

  9.   <!-- Text -->
  10.   <tr>
  11.     <td><span>Das ist der Artikeltext</span></td>
  12.   </tr>

  14.   <!-- Button -->
  15.   <tr>
  16.     <td><a class="btn" href="#" content="4176528">Weiterlesen</a></td>
  17.   </tr>
  18. </table>

Modulares Editorial

Für eine modulares Editorial wird innerhalb des Editorial-Elements ein [CONTAINER] definiert. Darin werden die Artikelbausteine Headline, Text und Button als Elemente hinzugefügt.

Template Quellcode
Editor-Ansicht
Ausgabe Quellcode
Template Quellcode
Beispiel: Modulares Editorial

  1. [ELEMENT name='editorial' label='Editorial' default='true']
  2. <!-- Editorial -->
  3. <table cellspacing="0" cellpadding="0" width="640" align="center">
  4.   <tr>
  5.     <td>
  6.       [CONTAINER name='editorial' label='Editorial']

  8. [ELEMENT name='headline' label='Headline' default='true']
  9. <table cellspacing="0" cellpadding="0" width="100%">
  10.   <tr>
  11.     <td>[INPUT name='text' label='Text' type='h1' rows='2' default='Headline' /]</td>
  12.   </tr>
  13. </table>[/ELEMENT]

  15. [ELEMENT name='text' label='Text' default='true']
  16. <table cellspacing="0" cellpadding="0" width="100%">
  17.   <tr>
  18.     <td>[INPUT  name='text'
  19.                 label='Text'
  20.                 type='span'
  21.                 default='Das ist der Artikeltext' /]</td>
  22.   </tr>
  23. </table>[/ELEMENT]

  25. [ELEMENT name='button' label='Button' default='true']
  26. <table cellspacing="0" cellpadding="0" width="100%">
  27.   <tr>
  28.     <td>
  29.       [INPUT  type='a'
  30.               name='button'
  31.               label='Button'
  32.               attributes='class="btn"' 
  33.               default_href='#'
  34.               default_text='Weiterlesen' /]
  35.       </td>
  36.   </tr>
  37. </table>[/ELEMENT]

  39.       [/CONTAINER]
  40.     </td>
  41.   </tr>
  42. </table>
  43. [/ELEMENT]
Editor-Ansicht


Ausgabe Quellcode
Erzeugte Ausgabe des Editorial-Elements mit den Standard-Werten:

  1. <!-- Editorial -->
  2. <table cellspacing="0" cellpadding="0" width="640" align="center">
  3.   <tr>
  4.     <td>

  6. <table cellspacing="0" cellpadding="0" width="100%">
  7.   <tr>
  8.     <td><h1>Headline 1</h1></td>
  9.   </tr>
  10. </table>
  11. <table cellspacing="0" cellpadding="0" width="100%">
  12.   <tr>
  13.     <td><span>Das ist der Artikeltext</span></td>
  14.   </tr>
  15. </table>
  16. <table cellspacing="0" cellpadding="0" width="100%">
  17.   <tr>
  18.     <td>
  19.       <a class="btn" href="#" content="4176628">Weiterlesen</a>
  20.       </td>
  21.   </tr>
  22. </table>
  23.     </td>
  24.   </tr>
  25. </table>
​

Beispiel: Teaser-Artikel im Hauptteil

Innerhalb des Hauptteils wollen wir einen Teaser-Artikel hinzufügen. Dieses soll zweispaltig sein. In der linken Spalte befindet sich das Teaser-Bild. Die rechte Spalte soll mit folgenden Artikelbausteinen befüllbar sein: Headline, Headline 2, Text und Button.

Template Quellcode
Editor-Ansicht
Ausgabe Quellcode
Template Quellcode
Beispiel: Element Teaser-Artikel

  1. [CONTAINER name='main' label='Hauptteil']

  3. [ELEMENT name='teaser-article' label='Teaser-Artikel' default='true']
  4. <!-- Teaser-Artikel -->
  5. <table cellspacing="0" cellpadding="0" width="640" align="center">
  6.   <tr>
  7.     <td style="width: 200px;" valign="top">
  8.       [INPUT type='img' name='image' label='Bild' default_src='https://login.mailingwork.de/placeholder/placeholder/image/200x120' /]
  9.     </td>
  10.     <td style="width: 20px;"></td>
  11.     <td style="width: 420px;" valign="top">
  12.       <!-- container teaser-article -->
  13.       [CONTAINER name='teaser-article' label='Teaser-Artikel']

  15. [ELEMENT name='headline' label='Headline' default='true']
  16. <table cellspacing="0" cellpadding="0" width="100%">
  17.   <tr>
  18.     <td>[INPUT name='text' label='Text' type='h1' rows='2' default='Headline' /]</td>
  19.   </tr>
  20. </table>[/ELEMENT]

  22. [ELEMENT name='headline2' label='Headline 2']
  23. <table cellspacing="0" cellpadding="0" width="100%">
  24.   <tr>
  25.     <td>[INPUT name='text' label='Text' type='h2' rows='2' default='Headline 2' /]</td>
  26.   </tr>
  27. </table>[/ELEMENT]

  29. [ELEMENT name='text' label='Text' default='true']
  30. <table cellspacing="0" cellpadding="0" width="100%">
  31.   <tr>
  32.     <td>[INPUT  name='text' label='Text' type='span' default='Das ist der Artikeltext' /]</td>
  33.   </tr>
  34. </table>[/ELEMENT]

  36. [ELEMENT name='button' label='Button' default='true']
  37. <table cellspacing="0" cellpadding="0" width="100%">
  38.   <tr>
  39.     <td>
  40.       [INPUT type='a' name='button' label='Button' attributes='class="btn"' default_href='#' default_text='Weiterlesen' /]
  41.       </td>
  42.   </tr>
  43. </table>[/ELEMENT]

  45.       [/CONTAINER]
  46.     </td>
  47.   </tr>
  48. </table>
  49. [/ELEMENT]

  51. [/CONTAINER]
Editor-Ansicht

Der Container "Teaser-Artikel" erscheint im Filter Drop-Down des Elemente Pools:


Wird auf den Container gefiltert, werden alle Elemente-angezeigt, die im Container vorkommen.
Ausgabe Quellcode
Erzeugte Ausgabe des Artikel-Elements mit den Standard-Werten:

  1. <!-- Teaser-Artikel -->
  2. <table cellspacing="0" cellpadding="0" width="640" align="center">
  3.   <tr>
  4.       <td style="width: 200px;">
  5.           <img alt="" src="https://login.mailingwork.de/placeholder/placeholder/image/200x120" />
  6.       </td>
  7.       <td style="width: 20px;"></td>
  8.       <td style="width: 420px;">

  10.           <!-- container teaser-article -->
  11.           <table cellspacing="0" cellpadding="0" width="100%">
  12.               <tr>
  13.                   <td>
  14.                       <h1>Headline</h1>
  15.                   </td>
  16.               </tr>
  17.           </table>
  18.           <table cellspacing="0" cellpadding="0" width="100%">
  19.               <tr>
  20.                   <td><span>Das ist der Artikeltext</span></td>
  21.               </tr>
  22.           </table>
  23.           <table cellspacing="0" cellpadding="0" width="100%">
  24.               <tr>
  25.                   <td>
  26.                       <a class="btn" comment="" href="#" content="4176804">Weiterlesen</a>
  27.                   </td>
  28.               </tr>
  29.           </table>
  30.       </td>
  31.   </tr>
  32. </table>
 Lerne im nächsten Schritt, wie du E-Mail- oder Landingpage-Template für den Editor optimierst: