Header und Footer verhalten sich analog der Allgemeine Möglichkeiten (für alle Layout Varianten) .

Der Unterschied zum Default Layout befindet sich im Bereich Email Body. Hier wird in der Tabellenstruktur des Bodys die Möglichkeit geboten einen Button zu integrieren. Die folgende Erläuterung geht auf die Möglichkeiten zur Anpassung dieses Buttons ein.

<td style="border-radius: 3px;

Hierüber wird die Rahmenstärke des Buttons definiert.

background: #222222;

Hierüber wird die Hintergrundfarbe des Buttons definiert.

text-align: center;"

Hierüber wird das Alignment der Buttinbeschriftung gewährleistet.

class="button-td">

Hier wird definiert, dass die Zelle der Tabellenstruktur sich wie ein Button verhält.

<a href="[[1BUTTON_PATH]]"

Hier wird definiert, welcher Link beim Klick auf den Button aufgerufen wird.

style="background: #222222;

Hier wird die Hintergrundfarbe des Buttons definiert.

border: 15px solid #222222;

Hier wird die Rahmenstärke, -art und farbe definiert.

font-family: sans-serif;

Hier wird die Schriftart der Buttonbeschriftung definiert.

font-size: 13px;

Hier wird die Schriftgröße der Buttonbeschriftung definiert.

line-height: 1.1;

Hier wird der Zeilenabstand der Buttonbeschriftung definiert.

text-align: center;

Hier wird das Alignment der Buttonbeschriftung definiert.

text-decoration: none;

Die text-decoration CSS Eigenschaft wird dazu verwendet, die Textformatierung auf underline, overline, line-through oder blink zu setzen und betrifft hier ebenfalls die Buttinbeschriftung.

display: block;

Display:block macht ein Element nicht nur sichtbar, sondern führt auch dazu, dass ein Element einen Zeilenumbruch erzeugt.

border-radius: 3px;

Hier wird die Rahmenstärke des Buttons definiert.

font-weight: bold;"

Hier wird der Schriftschnitt der Buttonbeschriftung definiert.

class="button-a">

Hier wird die Buttondefinition abgeschlossen.

&nbsp;&nbsp;&nbsp;&nbsp;

“&nbsp” ist ein sogenanntes geschütztes Leerzeichen. Es wird wie ein Leerzeichen eingesetzt und sorgt hier für den Abstand der Buttonbeschriftung vom linken Rand.

<span style="color:#ffffff">[[1BUTTON_TEXT]]</span>

Hierüber wird die Beschriftung des Buttons, sowie die Textfarbe definiert.

&nbsp;&nbsp;&nbsp;&nbsp;

“&nbsp” ist ein sogenanntes geschütztes Leerzeichen. Es wird wie ein Leerzeichen eingesetzt und sorgt hier für den Abstand der Buttonbeschriftung vom rechten Rand.

<td style="border-radius: 3px; 
background: #222222; 
text-align: center;" 
class="button-td">
  
  <a href="[[1BUTTON_PATH]]" 
  style="background: #222222; 
  border: 15px solid #222222; 
  font-family: sans-serif; 
  font-size: 13px; 
  line-height: 1.1; 
  text-align: center; 
  text-decoration: none; 
  display: block; 
  border-radius: 3px; 
  font-weight: bold;" 
  class="button-a">
  
     &nbsp;&nbsp;&nbsp;&nbsp;
     <span style="color:#ffffff">[[1BUTTON_TEXT]]</span>
     &nbsp;&nbsp;&nbsp;&nbsp;