9 Blocktypen, unendliche Möglichkeiten
Die meisten CMS haben dutzende Blocktypen: Akkordeons, Tabs, Slider, Testimonials, Countdown-Timer, Pricing-Tables. Das CMF hat neun. Bewusst. Denn aus diesen neun lässt sich fast alles bauen – wenn man weiß, wie.
Dieser Artikel ist selbst ein Beispiel: Er kommt mit fünf der neun Blocktypen aus und zeigt Kombinationen, die über einfache Textseiten hinausgehen.
Die einfachen Vier
heading, text, image und list – damit lässt sich der größte Teil 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-Feld, optionaler Bildunterschrift und Ladeverhalten: lazy (Standard) lädt erst, wenn das Bild in Sichtweite kommt, eager sofort – richtig für das große Bild ganz oben. Mit Bildunterschrift wird daraus eine <figure>.
Im Editor öffnet Bild auswählen die Medien-Bibliothek. Breite und Höhe setzt du per API oder im JSON – dann reserviert der Browser den Platz vorab.
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 Blöcke 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, individuelle Layouts.
In Kombination mit Custom CSS wird der html-Block zur Gestaltungsfläche ohne Grenzen – Cards, Banner, Statistiken, Zeitleisten.
Der dynamische Block: blog_overview
Der blog_overview-Block ist anders als die statischen Blöcke: 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.
Der Formular-Block: form
Seit Version 1.15 gibt es einen eigenen Formular-Baustein. Du stellst die Felder zusammen – Text, E-Mail, Telefon, mehrzeilig, Auswahl, Checkbox und Radio, jeweils optional als Pflichtfeld.
Einsendungen landen im Admin unter „Einsendungen“ (mit CSV-Export), auf Wunsch zusätzlich per E-Mail bei dir und als Bestätigung beim Absender. Gegen Spam helfen Honeypot, signierte Zeitfalle und eine Drossel – ganz ohne Cookie. Ein echtes Formular zum Ausprobieren steht im Beitrag Der Formular-Block in Aktion.
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.
Weniger ist mehr – wenn es das Richtige ist
Neun 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 Maschine anhand einer kurzen Referenz wie der README_MASCHINEN.md bedienen kann. Ein Block-Editor, der schnell erklärt ist. Eine API, die für jeden Blocktyp dieselben drei Felder erwartet: id, type, data.
Und trotzdem genug Ausdruckskraft für jede Webseite, die nicht Amazon oder Facebook sein will.
Dieser Artikel verwendet fünf der neun Blocktypen: heading, text, buttons, columns und html. Das Titelbild kommt aus dem Beitragskopf, nicht aus einem image-Block. Alles, was hier zu sehen ist, wurde mit denselben Bausteinen gebaut, die auch dir zur Verfügung stehen.