Zum Inhalt

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.

Beispiel: Container erstellen
<!DOCTYPE html>
<html>
<head>
    <title>Mein Template</title>
    <meta charset="UTF-8">
</head>
<body>
[CONTAINER name='header' label='Header']...[/CONTAINER]

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

[CONTAINER name='footer' label='Footer']...[/CONTAINER]
</body>
</html>

Darstellung der Struktur im Mailing-/Landingpage-Aufbau:

Container

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.

Beispiel: Headerbanner und Editorial definieren
<!DOCTYPE html>
<html>
<head>
    <title>Mein Template</title>
    <meta charset="UTF-8">
</head>
<body>
[CONTAINER name='header' label='Header']
  [ELEMENT name='headerbanner' label='Headerbanner' default='true'<!-- (1)! -->]...[/ELEMENT]
  [ELEMENT name='editorial' label='Editorial' default='true']...[/ELEMENT]
[/CONTAINER]

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

[CONTAINER name='footer' label='Footer']...[/CONTAINER]
</body>
</html>
  1. Mit default='true' wird das Element beim Erstellen eines neuen Mailings/einer neuen Landingpage automatisch dem Inhalt hinzugefügt.

Darstellung der Struktur im Mailing-/Landingpage-Aufbau:

Container

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
[CONTAINER name='header' label='Header']
  [BETWEEN]<br/><br/>[/BETWEEN]
  [ELEMENT name='headerbanner' label='Headerbanner' default='true']...[/ELEMENT]
  [ELEMENT name='editorial' label='Editorial' default='true']...[/ELEMENT]
[/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.

Element 1: Headerbanner
[ELEMENT name='headerbanner' label='Headerbanner' default='true']
<!-- Headerbanner -->
<table cellspacing="0" cellpadding="0" width="640" align="center">
    <tr>
        <td>[INPUT  type='a_img'<!-- (1)! -->
                    name='image'
                    label='Bild'
                    default_src='https://login.mailingwork.de/placeholder/placeholder/image/640x200'
                    default_href='https://example.com/' /]</td>
    </tr>
    [BLOCK name='caption' label='Bildunterschrift']<!-- (2)! -->
    <tr>
        <td>[INPUT  type='span'<!-- (3)! -->
                    name='text'
                    label='Text'
                    default='Das ist die Bildunterschrift'
                    rows='2'<!-- (4)! -->
                    required='true' /]</td>
    </tr>[/BLOCK]
</table>
[/ELEMENT]
  1. Bild-Input mit optionaler Verlinkung
  2. Um die Bildunterschrift optional zu machen, ist am [INPUT /] das Attribut required='true' hinzugefügt. Damit werden alle Inhalte im [BLOCK]...[/BLOCK] ausgeblendet, wenn der [INPUT /] nicht befüllt ist.
  3. type='span' rendert das entsprechende HTML-Tag in die Ausgabe: <span>Das ist die Bildunterschrift</span>.
  4. Durch das Attribut rows='2' wird die Anzahl der Textzeilen im Editor auf 2 festgelegt.

Container

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

Element-Einstellungen des Bildes

Element-Einstellungen der Bildunterschrift

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

<!-- Headerbanner -->
<table cellspacing="0" cellpadding="0" width="640" align="center">
    <tr>
        <td><a target="_blank" href="https://example.com/" content="4176480"><img alt="" src="https://login.mailingwork.de/placeholder/placeholder/image/640x200"/></a></td>
    </tr>
    <tr>
        <td><span>Das ist die Bildunterschrift</span></td>
    </tr>
</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

    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.

    zum Beispiel

  • 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.

    zum Beispiel

Statisches Editorial

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

Beispiel: statisches Editorial
[ELEMENT name='editorial' label='Editorial' default='true']
<!-- Editorial -->
<table cellspacing="0" cellpadding="0" width="640" align="center">

<!-- Headline -->
[BLOCK name='content' label='Inhalt' independent='true'<!-- (1)! -->]
<tr>
  <td>[INPUT  name='headline'
              label='Headline 1'
              type='h1'<!-- (2)! -->
              default='Headline 1'
              rows='2'
              required='true' /]</td>
</tr>[/BLOCK]

<!-- Text -->
[BLOCK name='content' label='Inhalt' independent='true']
  <tr>
    <td>[INPUT  name='text'
                label='Text'
                type='span'
                default='Das ist der Artikeltext'
                required='true' /]</td>
  </tr>[/BLOCK]

<!-- Button -->
[BLOCK name='content' label='Inhalt' independent='true']
  <tr>
    <td>[INPUT  type='a'<!-- (3)! -->
                name='button'
                label='Button'
                attributes='class="btn"' <!-- (4)! -->
                default_href='#'
                default_text='Weiterlesen'
                required='true' /]</td>
  </tr>[/BLOCK]

</table>
[/ELEMENT]

  1. Der Parameter independent='true|false*' bestimmt das Verhalten, wenn ein [BLOCK] gleichen Namens an mehreren Stellen verwendet wird.

    independent='true': Der Block wird unabhängig von gleichnamigen Blöcken. Ist ein [INPUT /] mit required='true' nicht befüllt , wird nur der Inhalt dieses Blocks nicht angezeigt.

    independent='false': Ist ein [INPUT /] mit required='true nicht befüllt , wird der Inhalt aller Blöcke mit diesem Namen nicht angezeigt.

    * Standard

  2. Erzeugt ein <h1></h1>-Tag.

  3. Erzeugt ein <a></a>-Tag.

  4. attributes="...": Die angegebenen Attribute werden dem Markup angefügt: <a class="btn" ...>

Durch Klick auf "Editorial" öffnet sich das Fenster zum Bearbeiten des Elements.

Element-Einstellungen Editorials

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

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

  <!-- Headline -->
  <tr>
    <td><h1>Headline 1</h1></td>
  </tr>

  <!-- Text -->
  <tr>
    <td><span>Das ist der Artikeltext</span></td>
  </tr>

  <!-- Button -->
  <tr>
    <td><a class="btn" href="#" content="4176528">Weiterlesen</a></td>
  </tr>
</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.

Beispiel: Modulares Editorial
[ELEMENT name='editorial' label='Editorial' default='true']
<!-- Editorial -->
<table cellspacing="0" cellpadding="0" width="640" align="center">
  <tr>
    <td>
      [CONTAINER name='editorial' label='Editorial']

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

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

[ELEMENT name='button' label='Button' default='true']
<table cellspacing="0" cellpadding="0" width="100%">
  <tr>
    <td>
      [INPUT  type='a'
              name='button'
              label='Button'
              attributes='class="btn"' <!-- (1)! -->
              default_href='#'
              default_text='Weiterlesen' /]
      </td>
  </tr>
</table>[/ELEMENT]

      [/CONTAINER]
    </td>
  </tr>
</table>
[/ELEMENT]
  1. attributes="...": Die angegebenen Attribute werden dem Markup angefügt: <a class="btn" ...>

Container

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

<!-- Editorial -->
<table cellspacing="0" cellpadding="0" width="640" align="center">
  <tr>
    <td>

<table cellspacing="0" cellpadding="0" width="100%">
  <tr>
    <td><h1>Headline 1</h1></td>
  </tr>
</table>
<table cellspacing="0" cellpadding="0" width="100%">
  <tr>
    <td><span>Das ist der Artikeltext</span></td>
  </tr>
</table>
<table cellspacing="0" cellpadding="0" width="100%">
  <tr>
    <td>
      <a class="btn" href="#" content="4176628">Weiterlesen</a>
      </td>
  </tr>
</table>
    </td>
  </tr>
</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.

Beispiel: Element Teaser-Artikel
[CONTAINER name='main' label='Hauptteil']

[ELEMENT name='teaser-article' label='Teaser-Artikel' default='true']
<!-- Teaser-Artikel -->
<table cellspacing="0" cellpadding="0" width="640" align="center">
  <tr>
    <td style="width: 200px;" valign="top"><!-- (1)! -->
      [INPUT type='img' name='image' label='Bild' default_src='https://login.mailingwork.de/placeholder/placeholder/image/200x120' /]
    </td>
    <td style="width: 20px;"></td>
    <td style="width: 420px;" valign="top"><!-- (2)! -->
      <!-- container teaser-article -->
      [CONTAINER name='teaser-article'<!-- (3)! --> label='Teaser-Artikel']

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

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

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

[ELEMENT name='button' label='Button' default='true']
<table cellspacing="0" cellpadding="0" width="100%">
  <tr>
    <td>
      [INPUT type='a' name='button' label='Button' attributes='class="btn"' default_href='#' default_text='Weiterlesen' /]
      </td>
  </tr>
</table>[/ELEMENT]

      [/CONTAINER]
    </td>
  </tr>
</table>
[/ELEMENT]

[/CONTAINER]
  1. Linke Spalte: Teaser-Bild
  2. Rechte Spalte: Modular, mit Artikelbausteinen befüllbar
  3. Das Label wird im Editor im Mailing-/Landingpage-Aufbau und im Filter des Elemente-Pools angezeigt. (siehe auch Tab "Editor-Ansicht").

Mailing-/Landingpage-Aufbau:

Mailing-Aufbau - ausgeklappter Teaser-Artikel

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

Elemente-Pool - Filter auf den Teaser-Artikel

Wird auf den Container gefiltert, werden alle Elemente-angezeigt, die im Container vorkommen.

Erzeugte Ausgabe des Artikel-Elements mit den Standard-Werten:

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

          <!-- container teaser-article -->
          <table cellspacing="0" cellpadding="0" width="100%">
              <tr>
                  <td>
                      <h1>Headline</h1>
                  </td>
              </tr>
          </table>
          <table cellspacing="0" cellpadding="0" width="100%">
              <tr>
                  <td><span>Das ist der Artikeltext</span></td>
              </tr>
          </table>
          <table cellspacing="0" cellpadding="0" width="100%">
              <tr>
                  <td>
                      <a class="btn" comment="" href="#" content="4176804">Weiterlesen</a>
                  </td>
              </tr>
          </table>
      </td>
  </tr>
</table>

Lerne im nächsten Schritt, wie du E-Mail- oder Landingpage-Template für den Editor optimierst:

Templates für den Editor optimieren