Musterseite
Jedes Preset einmal
Diese Seite ist der erste Import in die leere Instanz. Sie prueft Variablen, Presets und ihre Wirkung in einem Zug. An jedem Abschnitt steht, was zu sehen sein soll.
1. Grundgeruest
Cremefarbener Grund, weisse Karte mit duennem Rand, abgerundete Ecken. Fehlt die Karte oder steht der Text frei auf dem Grund, traegt Group-Card nicht.
Eine Karte mit Fliesstext
Fliesstext steht immer in einer Karte, nie frei auf dem Grund. Das ist die erste der fuenf Regeln des Struktursystems.
Und das hier ist der gedaempfte Text daneben.
2. Spaltenverhaeltnis 3:2
Die linke Karte muss sichtbar breiter sein als die rechte — Verhaeltnis 3:2. Sind sie gleich breit, greift die Spurenliste nicht. In Abschnitt 14 kommt dasselbe umgekehrt.
Drei Anteile
Diese Karte bekommt drei von fuenf Anteilen.
Zwei Anteile
Diese zwei. Und dieser Text ist laenger als der linke, damit man sieht, dass die Karten trotzdem gleich hoch sind — das ist die zweite Sache, die dieser Abschnitt prueft.
3. Raster, Umbruch und die Null-Untergrenze
Drei gleich breite Karten. Beim Schmalerziehen zwei, dann eine. Die erste Karte enthaelt ein absichtlich zu langes Wort: Es muss UMBRECHEN und die Spalte gleich breit lassen. Wird ihre Spalte breiter als die Nachbarn, fehlt die Null-Untergrenze minmax(0,1fr). Gegenprobe, wenn es knapp aussieht: im Browser die Schrift vergroessern (Strg +) — die Karten muessen gleich breit bleiben.
Gewaltpraeventionsveranstaltungsteilnehmerinnenliste — dieses Wort ist absichtlich zu lang fuer seine Spalte.
Zweite Karte.
Dritte Karte.
4. Band und Auftakt
Das Band ist ein dunkler, stark abgerundeter Block auf hellem Grund mit zentriertem Text und gelbem Kicker — der Text darin muss LESBAR sein. Der Auftakt darunter hat keine Flaeche, ist schmaler als die Bahn und steht MITTIG, nicht am linken Rand.
Kapitelauftakt
Das Band traegt die Kapitelueberschrift
Darunter passt ein kurzer Einleitungssatz.
Ohne Flaeche
Der Auftakt
Kurz, zentriert, hoechstens fuenf Zeilen. Laengeres gehoert in eine Karte und steht dort linksbuendig.
5. Dunkles Kapitel
Der ganze Abschnitt steht auf Navy. Die Karten sind dunkler als der Grund, haben einen sichtbaren Rand und sind GLEICH HOCH, obwohl die rechte weniger Text hat. Ueberschriften und Text darin muessen lesbar sein.
Karte auf dunklem Grund
Die Schrift ist fast weiss, nicht rein weiss.
Und das ist der gedaempfte Text auf dunkel. Dieser Absatz ist laenger als der in der rechten Karte, damit die Hoehenangleichung sichtbar wird.
Zweite dunkle Karte
Gleiches Preset, weniger Inhalt.
6. Buttons
Drei Buttons NEBENEINANDER, alle vollstaendig gerundet: gelb mit dunkler Schrift, dunkel mit weisser Schrift, nur Rand. Stehen sie untereinander, verteilt die Row ihre Spalten nicht. Sind sie eckig, traegt Radius-Pill nicht.
7. Handlungsband: gelbe Flaeche ueber die volle Breite, Text und Buttons ZENTRIERT. Stehen sie links, wirkt justifyContent auf eine Spalte statt auf die Buttons.
Probetraining vereinbaren
8. Hinweis und Unterblock
Der Hinweis hat einen gelben Balken links und ist rechts abgerundet, links nicht. Die Karte darunter enthaelt zwei Unterbloecke: Zwischen ihnen steht ein duenner Trennstrich, UEBER dem ersten nicht.
Ein hervorgehobener Nachsatz. Die Flaeche ist der gedaempfte Grund, nicht die Karte.
Eine Karte mit zwei Unterbloecken
Erster Unterblock
Die dritte Ebene innerhalb einer Karte. Ohne Trennstrich darueber — er wuerde nichts trennen.
Zweiter Unterblock
Dieser traegt den Trennstrich, der erste nicht.
9. Variablenbindung
Diesen Abschnitt nicht im Frontend pruefen. Und NICHT am Farbfeld: Divi zeigt dort den aufgeloesten Wert, also #ffffff, auch wenn die Farbe gebunden ist — ein Hex-Wert im Dialog belegt gar nichts. Die tragende Pruefung: In der Variablen-Verwaltung den Slot "Weiss" auf etwas Auffaelliges setzen, etwa Rot. Zieht diese Karte mit, ist die Bindung ueber Bg-Card lebendig. Danach zuruecksetzen.
Hintergrund dieser Karte: Rolle Bg-Card → Slot Weiss → #ffffff. Geprueft wird die Kette, nicht der angezeigte Wert.
Familie Section-Hero
10. Der grosse Kopf
Dies ist das einzige echte h1 der Seite. Darunter folgen zwei weitere Koepfe derselben Familie (11 und 12) — die drei muessen sich in der Hoehe unterscheiden. Tun sie es nicht, traegt die Familie nicht.
11 — Seitenkopf mit Bild
Section-Hero-Page-Image
Das Kopfbild ist Instanzwert, nicht Preset — es ist pro Seite verschieden. Hier steht keins, die Flaeche muss trotzdem navy sein und niedriger als Abschnitt 10.
12 — Folie 1 von 5
Der Slider-Kopf
Text links, Bild rechts — so baut divikit die Startseite.
13. Zahlenband
Vier Zahlen nebeneinander auf anthrazitfarbener Flaeche, darunter je eine kleine Beschriftung — die muss LESBAR sein. Die Zahlen sind gelb und deutlich groesser als H1. Stehen es zwei statt vier, greift die Spaltenzahl nicht.
30
Jahre Erfahrung
6
Kursformate
4
Altersgruppen
1
Schule in Walldorf
14. Umgekehrtes Verhaeltnis 2:3
Jetzt muss die RECHTE Spalte breiter sein. Ist es wieder die linke, wurde dasselbe Preset zweimal zugewiesen.
Drei Anteile rechts
Ein Kernsatz wird als eigener Absatz hervorgehoben:
Wer sich verteidigen kann, muss es seltener tun.
15. Schmale Bahn
Dieser Abschnitt ist sichtbar schmaler als alle darueber (1000 statt 1350 Pixel). Ist er gleich breit, traegt Row-Narrow nicht. Die Live-Grafik darunter ist zentriert und schmaler als das grosse Bild darueber.
Fuer einzelne Bild- oder Videobloecke, die nicht die volle Bahn brauchen.
16. Buttons auf dunklem Grund
Der Rand-Button muss hier WEISS sein, nicht navy. Ist er navy, ist die helle Fassung zugewiesen und er verschwindet fast im Grund.