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 sogenannten Elemente. Diese ermöglichen bei Verwendung des Templates das einfache Editieren von Inhalten über unseren Editor.
2.2 Text-Element (chamtxt)
Bei Text-Elementen kann später im Editor lediglich der Text geändert werden. Die Formatierung ist vorgegeben.
Mithilfe von Linkstyle können CSS-Formatierungen für alle über den Editor hinzugefügten Verlinkungen (a-Tags) innerhalb eines Elements definiert werden. Diese werden dann inline in jedes a-Tag geschrieben.
<chamtxt linkstyle="text-decoration:none;">Ein Text-Element</chamtxt>
2.3 HTML-Element (chamhtml)
Bei HTML-Elementen kann zusätzlich die Formatierung und Ausrichtung über unseren WYSIWYG-Editor angepasst werden.
<chamhtml linkstyle="text-decoration:none;">Ein HTML-Element</chamhtml>
2.4 Bild-Element (chamimg)
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 (cham_bg)
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 YouTube Elements (chamyoutube)
Über ein YouTube Element kann im Editor eine URL zu einem YouTube Video angegeben werden. Das System holt sich dann automatisch das bei YouTube hinterlegte Vorschaubild des Videos, versieht dieses mit einem Play Button und verlinkt das Bild auf das Video bei YouTube. Alternativ kann ein eigenes Vorschaubild hochgeladen werden.
Das Element wird ähnlich wie ein Bild im Quellcode eingebaut. Es kann eine Breitenangabe in der Form width="600" angegeben werden. Zusätzlich kann eine beliebige Style-Formatierung angegeben werden.
<chamyoutube width="660" style="width:660px; vertical-align:top;">
2.7 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:
Module untereinander
Wenn die Module untereinander eingefügt werden sollen, wird im Quellcode der folgende Platzhalter verwendet:
<chammodule>
Module nebeneinander
Wenn die Module nebeneinander eingefügt werden sollen, wird im Quellcode der folgende Platzhalter verwendet (sbs steht dabei für "side by side"):
<chammodule_sbs>
3.3 Areas
Der Platzhalter <chammodule> 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.
Werden Areas eingesetzt, müssen diese nicht zwangsweise im gesamten Template eingesetzt werden. Es kann also <chammodule> mit und ohne Area-Angaben geben.
Ist im <chammodule> keine Area definiert, kann jedes beliebige Modul eingefügt werden, es sei denn das Modul ist exklusiv für lediglich eine oder mehrere Areas freigegeben ("Exklusiv für folgende Areas").
Ist im <chammodule> eine Area definiert, können lediglich die Module eingefügt werden, für die "Exklusiv für folgende Areas" entsprechend gesetzt wird.
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.
3.5 Insert Buttons individuell benennen
Im Editor tauchen überall "Insert Buttons" auf, wo sich der Platzhalter <chammodule> im Code befindet. An dieser Stelle können Inhalte ins Mailing eingefügt werden. Per Default steht auf den Buttons "Inhalt einfügen". Dieser Text kann jedoch individuell festgelegt werden.
Die Angabe des Namens erfolgt im Tag <chammodule> über das Attribut „button-name“, wie in folgenden zwei Beispielen:
<chammodule button-name="Listenpunkt hinzufügen" area="liste">
<chammodule button-name="Auch ohne Area einsetzbar">
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 vorn 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“. Hier können Sie ein ungesendetes Mailing, welches auf demselben Template basiert, auswählen.
Mailing Vorschau verwenden
Ist für ein Template Preload-Mailing definiert, wird dieses Mailing immer in den Editor geladen, wenn ein neues Mailing mit diesem Template erstellt wird.
Inhalte löschen
Sollen die geladenen 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 ein Preload-Mailing definiert), bleiben spätere Änderungen am Template unberücksichtigt. Sollte es also erforderlich sein, Änderungen am Template vorzunehmen, muss das Preload-Mailing neu erstellt und neu ausgewählt 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:
Erstellen Sie ein Beispiel-Mailing mit Ihrem Template.
Dieses Mailing sollte bestenfalls alle verfügbaren Module enthalten.
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!
Unsere Software generiert automatisch eine URL zum versendeten Mailing.
Die URL finden Sie in der Detailansicht des versendeten Mailings unter dem Reiter URL.
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
Klicken Sie in Ihrem Account auf White Label
Klicken Sie auf Meine Kunden
Wählen Sie den Kunden aus
Klicken Sie auf Mailing Templates
Hier können Sie festlegen, welche Templates für diesen Kunden zur Verfügung stehen
Template allen Kunden einer Marke zuweisen
Klicken Sie in Ihrem Account auf White Label
Klicken Sie auf Meine Marken
Wählen Sie die Marke aus
Klicken Sie auf Mailing Templates
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.