de en

Templates: E-Mail

Templates definieren das Gerüst Ihrer Newsletter. An welchen Stellen soll das Gerüst starr sein (Farben, Logo, Impressum), an welchen Stellen flexibel (Artikeltexte, Bilder)?

Templates sind beliebig oft wiederverwendbar und erleichtern den Alltag:

  • Befüllung Ihrer zukünftigen Newsletter ohne HTML-Kenntnisse, volle Konzentration auf den Inhalt
  • feste Layout-Vorgaben für einheitliches Erscheinungsbild (Corporate Design)
  • verschiedene Artikeltypen für gestalterische Freiheit
  • technisch saubere und optisch angepasste Darstellung auf allen Geräten (Smartphone, Tablet, Desktop)


Templates bestehen aus HTML- und CSS-Quellcode, eingebunden in die mailingpoint-Templatesprache. Deren Tags definieren die (flexible) Struktur des Newsletters.

Hinweis: Gern übernehmen wir die individuelle Programmierung von Templates für Sie, sollten Sie nicht die erforderlichen HTML- und CSS-Kenntnisse mit Spezialisierung auf E-Mail-Clients besitzen.


Anlegen von Templates

Oben rechts finden Sie den Link 'Neues Template erstellen'.

Reiter Grundeinstellungen

Im Feld 'Name' benennen Sie Ihr Template. Optional fügen Sie ein kleines Vorschaubild ein, um die Auswahl des Templates später im Mailing zu erleichtern. Nutzen Sie dazu den 'Durchsuchen...'-Button.

Reiter HTML-Eingabe

Hier geben Sie den HTML- und CSS-Quellcode Ihres Templates ein und kombinieren ihn mit der mailingpoint-Templatesprache.

Bitte prüfen Sie zunächst die Version Ihres Newsletter-Editors. Das nachfolgende Beispiel betrifft die Editoren V1 und V2. Hier wechseln Sie zur Hilfe des Editors V4.

Als kleines Beispiel soll ein Artikel mit Überschrift, Text, Link und einem Bild dienen.


Das Grundgerüst eines Templates ist wie folgt aufgebaut:
-------------------------------------------------------------------------------------------------
[CONTAINER name='Artikel']

[ELEMENT name='Artikel_Text']

[INDEXITEM]<a href="[INDEXITEMANCHOR]"> [INDEXITEMNAME]</a>[/INDEXITEM]

[ELEMENTTOOLS][ANCHOR][UPDATE][REMOVE][/ELEMENTTOOLS]

[BLOCK name='Bild' edit='true']
<a href="[INPUT name='Link URL' type='char' default='']">
<img src="
[INPUT name='Bild' type='image' default='http://www.IhreDomain.de/images/hoch_links.jpg']"
width="[INPUT name='Bildbreite_max145px' type='image' default='145']"
border="0" />
</a>
[/BLOCK]

[BLOCK name='Ueberschrift']
[INPUT name='Ueberschrift' type='char' default='Überschrift' index='true']
[/BLOCK]

[BLOCK name='Text']
[INPUT name='Text' type='text' default='... Text ...']
[/BLOCK]

[BLOCK name='Link']
<a href="[INPUT name='Linkt' type='url' default='http://www.ihrlink.de']">
[INPUT name='Linktext' type='char' default='zur Webseite']
<img src="http://www.IhreDomain.de/images/pfeil.jpg" width="19" height="18" border="0" />
</a>
[/BLOCK]

[/ELEMENT]

[CONTAINERTOOLS][CREATE][SORT][/CONTAINERTOOLS]

[/CONTAINER]
-------------------------------------------------------------------------------------------------

Der Container umschließt den dynamischen Artikelbereich. Dieser muss zwingend zu Beginn angelegt werden. Das schließende Container-Tag zeigt das Ende eines dynamischen Bereiches an.

Ein Container besteht aus einem oder mehreren verschiedenen Elementen. Diese können beliebig oft innerhalb eines Containers angelegt und verschoben werden. Dabei steht ein Element zum Beispiel für einen Artikel mit Bild links, einen Artikel mit Bild rechts oder für einen Artikel nur mit Text oder sogar nur ein Bild.
Elemente werden mit Hilfe des Element-Tags geöffnet und geschlossen.

Um die Eingabe von Inhalten zu realisieren, benötigt jedes Element mindestens einen Block. Mit Hilfe von Blöcken lassen sich die Inhalte eines Artikels gruppieren und bei der Befüllung der Inhalte separat bearbeiten.

Schlussendlich besitzt jeder Block wiederum ein oder mehrere Inputfelder. Diese bilden bei der Inhaltsbefüllung die Eingabemasken der Formulare und nehmen den späteren Content des Newsletters auf. Je nach gewünschtem Inhalt können Inputfelder von unterschiedlichem Typ sein:

  • text (mehrzeiliger Text)
  • char (einzeiliger Text)
  • html (WYSIWYG-Editor)
  • link (Linkurl)
  • image (Bild)


Nachdem alle benötigten Inputfelder gesetzt wurden, vergessen Sie nicht, alle geöffneten Blöcke, Elemente und Container auch wieder zu schließen und vor allem Ihre Arbeit zu speichern.
Nun haben Sie einen ersten Container erstellt. Innerhalb eines Templates können Sie beliebig viele Container anlegen, nur sollten Sie die Übersichtlichkeit nicht außer Acht lassen.




Alle beschriebenen Platzhalter für Ihr Template können Sie sich in mailingpoint auch mit den Eingabehilfen über den letzten Reiter 'Template-Hilfe' zusammenklicken.

Reiter HTML-Vorschau

Die HTML-Vorschau zeigt Ihr eben erstelltes Grundlayout an. Sie können somit überprüfen, ob die Anordnung der Elemente und Inhalte stimmt und sie nichts vergessen haben.

Reiter Text-Eingabe

Dieser Reiter dient dazu, dass Ihr Newsletter auch in der reinen Textanzeige umgesetzt wird. Für die Textumsetzung benötigen Sie alle Platzhalter wie im HTML-Teil beschrieben, nur ohne HTML-Quellcode.


-------------------------------------------------------------------------------------------------
[CONTAINER name='Artikel']

[ELEMENT name='Artikel_Text']

[INDEXITEM][INDEXITEMANCHOR][INDEXITEMNAME][/INDEXITEM]

[BLOCK name='Ueberschrift']
[INPUT name='Ueberschrift' type='char' default='Überschrift' index='true']
[/BLOCK]

[BLOCK name='Text']
[INPUT name='Text' type='text' default='... Text ...']
[/BLOCK]

[BLOCK name='Link']
[INPUT name='Linktext' type='url' default='zur Webseite']
[INPUT name='Linkt' type='char' default='http://www.ihrlink.de']
[/BLOCK]

[/ELEMENT]

[/CONTAINER]
-------------------------------------------------------------------------------------------------

Da Bilder im Textteil des Newsletters nicht angezeigt werden, müssen Sie Inputfelder vom Typ image nicht zwangsläufig einbinden. Wenn Sie dies dennoch möchten, so wird lediglich die URL des Bildes in den Text eingefügt.
Textteile, die als fester Bestandteil im Newsletter integriert sind, geben Sie einfach zwischen den Platzhaltern mit an. Zum Schluss müssen Sie nur noch speichern.

Reiter Text-Vorschau

In diesem Reiter überprüfen Sie die Darstellung des Textes und die Anordnung der unterschiedlichen Inputfelder.

Zum weiteren Verständnis:

Element-Tools & Container-Tools bieten Ihnen die Möglichkeit, Bereiche innerhalb Ihres Templates zu definieren, an deren Stelle Sie später Icons für die Bearbeitung, Erstellung, Sortierung oder das Entfernen von Elementen angezeigt bekommen.
Beide Tools werden lediglich bei der Befüllung des HTML-Teils des Newsletters angezeigt.

Element-Tools werden innerhalb eines Elementes definiert und ermöglichen so, diesen per Klick auf das entsprechende Icon zu bearbeiten oder zu löschen.
Container-Tools hingegen werden zu Beginn oder am Ende eines Containers definiert und ermöglichen es, über entsprechende Icons neue Inhaltselemente zu erstellen oder vorhandene Elemente neu zu sortieren.




 

Inhaltsverzeichnis:

Wenn Sie die Inhalte Ihres Mailings in einem Index (Inhaltsverzeichnis) zusammenfügen möchten, so können Sie dies entweder aufwendig per Hand eingeben oder automatisiert über das Template erzeugen lassen. Ein solcher Index kann über alle Elemente eines fest definierten Containers erstellt werden und wird analog der Inhalte Ihres Newsletters automatisch erzeugt und aktualisiert. Zu allererst müssen Sie an der Stelle, an der sich später das Verzeichnis befinden soll, den Index und den dazugehörigen Container wie folgt definieren: [INDEX name='Inhatsverzeichnis' container='Artikel'] ... [/INDEX] Die einzelnen Punkte des Inhaltsverzeichnisses werden in den jeweiligen Elementen über den Indexitem-Tag definiert. [ELEMENT name='Artikel_Text'] [INDEXITEM][INDEXITEMANCHOR][INDEXITEMNAME][/INDEXITEM] ... [/ELEMENT] Als Inhaltseintrag wird standardmäßig die Bezeichnung des jeweiligen Elements verwendet. Um Ihr Inhaltsverzeichnis aber z. B. analog der Artikelüberschriften aufzubauen, können Sie auch das entsprechende Inputfeld als Index-Eintrag definieren. Hierzu muss im gewählten Inputfeld lediglich das Attribut index auf true gesetzt werden. [INPUT name='Ueberschrift' ... index='true']

SWYN-Funktion:

Um Ihr Newsletter-Template für die Weiterempfehlung mittels sozialer Netzwerke vorzubereiten, können Sie einen SWYN-Block in beliebige Elemente einfügen.

Als erstes müssen Sie ein Block-Element wie folgt definieren:
[BLOCK name='Swyn' swyn='true'] … [/BLOCK]

Im Block befinden sich die einzelnen Social Network Anbieter, die wie folgt im Quellcode definiert werden:

Zum Beispiel:
[FACEBOOK img =''http://www.IhreDomain.de/images/facebook.jpg' width='24' height='24']

[TWITTER img=''http://www.IhreDomain.de/images/twitter.jpg' width='24' height='24']

[XING img=''http://www.IhreDomain.de/images/xing.jpg' width='24' height='24' ]

[LINKEDIN img=''http://www.IhreDomain.de/images/linkedin.jpg' width='24' height='24']

[MYSPACE img=''http://www.IhreDomain.de/images/my.spacejpg' width='24' height='24']

[STUDIVZ img=''http://www.IhreDomain.de/images/studivz.jpg' width='24' height='24' ]

[SPREADLY img='http://www.IhreDomain.de/images/spreadly.jpg' width='24' height='24']

[GPLUS img='http://www.IhreDomain.de/images/spreadly.jpg' width='24' height='24']

Hinweis: Sie müssen Ihre Icons jeweils als eigene Bilder einbinden (img) und die richtige Größe angeben.

RSS-Feed:

Es wird ein Container benötigt, der das Attribut für die Feed URL besitzt („feed-url='...'“). Ein Template besteht aus einzelnen Elementen, welches mit feedable='true' ausgewiesen sein muss.
Wenn mehrere Elemente als feedable gekennzeichnet werden, wird hierüber definiert welche Kategorie ins jeweilige Element übernommen wird (im Bsp. unten läuft die Kategorie 'Hauptthema' ins erste, alle anderen ins zweite Element).
Im Input wird das gewünschte Item (title, link, descripition) mittels „feed-path='...' “ übergeben.

Beispiel:

[CONTAINER name='container_1' feed-url='http://www.mein-rss-feed.de/feed/']
[ELEMENT name='element_1' feedable='true' feed-category='Hauptthema'] <div style="margin:10px; padding:10px; border:solid 3px #33c;">
[BLOCK name='block_1' edit='true']<h1>[INPUT feed-path='title' name='headline' type='char' default='headline' index='true']</h1>[/BLOCK]
[BLOCK name='block_2' edit='true']<p>[INPUT feed-path='description' name='text' type='text' default='text']</p>[/BLOCK]
[BLOCK name='block_3' edit='true']<a target="_blank" href="[INPUT feed-path='link' name='url' type='char' default='http://...']">[INPUT name='linktext' type='char' default='link-text']</a>[/BLOCK]
</div>[/ELEMENT]

[ELEMENT name='element_2' feedable='true'] <div style="margin:10px; padding:10px; border:solid 3px #333;">
[BLOCK name='block_1' edit='true']<h1>[INPUT feed-path='title' name='headline' type='char' default='headline' index='true']</h1>[/BLOCK]
[BLOCK name='block_2' edit='true']<p>[INPUT feed-path='description' name='text' type='html' default='text']</p>[/BLOCK]
[BLOCK name='block_3' edit='true']<a target="_blank" href="[INPUT feed-path='link' name='url' type='char' default='http://...']">[INPUT name='linktext' type='char' default='link-text']</a>[/BLOCK]
</div> [/ELEMENT][/CONTAINER]

Das Mailing mit RSS-Inhalten befüllen:
Sie erstellen Ihren neuen Newsletter und wählen das RSS-Template aus. Wenn ein Element RSS importieren kann, dann ist die Schaltfläche „RSS-Feed importieren“ bei den Inhaltselementen sichtbar.
Durch Klick auf den Button können Sie die zur Verfügung stehenden Artikel auswählen und importieren. Diese werden dann direkt in der Vorschau angezeigt. Wenn Sie etwas ändern wollen, können Sie auf die Elemente klicken und die jeweiligen Änderungen vornehmen.

Tags: