Zum Inhalt

Beispiel-E-Mail-/Landingpage-Template

Das folgende Template stellt das Element Artikel - Text mit Headline bereit. Dieses besteht aus einer Headline und einem Text. Klicke auf die -Icons im Template-Quelltext, um eine Beschreibung zu sehen.

Info

E-Mail-Templates setzen sich aus einem HTML-Teil und Text-Teil zusammen. In diesem Abschnitt wird ausschließlich der HTML-Teil beschrieben. Die Erstellung des Text-Teils wird hier erläutert.

<!DOCTYPE html>
<html>
<head>
    <title>Mein erstes Template</title>
    <meta charset="UTF-8">
    <style>
      body { font-family: Arial, sans-serif; }
    </style>
</head>
<body>
  [CONTAINER name='contents'<!-- (1)! --> label='Inhalte'<!-- (2)! -->]
      [BETWEEN]<br /><br />[/BETWEEN]<!-- (3)! -->

      [ELEMENT name='article' label='Artikel - Text mit Headline' default='true'<!-- (4)! -->]
      <table border="0" cellspacing="0" cellpadding="0" width="640" align="center">
        <tr>
          <td>
            [BLOCK name='headline' label='Headline']
            <h1>[INPUT name='text'
                      label='Text'
                      type='span'<!-- (5)! -->
                      rows='2'<!-- (6)! -->
                      default='Headline'<!-- (7)! -->
                      required='true'<!-- (8)! --> /]</h1>[/BLOCK]

            <p>[INPUT name='text' label='Text' type='span' rows='8' default='Das ist der Artikeltext.' /]</p>
          </td>
        </tr>
      </table>            
      [/ELEMENT]
  [/CONTAINER]
</body>
</html>
  1. Der Wert des name-Attributes muss klein geschrieben werden und darf keine Leer- und Sonderzeichen enthalten. Bindestriche und Unterstriche sind erlaubt.
  2. label='...': legt die Bezeichnung im Editor fest. Wird kein label angegeben, wird der Wert des name-Attributes angezeigt.
  3. [BETWEEN]...[/BETWEEN]: Der hinterlegte Inhalt wird zwischen aufeinanderfolgenden Elementen eingefügt.

  4. default='true|false*': Wenn am [ELEMENT] angegeben und true, wird das Element automatisch zum Mailing/der Landingpage hinzugefügt.

    * Standard

  5. type='...': Rendert das entsprechende HTML-Tag in die Ausgabe.

  6. rows='...': Legt die Anzahl der Zeilen fest, die das Eingabefeld im Editor haben soll.
  7. default='...': Standard Text des Inputs.

  8. required='true|false*': Legt fest, ob der [INPUT] ein Pflichtfeld ist. Wenn true, wird der Inhalt des umschließenden Blocks nur angezeigt, wenn das Eingabefeld befüllt ist.

    * Standard

Links: Mailing- bzw. Landingpage-Aufbau. Das Element Artikel - Text mit Headline ist dem Inhalt beim Anlegen der Mail/Landingpage aufgrund des Attributes default='true' automatisch hinzugefügt.

Mitte: Mailing-/Landingpage-Vorschau

Rechts: Elemente-Pool. Enthält eine Auflistung aller im Template verfügbaren Elemente.

Artikel-Element

Durch Klick auf Artikel - Text mit Headline im Aufbau, öffnet sich das Fenster zum Bearbeiten:

Artikel-Element Modal

<!DOCTYPE html>
<html>
<head>
    <title>Mein erstes Template</title>
    <meta charset="UTF-8">
    <style>
      body { font-family: Arial, sans-serif; }
    </style>
</head>
<body>
  <table border="0" cellspacing="0" cellpadding="0" width="640" align="center">
    <tr>
        <td>
          <h1><span>Headline</span></h1>
          <p><span>Das ist der Artikeltext.</span></p>
      </td>
    </tr>
  </table>
</body>
</html>

Regeln

  • Direkt im Container [CONTAINER]...[/CONTAINER] dürfen folgenden Tags verwendet werden: [ELEMENT]...[/ELEMENT], [TOP]...[/TOP], [BETWEEN]...[/BETWEEN] und [BOTTOM]...[/BOTTOM].
  • Container und Elemente mit demselben Namen dürfen mehrfach definiert werden.
  • Elemente müssen immer innerhalb von Containern definiert werden.
  • Element lassen sich verschachteln: sie können wiederum Container mit Elementen enthalten.
  • Blöcke [BLOCK] und Eingabefelder [INPUT /] können auch außerhalb von Containern und Elementen verwendet werden. Sind diese außerhalb platziert, werden die Inputs im Editor (Tab "Inhalte") unter “Globale Anpassungen“ angezeigt.
  • Jeder [BLOCK] muss mindestens einen [INPUT /] enthalten. Es ist jedoch möglich, einen [INPUT /] ohne [BLOCK] zu definieren.

Lerne im nächsten Schritt, wie du E-Mail- oder Landingpage-Template sinnvoll strukturierst:

Templates strukturieren