Wie erstelle ich ein eigenes Newsletter-Template? ⭐️⭐️

Einführung

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.

Nach oben

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.

Nach oben

Das Prinzip Elemente

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.

Nach oben

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>

Nach oben

HTML-Element

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

<chamhtml>Ein HTML-Element</chamhtml>

Nach oben

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 die Klasse „cham_img“ bei Verwendung von Chamimg Bild-Elementen anzugeben.
  • Die Klasse „cham_img“ darf auch wirklich nur bei Chamimg Bild-Elementen verwendet werden und NICHT bei fest im Template verbauten Bildern!
  • Anderenfalls kann es zu Problemen im späteren Newsletter kommen. Dort taucht dann vermehrt 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>

Nach oben

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.

Nach oben

Das Prinzip Module

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.

Nach oben

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>

Nach oben

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 <chammodule> mit einer Area versehen werden! Es ist nicht möglich <chammodule> und <chammodule area=“main“> 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.

 

Nach oben

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.

Nach oben

CSS Formatierungen

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.

Nach oben

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;

Nach oben

Vorschauen

Allgemeines

Sie können an verschiedenen Stellen Vorschauen hinterlegen.

Nach oben

Mailingvorschau

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.

Nach oben

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.

Nach oben

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

Nach oben