Blocktypen

Blöcke sind die Baueinheiten jedes Templatical-Templates. Jeder Block repräsentiert ein eigenständiges Inhaltsstück -- einen Absatz, ein Bild, eine Schaltfläche. Blöcke können direkt im Template oder innerhalb von Sektionen für mehrspaltige Layouts platziert werden. Der Editor rendert sie von oben nach unten in der Reihenfolge, in der sie erscheinen.

Jeder Block erweitert eine gemeinsame Block-Basis mit geteilten Eigenschaften (id, type, styles, displayCondition, visibility), und jeder Typ fügt seine eigenen spezifischen Eigenschaften hinzu.

Um Blöcke programmatisch zu erstellen, siehe Programmatische Templates. Für Standardwerte der Eigenschaften und wie Sie diese anpassen können, siehe Block- & Template-Standardwerte.

Den richtigen Block auswählen

Bedarf	Block	Hinweise
Überschriften, Titel	Title	Überschriften mit fester Größe (H1-H4) mit Formatierung auf Blockebene
Fließtext, Absätze	Paragraph	Rich Text mit Inline-Formatierung über TipTap
Fotos, Banner, Logos	Image	Optionales Link-Wrapping, responsive Breite
Call-to-Action	Button	Bulletproof-Schaltflächen, die in allen E-Mail-Clients funktionieren
Mehrspaltiges Layout	Section	Der einzige Block, der andere Blöcke enthält
Visuelle Trennung	Divider	Horizontale Linie mit Stiloptionen
Vertikaler Abstand	Spacer	Leerraum zwischen Blöcken
Social Links	Social Icons	17 Plattformen, 5 Icon-Stile
Navigationslinks	Menu	Horizontale Linkliste mit Trennzeichen
Tabellarische Daten	Table	Datentabelle mit optionaler Kopfzeilenformatierung
Video-Vorschau	Video	Klickbares Thumbnail (E-Mail-Clients unterstützen keine eingebetteten Videos)
Countdown bis zu einem Stichtag	Countdown	Animierter Timer; das Rendern erfordert Templatical Cloud
Rohes Markup	HTML	Notausgang für benutzerdefinierten Code
Domänenspezifische Inhalte	Custom	Ihre eigenen Blocktypen mit Feldern und Liquid-Templates

Title

Ein Überschriften-Block mit festen Größenstufen. Verwenden Sie Titel für Überschriften, Sektionsüberschriften und andere prominente Texte.

Eigenschaft	Typ	Beschreibung
content	string	HTML-Inhalt
level	1 | 2 | 3 | 4	Überschriftsebene (H1=36px, H2=28px, H3=22px, H4=18px)
color	string	Textfarbe
textAlign	'left' | 'center' | 'right'	Horizontale Ausrichtung
fontFamily	string	Überschreibung der Schriftfamilie

Paragraph

Fließtext, der als HTML gerendert wird. Der Editor verwendet Tiptap für die Inline-Bearbeitung mit Formatierungssteuerungen (fett, kursiv, Links, Ausrichtung, Schriftgröße, Farbe usw.). Jede Formatierung wird inline angewendet -- es gibt keine Formatierungseigenschaften auf Blockebene.

Eigenschaft	Typ	Beschreibung
content	string	HTML-Inhalt

Image

Zeigt ein Bild mit optionalem Link-Wrapping an.

Eigenschaft	Typ	Beschreibung
src	string	Bild-URL
alt	string	Alternativtext
width	number | 'full'	Anzeigebreite in px oder 'full' für 100%
height	number	Anzeigehöhe in px. Ohne Angabe wird sie aus der Breite abgeleitet und das Seitenverhältnis bleibt erhalten
align	'left' | 'center' | 'right'	Horizontale Ausrichtung
borderRadius	BorderRadiusValue	Eckenradius in px oder { topLeft, topRight, bottomRight, bottomLeft } pro Ecke. Ohne Angabe oder 0 bleiben die Ecken eckig
border	BorderValue	{ top, right, bottom, left }, jeweils { width, style, color }, um das Bild gezeichnet. Breite 0 lässt eine Seite weg. Ohne Angabe kein Rahmen
decorative	boolean	Blendet das Bild für Screenreader aus und sendet ein leeres alt
linkUrl	string	Umschließt das Bild mit einem Link
linkOpenInNewTab	boolean	Verhalten des Linkziels
placeholderUrl	string	Platzhalter, der im Editor angezeigt wird, wenn src ein Merge-Tag verwendet

Button

Eine Call-to-Action-Schaltfläche mit anpassbarem Erscheinungsbild.

Eigenschaft	Typ	Beschreibung
text	string	Schaltflächentext
url	string	Link-URL
backgroundColor	string	Hintergrundfarbe der Schaltfläche
textColor	string	Textfarbe der Schaltfläche
borderRadius	BorderRadiusValue	Eckenradius in px oder einer pro Ecke
border	BorderValue	{ top, right, bottom, left }, jeweils { width, style, color }, um die Schaltfläche gezeichnet (optional). Für eine Outline-Schaltfläche den Hintergrund auf das Schlüsselwort "transparent" setzen und auch textColor setzen. Eine neue Schaltfläche ist #333333 mit weißem Text. Ein geleerter Hintergrund wird als "transparent" exportiert, weil ein weggelassener Hintergrund auf MJMLs #414141 zurückfällt
fontSize	number	Schriftgröße in px
buttonPadding	SpacingValue	Innerer Abstand
fontFamily	string	Überschreibung der Schriftfamilie
openInNewTab	boolean	Verhalten des Linkziels
width	number | 'full'	Feste Breite in px oder 'full' für 100%. Weglassen, um an den Inhalt anzupassen.
align	'left' | 'center' | 'right'	Ausrichtung innerhalb der Spalte. Ohne sichtbare Wirkung, wenn width auf 'full' steht.

Divider

Ein horizontaler Linientrenner.

Eigenschaft	Typ	Beschreibung
lineStyle	'solid' | 'dashed' | 'dotted'	Linienstil
color	string	Linienfarbe
thickness	number	Liniendicke in px
width	number | 'full' | '<n>%'	Linienbreite: Pixel, 'full' für die ganze Spalte oder ein Prozentsatz der Spalte ('50%')

Spacer

Leerer vertikaler Raum.

Eigenschaft	Typ	Beschreibung
height	number	Höhe in px

HTML

Fügt rohes HTML in das Template ein. Verwenden Sie dies für Inhalte, die mit anderen Blocktypen nicht ausgedrückt werden können.

Eigenschaft	Typ	Beschreibung
content	string	Rohes HTML-Markup

Social Icons

Eine Reihe von Social-Media-Icons, die zu Plattformprofilen verlinken.

Eigenschaft	Typ	Beschreibung
icons	SocialIcon[]	Liste der Social Icons
iconStyle	'solid' | 'outlined' | 'rounded' | 'square' | 'circle'	Visueller Stil
iconSize	'small' | 'medium' | 'large'	Icon-Größe
spacing	number	Abstand zwischen Icons in px
align	'left' | 'center' | 'right'	Horizontale Ausrichtung

17 Plattformen werden unterstützt: Facebook, Twitter/X, Instagram, LinkedIn, YouTube, TikTok, Pinterest, E-Mail, Website, WhatsApp, Telegram, Discord, Snapchat, Reddit, GitHub, Dribbble und Behance.

Jedes SocialIcon hat:

interface SocialIcon {
  id: string;
  platform: SocialPlatform;
  url: string;
}

Menu

Ein horizontales Navigationsmenü mit Textlinks.

Eigenschaft	Typ	Beschreibung
items	MenuItemData[]	Menüeinträge
fontSize	number	Schriftgröße in px
fontFamily	string	Überschreibung der Schriftfamilie
color	string	Textfarbe
linkColor	string (optional)	Linkfarbe
textAlign	'left' | 'center' | 'right'	Ausrichtung
separator	string	Zeichen zwischen Einträgen
separatorColor	string	Farbe des Trennzeichens
spacing	number	Abstand um das Trennzeichen

Jedes MenuItemData hat:

interface MenuItemData {
  id: string;
  text: string;
  url: string;
  openInNewTab: boolean;
  bold: boolean;
  underline: boolean;
  color?: string;
}

Table

Eine Datentabelle mit optionaler Formatierung der Kopfzeile.

Eigenschaft	Typ	Beschreibung
rows	TableRowData[]	Tabellenzeilen
hasHeaderRow	boolean	Erste Zeile als Kopfzeile formatieren
headerBackgroundColor	string (optional)	Hintergrund der Kopfzeile
borderColor	string	Rahmenfarbe
borderWidth	number	Rahmenbreite in px
cellPadding	number	Zellenabstand in px
fontSize	number	Schriftgröße in px
fontFamily	string	Überschreibung der Schriftfamilie
color	string	Textfarbe
textAlign	'left' | 'center' | 'right'	Textausrichtung der Zelle

Video

Zeigt ein Video-Thumbnail an, das zur Video-URL verlinkt.

Hinweis zu E-Mail-Clients

E-Mail-Clients unterstützen keine eingebettete Videowiedergabe. Der Renderer gibt ein klickbares Thumbnail-Bild aus, das zur Video-URL verlinkt. Stellen Sie immer eine gute thumbnailUrl bereit -- das ist das Einzige, was Empfänger in ihrem Posteingang sehen.

Eigenschaft	Typ	Beschreibung
url	string	Video-URL (YouTube, Vimeo usw.)
thumbnailUrl	string	URL des Thumbnail-Bildes
alt	string	Alternativtext für das Thumbnail
width	number | 'full'	Anzeigebreite in px oder 'full' für 100%
height	number	Anzeigehöhe in px. Ohne Angabe wird sie aus der Breite abgeleitet und das Seitenverhältnis bleibt erhalten
align	'left' | 'center' | 'right'	Horizontale Ausrichtung
openInNewTab	boolean	Verhalten des Linkziels
placeholderUrl	string	Nur im Editor sichtbarer Platzhalter

Countdown

Ein laufender Countdown bis zu einem Stichtag, gerendert als animiertes GIF.

Das Rendern erfordert Templatical Cloud

Ein animiertes GIF muss zum Versandzeitpunkt pro Empfänger erzeugt werden — das kann ein Browser nicht. Der Open-Source-Renderer hat für diesen Block keinen Renderer: Er gibt einen templatical:unrenderable-block-Markerkommentar aus und protokolliert eine Warnung, sodass eine Versand-Pipeline das erkennen und ablehnen kann. Siehe Blöcke ohne Renderer. Auf einem gehosteten Backend, das GIFs rendern kann, wird der Block normal gerendert.

Eigenschaft	Typ	Beschreibung
targetDate	string	ISO-Datum/-Zeit, auf die der Countdown läuft
timezone	string	IANA-Zeitzone, in der das Ziel interpretiert wird
showDays / showHours / showMinutes / showSeconds	boolean	Welche Einheiten angezeigt werden
labelDays / labelHours / labelMinutes / labelSeconds	string	Beschriftung unter jeder Einheit
separator	':' | '-' | ' '	Zeichen zwischen den Einheiten
digitFontSize	number	Zifferngröße in px
digitColor	string	Ziffernfarbe
labelFontSize	number	Beschriftungsgröße in px
labelColor	string	Beschriftungsfarbe
backgroundColor	string	Hintergrund des Blocks
fontFamily	string (optional)	Überschreibung der Schriftfamilie
expiredMessage	string	Wird angezeigt, sobald das Ziel verstrichen ist
expiredImageUrl	string	Bild statt Timer nach Ablauf
hideOnExpiry	boolean	Block nach Ablauf vollständig ausblenden

Section

Ein Layout-Container, der eine oder mehrere Spalten enthält. Siehe Sektionen und Spalten für alle Details.

Eigenschaft	Typ	Beschreibung
columns	ColumnLayout	Preset für das Spaltenlayout
children	Block[][]	Array von Block-Arrays, eines pro Spalte
stackOnMobile	boolean	Weglassen oder true: Spalten stapeln auf Mobilgeräten (MJML-Standard). false: nebeneinander (mj-group)
borderRadius	BorderRadiusValue	Eckenradius in px oder einer pro Ecke (optional; weglassen oder 0 für keine Abrundung)
border	BorderValue	{ top, right, bottom, left }, jeweils { width, style, color }, um die Sektion gezeichnet (optional; weglassen für keinen Rahmen)
wrapper	SectionWrapper	Optionaler äußerer Rahmen — { backgroundColor?, padding?, borderRadius? } — gerendert als mj-wrapper-Band um die Sektion. Eine vom Host vorgegebene Karte um die Autorensektionen ist ein Layout-Overlay.

Hinweis zu E-Mail-Clients: Rahmen und Ecken in Outlook

• Outlook unter Windows ignoriert border-radius, auch die Form mit vier Werten (pro Ecke).
• Gestrichelte und gepunktete Rahmen werden kompiliert, die Rendering-Engine von Outlook zeichnet sie aber oft durchgezogen.
• Ein Bildrahmen wird am <img> gezeichnet, und Outlook lässt ihn oft weg. Rahmen von Sektionen und Schaltflächen sitzen am <td>, dem beständigen Ort für einen Rahmen.

Custom

Ein benutzerdefinierter Blocktyp, der durch Felddefinitionen und ein Liquid-Template angetrieben wird. Siehe Benutzerdefinierte Blöcke für alle Details.

Eigenschaft	Typ	Beschreibung
customType	string	Eindeutige Kennung für den benutzerdefinierten Blocktyp
fieldValues	Record<string, unknown>	Aktuelle Werte für definierte Felder
renderedHtml	string	Zwischengespeichertes gerendertes Ergebnis
dataSourceFetched	boolean	Ob die Datenquelle abgerufen wurde