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

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%

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

Sektionen erstellen

Verwenden Sie createSectionBlock aus @templatical/types:

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.

// 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:

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

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:

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

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

Siehe 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:

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:

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:

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. Eine vom Host vorgegebene Karte um die Autorensektionen ist ein Layout-Overlay.