Alle Kollektionen
Templates & Vorlagen
Templates selbst erstellen
Templates selbst erstellen

Einf√ľhrung in die Clever Elements¬ģ Template-Sprache und Template-Engine

Vor √ľber einer Woche aktualisiert

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

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

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

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

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:

  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.

Hat dies Ihre Frage beantwortet?