Hier finden Sie ein paar Tipps und Tricks, die Ihnen dabei helfen, Vorlagenvariablen noch gezielter einzusetzen.
Welche Schriften kann ich verwenden?
Aus Sicherheitsgründen werden derzeit nur Google Fonts unterstützt. Für kommende Releases ist die Unterstützung weiterer Schriften geplant.
Wie kann ich Schriften überschreiben?
Um Schriften in einer Vorlage zu überschreiben, erstellen Sie zuerst eine neue Variable des Typs Auswählbar, z.B.: globalfonts.
Alle Item Values müssen die Regel !important enthalten.
Wenn Sie möchten, dass das Überschreiben außer Kraft gesetzt werden kann, müssen Sie zudem einen Item Value als initial definieren und diesen Wert als Standardwert definieren (hier fügen Sie die Regel !important nicht hinzu).
Als Nächstes öffnen Sie den Style-Editor und fügen folgende Eigenschaft (und Variable) zum Tag font hinzu:
font {font-family: {variables.globalfonts}}
In der Vorlage werden die Schriften mit dem 'Font'-Tag deklariert. Das Deklarieren und Überschreiben von Schriften kann in anderen Vorlagen unterschiedlich sein.
Wie kann ich die Vorlage mit einem Hintergrundbild versehen?
Sie können eine Bildvariable als Hintergrund hinzufügen; das ermöglicht Ihnen, in Ihren E-Mail-Kampagnen unterschiedliche Hintergrundbilder zu verwenden, ohne dafür die Vorlage ändern zu müssen.
Hintergrundbild zu einzelnen Blöcken hinzufügen
Erstellen Sie zuerst eine Variable des Typs Image.
Hinweise
- Sie müssen ein Standard-Hintergrundbild auswählen; dieses fungiert als Standardwert der Variable. Im Kampagnen-Editor kann diese Zuweisung später geändert werden.
- Sie können auch Bilder von externen URLs und aus der Mediendatenbank verwenden, die Sie zuvor hochgeladen haben. Wenn Sie externe URLs verwenden, müssen Sie sicherstellen, dass die Bilder über die ganze Lebenszeit der Kampagne hinweg verfügbar bleiben.
Nachstehend sehen Sie ein Beispiel für einen HTML Code, der alles enthält, was für die Verwendung als Hintergrundbild erforderlich ist. Sie können das Beispiel für Ihren Vorlagen-Code adaptieren und zum HTML Code jenes Blocks hinzufügen, in dem das Hintergrundbild verwendet werden soll:
<td height="245" valign="middle" background="{variables.BgImage}" style="background-repeat:no-repeat;" bgcolor="{variables.BgImageFallbackColor}" class="cntbg"> <!--[if gte mso 9]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:245px;"><v:fill type="frame" src="{variables.BgImage}" color="{variables.BgImageFallbackColor}" /><v:textbox inset="0,0,0,0"><div><![endif]--> <table cellspacing="0" cellpadding="0" border="0" width="100%"> <tbody><tr> <td>Your content</td> </tr> </tbody></table> <!--[if gte mso 9]></div></v:textbox></v:rect><![endif]--> </td>Hinweise
- BgImage ist der Variablenname für das Hintergrundbild.
- BgImageFallbackColor ist der Variablenname für die Ersatz-Hintergrundfarbe. Es wird empfohlen, eine Ersatzfarbe zu definieren, da manche E-Mail-Clients das Hintergrundbild möglicherweise nicht darstellen können.
- Der Kommentar
[if gte mso 9]im HTML Code ist erforderlich, um sicherzustellen, dass das Bild in Microsoft Outlook richtig dargestellt wird. - Denken Sie daran, die Bilddimensionen im Beispiel-Code durch jene des tatsächlichen Bildes zu ersetzen.
Sobald Sie fertig sind, kann die Bildvariable als Hintergrundbild ausgewählt werden, und zwar in den Stileinstellungen jener E-Mails, die mit dieser Vorlage erstellt wurden.
Hintergrundbild zur E-Mail hinzufügen
Erstellen Sie zuerst eine Variable des Typs Image.
Hinweise
- Sie müssen ein Standard-Hintergrundbild auswählen; dieses fungiert als Standardwert der Variable. Im Kampagnen-Editor kann diese Zuweisung später geändert werden.
- Sie können auch Bilder von externen URLs und aus der Mediendatenbank verwenden, die Sie zuvor hochgeladen haben. Wenn Sie externe URLs verwenden, müssen Sie sicherstellen, dass die Bilder über die ganze Lebenszeit der Kampagne hinweg verfügbar bleiben.
Setzen Sie den Hintergrund für den Body, indem Sie im Style-Editor folgenden Code zum Vorlagen-CSS hinzufügen:
body { background:{variables.fullBgFallbackColor} url('{variables.fullBgImage}'); -webkit-text-size-adjust:none; -ms-text-size-adjust:none; margin:0; padding:0; }Schließen Sie sodann im Frame-Editor folgenden HTML Code im ersten Tag des Typs table der Vorlage ein:
<table cellspacing="0" cellpadding="0" border="0" width="100%" background="{variables.fullBgImage}" style="background-repeat:repeat; background-position:top left;" class="gwfw">Hierbei ist fullBgImage der Variablenname des Hintergrundbildes und fullBgFallbackColor der Variablenname für die Ersatzfarbe.
Setzen Sie keine Hintergrundfarbe im ersten Table, da diese nicht richtig dargestellt wird und in Microsoft Outlook das Hintergrundbild verdeckt.
Sobald Sie fertig sind, kann die Bildvariable als Hintergrundbild ausgewählt werden, und zwar in den Stileinstellungen jener E-Mails, die mit dieser Vorlage erstellt wurden.
Wenn Sie in einer Kampagne kein Hintergrundbild verwenden wollen, können Sie es in den Stileinstellungen einfach durch ein transparentes Bild ersetzen.
Wie kann ich eigene Margins definieren?
Am einfachsten erstellen Sie Margins, indem Sie eine Tabellenstruktur verwenden und den Wert für die Zellenhöhe definieren. Sie können auch transparente Bilder verwenden und deren Höhe und Breite definieren.
Erstellen Sie zuerst eine Variable des Typs Nummer - Integer, z.B.: headlinemargintop.
Fügen Sie folgenden Code zum Block der Vorlage hinzu:
{variables.headlinemargintop}
Für die mobile Anzeige sind Ihre Abstände möglicherweise zu groß; in diesem Fall können Sie die Margins mithilfe der Mobile-Classes setzen, die in den Media Query Rules definiert sind.