💡 Tipp
⚠️ Hinweis zum Hero-Block oben: Titel/Untertitel/Info-Zeile sitzen in einer fest hellen Glasfläche mit fest dunkler Textfarbe — der Hero folgt bewusst nicht den Design-Tokens wie der Rest der Seite. Zum Testen der Theme-Farben sind die Blöcke weiter unten aussagekräftiger.
💡 Tipp
Farb-Verhalten: table, faq, pro-contra, list, p, info-box, success-box und product-card folgen automatisch den Design-Tokens der Seite (color-text, color-primary, color-secondary, color-surface, color-surface-alt, color-border). info-box/success-box behalten ihren farbigen Rahmen (gelb/grün) fest, Hintergrund und Text passen sich an.
Text & Markup
h1 – h6 (Überschriften)
Alle sechs Ebenen sind wählbar. h4–h6 rendern optisch wie h3 (Klasse subsection-title) — es gibt keine eigene, kleinere CSS-Stufe für sie.
Das ist eine H4-Überschrift
Das ist eine H5-Überschrift
Das ist eine H6-Überschrift
p (Textabsatz)
Ein normaler Textabsatz mit fettem, kursivem und verlinktem Inline-HTML. Wird automatisch in <p> gewrappt, falls noch nicht block-level.
list (Aufzählung)
Einfache Aufzählungsliste, Einträge direkt top-level in items.
- Erster Listenpunkt
- Zweiter Listenpunkt mit fettem Wort
- Dritter Listenpunkt
info-box
Farbige Hinweisbox mit „💡 Tipp“-Titel — fester gelber Rahmen, Hintergrund/Text folgen den Tokens.
💡 Tipp
So sieht eine info-box im aktuellen Theme aus.
success-box
Farbige Hinweisbox mit „🎯 Empfehlung“-Titel — fester grüner Rahmen.
🎯 Empfehlung
So sieht eine success-box im aktuellen Theme aus.
html (freies HTML)
Rohes HTML mit eigenen Klassen (Konvention apx-…). Hier ein einfacher Karten-Rahmen zum Testen von Rundung/Schatten-Tokens.
Dieser Absatz sitzt zwischen einem html-open- und einem html-close-Block — beide zusammen bilden ein Tag-Paar um beliebig viele Blöcke dazwischen.
css (Seiten-CSS)
Injiziert CSS in den Kopf der Seite (automatisch gescoped) — der grüne Rahmen um diesen Absatz und der Button-Look weiter unten kommen aus einem css-Block direkt oberhalb dieser Überschrift.
js (JavaScript)
JavaScript wird in <script> gewrappt. Klick auf den Button — der js-Block unten reagiert darauf.
component (Bauteil)
Eigenes HTML+CSS für ein einzelnes Bauteil ohne passenden Baustein-Typ — custom_css ist instanz-gescoped (nur dieser Block, nicht die ganze Seite).
💡 Tipp
custom (Eigene Blöcke) fehlt hier bewusst als Live-Demo: er referenziert einen vorher im Editor über „+ Eigenen Block erstellen“ gespeicherten block_id — auf dieser Testseite existiert noch keiner. Verhalten: gibt gespeichertes html/css/js unverändert aus (keine PHP-Ausführung deines Inhalts), live bei jedem Seitenaufruf neu aufgelöst.
Layout
table
Datentabelle, optional mit grün markierter Zeile (highlight:"success").
| Modell | Preis | Bewertung |
|---|---|---|
| Basis-Variante | 19,99 € | 4,2 ★ |
| Empfehlung | 29,99 € | 4,8 ★ |
| Premium | 49,99 € | 4,6 ★ |
faq
Akkordeon-FAQ, client-seitig gerendert — erzeugt automatisch FAQ-Schema.org-JSON-LD.
FAQ
Wofür ist diese Seite?
Zum visuellen Testen, wie das aktuelle Design-Theme jeden Block-Typ stylt.
Ist die Seite öffentlich sichtbar?
Sie steht auf noindex/nofollow und nicht im Menü — nur über den direkten Link erreichbar.
pro-contra
Zwei-Spalten Vor-/Nachteile, client-seitig gerendert.
- Übersichtlich
- Schnell erfassbar
- Braucht etwas Platz
columns (Spalten-Grid)
Beliebig viele Spalten nebeneinander, responsiv — hier 3 Spalten.
Beispieltext
Beispieltext
Beispieltext
split-section (Bild & Text)
Bild/Video neben Text, mehrere Split-Verhältnisse wählbar (hier 50-50).
Split-Section-Text
Bild links, Text rechts (oder umgekehrt über image_side).
hero-video
Vollflächiger Video-/Bild-Hero mit Overlay — hier mit reduzierter Mindesthöhe, damit er auf dieser Testseite nicht den ganzen Viewport einnimmt (Standard wäre 100svh).
spacer (Abstand)
Reine vertikale Lücke, optional mit horizontal zentrierter Trennlinie (Dicke je Stufe).
youtube (erweitert)
YouTube mit Breite/Ausrichtung/Padding/Begleittext/gestylter Bildunterschrift — Klick-zum-Abspielen-Fassade ohne Cookie/Skript vor dem ersten Klick.
Beispiel-Bildunterschrift unter dem Video
Medien
image
Bild aus der Medienbibliothek, mit Bildunterschrift.
Beispiel-Bildunterschrift
video (einfach)
Einfacher YouTube-Embed ohne Layout-Optionen (immer volle Breite) — nutzt das bestehende, interaktive Video-Modul direkt.
gallery
Bildergalerie aus einem Medien-Ordner (data.folder, Default default). Zeigt nur etwas an, wenn in diesem Ordner tatsächlich Bilder liegen.
Blog-eigene Inhaltstypen
article-info
Eigenständige Autor-/Datumszeile ohne restlichen Hero.
author-box
Autor-Kachel mit Bild, Bio und Link.
citation
Blockquote-Zitat-Box.
product-card (eigenständig)
Eigenes Produkt ohne Katalogbezug — Daten direkt im Block, JSON-LD Product/Offer.
catalog-product-card
Zieht live aus einem echten Katalog (content/catalog-data/*.json) — hier eine reale Variante aus dem Wasserkocher-Katalog, Typ affiliate.
Klassischer WMF-Edelstahlkocher in Silber – 1,6 L, Warmhaltefunktion, 360°-Sockel.
Vorteile:
- Hochwertiger gebürsteter Edelstahl – robust und hygienisch
- Automatische Abschaltung nach dem Kochen
- 60-Minuten-Warmhaltefunktion für Tee-Zubereitung
- Herausnehmbarer Kalkfilter – leicht zu reinigen
- Zeitloses Silber-Design passt zu jeder Küche
- Günstigste Variante der WMF Küchenminis Serie
- Beleuchtetes Sichtfenster für einfache Füllstandskontrolle
Nachteile:
- Fingerabdrücke auf der Edelstahloberfläche sichtbar
- Kein Temperaturregler – nur Vollkochen möglich
catalog-product-card (Freebie-Variante)
Freebie-Karte mit eigenem Opt-in-Formular (E-Mail-Eintragung inkl. Datei-Download) — Variante beispiel-freebie aus dem Demo-Katalog.
Beispiel: Freebie-Download
Kostenloser Download gegen E-Mail-Adresse (Double-Opt-in).
Vorteile:
- Baut die eigene E-Mail-Liste auf
- DSGVO-Text konfigurierbar
Nachteile:
- Braucht Double-Opt-in-Bestätigung
newsletter-form
Anmeldeformular für eine Abonnentenliste. Nutzt hier die Test-Liste „Affiliate-Freebie“ (aktuell 0 Abonnenten) — bitte nicht mit einer echten E-Mail-Adresse testen, ein Klick trägt tatsächlich ein (Double-Opt-in).
related-articles
Braucht metadata.category_path auf der Seite — zeigt weitere Seiten aus derselben Kategorie. Diese Showcase-Seite und die drei design-referenz-*-Seiten teilen sich zu Demo-Zwecken die interne Kategorie „Design-Referenzen“.
content-collection
Kuratierte Kartenliste, gefiltert nach metadata.tags (quer zur Kategorie, siehe Seiten-Tags-System) — unabhängig von Kategorie/Menü/Sitemap. Diese Showcase-Seite und die drei design-referenz-*-Seiten tragen zu Demo-Zwecken den Tag intern:design-referenz.
Sammlung nach Tags
Design-Referenz: Minimalist SaaS
Design-Referenz: Playful DTC
Design-Referenz: Rustic Craft
server-block (PHP, git-deployt)
Bindet src/custom_server_blocks/<handler>.php ein — eine PHP-Datei, die per Git-Commit + Deploy ins Repo kommt (niemals im Backend hochladbar). Zwei echte Beispiele unten: ein Kontaktformular (Frontend+Backend kombiniert) und ein Wetter-Widget mit Live-Daten.
💡 Tipp
Nicht demonstriert (kein sinnvoller Live-Test auf einer normalen Artikel-Seite möglich): content-slot (nur in Seiten-Vorlagen), menu/breadcrumb (Seiten-Chrome, kein Inhaltsblock — bereits über die normale Kopfzeile dieser Seite sichtbar), footer-block (nur relevant auf „menu_free“-Seiten ohne eigenen Footer).
three.js (Mini-Beispiel)
Rotierender Würfel via WebGL — per CDN geladen (drei.js r128), reines Vanilla-JS, kein Build-Schritt nötig.