---
title: Blocktypen
description: Referenz für jeden integrierten Blocktyp in Templatical.
---

# 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](/de/guide/programmatic-templates). Für Standardwerte der Eigenschaften und wie Sie diese anpassen können, siehe [Block- & Template-Standardwerte](/de/guide/defaults).

## Den richtigen Block auswählen

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

Titel sind fett (Schriftstärke 700): auf der Arbeitsfläche, während Sie sie bearbeiten, und in der E-Mail. Fettdruck innerhalb eines Titels verlangt eine noch kräftigere Schriftstärke. Websichere Schriften wie Arial haben keine, deshalb ist er nur in einer Schrift sichtbar, die eine besitzt.

| 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](https://tiptap.dev) 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%. Siehe [Breite auf Smartphones](/de/guide/images#width-on-phones) |
| `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 |
| `naturalWidth` / `naturalHeight` | `number` | Die eigene Größe der Bilddatei, für die [Seitenverhältnis-Sperre](/de/guide/images#aspect-ratio-lock). Wird nie gerendert |

## 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.

Editor und Renderer geben dieses Markup unverändert aus; keiner von beiden bereinigt es. Kann das HTML aus nicht vertrauenswürdigen Quellen stammen, bereinigen Sie `content` auf Ihrem Server, bevor Sie es speichern oder versenden. Um HTML-Blöcke ganz aus der gerenderten E-Mail zu entfernen, übergeben Sie [`allowHtmlBlocks: false`](/de/api/renderer-typescript) an `renderToMjml`.

| 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' \| 'plain'` | Form. `plain` ist das Symbol allein, ohne Fläche oder Umriss |
| `iconTone` | `'brand' \| 'dark' \| 'light'` | Optional. Die Markenfarbe jeder Plattform (Standard) oder ein Farbton für alle Icons. Eine gefüllte Form zeigt das Symbol weiß auf dem Farbton, bei `light` fast schwarz |
| `iconSize` | `'small' \| 'medium' \| 'large'` | Icon-Größe |
| `spacing` | `number` | Abstand zwischen Icons in px |
| `align` | `'left' \| 'center' \| 'right'` | Horizontale Ausrichtung |

E-Mail-Clients, die in den Dunkelmodus wechseln, etwa die Gmail-App und Outlook, ändern den Hintergrund, lassen Bilder aber unverändert. Ein dunkles `plain`- oder `outlined`-Icon trägt deshalb einen dezenten weißen Rand, der auf hellen Hintergründen kaum zu sehen ist und das Icon als Umriss sichtbar hält, sobald der Hintergrund dunkel wird. Helle Icons haben keinen Rand, damit sie auf farbigen Flächen sauber bleiben. Clients, die einen dunklen Hintergrund hell machen (die Gmail-App unter iOS, Outlook für Windows), können ein helles `plain`- oder `outlined`-Icon aber verschwinden lassen. Eine gefüllte Form vermeidet beides, da ihr Hintergrund für den Kontrast sorgt.

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:

```ts
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:

```ts
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.

::: tip 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%. Siehe [Breite auf Smartphones](/de/guide/images#width-on-phones) |
| `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.

::: warning 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](/de/backend/render#blocke-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](/de/guide/sections-and-columns) 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) |
| `backgroundImage` | `BackgroundImage` | Optionales Bild hinter der Sektion — `{ url, size, position: { x, y }, repeat }` — gerendert als `background-url` mit Größe, Position und Wiederholung an der `mj-section`. `size` ist `"cover"`, `"contain"` oder `"auto"`; `x` ist `"left"`, `"center"` oder `"right"`; `y` ist `"top"`, `"center"` oder `"bottom"`. `styles.backgroundColor` dient als Fallback. |
| `wrapper` | `SectionWrapper` | Optionaler äußerer Rahmen — `{ backgroundColor?, padding?, borderRadius?, backgroundImage? }` — gerendert als `mj-wrapper`-Band um die Sektion. Eine vom Host vorgegebene Karte um die Autorensektionen ist ein [Layout](/de/guide/layout)-Overlay. |

::: tip 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.
:::

::: tip Hinweis zu E-Mail-Clients: Hintergrundbilder
- Legen Sie zusätzlich eine Hintergrundfarbe fest. Sie erscheint, solange das Bild lädt, wenn Bilder deaktiviert sind, und in Clients ohne Unterstützung für Hintergrundbilder.
- Ein Merge-Tag funktioniert als URL (zum Beispiel <code v-pre>{{ hero_url }}</code>). Die Arbeitsfläche zeigt dafür die Fallback-Farbe, da noch kein Bild geladen werden kann. Anführungszeichen im Tag werden URL-kodiert; vermeiden Sie daher Argumente in Anführungszeichen (<code v-pre>{{ hero | default: 'x.jpg' }}</code>).
- Outlook unter Windows zeichnet das Bild mit VML; ein Bild in Originalgröße (`auto`) wird dort von oben mittig aus gekachelt, unabhängig von `position` und `repeat`.
- In Outlook unter Windows überdeckt die Hintergrundfarbe eines Wrappers das Hintergrundbild der Sektion, und ein Bild auf Wrapper und Sektion zugleich zerstört das Layout. Der `structure`-Linter warnt vor beidem.
:::

## Custom

Ein benutzerdefinierter Blocktyp, der durch Felddefinitionen und ein Liquid-Template angetrieben wird. Siehe [Benutzerdefinierte Blöcke](/de/guide/custom-blocks) 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 |
| `renderedStylesheet` | `string` | Das `stylesheet` der Definition, zusammen mit `renderedHtml` hineinkopiert |
| `dataSourceFetched` | `boolean` | Ob die Datenquelle abgerufen wurde |