---
title: Sektionen und Spalten
description: Mehrspaltige Layouts mit dem SectionBlock-Container in Templatical.
---

# Sektionen und Spalten

Der `SectionBlock` ist das Layout-Primitiv in Templatical. Jedes mehrspaltige Layout wird erstellt, indem eine Sektion angelegt und Blöcke in deren Spalten platziert werden.

## Spaltenlayouts

::: tip E-Mail-Best-Practice
Bleiben Sie für die meisten E-Mails bei 1-2 Spalten. Dreispaltige Layouts werden auf Mobilgeräten beim vertikalen Stapeln der Spalten beengt, und einige E-Mail-Clients behandeln 3-spaltige Layouts inkonsistent.
:::

Die Eigenschaft `columns` akzeptiert eines von fünf Layout-Presets:

| Wert | Beschreibung | Spaltenbreiten |
|-------|-------------|---------------|
| `'1'` | Einzelne Spalte | 100% |
| `'2'` | Zwei gleiche Spalten | 50% / 50% |
| `'3'` | Drei gleiche Spalten | 33% / 33% / 33% |
| `'2-1'` | Zwei Drittel / ein Drittel | 66% / 33% |
| `'1-2'` | Ein Drittel / zwei Drittel | 33% / 66% |

```ts
type ColumnLayout = '1' | '2' | '3' | '2-1' | '1-2';
```

## Sektionen erstellen

Verwenden Sie `createSectionBlock` aus `@templatical/types`:

```ts
import {
  createSectionBlock,
  createTitleBlock,
  createParagraphBlock,
  createImageBlock,
} from '@templatical/types';

// Leere zweispaltige Sektion
const section = createSectionBlock({ columns: '2' });

// Sektion mit vorbefüllten Spalten
const hero = createSectionBlock({
  columns: '1-2',
  children: [
    [createImageBlock({ src: 'https://cdn.example.com/logo.png', width: 120 })],
    [
      createTitleBlock({ content: '<h1>Welcome</h1>', level: 1 }),
      createParagraphBlock({ content: '<p>Get started in minutes.</p>' }),
    ],
  ],
});
```

## Das children-Array

`children` ist ein `Block[][]` -- ein Array von Arrays. Jedes innere Array repräsentiert die Blöcke innerhalb einer Spalte, geordnet von links nach rechts.

```ts
// Für ein '2'-Layout:
section.children = [
  [blockA, blockB],  // Linke Spalte
  [blockC],          // Rechte Spalte
];

// Für ein '3'-Layout:
section.children = [
  [blockA],  // Links
  [blockB],  // Mitte
  [blockC],  // Rechts
];
```

Die Länge von `children` muss mit der Anzahl der Spalten im gewählten Layout übereinstimmen. Wenn Sie `columns` ändern, passt der Editor `children` automatisch an -- überschüssige Spalten werden in die letzte Spalte zusammengeführt oder leere Arrays werden für neue Spalten hinzugefügt.

## Blöcke zu Spalten hinzufügen

Um einen Block programmatisch zu einer bestimmten Spalte hinzuzufügen:

```ts
// Eine Schaltfläche zur zweiten Spalte hinzufügen (Index 1)
section.children[1].push(
  createButtonBlock({
    text: 'Learn More',
    url: 'https://example.com/docs',
  }),
);
```

## Verschachtelung

Sektionen können nicht innerhalb anderer Sektionen verschachtelt werden. Jede Sektion befindet sich auf der obersten Ebene der Block-Liste des Templates. Innerhalb einer Spalte können Sie jeden Nicht-Sektion-Blocktyp platzieren: Titel, Absätze, Bilder, Schaltflächen, Tabellen, benutzerdefinierte Blöcke usw.

## Responsives Verhalten

Auf dem Desktop werden Spalten nebeneinander in ihren definierten Breiten gerendert. Auf kleineren Bildschirmen stapeln sie sich vertikal in der Quellreihenfolge (linke Spalte oben) — MJML-Standard.

`stackOnMobile` schaltet das ab. Weglassen oder `true` behält das Stapeln. `false` packt die Spalten in `<mj-group>`, damit sie auf Mobilgeräten nebeneinander bleiben. Die Sektions-Toolbar zeigt den Schalter bei mehrspaltigen Sektionen. Eine einspaltige Sektion erzeugt nie ein `mj-group`.

```ts
const row = createSectionBlock({ columns: '2', stackOnMobile: false });
```

Sie können die Eigenschaft `visibility` für einzelne Blöcke innerhalb von Spalten verwenden, um Inhalte pro Breakpoint anzuzeigen oder auszublenden:

```ts
const block = createParagraphBlock({
  content: '<p>Desktop only sidebar content</p>',
});

block.visibility = {
  desktop: true,
  mobile: false,
};
```

Siehe [Styling](/de/guide/styling) für weitere Informationen zur Blocksichtbarkeit.

## Stile auf Sektionsebene

Sektionen unterstützen die gleichen `BlockStyles` wie andere Blöcke. Häufige Anwendungsfälle sind das Festlegen einer Hintergrundfarbe oder eines Paddings für die gesamte Zeile:

```ts
const section = createSectionBlock({ columns: '1' });

section.styles = {
  backgroundColor: '#f8fafc',
  padding: { top: 32, right: 24, bottom: 32, left: 24 },
};
```

Sektionen akzeptieren außerdem einen `borderRadius` (in px, eine sektionsspezifische Eigenschaft) für abgerundete Ecken — nützlich für eine kartenartige Sektion auf einem kontrastierenden Hintergrund:

```ts
const card = createSectionBlock({ columns: '1', borderRadius: 12 });

card.styles.backgroundColor = '#ffffff';
```

### Äußerer Rahmen (Wrapper)

Um eine Sektion in einem vollbreiten farbigen Band zu rahmen — z. B. eine weiße Karte auf blauem Hintergrund — setzen Sie `wrapper`. Es rendert ein `mj-wrapper` um die Sektion, mit eigenem Hintergrund, Padding und Eckenradius:

```ts
const card = createSectionBlock({ columns: '1', borderRadius: 12 });
card.styles.backgroundColor = '#ffffff';

card.wrapper = {
  backgroundColor: '#1e3a8a',
  padding: { top: 24, right: 24, bottom: 24, left: 24 },
  borderRadius: 16,
};
```

Das Padding des Wrappers sorgt dafür, dass das Band um die Sektion herum sichtbar wird. Aktivieren Sie es im Editor über das **Wrapper**-Panel in der Sektions-Symbolleiste. Der Wrapper ist eine Stilebene, kein Container — Sektionen können weiterhin nicht verschachtelt werden.