1. Einführung

1.1 Allgemeines

Hier erfahren Sie, wie Sie eigene Mailing-Templates erstellen können. Sie finden die Verwaltung der Templates im Hauptmenü Benutzerkonto unter dem Reiter Mailing-Templates.

Wenn Sie Ihr Newsletter-Template selbst programmieren, können wir Ihnen keinen kostenlosen Support für die HTML-Programmierung und die Darstellungsoptimierung bei den verschiedenen E-Mail Clients geben. Gerne erstellen auch wir ein individuelles Template für Sie. Kontaktieren Sie uns einfach.

1.2 Quellcode Beispiel-Template

Unter https://gist.github.com/2837443 finden Sie den Quellcode eines Beispiel-Templates inkl. angeschlossener Module. Im Folgenden wird öfter Bezug darauf genommen.

2. Das Prinzip Elemente

2.1 Allgemeines

Ein Template besteht im einfachsten Fall aus einem ganz gewöhnlichen HTML-Quellcode, jedoch ergänzt um einige spezielle Platzhalter, die so genannten Elemente. Diese ermöglichen bei Verwendung des Templates das einfache Editieren von Inhalten über unseren Editor.

2.2 Text-Element

Bei Text-Elementen kann später im Editor lediglich der Text geändert werden. Die Formatierung ist vorgegeben.

<chamtxt linkstyle="text-decoration:none;">Ein Text-Element</chamtxt>

2.3 HTML-Element

Bei HTML-Elementen kann zusätzlich die Formatierung und Ausrichtung über unseren WYSIWYG-Editor angepasst werden.

<chamhtml>Ein HTML-Element</chamhtml>

2.4 Bild-Element

Bild-Elemente erlauben das Hochladen und Einbinden eigener Bilder über den Editor.

<chamimg><img class="cham_img" width="100"></chamimg>

Wichtig:

  • Vergessen Sie auf keinen Fall class="cham_img" innerhalb des img-Tags.
  • Class="cham_img" darf auch wirklich nur bei <Chamimg> Bild-Elementen verwendet werden und NICHT bei fest im Template verbauten Bildern! 
  • <chamimg> darf keine weiteren Angaben wie z.B. <chamimg style="...> enthalten!
  • Bei Nichtbeachtung kommt es zu Problemen im Editor und Newsletter. Dort tauchen dann überall die Zeichen IEIE auf.

Bilder hinterlegen

Sie können auch bereits Bilder hinterlegen, die dann getauscht werden können. Tragen Sie einfach für das Attribut src den entsprechenden Pfad zur Bilddatei ein.

<chamimg><img class="cham_img" width="100" src="http://meineseite.de/template/bild1.jpg"></chamimg>

2.5 Hintergrundbild-Element

Hintergrundbild-Elemente erlauben das Hochladen und Einbinden eigener Hintergrundbilder über den Editor.

Damit der Editor weiß, dass ein im Quellcode vorhandenes Hintergrundbild editierbar sein soll, wird eine entsprechende Klasse als Selektor gesetzt:

class="cham_bg"

Im einfachsten Fall, könnte ein Hintergrundbild-Element damit wie folgt aussehen:

<table align="center" background="http://customerspace.sendcpt.com/ce/bg.jpg" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:url(http://customerspace.sendcpt.com/ce/bg.jpg) top center / cover no-repeat;width:100%;" class="cham_bg">
         <tr>
<td style="height:200px; color:#fff;" align="center">
TEXT
</td>
</tr>
</table>

Innerhalb der <table> wird der Selektor class="cham_bg" gesetzt. Anschließend kann das Hintergrundbild im Editor einfach mit der Maus angeklickt und editiert werden.

Hintergrundbilder und Outlook

Hintergrundbilder werden leider nicht vollständig von allen E-Mail Clients unterstützt. Besonders viele Outlook Versionen stellen Hintergrundbilder nicht korrekt dar. Dafür gibt es jedoch einen entsprechenden Workaround. Wir empfehlen, Hintergrundbilder nach dem folgenden Muster einzubauen. Der Selektor class="cham_bg" wird auch hier nur einmalig in der <table> gesetzt. Wird das Bild über den Editor getauscht, ersetzt der Editor automatisch alle Bildpfade.

<!--[if mso | IE]>
      <table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600">
        <tr>
          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
      <v:rect  style="width:600px;" xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false">
        <v:fill  origin="0.5, 0" position="0.5, 0" src="http://customerspace.sendcpt.com/ce/bg.jpg" type="tile" />
        <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
      <![endif]-->
<div style="background:url(http://customerspace.sendcpt.com/ce/bg.jpg) top center / cover no-repeat;Margin:0px auto;max-width:600px;">
    <div style="line-height:0;font-size:0;">
        <table align="center" background="http://customerspace.sendcpt.com/ce/bg.jpg" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:url(http://customerspace.sendcpt.com/ce/bg.jpg) top center / cover no-repeat;width:100%;" class="cham_bg">
            <tbody>
                <tr>
                    <td style="direction:ltr;font-size:0px;padding:30px;text-align:center;vertical-align:middle;">
                        <!--[if mso | IE]>
                  <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                <tr>
      <td class="" style="vertical-align:top;width:540px;">
          <![endif]-->
                        <div class="mj-column-per-100 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                            <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                                <tbody>
                                    <tr>
                                        <td style="vertical-align:top;padding:0px;">
                                            <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
                                                <tr>
                                                    <td align="center" style="font-size:0px;padding:40px 30px;word-break:break-word;">
                                                        <div style="font-family:Alice, Helvetica, Arial, sans-serif;font-size:42px;font-weight:400;line-height:48px;text-align:center;color:#FFFFFF;"> CONTENT </div>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <!--[if mso | IE]>
            </td>
          </tr>
                  </table>
                <![endif]-->
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<!--[if mso | IE]>
        </v:textbox>
      </v:rect>
          </td>
        </tr>
      </table>
<![endif]-->

2.6 Editierbare und nicht editierbare Bereiche

Die Datei 01 Template Quellcode.html bildet das Grundgerüst des Templates. Sie finden dort gewöhnlichen HTML-Code, sowie die oben beschriebenen Elemente.

Bereiche, die NICHT über den Editor editierbar sein sollen
Bereiche, die fix ins Template integriert und nicht über unseren Editor veränderbar sein sollen, werden direkt als HTML-Code eingetragen. Beispielsweise finden Sie in Zeile 15 ein Bild, das fester Bestandteil des Templates ist.

Bereiche, die über den Editor editierbar sein sollen
In den Zeilen 21 und 22 hingegen finden Sie ein Text-Element umschlossen mit dem Platzhalter <chamtxt>. Das Design dieses Text-Elements wird vorab in der TD definiert und kann später nicht über den Editor geändert werden. Innerhalb der Platzhalter finden Sie einen bereits vorbelegten Text. Dieser kann später im Editor angeklickt und beliebig geändert werden. Selbstverständlich können Sie an beliebigen Stellen auch HTML- und Bild-Elemente einfügen, die dann ebenfalls über den Editor geändert werden können.

3. Das Prinzip Module

3.1 Allgemeines

Module sind nichts anderes als HTML-Schnipsel, die später vom Benutzer dynamisch über den Editor an bestimmten Stellen des Templates eingefügt werden können. Module können also einen ganz gewöhnlichen HTML-Quellcode enthalten und optional ein oder mehrere der obigen Elemente. Sie können in Ihrem Benutzerkonto beliebig viele unterschiedliche Module erstellen.

Bitte beachten Sie, dass Module stets in sich geschlossen sein müssen. Ein Modul sollte also immer von einer Tabelle (TABLE) umschlossen sein und kann nicht nur eine Row (TR) enthalten.

3.2 Platzierung von Modulen im Quellcode

Damit der Editor weiß, an welchen Stellen der Benutzer später im Editor Module einfügen darf, müssen Sie dies im Quellcode wie folgt markieren:

<chammodule>

3.3 Areas

Der Platzhalter kann dabei beliebig oft im Quellcode (auch innerhalb anderer Module) benutzt werden. Wird er ohne Zusatz verwendet, können immer alle angelegten Module überall eingefügt werden. Um dies zu beschränken, kann der Platzhalter mit dem Zusatz area versehen werden, z.B.:

<chammodule area="main">
<chammodule area="footer">

Bei den einzelnen Modulen kann dann angegeben werden, an welchen Stellen im Template sie eingefügt werden dürfen.

So können Sie z.B. Module erstellen, die ausschließlich im Bereich „main“ verwendet werden dürfen.

Wenn Sie Areas nutzen, müssen alle  mit einer Area versehen werden! Es ist nicht möglich  und  gleichzeitig in einem Template zu verwenden. Die Devise heißt also, überall oder nirgends.

Verschachtelte Module
Der Platzhalter <chammodule> kann auch innerhalb eines Moduls verwendet werden. Somit können verschachtelte Module erstellt werden. Innerhalb eines Moduls kann dann ein weiteres Modul eingefügt werden.

3.4 Unterschied zu Elementen

Elemente sind Inhalte, die durch den Benutzer im Editor verändert werden können (Text, HTML oder Bild). Ein Modul dagegen ist eine Kombination aus herkömmlichen HTML-Code und dynamisch veränderbaren Inhalten, kann also wahlweise u.a. aus mehreren Elementen bestehen.

Außerdem können Module verschoben werden. Fügt der Benutzer z.B. einmal das Modul Editorial und mehrmals das Modul Arikel in einen Modulplatzhalter, kann er anschließend deren Reihenfolge beliebig per Drag & Drop verändern.

4. CSS Formatierungen

4.1 Responsive Design

Wenn Sie Ihr Template responsive programmieren, sind dafür normalerweise CSS Style Angaben im Header notwendig. Schreiben Sie diese Style Angaben NICHT in den Quellcode des Templates, sondern in das dafür vorgesehenen Textfeld Responsive CSS. Die Attribute <style type=“text/css“> und </style> werden automatisch eingefügt und dürfen nicht angegeben werden.

4.2 Hyperlinks

CSS-Angaben müssen immer inline definiert werden. Im Header definierte Formatierungen werden durch einige Freemailer ignoriert. Daher gibt es bei der Definition des Templates das Textfeld Hyperlink-Style. Alle CSS-Angaben, die an dieser Stelle gemacht werden, werden automatisch für jedes a-Tag im Mailing übernommen. Beispiel:

color:#a93f28; text-decoration:none;

5. Vorschauen

5.1 Allgemeines

Sie können an verschiedenen Stellen Vorschauen hinterlegen.

5.2 Mailing-Vorschau

Erstellt man ein neues Mailing, ist der Editor weitestgehend leer. Dies liegt daran, dass man die Module selbst nach und nach hinzufügt und sich so sein eigenes Mailing zusammenbaut. Es gibt jedoch die Möglichkeit, ein bereits fertiges Mailing in den Editor zu laden. Auf diese Weise bleibt der Editor beim Start nicht leer sondern man sieht bereits, wie das Mailing aussehen könnte. Jetzt kann man die Inhalte editieren, oder mit einem Klick alle Inhalte löschen und von vorne beginnen.

Mailingvorschau erstellen
Nachdem Ihr Template komplett fertig programmiert ist, erstellen Sie ein neues Mailing mit diesem Template. Erstellen Sie das Mailing so, wie es später automatisch in den Editor geladen werden soll. Fügen Sie also die Module ein, die später von Beginn an angezeigt werden sollen. Speichern Sie das Mailing. Sie müssen es nicht versenden. Das Mailing muss in einem Account erstellt werden, in dem das Template auch zur Verfügung steht.

Mailingvorschau hinterlegen
In der Detailansicht Ihres Templates unter dem Reiter „Titel & Quelltext“ gibt es ein Feld „Preload-Mailing ID“. Fügen Sie dort die Mailing-ID des erstellten Mailings ein.

Mailing Vorschau verwenden
Ist für ein Template eine Preload-Mailing ID hinterlegt, wird dieses Mailing immer in den Editor geladen, wenn ein neues Mailing mit diesem Template erstellt wird.

Inhalte löschen
Sollen die geladen Module später doch nicht verwendet werden, können diese mit nur einem Klick gelöscht werden. Anschließend können Module wieder neu hinzugefügt werden.

Wichtiger Hinweis
Wird die Funktion Mailing-Vorschau verwendet (wird also eine Preload-Mailing ID hinterlegt), bleiben spätere Änderungen am Template unberücksichtigt. Sollte es also erforderlich sein, Änderungen am Template vorzunehmen, muss das Preload-Mailing neu erstellt und die neue ID hinterlegt werden.

5.3 Templatevorschau

Wenn Sie in unserer Software ein neues Mailing erstellen, können Sie im ersten Schritt das gewünschte Template auswählen. Alle verfügbaren Templates werden mit einem Screenshot angezeigt. Für jedes Template gibt es zusätzlich optional eine Vorschau-Funktion.

Vorschau-Bild
Sie können das Vorschau-Bild für Ihr Mailing selbst hochladen. Dies erfolgt über den Reiter Vorschau. Wird kein Vorschau-Bild hinterlegt, erscheint bei der Templateauswahl ein neutrales Bild. Ihr eigens Bild muss die Abmessungen 250 X 280 Pixel (Breite X Höhe) haben und im JPG- oder GIF-Format gespeichert werden.

Vorschau-URL
Sie können für jedes Template eine Vorschau-URL angeben. Die URL kann über den Reiter Vorschau hinterlegt werden. Klickt man bei der Templateauswahl auf den Vorschau-Button, öffnet sich die Vorschau in einem neuen Fenster. Wird keine URL hinterlegt, erscheint bei der Templateauswahl kein Vorschau-Button.

Es steht Ihnen frei, welche URL Sie für die Vorschau angeben. Wir empfehlen jedoch folgende Vorgehensweise:

  1. Erstellen Sie ein Beispiel-Mailing mit Ihrem Template.
  2. Dieses Mailing sollte bestenfalls alle verfügbaren Module enthalten.
  3. Versenden Sie dieses Mailing einmalig (z.B. an sich selbst) – Wählen Sie NICHT die Option Testversand. Testversendungen werden nach 60 Tagen automatisch gelöscht und stehen dann nicht mehr zur Verfügung!
  4. Unsere Software generiert automatisch eine URL zum versendeten Mailing.
  5. Die URL finden Sie in der Detailansicht des versendeten Mailings unter dem Reiter URL.
  6. Verwenden Sie diese URL als Vorschau-URL.

5.4 Modulvorschau

Sie können für jedes Modul ein Vorschaubild hinterlegen. Klickt jemand im Editor auf „Inhalt einfügen“ bekommt er für jedes Modul direkt ein kleines Vorschaubild angezeigt. Somit sieht er sofort, was er einfügt.

Vorschaubild erstellen
Nachdem Ihr Template fertig programmiert ist, erstellen Sie einfach einmalig ein Mailing mit allen Modulen. Machen Sie Screenshots von den einzelnen Modulen.

Vorschaubild hinterlegen
Sie können das Vorschaubild in der Detailansicht eines Moduls hochladen. Dies funktioniert nur, wenn das Modul bereits angelegt war. Bei der Erstellung eines neuen Moduls ist diese Option noch nicht verfügbar. Editieren Sie einfach anschließend das Modul. Ist für ein Modul ein Vorschaubild hinterlegt, wird im Editor bei „Inhalt einfügen“ statt des Modulnamens das Vorschaubild angezeigt.

Verwendung im Editor

6. Anmerkungen

6.1 White Label

Wenn Sie ein Template für einen White Label Kunden erstellen, haben Sie prinzipiell zwei Möglichkeiten:

Sie erstellen das Template direkt im Endkundenaccount
Sie können das Template direkt im Endkundenaccount erstellen. Dies kann vorteilhaft sein, wenn der Kunde volle Kontrolle über sein Template möchte oder wenn er den Code einfach gerne direkt im eigenen Account liegen hat. Nachteilig kann hier sein, dass der Kunde selbst Änderungen am Template vornehmen kann etwas kaputt macht. Hinterlegen Sie das Template direkt im Endkundenaccount sollten Sie in jedem Fall ein Backup bei sich behalten.

Sie erstellen das Template im White Label Account
Sie können das Template in Ihrem White Label Account (Agenturaccount / Masteraccount) erstellen und es anschließend einem oder mehreren Kunden (Unteraccounts) zur Verfügung stellen. Das Template erstellen Sie ganz normal unter Benutzerkonto > Mailing Templates. Dies hat den Vorteil, dass der Kunde selbst keinen Zugriff auf das Template hat.

Template einem bestimmten Kunden zuweisen

  1. Klicken Sie in Ihrem Account auf White Label
  2. Klicken Sie auf Meine Kunden
  3. Wählen Sie den Kunden aus
  4. Klicken Sie auf Mailing Templates
  5. Hier können Sie festlegen, welche Templates für diesen Kunden zur Verfügung stehen

Template allen Kunden einer Marke zuweisen

  1. Klicken Sie in Ihrem Account auf White Label
  2. Klicken Sie auf Meine Marken
  3. Wählen Sie die Marke aus
  4. Klicken Sie auf Mailing Templates
  5. Hier können Sie festlegen, welche Templates für alle Kunden dieser Marke zur Verfügung stehen

6.2 Bilder einbinden

Um Bilder im Template zu verwenden (z.B. fixe Bilder), hinterlegen Sie diese einfach auf Ihrem eigenen Serve und verlinken Sie entsprechend: Z.B. <img src="http://www.ihredomain.com/bilder/bild1.jpg">. Für die spätere Zustellbarkeit spielt es keine Rolle, wo die Bilder liegen. Sie können also Problemlos von Extern geladen werden. 

6.3 Änderungen

  • Werden Änderungen im Reiter Titel & Quelltext (z.B. im Feld HTML oder Responsive CSS) vorgenommen, muss das Mailing komplett neu erstellt werden, damit die Änderungen greifen.
  • Werden Änderungen im Reiter Angeschlossene Module (z.B. Änderung eines bestehenden Moduls, Hinzufügen eines neuen Moduls) vorgenommen, genügt es, das Modul erneut einzufügen. Das Mailing muss dazu nicht komplett neu erstellt werden.
  • Werden prinzipiell Änderungen am Code vorgenommen, muss das Preload-Mailing (siehe Mailingvorschau) neu erstellt und die neue ID hinterlegt werden.

War diese Antwort hilfreich für Sie?