Vorlagen selber gestalten

Mit unserer einfachen Template-Technik (Template = Vorlage) könen Sie jede HTML-Seite in ein per Wizard (Erstellungs-Assistent) bedienbares Template verwandeln. Platzieren Sie dazu Template-Tags im Quellcode Ihrer HTML-Datei.

Jeder Tag besteht aus zwei Teilen – einem öffnenden Teil und einem schließenden Teil. Zwischen den beiden Teilen kann ein Standard-Text platziert werden, der bei Verwendung des Templates erscheint und anschließend bearbeitet werden kann. Bei den Tags "Online-Version", "unsubscribe", "aboutus" und "badget" wird automatisch ein Standard-Text von uns eingesetzt, sofern Sie keinen eigenen hinterlegt haben.


 
Online-Version: <!--#online_version #--><!--#/online_version#-->
Elemente hinzufügen: <!--#loop #--><!--#/loop#-->
Abmelde-Link: <!--#unsubscribe #--><!--#/unsubscribe#-->
Impressum: <!--#aboutus #--><!--#/aboutus#-->
Bild: <!--#image #--><!--#/image#-->
Link: <!--#link #--><!--#/link#-->
HTML-Bereich: <!--#html #--><!--#/html#-->
Textzeile: <!--#text_line #--><!--#/text_line#-->
Inhaltsverzeichnis: <!--#summary #--><!--#/summary#-->
Element-Trenner: <!--#loopsplit#-->
Eigenes Element: <!--#my_element name="Name" #--><!--#/my_element#-->
Konfiguration von Styles: cr_edit=“Name des Bereichs“
Styles eigener Elemente: class="editable"
 
 

Online-Version

Üer den Link der Online-Version kann sich der Empfänger die E-Mail online in seinem Browser ansehen.


Beispiel mit Default-Text:

<!--#online_version #-->

Bei fehlerhafter Darstellung des Newsletters klicken Sie bitte <a href="{ONLINE_VERSION}">hier (online)</a>.

<!--#/online_version#-->


»nach oben

Elemente

Eine im Quellcode platzierte Markierung (Loop-Tag) ermöglicht Ihnen, neue Elemente einzufügen. Üerall wo ein Loop-Tag hinterlegt ist finden Sie die beiden Icons:

Image = Neues Element hinzufügen
Image = RSS-Inhalt hinzufügen

Mit dem Button Element hinzufügen könen Sie beliebig viele neue Elemente verschiedenster Formate in die E-Mail einfügen. Mit dem RSS Symbol könen Sie den Inhalt eines RSS-Feeds in die E-Mail einfügen.

Beispiel mit Default-Text:

<!--#loop #-->

<h2><!--#text_line #-->Beispiel Titel<!--#/text_line#--></h2>
<!--#html #-->
Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.
<!--#/html#-->

<!--#/loop#-->


Neue Elemente könen in beliebigen Formaten hinzugefügt werden. Egal ob mit oder ohne Bilder. Für nahezu alle Variationsmöglichkeiten gibt es ein Element.

Beispiel-Elemente:

Image Image Image Image

»nach oben

Abmeldung

Mit dem Abmelde-Tag fügen Sie einen Bereich ein, in dem sich ein Link befindet, über den sich der Empfänger abmelden kann. Verwenden Sie nur den Tag, so wird ein Standard-Text eingefügt. Wie in folgendem Beispiel gezeigt, könen Sie auch einen eigenen Text oder Link hinterlegen.


Beispiel mit Default-Text:

<!--#unsubscribe #-->

<a href="{UNSUBSCRIBE}" >Abmelden</a>

<!--#/unsubscribe#-->


»nach oben

Impressum

Mithilfe des Impressum-Tags wird das in Ihrem Account hinterlegte Impressum eingefügt.

<!--#aboutus #-->

<!--#/aboutus#-->


»nach oben

Bild

Verwenden Sie den Bild-Tag, um ein bearbeitbares Bild zu platzieren.



Beispiel mit Default-Bild:

<!--#image #-->

<img src="http://www.yourdomain.com/logo.jpg" border="0" >

<!--#/image#-->


»nach oben

Link

Verwenden Sie den Link-Tag, um einen bearbeitbaren Link zu platzieren.


Beispiel mit Default-Link:

<!--#link #-->

<a href="http://www.yourdomain.com">Link</a>

<!--#/link#-->


»nach oben

HTML-Bereich

Verwenden Sie den HTML-Tag, um einen per HTML-Editor bearbeitbaren Bereich zu platzieren.


Beispiel mit Default-Text:

<!--#html #-->

<h2>Beispiel Titel</h2>
Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.

<!--#/html#-->


»nach oben

Text-Bereich

Verwenden Sie den Text-Tag, um eine bearbeitbare Text-Zeile zu platzieren.


Beispiel mit Default-Text:

<!--#text_line #-->

Ich bin eine bearbeitbare Textzeile!

<!--#/text_line#-->


»nach oben

Inhaltsverzeichnis

Dieses Element erzeugt automatisch ein Inhaltsverzeichnis mit internen Verlinkungen zu den verschiedenen Artikel-Elementen. Es berücksichtigt nur Artikel-Elemente mit einer Üerschrift.


Beispiel:

<div class='summary' style=''>
<!--#summary #-->
<ul></ul>
<!--#/summary#-->
</div>


»nach oben

Element-Trenner

Innerhalb eines Loops könen Sie beliebig viele bearbeitbare Bereiche in Form von HTML, Bildern, Links oder Textzeilen platzieren. Sollen diese Bereiche auch verschiebbar sein, dann müssen Sie diese mit dem Loopsplit-Tag trennen.


Beispiel:

<!--#loop #-->
<!--#html #--><!--#/html#-->

<!--#loopsplit#-->

<!--#html #--><!--#/html#-->
<!--#/loop#-->

»nach oben

Eigenes Element

Die Erstellung von E-Mails per Wizard ist nicht auf die Standard-Elemente beschränkt. Im Bereich Vorlagen könen auch eigene Elemente hinterlegt werden. Innerhalb des Wizards könen Sie diese dann in die E-Mail einfügen. Eigene Elemente könen ebenfalls direkt innerhalb der Vorlage eingebunden werden.


Beispiel:

<!--#loop #-->

<!--#my_element name="Name Ihres Elements" #-->

<h2><!--#text_line #-->Titel<!--#/text_line#--></h2> <!--#html #-->
Ich bin Ihr eigenes Element :-)
<!--#/html#-->

<!--#/my_element#-->

<!--#loopsplit#-->
…
<!--#/loop#-->

Hinweis: Jedes Element muss individuell benannt werden, sonst erscheint es nicht in der Auswahl. »nach oben

Konfiguration von Styles

Oberhalb des Wizards befindet sich die Style-Toolbar. Hierüber könen Farben, Schriftarten, Höhen/Breiten und vieles mehr konfiguriert werden. Per Default lassen sich die Styles vom BODY und der Links bearbeiten.

Auch lassen sich die Styles von bestimmten Bereichen in Ihrer eigenen Vorlage über die Toolbar konfigurieren. Dazu könen z. B. Tabellen mit dem Tag cr_edit=“Name des Bereichs“ ausgestattet werden. .


Beispiel:

<table cr_edit=“Name des Bereichs“>
<tr><td></td></tr>
</table>
Der Name erscheint anschließen in der Toolbar.
»nach oben

Konfiguration von Styles bei eigenen Elementen

Wenn Styles von eigenen Elementen konfigurierbar sein sollen, dann muss dem Element die Klasse class="editable" gegeben werden. Fahren Sie mit der Maus über dieses Element, so erscheint neben den Icons zum Löschen und Verschieben auch ein Bearbeitungssymbol.


Beispiel:

<table class="editable">
<tr><td></td></tr>
</table>

»nach oben