Skip to content

18.3 Beispiel: Standard-Template CHESS

Das Standard-Template [Sample] Chess finden Sie als Schablone sowohl im Layout Builder als auch im E-Mail Creator (EMC). Anhand dieses Beispiels können Sie nachvollziehen, wie Sie für die Erstellung einer individuellen Schablone und passender Bausteine vorgehen können. Hier erfolgt sowohl die Betrachtung des Gesamtpaketes (Layouts) als auch die der einzelnen verfügbaren Bausteine und deren CSS-Code.

Diese Schablone ist als Standardinhalt für alle Neukunden des EMM-Systems verfügbar und kann weiter individualisiert werden. Weitere Schablonen finden Sie auf unserer Homepage.

Es nutzt 9 von den 11 verfügbaren Bausteinen:

  • [Sample] 01. Header and Fullview

  • [Sample] 02. Hero, Teaser, Banner with link

  • [Sample] 03.2. Image no link (border)

  • [Sample] 04.1 Article

  • [Sample] 05. Headline

  • [Sample] 06. Text only

  • [Sample] 07. Button only

  • [Sample] 10. Space (variable height)

  • [Sample] 11. Footer

Als Raster wird ein 620px breites Raster verwendet (4 Spalten a 135px und 20px Spaltenabstand). Sollte dieses Template in Ihrem Mandaten nicht verfügbar sein, können Sie sich gerne an Ihren Kundenbetreuer wenden.

Grundlagen des Templates

  • Name des Rasters: [Sample] 4 Columns

  • Spaltenanzahl: 4

  • Rasterbreite: 620 px

  • Spaltenbreite: 135 px

  • Spaltenabstand: 20 px

18.3.1 Rahmeninhalt

Der Rahmeninhalt verwendet unverändert den vom E-Marketing Manager vorgeschlagenen HTML-Code, den Sie im Register Schablone innerhalb Ihrer Schablone finden.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
\<html xmlns="http://www.w3.org/1999/xhtml">
\<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if !mso]>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
\<![endif]-->
<style type="text/css">
[gridPH name="templateCSS"]
</style>
<!--[if (gte mso 9)\|(IE)]>
<style type="text/css">
table { border-collapse: collapse; }
</style>
\<![endif]-->
\</head>
\<body yahoo>
<table class="wrapper" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="center" align="center" valign="top">
\<div class="webkit">
<!--[if (gte mso 9)\|(IE)]>
<table width="620" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
\<![endif]-->
<table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
[gridPH name="layoutBody"]
</table>
<!--[if (gte mso 9)\|(IE)]>
</td>
</tr>
</table>
\<![endif]-->
\</div>
</td>
</tr>
</table>
\</body>
</html>

18.3.2 CSS (individuell)

Das hier abgebildete CSS liegt dem Standard-Template [Sample] Chess zugrunde, kann aber individuell ergänzt oder angepasst werden. Es wird bei der Mailing-Generierung über das Tag [gridPH name="templateCSS"] an der entsprechenden Stelle in den Rahmeninhalt eingefügt:

img {
display: block;
border: 0;
height: auto;
}
.div-container {
width: 100%;
max-width: 600px;
font-size: 12px;
line-height: 140%;
text-align: left;
}
.agn_table_row {
width: 100%;
}
img {
-ms-interpolation-mode:bicubic;
}
img.g-img + div {
display: none !important;
}
.button-td, .button-a {
transition: all 100ms ease-in;
}
.button-td:hover, .button-a:hover {
background: #555555 !important;
border-color: #555555 !important;
}
@media screen and (max-width: 600px) {
.email-container {
width: 100% !important;
margin: auto !important;
}
.email-container p {
font-size: 17px !important;
line-height: 22px !important;
}
}

18.3.3 Bausteine des Templates

Nachfolgend werden alle verfügbaren Standard-Bausteine vorgestellt.

Besonderheit für Bausteine: Diese müssen von einem \<div class=„div-container“> … \</div> umschlossen sein.

18.3.3.1 [Sample] 01. Header and Fullview

Mit diesem Baustein fügen Sie einen Link zur Webview und Ihr Logo in das Mailing ein. Im fertigen Mailing sieht der Baustein wie folgt aus:

Abb. 18.15: Baustein 01. Header and Fullview

CSS-Klassen:

  • email-container

Platzhalter:

  • 1.0 Fullview text

  • 1.1 Fullview link

  • 1.2 Fullview font

  • 1.3 Fullview text color

  • 2.0 Logo

  • 2.1 Logo URL

  • 2.2 Alternative text

  • 2.3 Logo width

  • 2.4 Logo alignment

  • 3.1 Background color fullview

  • 3.2 Background color image

Code:

\<div class="div-container">

<table bgcolor="[gridPH name="3.1 Background color fullview" type="LABEL"]" role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="600" style="margin: auto;" class="email-container">
<tr>
<td style="padding: 10px 0; text-align: center">
\<a href="[gridPH name="1.1 Fullview link" type="LINK"]" style="color:[gridPH name="1.3 Fullview text color" type="LABEL"]; font-family:[gridPH name="1.2 Fullview font" type="LABEL"]; font-size: 12px; line-height: 14px;" target="_blank">[gridPH name="1.0 Fullview text" type="TEXT"]\</a>

</td>
</tr>
</table>
<table bgcolor="[gridPH name="3.2 Background color image" type="LABEL"]" role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="600" style="margin: auto;" class="email-container">
<tr>
<td style="padding: 20px 0; text-align: [gridPH name="2.4 Logo alignment" type="LABEL"];">

\<a href="[gridPH name="2.1 Logo URL" type="LINK"]" target="_blank"><img src="[gridPH name="2.0 Logo" type="IMAGE"]" alt="[gridPH name="2.2 Alternative text" type="LABEL"]" border="0" align="[gridPH name="2.4 Logo alignment" type="LABEL"] !important" style="width: 100%; max-width:[gridPH name="2.3 Logo width" type="LABEL"]; height: auto; background: [gridPH name="3.2 Background color image" type="LABEL"]; font-family:[gridPH name="1.2 Fullview font" type="LABEL"]; display:block; font-size: 15px; line-height: 20px; color: #555555;">\</a>

</td>
</tr>
</table>

\<!-- Email Header : END -->

\</div>

Mit diesem Baustein können Sie ein Bild mit Verlinkung auf eine beliebige Website einfügen. Sie können auch einen alternativ Text und eine Hintergrundfarbe festlegen.

Im finalen Mailing sieht der Baustein wie folgt aus:

Abb. 18.16: Baustein 02. Hero, Teaser, Banner with Link

CSS-Klassen:

  • email-container

  • g-img

Platzhalter:

  • 1 Image

  • 2 Target URL

  • 3 Alternative text

  • 4 Background color

Code:

\<div class="div-container">

<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="600" style="margin: auto;" class="email-container">
<tr>
<td bgcolor="[gridPH name="4 Background color" type="LABEL"]" align="center"><a href="[gridPH name="2 Target URL" type="LINK"]" target="_blank"><img src="[gridPH name="1 Image" type="IMAGE"]" width="600" height="" alt="[gridPH name="3 Alternative text" type="LABEL"]" border="0" align="center" style="width: 100%; max-width: 600px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; margin: auto;" class="g-img"></a></td>
</tr>
</table>

\</div>

Mit diesem Baustein, ist es Ihnen möglich, ein Bild in das Mailing einzufügen. Sie können zusätzlich einen alternativ Text und eine Hintergrundfarbe definieren.

Der fertige Baustein sieht wie folgt aus:

Abb. 18.17: Baustein 03.2. Image no link (border)

CSS-Klassen:

  • fluid

Platzhalter:

  • 1 Image

  • 2 Alternative text

  • 3 Background color

Code:

\<div class="div-container">

<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td bgcolor="[gridPH name="3 Background color" type="LABEL"]" style="padding: 10px; text-align: center">

<img src="[gridPH name="1 Image" type="IMAGE"]" width="100%" alt="[gridPH name="2 Alternative text" type="LABEL"]" border="0" class="fluid" style="height: auto; font-size: 15px; line-height: 20px; color: #555555;">

</td>
</tr>
</table>

\</div>

18.3.3.4 [Sample] 04.1 Article

Dieser Baustein erlaubt es Ihnen, ein Bild, Textinhalte und einen Button einzufügen. Die Texte und den Button können Sie frei formatieren.

Der Baustein sieht wie folgt aus:

Abb. 18.18: Baustein 04.1. Article

CSS-Klassen:

  • email-container

  • button-td

  • fluid

  • button-a

Platzhalter:

  • 1.0 Label

  • 1.1 Label color

  • 1.2 Label text color

  • 1.3 Label border radius

  • 1.4 Font size (Label, Button)

  • 2.0 Image

  • 2.1 Alternative text

  • 3.0 Headline

  • 3.1 Font weight headline

  • 3.2 Text color headline

  • 4.0 Subline

  • 4.1 Font weight subline

  • 4.2 Text color subline

  • 5.0 Content

  • 5.1 Text color

  • 6.0 Button text

  • 6.1 Button link

  • 6.2 Button color

  • 6.3 Button text color

  • 6.4 Button border radius

  • 7.0 Background color

  • 7.1 Text alignment

  • 7.2 Font (Label, Headlines, Button)

Code:

\<div class="div-container">

<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="margin: auto;" class="email-container">[gridPH name="1.0 Label" type="LABEL"]
<tr>
<td align="left" bgcolor="[gridPH name="7.0 Background color" type="LABEL"]" style="padding: 10px 10px 5px; text-align: left;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="left">
<tr>
<td style="border-radius: [gridPH name="1.3 Label border radius" type="LABEL"]; border: 15px solid [gridPH name="1.1 Label color" type="LABEL"]; background: [gridPH name="1.1 Label color" type="LABEL"]; text-align: center; font-size: [gridPH name="1.4 Font size (Label, Button)" type="LABEL"]; line-height: 1.1; font-weight: bold; font-family: [gridPH name="7.2 Font (Label, Headlines, Button)" type="LABEL"];" class="button-td">

\<p style="margin: 0;">\[gridPHVALUE name="1.0 Label" type="LABEL"]\</span>\</p>

</td>
</tr>
</table>
</td>
</tr>[/gridPH name="1.0 Label" type="LABEL"][gridPH name="2.0 Image" type="IMAGE"]
<tr>
<td align="center" bgcolor="[gridPH name="7.0 Background color" type="LABEL"]" style="padding: 10px; text-align: center;"><a href="[gridPH name="6.1 Button link" type="LINK"]" target="_blank"><img src="[gridPHVALUE name="2.0 Image" type="IMAGE"]" width="100%" alt="[gridPH name="2.1 Alternative text" type="LABEL"]" border="0" class="fluid" style="height: auto; font-size: 15px; line-height: 20px; color: [gridPH name="3.2 Text color headline" type="LABEL"]; font-family: [gridPH name="7.2 Font (Label, Headlines, Button)" type="LABEL"];"></a>
</td>
</tr>[/gridPH name="2.0 Image" type="IMAGE"]
<tr>
<td bgcolor="[gridPH name="7.0 Background color" type="LABEL"]" style="padding: 10px 10px 5px; text-align: [gridPH name="7.1 Text alignment" type="LABEL"];">[gridPH name="3.0 Headline" type="LABEL"]

\<h1 style="margin: 0; font-size: 24px; line-height: 27px; color: [gridPH name="3.2 Text color headline" type="LABEL"]; font-weight: [gridPH name="3.1 Font weight headline" type="LABEL"]; font-family: [gridPH name="7.2 Font (Label, Headlines, Button)" type="LABEL"];">[gridPHVALUE name="3.0 Headline" type="LABEL"]\</h1>[/gridPH name="3.0 Headline" type="LABEL"][gridPH name="4.0 Subline" type="LABEL"]

\<h2 style="margin: 0; font-size: 18px; line-height: 21px; color: [gridPH name="4.2 Text color subline" type="LABEL"]; font-weight: [gridPH name="4.1 Font weight subline" type="LABEL"]; font-family: [gridPH name="7.2 Font (Label, Headlines, Button)" type="LABEL"];">[gridPHVALUE name="4.0 Subline" type="LABEL"]\</h2>[/gridPH name="4.0 Subline" type="LABEL"]

</td>
</tr>[gridPH name="5.0 Content" type="TEXT"]
<tr>
<td bgcolor="[gridPH name="7.0 Background color" type="LABEL"]" style="padding: 10px 10px 5px; font-size: 15px; line-height: 20px; color: [gridPH name="5.1 Text color" type="LABEL"]; text-align: [gridPH name="7.1 Text alignment" type="LABEL"];">

\<p style="margin: 0;">[gridPHVALUE name="5.0 Content" type="TEXT"]\</p>

</td>
</tr>[/gridPH name="5.0 Content" type="TEXT"][gridPH name="6.1 Button link" type="LINK"]
<tr>
<td bgcolor="[gridPH name="7.0 Background color" type="LABEL"]" style="padding: 10px 10px 5px; font-size: 15px; line-height: 20px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto">
<tr>
<td style="border-radius: [gridPH name="6.4 Button border radius" type="LABEL"]; background: [gridPH name="6.2 Button color" type="LABEL"]; text-align: center;" class="button-td">

\<a href="[gridPHVALUE name="6.1 Button link" type="LINK"]" style="background: [gridPH name="6.2 Button color" type="LABEL"]; border: 15px solid [gridPH name="6.2 Button color" type="LABEL"]; font-family: [gridPH name="7.2 Font (Label, Headlines, Button)" type="LABEL"]; font-size: [gridPH name="1.4 Font size (Label, Button)" type="LABEL"]; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: [gridPH name="6.4 Button border radius" type="LABEL"]; font-weight: bold;" class="button-a">

    \[gridPH name="6.0 Button text" type="LABEL"]\</span>    

\</a>

</td>
</tr>
</table>
</td>
</tr>[/gridPH name="6.1 Button link" type="LINK"]
<tr>
<td bgcolor="[gridPH name="7.0 Background color" type="LABEL"]" style="padding: 0 10px 5px; font-size: 0; line-height: 0;">

\<p style="margin: 0;"> \</p>

</td>
</tr>
</table>

\</div>

18.3.3.5 [Sample] 05. Headline

Dieser Baustein fügt eine Überschrift ein. Im Mailing sieht dieser wie folgt aus:

Abb. 18.19: Baustein 05 Headline

CSS-Klassen:

  • email-container

Platzhalter:

  • 1.0 Headline

  • 1.1 Text color

  • 1.2 Font weight

  • 1.3 Font size

  • 1.4 Line height

  • 1.5 Text alignment

  • 1.6 Font family

  • 1.7 Background color

Code:

\<div class="div-container">

<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="margin: auto;" class="email-container">
<tr>
<td bgcolor="[gridPH name="1.7 Background color" type="LABEL"]" style="padding: 10px 10px 5px; text-align: [gridPH name="1.5 Text alignment" type="LABEL"]; font-family: [gridPH name="1.6 Font family" type="LABEL"];">[gridPH name="1.0 Headline" type="LABEL"]

\<h1 style="margin: 0; font-size: [gridPH name="1.3 Font size" type="LABEL"]; line-height: [gridPH name="1.4 Line height" type="LABEL"]; color: [gridPH name="1.1 Text color" type="LABEL"]; font-weight: [gridPH name="1.2 Font weight" type="LABEL"];">[gridPHVALUE name="1.0 Headline" type="LABEL"]\</h1>[/gridPH name="1.0 Headline" type="LABEL"]

</td>
</tr>
</table>

\</div>

18.3.3.6 [Sample] 06. Text only

Mit diesem Baustein können Sie einen Fließtext in Ihr Mailing einfügen. Der Text ist frei formatierbar. Final sieht dieser wie folgt aus:

Abb. 18.20: Baustein 06. Text only

CSS-Klassen:

  • email-container

Platzhalter:

  • 1 Content

  • 2.0 Background color

  • 2.1 Text color

  • 2.2 Text alignment

Code:

\<div class="div-container">

<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="margin: auto;" class="email-container">
<tr>
<td bgcolor="[gridPH name="2.0 Background color" type="LABEL"]" style="padding: 5px 10px 5px 10px; font-size: 15px; line-height: 18px; color: [gridPH name="2.1 Text color" type="LABEL"]; text-align: [gridPH name="2.2 Text alignment" type="LABEL"];">

[gridPH name="1 Content" type="TEXT"/]

</td>
</tr>
</table>

\</div>

18.3.3.7 [Sample] 07. Button only

Durch diesen Baustein fügen Sie einen Button in Ihr Mailing ein, welcher auf eine beliebe Homepage verlinkt werden kann. Der Button und Text sind frei formatierbar.

Im Mailing sieht dieser wie folgt aus:

Abb. 18.21: Baustein 07. Button only

CSS-Klassen:

  • email-container

  • button-td

  • button-a

Platzhalter:

  • 1.0 - Button text

  • 1.1 Link

  • 1.2 Text color

  • 1.3 Button color

  • 1.4 Button border radius

  • 1.5 Background color

  • 1.6 Font

Code:

\<div class="div-container">

<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="margin: auto;" class="email-container">

[gridPH name="1.1 Link" type="LINK"]

<tr>
<td bgcolor="[gridPH name="1.5 Background color" type="LABEL"]" style="padding: 10px 10px 5px;; font-size: 15px; line-height: 20px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto">
<tr>
<td style="border-radius: [gridPH name="1.4 Button border radius" type="LABEL"]; background: [gridPH name="1.3 Button color" type="LABEL"]; text-align: center;" class="button-td">

\<a href="[gridPHVALUE name="1.1 Link" type="LINK"]" style="background: [gridPH name="1.3 Button color" type="LABEL"]; border: 15px solid [gridPH name="1.3 Button color" type="LABEL"]; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: [gridPH name="1.4 Button border radius" type="LABEL"]; font-weight: bold;" class="button-a">

    \[gridPH name="1.0 - Button text" type="LABEL"]\</span>    

\</a>

</td>
</tr>
</table>
</td>
</tr>[/gridPH name="1.1 Link" type="LINK"]
<tr>
<td bgcolor="[gridPH name="1.5 Background color" type="LABEL"]" style="padding: 0 10px 5px; font-size: 0; line-height: 0;">

\<p style="margin: 0;"> \</p>

</td>
</tr>
</table>

\</div>

18.3.3.8 [Sample] 08. Headline, Text and Button

Hiermit fügen Sie eine Überschrift, einen Fließtext und einen Button in Ihr Mailing ein. Alle Inhalte sind frei formatierbar.

Im Mailing sieht der Baustein folgendermaßen aus:

Abb. 18.22: Baustein 08. Headline, Text and Button

CSS-Klassen:

  • email-container

  • button-td

  • button-a

Platzhalter:

  • 1.0 Headline

  • 1.1 Font weight headline

  • 1.2 Text color headline

  • 2.0 Subline

  • 2.1 Font weight subline

  • 2.2 Text color subline

  • 3.0 Content

  • 3.1 Text color

  • 4.0 Button text

  • 4.1 Button URL

  • 4.2 Button color

  • 4.3 Button text color

  • 4.4 Button border radius

  • 5.0 Background color

  • 5.1 Text alignment

  • 5.2 Font family (headlines & button)

Code:

\<div class="div-container">

<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="margin: auto;" class="email-container">
<tr>
<td bgcolor="[gridPH name="5.0 Background color" type="LABEL"]" style="padding: 10px 10px 5px; text-align: [gridPH name="5.1 Text alignment" type="LABEL"]; font-family: [gridPH name="5.2 Font family (headlines & button)" type="LABEL"];">[gridPH name="1.0 Headline" type="LABEL"]

\<h1 style="margin: 0; font-size: 24px; line-height: 27px; color: [gridPH name="1.2 Text color headline" type="LABEL"]; font-weight: [gridPH name="1.1 Font weight headline" type="LABEL"];">[gridPHVALUE name="1.0 Headline" type="LABEL"]\</h1>[/gridPH name="1.0 Headline" type="LABEL"][gridPH name="2.0 Subline" type="LABEL"]

\<h2 style="margin: 0; font-size: 18px; line-height: 21px; color: [gridPH name="2.2 Text color subline" type="LABEL"]; font-weight: [gridPH name="2.1 Font weight subline" type="LABEL"];">[gridPHVALUE name="2.0 Subline" type="LABEL"]\</h2>[/gridPH name="2.0 Subline" type="LABEL"]

</td>
</tr>[gridPH name="3.0 Content" type="TEXT"]
<tr>
<td bgcolor="[gridPH name="5.0 Background color" type="LABEL"]" style="padding: 10px 10px 5px; font-size: 15px; line-height: 20px; color: [gridPH name="3.1 Text color" type="LABEL"]; text-align: [gridPH name="5.1 Text alignment" type="LABEL"];">

\<p style="margin: 0;">[gridPHVALUE name="3.0 Content" type="TEXT"]\</p>

</td>
</tr>[/gridPH name="3.0 Content" type="TEXT"][gridPH name="4.1 Button URL" type="LINK"]
<tr>
<td bgcolor="[gridPH name="5.0 Background color" type="LABEL"]" style="padding: 10px 10px 5px;; font-size: 15px; line-height: 20px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto">
<tr>
<td style="border-radius: [gridPH name="4.4 Button border radius" type="LABEL"]; background: [gridPH name="4.2 Button color" type="LABEL"]; text-align: center;" class="button-td">

\<a href="[gridPHVALUE name="4.1 Button URL" type="LINK"]" style="background: [gridPH name="4.2 Button color" type="LABEL"]; border: 15px solid [gridPH name="4.2 Button color" type="LABEL"]; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: [gridPH name="4.4 Button border radius" type="LABEL"]; font-weight: bold; font-family: [gridPH name="5.2 Font family (headlines & button)" type="LABEL"]" class="button-a">

    \[gridPH name="4.0 Button text" type="LABEL"]\</span>    

\</a>

</td>
</tr>
</table>
</td>
</tr>[/gridPH name="4.1 Button URL" type="LINK"]
<tr>
<td bgcolor="[gridPH name="5.0 Background color" type="LABEL"]" style="padding: 0 10px 5px; font-size: 0; line-height: 0;">

\<p style="margin: 0;"> \</p>

</td>
</tr>
</table>

\</div>

18.3.3.9 [Sample] 09. Divider

Dieser Baustein fügt eine Trennlinie ein. Die Darstellung ist frei formatierbar.

Abb. 18.23: Baustein 09. Divider

CSS-Klassen:

  • email-container

Platzhalter:

  • 1.0 Background color

  • 1.1 Divider color

  • 1.2 Divider border style

Code:

\<div class="div-container">

<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="margin: auto;" class="email-container">
<tr>
<td bgcolor="[gridPH name="1.0 Background color" type="LABEL"]" style="padding: 5px 10px 5px 10px; border-bottom: [gridPH name="1.2 Divider border style" type="LABEL"] [gridPH name="1.1 Divider color" type="LABEL"];">
</td>
</tr>
<tr>
<td bgcolor="[gridPH name="1.0 Background color" type="LABEL"]" style="padding: 5px 10px 5px 10px;">
</td>
</tr>
</table>

\</div>

18.3.3.10 [Sample] 10. Space (variable height)

Dieser Baustein fügt frei definierbare Abstände zwischen den Inhalten ein. Diese können Sie auch farbig hinterlegen.

CSS-Klassen:

  • email-container

Platzhalter:

  • 1.0 Divider height

  • 1.1 Background color

Code:

\<div class="div-container">

<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="margin: auto;" class="email-container">
<tr>
<td bgcolor="[gridPH name="1.1 Background color" type="LABEL"]" style="padding: 0px 10px [gridPH name="1.0 Divider height" type="LABEL"] 10px;">
</td>
</tr>
</table>

\</div>

Durch diesen Baustein, fügen Sie den Footer Ihres Mailings ein. Der Footer enthält standardmäßig einen Abmeldelink. Die Text sind frei formatierbar.

Der Footer sieht wie folgt aus:

Abb. 18.24: Baustein 11. Footer

CSS-Klassen:

  • email-container

  • x-gmail-data-detectors

Platzhalter:

  • 1.0 Imprint-Text

  • 1.1 Font

  • 1.2 Text color

  • 1.3 Background color

  • 1.4 Text alignment

  • 2.0 Unsubscribe

  • 2.1 Unsubscribe link

  • 2.2 Unsubscribe font

  • 2.3 Unsubscribe text color

  • 2.4 Font weight

Code:

\<div class="div-container">

<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="margin: auto;" class="email-container">
<tr>
<td bgcolor="[gridPH name="1.3 Background color" type="LABEL"]" style="padding: 10px; font-size: 12px; line-height: 14px; text-align: [gridPH name="1.4 Text alignment" type="LABEL"]; font-family: [gridPH name="1.1 Font" type="LABEL"]; color: [gridPH name="1.2 Text color" type="LABEL"];" class="x-gmail-data-detectors">

[gridPH name="1.0 Imprint-Text" type="TEXT"]\<br>\<br>

\<a href="[gridPH name="2.1 Unsubscribe link" type="LINK"]" style="color:[gridPH name="2.3 Unsubscribe text color" type="LABEL"]; font-family:[gridPH name="2.2 Unsubscribe font" type="LABEL"]; font-weight: [gridPH name="2.4 Font weight" type="LABEL"]; font-size: 12px; line-height: 14px;" target="_blank">[gridPH name="2.0 Unsubscribe" type="TEXT"]\</a>\<br>\<br>

</td>
</tr>
</table>

\</div>