Demos

Dieser Bereich zeigt, was das CMF in der Praxis kann – nicht nur beschrieben, sondern live auf dieser Seite. Die drei Unterseiten gehen tiefer in die jeweiligen Themen; hier bekommst du den direkten Überblick.

Blocktypen

∞

Spalten-Varianten

Datenbanken

100%

API-first

Die drei Demo-Bereiche

Medien

Bilder, Video, Audio und PDFs einbinden. Von einfachen Bildern über YouTube-Embeds bis zu eigenen MP4-Dateien und Audiospielern.

Medien-Demo

Weißes Geometrie-Detail – Symbol für die HTML-Demo

HTML-Blöcke

Freier HTML-Code, Callout-Boxen, Tabellen, Accordions, Animationen und eigene UI-Elemente – unbegrenzte Gestaltungsfreiheit.

HTML-Demo

Weißes Tragwerk-Raster – Symbol für die Spalten-Demo

Spalten & Layout

Mehrspaltige Layouts, Produktseiten, Feature-Listen, verschachtelte Spalten und responsives Verhalten bei kleinen Bildschirmen.

Spalten-Demo

Live-Beispiele

Diese Elemente sind keine Screenshots – sie sind echte Blöcke, direkt auf dieser Seite eingebettet. Genau so funktioniert das CMF in der Praxis.

Feature-Grid mit columns-Block

Blockbasiert

Jeder Inhalt ist ein typisierter Block. Heading, Text, Image, List, Buttons, Columns, HTML und Blog-Übersicht – das sind die Bausteine.

API-first

Alle Inhalte werden über eine JSON-API erstellt und bearbeitet. Mensch oder Maschine – wer die API kennt, kann bauen.

Dateibasiert

Keine Datenbank, keine Migration. Inhalte liegen als JSON auf dem Server – leichtgewichtig und versionierbar.

Callout-Boxen mit html-Block

ℹ Info

Der html-Block akzeptiert beliebiges HTML. So entstehen Info-Boxen, Warnungen oder Hervorhebungen.

✓ Erfolg

Callout-Box für Bestätigungen, abgeschlossene Schritte oder positive Hinweise.

⚠ Hinweis

Warnbox. Ideal für wichtige Hinweise, die beachtet werden sollten, aber kein Fehler sind.

✕ Fehler

Fehlerbox. Für kritische Hinweise, fehlgeschlagene Aktionen oder Validierungsfehler.

Video-Embed mit columns-Block

YouTube & externe Videos

Videos von YouTube oder Vimeo werden per <iframe> in einem html-Block eingebettet. Der Wrapper mit der Klasse video-responsive stellt das 16:9-Seitenverhältnis sicher und macht das Video auf allen Bildschirmgrößen responsiv.

YouTube Embed-URL verwenden
Wrapper-Klasse video-responsive für 16:9
loading="lazy" spart Bandbreite
Eigene MP4s: zuerst media_upload

Fortschrittsbalken & Badges

HTML & CSS92%

JSON API85%

Responsives Layout78%

Status-Badges:

publisheddraftnewerrorarchived

Tag-Chips:

headingtextimagecolumnshtmllistbuttons

Bild-Galerie mit columns-Block

Drei Bilder nebeneinander – aufgebaut mit einem columns-Block (3 Spalten) mit je einem image-Block pro Spalte. Auf kleinen Bildschirmen stapeln sie sich automatisch untereinander.

Zeitleiste mit html-Block

Block 1 – heading

Seitentitel setzen

Ein H1-Block pro Seite, sprechende Block-ID, klarer Titeltext.

Block 2 – text

Einleitung schreiben

HTML-Absätze, Links, strong und em innerhalb eines text-Blocks.

Block 3 – image

Bild einbinden

Erst hochladen via media_upload, dann den zurückgegebenen src-Pfad verwenden.

Block 4 – buttons

Call-to-Action platzieren

Primär- und Sekundär-Buttons mit label und href. Mehrere Buttons möglich.

Mit CMF gebaut: echte Websites

Demos zeigen Bausteine – aber wie sieht eine fertige Website mit CMF aus? Diese Seiten laufen live auf dem System, jede mit komplett eigenem Design über die Theme-Einstellungen und eigenes Custom CSS.