Classic Editor: Erläuterung der CleverReach Template-Technik

Diese Template-Technik bezieht sich auf den Classic Editor. Technisch wird der Classic Editor nicht mehr unterstützt. Wir empfehlen Ihnen Ihr Mailing künftig in unserem Newsletter Editor zu erstellen.
Die Template-Technik für den Newsletter Editor finden Sie hier.

Mit unserer Template-Technik (Template = Vorlage) können Sie jede Newsletter-Vorlage (HTML) in ein per Drag & Drop bedienbares Template verwandeln. Platzieren Sie dazu spezielle Template-Tags im Quellcode Ihrer HTML-Datei. Nahezu jeder Tag besteht aus zwei Teilen – einem öffnenden 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, Unsubcribe und Aboutus wird automatisch ein Standard-Text von CleverReach eingesetzt. Vorhandene Inhalte dieser Tags werden damit komplett überschrieben.

Online-Version

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

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

Wenn Sie eigene Inhalte innerhalb dieses Tags definieren, wird dieser beim Laden der Vorlage komplett mit Standardtext von CleverReach überschrieben.  In diesem Fall sollten Sie einen HTML-Bereich definieren.

Elemente

Eine im Quellcode platzierte Markierung (Loop-Tag) ermöglicht Ihnen neue Elemente in Ihr Mailing einzufügen. In dem Bereich, in dem Sie den Loop-Tag platzieren, können Sie via Drag & Drop das jeweilige Element an die gewünschte Stelle ziehen.

<!--#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önnen in beliebigen Formaten hinzugefügt werden. CleverReach bietet einige vordefinierte Elemente im Editor an, aber selbstverständlich können Sie auch eigene Elemente für Ihre Mailings verwenden.

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.

<!--#unsubscribe#--><a href="{UNSUBSCRIBE}">Abmelden</a><!--#/unsubscribe#-->

Wenn Sie eigene Inhalte innerhalb dieses Tags definieren, wird dieser beim Laden der Vorlage komplett mit Standardtext von CleverReach überschrieben.  In diesem Fall sollten Sie einen HTML-Bereich definieren.

Impressum

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

<!--#aboutus#--><!--#/aboutus#-->

Wenn Sie eigene Inhalte innerhalb dieses Tags definieren, wird dieser beim Laden der Vorlage komplett mit Standardtext von CleverReach überschrieben.  In diesem Fall sollten Sie einen HTML-Bereich definieren.

Bild

Verwenden Sie den Bild-Tag, um ein bearbeitbares Bild zu platzieren, dies kann durchaus auch für Verlinkungen genutzt werden.

<!--#image#--><img src="http://www.ihredomain.de/logo.jpg" border="0" ><!--#/image#-->

Damit das Bild später im Classic Editor zentriert werden kann, muss das Bild von einem Center-Tag umgeben werden, sonst ist lediglich eine Links-/Rechts-Ausrichtung möglich.

Link

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

<!--#link#--><a href="http://www.ihredomain.de">Link</a><!--#/link#-->

Dieses Element ist ausschließlich für Text-Links vorgesehen, nicht für verlinkte Bilder. Für verlinkte Bilder nutzen Sie das Bild-Element.

HTML-Bereich

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

<!--#html#--><div>
  <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.
</div><!--#/html#-->

Damit eine Textausrichtung später im HTML-Bereich möglich ist (links/rechts/zentriert/block), muss innerhalb des HTML-Elements ein Block-Element vorhanden sein, also ein P- oder Div-Tag.

Text-Zeile

Verwenden Sie den Text-Tag, um eine bearbeitbare Text-Zeile für Textpassagen zu platzieren (z. B. für Überschriften). Hierbei sind keine Formatierungen möglich, aber es können Hyperlinks eingefügt werden.

<!--#text_line#--><div>Ich bin eine bearbeitbare Textzeile!</div><!--#/text_line#-->

Text-Bereich

Verwenden Sie den Text-Tag, um eine bearbeitbare Text-Zeile für kurze Textpassagen zu platzieren. Hierbei können keine Hyperlinks eingefügt werden.

<!--#text#--><div>Ich bin eine bearbeitbare Textzeile!</div><!--#/text#-->

Inhaltsverzeichnis

Dieses Element erzeugt automatisch ein Inhaltsverzeichnis mit internen Verlinkungen zu den verschiedenen Artikel-Elementen, die im Classic Editor hinzugefügt werden. Nahezu jedes hinzugefügte Element erscheint als separater Punkt im Inhaltsverzeichnis. Eigene Elemente werden grundsätzlich immer im Inhaltsverzeichnis aufgenommen. Durch einen Klick auf das Inhaltsverzeichnis können Artikel aus dem Inhaltsverzeichnis über das Auge-Symbol ein- und ausgeblendet werden. Kleiner Tipp: Dieses Element ist auch als Standard-Element in der Elementenauswahl verfügbar.

<div class="summary">
  <!--#summary#-->
  <ul>
  </ul>
  <!--#/summary#-->
</div>

Element-Trenner

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

<!--#loop#-->
  <!--#html#-->Beispieltext 1<!--#/html#-->
  <!--#loopsplit#-->
  <!--#html#-->Beispieltext 2<!--#/html#-->
<!--#/loop#-->

Vorlagen-Element

Die Erstellung von E-Mails mit dem Classic Editor ist nicht auf die Standard-Elemente von CleverReach beschränkt. Sie können innerhalb Ihrer Vorlagen sog. Vorlagenelemente deklarieren und innerhalb des Editors einfügen. Hierzu müssen Sie den entsprechenden Bereich lediglich als separates Element markieren.

<!--#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#-->

Jedes Element muss individuell benannt werden, sonst erscheint dieses nicht in der Auswahl. Diese Elemente stehen nur zur Verfügung, wenn die entsprechende Vorlage für das Mailing verwendet wird, die Elemente sind also vorlagenbezogen. Achten Sie darauf, dass die Definition des Vorlagenelements innerhalb eines Loops erfolgt. Alternativ können Sie im Account unter E-Mails > Elemente unabhängige eigene Elemente hinterlegen, welche bei jeder Vorlage verfügbar sind (empfohlen).

Konfiguration von Styles

In der Sidebar rechts im Editor können Sie die entsprechenden Bereiche der Vorlage ändern, natürlich in Abängigkeit davon, welche Bereiche Sie definiert haben. Über den Bereich Design können Sie dann den entsprechenden Bereich bearbeiten. Auch lassen sich die Styles von bestimmten Bereichen in Ihrer eigenen Vorlage über die Toolbar konfigurieren. Dazu können HTML-Elemente (z. B. Tabellen) mit dem Tag cr_edit="Name des Bereichs" ausgestattet werden. Der Name erscheint anschließen in der Toolbar.

<table data-cr-edit="Name des Bereichs">
  <tr>
    <td></td>
  </tr>
</table>

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 unten rechts im Bearbeitungsfenster das Bearbeitungssymbol zur Änderung der Styles.

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

WICHTIGE HINWEISE

• Der öffnende und schließende Loop-Tag muss in einem gemeinsamen HTML-Tag (TD, DIV) enthalten sein, welcher in der Breite begrenzt ist. Eine 100% Breite des Loops wird Probleme in der Berarbeitung der Elemente nach sich ziehen
• Sie können Loop-Tags (<!--#loop #--><!--#/loop#-->) nicht verschachteln. Innerhalb eines Loop-Tags können Sie keinen weiteren Loop einbinden. Auch können Elemente untereinander nicht verschachtelt werden.
• Wenn Sie eigene oder vorlagenspezifische Elementen verwenden, müssen diese immer auf Basis von kompletten HTML-Containern (Tabelle/Div) eingebunden werden
• Sollte Ihre Vorlage bei der Template-Auswahl des Mailings nicht aufgeführt werden, enthält die Vorlage entweder keine oder fehlerhafte Wizard-Tags (weitere Infos siehe hier)
• Bei Nutzung eigener Vorlagen empfehlen wir unsere Tipps und Tricks für HTML-Vorlagen
• Beachten Sie, dass CleverReach keinen Support für eigene Vorlagen oder Elemente anbietet