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';

Hintergrundbild

Das backgroundImage einer Sektion legt ein Bild hinter ihre Spalten. Setzen Sie zusätzlich styles.backgroundColor als Fallback, solange das Bild lädt und in Clients, die keine Hintergrundbilder anzeigen. Im Hintergrund-Panel des Editors wählen Sie außerdem die Größe (Füllen, Einpassen oder Original), eine Position auf einem Neun-Punkte-Raster und ob sich das Bild wiederholt. Die Hinweise zu E-Mail-Clients finden Sie beim Sektionsblock.

Hero

Eine einspaltige Sektion mit Hintergrundbild kann als Hero dargestellt werden – als mj-hero, bei dem das Bild die Box füllt und der Inhalt darauf liegt. Setzen Sie dazu hero:

const banner = createSectionBlock({
  columns: '1',
  backgroundImage: {
    ...createBackgroundImage('https://cdn.example.com/hero.jpg'),
    naturalWidth: 1200,
    naturalHeight: 800,
  },
  hero: { height: 'image', verticalAlign: 'middle' },
});
banner.styles.backgroundColor = '#1f2937';

height: 'image' macht die Box so hoch wie das Bild, das über ihre Desktop-Breite gezeichnet wird; dafür braucht es die Größe der Bilddatei in backgroundImage.naturalWidth / naturalHeight. Auf Smartphones bleibt diese Höhe, und das Bild wird seitlich beschnitten, um die schmalere Box zu füllen. Eine Auswahl aus der Mediathek, die die Größe kennt (width / height am Asset oder am onRequestMedia-Ergebnis), speichert sie mit der URL; andernfalls misst der Editor das Bild. Eine Zahl ist eine feste Höhe in px, Innenabstand eingeschlossen. Im Editor wechselt Höhe im Panel Hintergrund zwischen Wie Inhalt (kein Hero), Wie Bild und Fest, und Position des Inhalts platziert den Inhalt. Die Verknüpfung Hero in der Palette fügt einen Hero zum Ausfüllen ein: eine Sektion im Hero-Modus mit Titel, Absatz und Button auf dunkler Füllung. Die Hinweise zu E-Mail-Clients stehen beim Sektionsblock.

Äußerer Rahmen (Wrapper)

Um eine Sektion in einem 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. Das Band ist so breit wie der E-Mail-Körper (settings.width), nicht wie das gesamte Fenster des Empfängers:

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.