Wenn Sie Ihre eigene Vorlage erstellen wollen, tun wir unser Bestes, um Ihren Code zu überprüfen und sicherzustellen, dass das Ergebnis den Standards der Branche entspricht. Dennoch gilt: Damit wir das garantieren und Sie bei etwaigen Problemen mit Vorlagen unterstützen zu können, müssen Sie Ihr Design an Emarsys übergeben und die Vorlage von uns erstellen lassen. Weitere Informationen erhalten Sie unter: E-Mail-Vorlage bei Emarsys bestellen.
Für Code-Beispiele sehen Sie sich die vorkonfigurierte Emarsys Vorlage im Style-Editor an; auf diese Weise erfahren Sie, wie eine Variablenstruktur aufgebaut ist, welche Variablen für das jeweilige Content-Element verwendet werden können und wie sie benannt werden.
So erstellen Sie Ihre eigene Vorlage:
- Öffnen Sie das Menü Kanäle und wählen Sie E-Mail-Kampagnen aus.
- Klicken Sie E-Mail erstellen.
Wenn Sie gefragt werden, welcher Editor verwendet werden soll, wählen Sie Block-based Editor aus. - Auf der Seite Ihre Vorlagen klicken Sie eine der zwei Optionen für Vorlage erstellen.
- Folgen Sie den Tabs auf der rechten Seite von oben nach unten. Die Tabs werden weiter unten detailliert beschrieben.
Gelöschte E-Mail-Vorlagen können wiederhergestellt werden. Erfahren Sie mehr.
Frame-Editor
Auf dem Tab Frame-Editor wählen Sie den doctype für die E-Mail aus und fügen den HTML Code hinzu, der das Basis-Layout Ihrer E-Mail-Kampagne darstellt.
Ein Basic Frame HTML enthält zwei Platzhalter: #style# und #body#. Das sind die Pflichtelemente eines Frame HTML Code. #style# steht für den Code, den Sie im Style-Editor bereitgestellt haben; #body# steht für die Blöcke, die Sie in Ihre Vorlage eingefügt haben.
Style-Editor
Im Style-Editor fügen Sie das CSS ein, das den Stil Ihrer E-Mail bestimmt.
Content-Blöcke
Nachdem Sie Rahmen (Frame) und Stil (Style) erstellt haben, können Sie mit dem Erstellen der Content-Blöcke beginnen. Sie sollten für jedes Element Ihrer E-Mail einen Block erstellen, auch für den Header und Footer.
- Jeder Content-Block sollte mit einem Block-Level Element beginnen, z.B. <div>...</div> oder <table>...</table> oder <tr>...</tr>. Welches Block-Level Element erforderlich ist, bestimmt die Engine für die Validierung der E-Mail-Vorlage.
- Um Leerzeichen in die Textversion von VCE E-Mails einzufügen, verwenden Sie im HTML Code Leerzeichen und keine Tabs. Vermeiden Sie die Verwendung von Tabs; diese werden nicht als Leerzeichen im Text übernommen.
Im Sinne einer optimalen Systemperformance sollte eine Vorlage maximal 30 Blöcke enthalten.
Um einen Content-Block zu erstellen, klicken Sie Neuen Block erstellen und fügen Sie dann Ihren HTML Code ein. Dieser wird umgehend im Vorschaufenster angezeigt.
Wenn Sie alle Content-Blöcke erstellt haben, sind diese in der Spalte links für die Auswahl verfügbar.
Die Blöcke werden in alphabetischer Reihenfolge aufgelistet. Wenn Sie Einfluss auf die Reihenfolge nehmen wollen, können Sie den Blöcken ein numerisches Präfix voranstellen (wie oben dargestellt). Damit können Sie zum Beispiel die Anordnung der Blöcke in der E-Mail wiedergeben.
Um eine Standardansicht zu erstellen, fügen Sie die Blöcke in die Vorlage ein, indem Sie entweder auf dem Block selbst In Vorlage einfügen und dann Insert or drag block here (Block - auch per Drag - hier einfügen) klicken oder indem Sie den Block einfach in den Bereich Insert or drag block here ziehen.
Wenn Sie dieses Icon auf einem Block im Vorschaufenster klicken, entfernen Sie den Block aus der Vorschau. Wenn Sie das Icon auf einem Block in der Liste Content-Blöcke auf der linken Seite klicken, löschen Sie den Block aus der Vorlage selbst.
Bearbeitbarer Content - das Attribut "e-editable"
Der Content, den Sie zu einer Vorlage hinzufügen, ist per Voreinstellung unveränderbar und für all Ihre Kampagnen identisch.
Content, der von Kampagne zu Kampagne aktualisiert werden muss, sollte für die Bearbeitung offen gelassen werden. Markieren Sie jene Elemente, für die eine Bearbeitung möglich sein soll, indem Sie e-editable und einen Unique Identifier im Tag des Elements einschließen. D amit stellen Sie sicher, dass nur jene Teile der Vorlage bearbeitet werden können, für die das gewünscht ist. Sie können sowohl Text als auch Bilder und Links bearbeitbar machen.
<td e-editable="leadText">
Get 10% off!
</td>Hinweis:
- Jeder Identifier des Typs e-editable sollte im jeweiligen Content-Block eindeutig sein. Ein Identifier kann auch für mehrere Blöcke verwendet werden. Wenn Sie aber zwei oder mehr Elemente mit demselben Identifier haben und im Text-Editor den Content für nur eines der Elemente ändern, überschreibt das automatisch den Content der anderen Elemente mit demselben Identifier. Andere Blöcke mit demselben Unique Identifier sind davon nicht betroffen.
- Daher müssen Sie etwa bei Verwendung der Mehrsprachenfunktion für jede Sprachversion eindeutige Tags des Typs
e-editableverwenden, wie in nachstehendem Code-Beispiel ersichtlich:
<e-language locales="en-US">
<span e-editable="editable_name_en">Link EN</span>
</e-language>
<e-language locales="hu-HU">
<span e-editable="editable_name_hu">Link HU</span>
</e-language>In manchen Fällen kann es Sinn machen, denselben Identifier zu verwenden - zum Beispiel, wenn Sie eine URL an mehreren Stellen im Block verlinken wollen. Wenn Sie für die Link Tags jeweils denselben Identifier verwenden, stellen Sie sicher, dass alle auf dasselbe Ziel verweisen.
Beispiele für zwei CTAs mit zwei Links des Typs "e-editable":
<tr>
<td align="center">
<a href="https://mypage.com/1.html" e-editable="ctaurl1" target="_blank" title="Call
to action" class="cta-big">
<span e-editable="cta1">SHOP NOW CTA1</span>
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="https://mypage.com/2.html" e-editable="ctaurl2" target="_blank" title="Call
to action" class="cta-big">
<span e-editable="cta2">SHOP NOW CTA2</span>
</a>
</td>
</tr>Das Tag <span> ist für Text-Links erforderlich, mit einem eindeutigen e-editable Attribut.
Beispiel für ein e-editable Bild mit einem e-editable Link:
<a href="https://mypage.com" e-editable="bannerurl" target="_blank" title="Banner url">
<img src="http://mypage.com/image.png" e-editable="bannerimage" width="600px" alt="Banner image">
</a>Wenn Sie ein Bild zugleich bearbeitbar und verlinkbar machen wollen, müssen Sie das Tag <img> innerhalb des Tags <a> platzieren und dürfen keine weiteren Elemente zwischen diesen beiden anordnen - wie oben gezeigt.
Vermeiden Sie, Tags mit dem Attribut e-editable miteinander zu verschachteln.
Das kann Probleme verursachen, etwa, dass der Analyse-Name im Tab Links nicht aktualisiert werden kann.
Probleme dieser Art müssen Sie auf Vorlagen-Level korrigieren, damit alle auf der Vorlage basierten Kampagnen ebenfalls erfasst werden.
Eine Ausnahme von dieser Regel bilden Tags des Typs <span></span> innerhalb von Tags des Typs <a><a/>.
Optionaler Content - das Attribut "e-optional"
Wenn Sie davon ausgehen, regelmäßig Blöcke mit ähnlichem, jedoch nicht identischem Content zu benötigen, können Sie in den Blöcken optionale Elemente definieren. Das bedeutet, dass Sie einen Block mit mehreren Elementen definieren und dann für die jeweilige Kampagne entscheiden, welche Elemente Sie verwenden wollen; damit müssen Sie nicht für jede Permutation einen eigenen Block erstellen. Dafür fügen Sie ein Attribut des Typs e-optional hinzu.
<e-optional name="Shop now CTA">
<tr>
<td align="center">
<a href="" e-editable="shopnowctaurl" target="_blank" title="Shop now CTA" class="cta-big">
<span e-editable="shopnowcta">Shop now</span>
</a>
</td>
</tr>
</e-optional>Wie beim Attribut "e-editable" muss auch der Name Identifier für jedes Attribut des Typs "e-optional" im jeweiligen Content-Block eindeutig sein. Das ermöglicht Ihnen, das Element im Content-Editor zu aktivieren oder zu deaktivieren. Wenn zwei oder mehr Elemente einen identischen "e-optional" Name Identifier haben, dann werden durch Deaktivieren eines Elements im Text-Editor automatisch alle Elemente in diesem Block deaktiviert. Andere Blöcke mit demselben Unique Identifier sind davon nicht betroffen.
Beispiel für einen Content-Block mit drei optionalen Elementen:
<e-optional name="Headline">
<tr>
<td align="center" class="lh">
<span e-editable="Headline" class="h1">BIG DISCOUNT!</span>
</td>
</tr>
</e-optional>
<e-optional name="Copy">
<tr>
<td align="center" class="copy-text">
<span e-editable="copy" class="la-copy">Don't miss it, get it now.</span>
</td>
</tr>
</e-optional>
<e-optional name="Shop now CTA">
<tr>
<td align="center" class="dpt20lr10">
<table cellpadding="0" cellspacing="0" border="0" class="olbg1">
<tr>
<td align="center" class="oltd1">
<a href="" e-editable="shopnowurl" target="_blank" title="Shop now CTA" class="cta-big">
<span e-editable="shopnowcta">Shop now</span>
</a>
</td>
</tr>
</table>
</td>
</tr>
</e-optional>In diesem Beispiel hat der Block eine Titelzeile, etwas Text und einen Call-To-Action Button. Im Content-Editor können Sie entscheiden, ob Sie ein, zwei oder alle drei Elemente verwenden wollen.
Wie Sie sehen können, kann das Attribut e-editable auch innerhalb des Attributs e-optional verwendet werden.
Mobile First
Mobile wird für den E-Commerce-Markt immer wichtiger; deshalb müssen Sie dafür sorgen, dass Ihre Marketing-E-Mails auch auf Mobile-Geräten optimal dargestellt werden. Alle Emarsys Vorlagen sind standardmäßig für Mobile optimiert (außer es gibt eine explizite anderslautende Anforderung); der Block-based Editor bietet zusätzlich einfach anzuwendende Funktionen für das Ausblenden einzelner Abschnitte für Mobile, das Definieren eigener Mobile-Bilder und für Mobile-Vorschauen.
Wenn Sie Ihre eigenen Vorlagen erstellen, kann Ihnen dieser Artikel dabei helfen, sicherzustellen, dass Ihr E-Mail-Design nicht nur für Desktop, sondern auch für Mobile optimiert ist: Mobile-optimiertes Custom HTML
Variablen
Wenn Sie viele Vorlagen erstellen, können Sie in Ihrem HTML und CSS Variablen verwenden und damit Ihre E-Mail-Kampagnen noch einfacher anpassen. Die Werte der Variablen (Strings, Farben etc.) können Sie sodann für die jeweilige Vorlage auf dem Tab Variablen definieren. So können Sie zum Beispiel von einer Vorlage zur nächsten die Schrift oder die Hintergrundfarbe ändern. Weitere Informationen zur Definition von Variablen erhalten Sie unter: Variablen für E-Mail-Vorlagen einrichten.
Noch während Sie den Wert zur jeweiligen Variable hinzufügen, wird das Ergebnis umgehend im Vorschaufenster angezeigt.
Schriften hinzufügen
Aus Compliance-Gründen können Sie nur folgende Schriften verwenden:
• lizenzierte Schriften oder
• lokal gehostete, offline eingebettete Schriften
Einige der Online-Webschriften scheinen zwar zu funktionieren, werden von uns aber nicht unterstützt; Grund dafür sind der Datenschutz bzw. das Risiko, das sich durch den Transfer persönlicher Daten außerhalb des europäischen Wirschaftsraums ergibt.
Benutzerdefinierte Schriften, die den oben angegebenen Anforderungen entsprechen, können auf zwei Arten zu einer Vorlage hinzugefügt werden:
- Wenn die Schrift online verfügbar ist, können Sie das Font Face kopieren und direkt im Style-Editor einfügen.
- Wenn Sie über die Schriftdatei verfügen (es werden nur die Formate .woff oder .woff2 unterstützt), können Sie Ihr eigenes Font Face erstellen und dieses zum Style-Editor hinzufügen.
1. Benutzerdefiniertes Font Face zu einer Vorlage hinzufügen
Sie können eigene Schriften hinzufügen, indem Sie das Font Face direkt in den Style-Editor Ihrer Vorlage einfügen. Nachstehende Anleitung beschreibt, wie eigene Schriften hinzugefügt werden können.
- Öffnen Sie die Vorlage für die Bearbeitung und öffnen Sie dann den Style-Editor.
- Gehen Sie zur Schriftenseite.
- Suchen Sie nach den Schriften, die Sie in der Vorlage verwenden wollen, und wählen Sie diese aus.
- Kopieren Sie die markierte URL und fügen Sie diese im Browserfenster ein.
- Im Browser kopieren Sie das Font Face /* latin */.
- Fügen Sie das Font Face im Style Editor ein und speichern Sie die Vorlage.
- Wenn Sie das nächste Mal eine Kampagne auf Basis dieser Vorlage erstellen, sehen Sie die neue Schrift ganz oben in der Schriftenliste auf der Toolleiste für die Textformatierung.