Content Management Frame

Webseitenhub für Mensch, Maschine und Internet

Spalten & Layout

2 bis 5 Spalten, responsive Umbruchpunkte, verschachtelte Layouts – der columns-Block macht es möglich.

Jede Spalte kann beliebige Blöcke enthalten.

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.

Produktansicht – grüne Textur

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 KI
  • 8 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 KI-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 KI-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 KI-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 KI. 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.

Portrait Anna M.

Anna M.

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

Portrait Ben K.

Ben K.

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

Portrait Clara S.

Clara S.

KI-Integration
Entwickelt automatisierte Workflows für KI-gestü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.

1

Seiten anlegen

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

2

Inhalte füllen

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

3

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 KI-Systeme schwer zu nutzen

CMF

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

4 Spalten – Kennzahlen

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

7
Blocktypen
0
Datenbanken
1
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

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

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 KI-Unterstützung.

AnleitungenZur Demo-Übersicht