Spalten & Layout

Der columns-Block ist das Layout-Werkzeug des CMF. Auf kleinen Bildschirmen wandeln sich die Raster automatisch in Einzelspalten um. Diese Seite zeigt alle Varianten live.

Wie Spalten funktionieren

Der columns-Block hat zwei Pflichtfelder: columns (Anzahl, 2–5) und items (Array mit genau so vielen Einträgen wie Spalten). Jeder Eintrag in items ist selbst ein Array von Blöcken – der Inhalt der jeweiligen Spalte.

{
  "id": "c1_beispiel",
  "type": "columns",
  "data": {
    "columns": 3,          ← Anzahl der Spalten (2–5)
    "items": [             ← genau 3 Einträge, weil columns: 3
      [ ...Blöcke Spalte 1... ],
      [ ...Blöcke Spalte 2... ],
      [ ...Blöcke Spalte 3... ]
    ]
  }
}

Responsives Verhalten

Alle Spalten-Layouts brechen bei Bildschirmbreiten unter 700 px automatisch um. Dann werden alle Spalten nacheinander vertikal gestapelt – keine Konfiguration nötig, das passiert automatisch über das CSS des CMF.

Desktop (> 700 px)

3 Spalten nebeneinander

Mobil (≤ 700 px)

3 Spalten gestapelt

Wichtige Regel: Die Anzahl der Einträge in items muss exakt mit dem Wert von columns übereinstimmen. Zu viele oder zu wenige Einträge führen zu einem Validierungsfehler. Jede Spalte kann leer sein ([]), muss aber vorhanden sein.

2 Spalten – Bild & Text (Produktseite)

Das klassischste 2-Spalten-Layout: Bild links, Inhalt rechts. Auf Mobilgeräten erscheint das Bild zuerst, darunter der Text.

CMF Starter Paket

Das Starter-Paket enthält das komplette Content Management Frame inklusive API, Block-System und Admin-Interface. Sofort einsatzbereit für kleine bis mittelgroße Websites.

Dateibasiert – keine Datenbank nötig
JSON-API für Mensch und Maschinen
9 Blocktypen inklusive
Responsives Spaltenlayout
Medienverwaltung integriert

Jetzt starten Dokumentation

2 Spalten – Textspalten (Editorial)

Zwei gleichwertige Textspalten nebeneinander – wie in einer Zeitschrift. Gut für längere Texte, die nicht untereinander, sondern kompakt nebeneinander stehen sollen.

Inhalte strukturieren

Eine klare Inhaltsstruktur ist die Grundlage für langfristig wartbare Webseiten. Wenn jeder Block eine definierte Rolle hat, bleibt das Gesamtbild nachvollziehbar – egal ob ein Mensch oder ein Maschinen-System die Inhalte bearbeitet.

Strukturierte Inhalte lassen sich leichter migrieren, übersetzen, zusammenfassen und neu kombinieren. Das ist kein Selbstzweck, sondern ein konkreter Vorteil in der täglichen Arbeit.

Maschinen lesen mit

Wenn Inhalte in definierten Blöcken organisiert sind, kann ein Maschinen-System sie zuverlässig lesen, verändern und erweitern. Es muss nicht raten, was ein Abschnitt bedeutet – der Typ sagt es.

Das CMF ist so aufgebaut, dass Maschinen-Systeme von Anfang an als gleichwertige Nutzer behandelt werden. Die API ist klar, das Schema ist dokumentiert, die Fehler sind sprechend.

3 Spalten – Features

Drei Inhaltsblöcke nebeneinander – das Standardlayout für Feature-Übersichten auf Landing Pages. Jede Spalte erhält gleiches Gewicht.

Schnell

Kein Datenbankoverhead. Alle Inhalte liegen als JSON-Dateien direkt auf dem Server. Ladezeiten unter 50 ms sind realistisch.

Offen

Die JSON-API lässt sich von jedem HTTP-Client nutzen – vom Browser über Bash-Scripts bis zur Maschine. Kein proprietäres SDK nötig.

Strukturiert

Blockbasierter Aufbau mit klarem Schema. Jeder Block hat einen Typ und ein definiertes data-Objekt – keine freien Felder, keine Überraschungen.

3 Spalten – Team / Personen

Team-Raster mit Bild (oder Avatar), Name, Rolle und kurzer Beschreibung. Auf Mobilgeräten stapeln sich die Personen untereinander.

Anna M.

Projektleitung
Verantwortet Struktur und Inhalt. Koordiniert die Zusammenarbeit zwischen redaktionellen und technischen Anforderungen.

Ben K.

Entwicklung
Zuständig für API, Blockstruktur und serverseitige Logik. Mag sauberen Code und klare Schnittstellen.

Clara S.

Maschinen-Integration
Entwickelt automatisierte Workflows für maschinengestützte Inhaltspflege und API-Anbindungen.

3 Spalten – Nummerierte Schritte

Ablaufschritte, Anleitungen oder Onboarding-Prozesse lassen sich mit einem html-Block als Nummernkreis und einem text-Block als Beschreibung pro Spalte gut strukturieren.

Seiten anlegen

Neue Seite über page_create anlegen. Titel, Slug, Status und Nav-Position direkt im ersten Request mitgeben.

Inhalte füllen

Blöcke per page_update hinzufügen. Medien zuerst hochladen, src-Pfad vom Upload-Response verwenden.

Veröffentlichen

Status auf "published" setzen – die Seite erscheint sofort in der Navigation und ist öffentlich erreichbar.

2 Spalten – Vergleich

Zwei Optionen nebeneinander stellen – gut für Preisvergleiche, Vor-/Nachteile oder Alternativen. Auf Mobilgeräten erscheint zuerst die linke, dann die rechte Spalte.

Klassisches CMS

Datenbank erforderlich
Komplexe Installationsroutine
Plugin-Abhängigkeiten
Regelmäßige Updates nötig
Für Maschinen-Systeme schwer zu nutzen

CMF

Keine Datenbank
Dateien hochladen – fertig
Kein Plugin-System
Minimaler Wartungsaufwand
JSON-API für Mensch und Maschinen

4 Spalten – Kennzahlen

Vier gleichbreite Spalten eignen sich gut für kompakte Kennzahlen oder Icon-Labels. Auf Mobilgeräten stapeln sich alle vier untereinander.

Blocktypen

Datenbanken

API-Endpunkt

∞

Seiten möglich

5 Spalten – Maximum

Fünf Spalten sind das Maximum im CMF. Sinnvoll für sehr kompakte Inhalte wie Icon-Raster, Logos oder kurze Label-Wert-Paare. Auf schmalen Bildschirmen stapeln alle fünf.

Seiten

Medien

Styles

Navigation

Konfiguration

3 Karten mit Bild – Teaser-Reihe

Für Teaser mit Bild oben eignet sich statt des columns-Blocks ein html-Block mit dem Karten-Raster: card-grid als Container, je Teaser eine card mit img, h3 und p. Das Raster ordnet die Karten automatisch an und bricht mobil um – ganz ohne Spalten-Konfiguration.

Struktur

Wie ein Blatt: klare Adern, klare Hierarchie. Blöcke geben Inhalten eine Form, die Mensch und Maschine lesen können.

Wiederholung

Ein Muster, viele Instanzen. Karten im card-grid teilen sich Stil und Abstände – Inhalte bleiben individuell.

Flexibilität

Aussparungen, wo sie gebraucht werden: Jede Karte kann Bild, Text, Listen oder Buttons enthalten – oder darauf verzichten.

Asymmetrie ohne Sonder-CSS

Der columns-Block kennt keine Breitenverhältnisse wie 2:1 – alle Spalten sind gleich breit. Optische Gewichtung entsteht stattdessen über den Inhalt: Hier trägt die erste Spalte ein panel (weiche, getönte Box) und zieht so den Blick an, während die beiden anderen Spalten ruhiger als reiner Text laufen.

Hervorgehoben

Diese Spalte ist genauso breit wie die anderen – das panel gibt ihr trotzdem das größte Gewicht. So entsteht Asymmetrie über Gestaltung statt über Layout-Parameter.

Ruhige Spalte

Reiner Text ohne Rahmen tritt zurück. Zusammen mit der Panel-Spalte ergibt sich eine klare Lesereihenfolge, obwohl alle drei Spalten technisch gleichwertig sind.

Noch eine

Auf Mobilgeräten stapeln die drei Spalten wie gewohnt: zuerst das Panel, dann die Textspalten – die Gewichtung bleibt also auch unterwegs erhalten.

Kennzahlen neben Erklärtext

Zahlen brauchen Kontext. Ein 2-spaltiger columns-Block kombiniert beides: links ein html-Block mit stats-grid (darin stat-item mit stat-value und stat-label), rechts ein normaler text-Block mit der Einordnung.

2–5

Spalten pro Block

700 px

Umbruchpunkt

1–2

Ebenen empfohlen

Sonder-CSS nötig

Warum diese Kombination funktioniert

Das stats-grid ordnet die vier Kennzahlen in der halben Seitenbreite kompakt an, der Text daneben liefert die Geschichte dazu. Auf Mobilgeräten erscheinen erst die Zahlen, dann die Erklärung – die linke Spalte steht oben.

Tipp: Die Kennzahlen in die linke Spalte stellen, wenn sie der Blickfang sein sollen – mobil landen sie dann zuerst im Sichtfeld.

Verschachtelte Spalten

Spalten können Spalten enthalten. So entstehen komplexere Layouts: eine breite linke Spalte mit einem Unter-Raster, rechts ein eigenständiger Inhaltsbereich.

Linke Spalte mit Unter-Raster

Diese Spalte enthält selbst wieder einen 2-spaltigen columns-Block:

Unter-Spalte A

Inhalt links innen.

Unter-Spalte B

Inhalt rechts innen.

Rechte Spalte

Die rechte äußere Spalte hat keinen weiteren Unter-Block. Verschachtelungen sollten sparsam eingesetzt werden – zu tiefe Strukturen werden auf kleinen Bildschirmen schnell unübersichtlich.

Maximal 1–2 Verschachtelungsebenen
Jede Ebene bricht mobil separat um
IDs in inneren Blöcken müssen seitenübergreifend eindeutig sein

Verschachtelung light – Raster per CSS-Klasse

Alternative zur Block-Verschachtelung von oben: Innerhalb einer Spalte steckt kein weiterer columns-Block, sondern ein html-Block mit <div class="cols cols-2">. Das spart Struktur, wenn die Unter-Zellen nur kleine HTML-Schnipsel sind. Auch hier gilt: sparsam einsetzen.

Diese Spalte enthält ein 2er-Raster aus einem einzigen html-Block:

Raster-Zelle A
Per Klasse cols cols-2 erzeugt – kein eigener Block.

Raster-Zelle B
Bricht mobil genauso um wie echte Spalten.

Wann welche Variante?

Block-Verschachtelung: wenn die Unter-Inhalte im Editor einzeln bearbeitbar bleiben sollen
CSS-Raster (cols cols-2): für kleine, zusammengehörige HTML-Schnipsel in einem Block
Beides bricht mobil ebenenweise um – tiefe Stapel werden schnell lang
Faustregel: pro Seite höchstens ein bis zwei verschachtelte Raster

Spalten im Markdown-Export

Jede Seite gibt es auch als Markdown – diese hier unter /spalten.md. Markdown kennt keine Spalten, deshalb wird der columns-Block linearisiert: erst alle Blöcke der ersten Spalte, dann die der zweiten, jeweils durch Leerzeilen getrennt.

Blockstruktur (gekürzt)

{
  "type": "columns",
  "data": {
    "columns": 2,
    "items": [
      [ heading "Links",
        text "Text links." ],
      [ heading "Rechts",
        text "Text rechts." ]
    ]
  }
}

Ausgabe in /spalten.md

### Links

Text links.

### Rechts

Text rechts.

Die Linearisierung folgt derselben Reihenfolge wie der mobile Umbruch: Spalte 1 zuerst. Wer den Markdown-Export nutzt (etwa für Maschinen-Systeme), sollte Spalten so befüllen, dass sie auch hintereinander gelesen Sinn ergeben.

Regeln & Hinweise

Ein paar Leitlinien für den effizienten Einsatz des columns-Blocks:

✓ Gut

items-Anzahl immer gleich columns
Spalten mit ähnlich viel Inhalt füllen
Auf Mobildarstellung denken – Reihenfolge zählt
Sprechende Block-IDs pro Spalte vergeben
Bilder immer mit alt-Text versehen
Verschachtelungen gezielt und sparsam einsetzen

✗ Vermeiden

items-Anzahl ≠ columns → Validierungsfehler
Sehr unterschiedliche Inhaltsmengen pro Spalte
Mehr als 3 Verschachtelungsebenen
5 Spalten mit langen Texten (zu eng auf Desktop)
Reihenfolge ignorieren (links = oben auf Mobil)
Wichtigen Inhalt rechts stellen (sieht mobil aus)

Spaltenreihenfolge auf Mobilgeräten

Die linke Spalte erscheint auf dem Handy zuerst (oben), die rechte zuletzt (unten). Wichtige Inhalte oder CTAs gehören deshalb in die linke Spalte – dann landen sie mobil oben, wo sie zuerst gesehen werden.

Bereit zum Bauen?

Die API ist bereit. Alle Blocktypen sind dokumentiert. Fang einfach an – entweder direkt über die API oder mit Maschinen-Unterstützung.

Anleitungen Zur Demo-Übersicht