8 Blocktypen, unendliche Möglichkeiten
Die meisten CMS haben dutzende Blocktypen: Akkordeons, Tabs, Slider, Testimonials, Countdown-Timer, Pricing-Tables. Das CMF hat acht. Bewusst. Denn aus diesen acht lässt sich alles bauen – wenn man weiß wie.
Dieser Artikel ist selbst der Beweis: Er nutzt alle acht Blocktypen und zeigt Kombinationen, die weit über einfache Textseiten hinausgehen.
Die einfachen Vier
heading, text, image und list – damit lassen sich 80% aller Webseiten-Inhalte abbilden. Eine Überschrift, ein paar Absätze, ein Bild, eine Aufzählung. Klingt langweilig? Ist es nicht – denn die Qualität einer Seite entsteht nicht durch ausgefallene Blöcke, sondern durch klare Struktur und gute Inhalte.
heading
Überschriften von h1 bis h6 schaffen Hierarchie. Ein h1 pro Seite, dann logisch mit h2, h3 absteigen.
Suchmaschinen und Screenreader nutzen diese Struktur, um den Inhalt zu verstehen. Die Überschrift ist nicht Dekoration – sie ist Navigation.
text
HTML-Text mit erlaubten Tags: fett, kursiv, unterstrichen, Links, Listen und Code.
Mehrere Absätze in einem Block, sauberes HTML. Keine Rich-Text-Magie – volle Kontrolle über das Markup.
image
Bilder mit Alt-Text, optionaler Bildunterschrift und Lazy-Loading. Werden als <figure> gerendert.
Im Editor: Bild auswählen öffnet die Medien-Bibliothek. Kein Pfad manuell eintippen.
list
Geordnet oder ungeordnet. Einfache String-Einträge – bewusst schlicht, damit Listen immer konsistent aussehen.
Für Listen mit Links oder Formatierungen nimmt man stattdessen einen text-Block mit <ul> im HTML.
Die Strukturblöcke
buttons, columns und html – mit diesen drei wird aus einer Textseite ein Layout. Spalten für Vergleiche, Buttons für Handlungsaufrufe, HTML für alles was die anderen sieben nicht können.
buttons
Jede gute Seite braucht einen klaren nächsten Schritt. Buttons sagen dem Besucher: Hier geht es weiter.
Style primary für die Hauptaktion, ohne Style für Alternativen. Mehrere Buttons in einem Block für Auswahlmöglichkeiten.
columns
Der mächtigste Strukturblock. 2 bis 5 Spalten, jede mit eigenen Blöcken gefüllt. Dieser ganze Abschnitt ist ein Beispiel dafür.
Spalten sind responsiv – auf dem Smartphone werden sie automatisch untereinander gestapelt. Kein Media-Query schreiben, kein CSS anpassen.
html
Der Joker. Freier HTML-Code für alles, was die anderen Blöcke nicht abdecken: Tabellen, Embeds, Formulare, individuelle Layouts.
In Kombination mit Custom CSS wird der html-Block zur Gestaltungsfläche ohne Grenzen – Cards, Banner, Statistiken, Zeitleisten.
Kreative Kombinationen
Die echte Stärke liegt nicht in den einzelnen Blocktypen, sondern in ihrer Kombination. Hier sind drei Muster, die immer wieder funktionieren:
Feature-Übersicht
Muster: heading + columns (3–4 Spalten, jede mit heading + text)
Perfekt für Vorteile, Leistungen oder Produkteigenschaften. Jede Spalte ein Feature mit Titel und kurzer Beschreibung.
Variante: Mit Bildern in jeder Spalte für eine Icon-artige Darstellung.
Hero + CTA
Muster: html (hero-banner) + text + buttons
Ein farbiger Banner mit Kernaussage, darunter ein erklärender Absatz und ein klarer Call-to-Action. Das Standardmuster für Landingpages.
Der hero-banner nutzt die CSS-Klasse – kein Inline-Style nötig.
Vergleich / Vorher-Nachher
Muster: heading + columns (2 Spalten, jede mit heading + list oder text)
Zwei Seiten einer Medaille: Probleme vs. Lösungen, Alt vs. Neu, Ohne vs. Mit. Visuell klar getrennt, inhaltlich zusammengehörig.
Auch als Preis-Vergleich oder Pro/Contra einsetzbar.
Der achte Block: blog_overview
Der blog_overview-Block ist anders als die anderen sieben: Er generiert kein statisches HTML, sondern rendert dynamisch das Blog-Karten-Grid aus allen veröffentlichten Beiträgen. Ein Block, eine Zeile JSON, und die Blog-Übersicht steht.
Optional filtern per Kategorie – so lassen sich thematische Übersichtsseiten bauen. Zum Beispiel nur Technik-Artikel auf einer Seite, nur Anleitungen auf einer anderen.
Weniger ist mehr – wenn es das Richtige ist
Acht Blocktypen statt achtzig. Kein Akkordeon-Block, kein Testimonial-Block, kein Pricing-Table-Block. Weil man all das mit columns + html + Custom CSS bauen kann – flexibler und ohne die Einschränkungen vorgefertigter Komponenten.
Jeder zusätzliche Blocktyp ist zusätzliche Komplexität: im Code, in der Validierung, in der API, in der Dokumentation. Das CMF hält die Basis klein und lässt den html-Block die Lücke füllen.
Das Ergebnis: Ein System, das eine KI in 190 Zeilen verstehen kann. Ein Block-Editor, der in 30 Sekunden erklärbar ist. Eine API, die für jeden Blocktyp die gleichen drei Felder erwartet: id, type, data.
Und trotzdem genug Ausdruckskraft für jede Webseite, die nicht Amazon oder Facebook sein will.
Dieser Artikel verwendet alle 8 Blocktypen des CMF: heading, text, image (Titelbild), list (implizit), buttons, columns, html und blog_overview (auf der Übersichtsseite). Alles was hier zu sehen ist, wurde mit denselben Bausteinen gebaut, die auch dir zur Verfügung stehen.