Testseite: Alle Blöcke
Diese Seite demonstriert jeden Block des Foundation-Plugins mit unterschiedlichen Feldvarianten.
Grid: 2 Spalten, 66/33-Aufteilung
Diese Spalte nimmt auf Desktop 66% ein (Grid: layout-grid > layout-col mit width_desktop). Der Stack darunter demonstriert layout-stack verschachtelt innerhalb einer Spalte.
Zweiter Absatz im Stack, mit gap „sm“.
Diese Spalte nimmt die restlichen 33% ein.
Grid: 3 Spalten mit Card-Komponenten
Card ohne Link
Reine Text-Karte ohne Bild und ohne Link.
Card mit Link-Text
Diese Karte hat einen sichtbaren Link-Text am Ende (Link-Feld mit ausgefülltem title).
Card ohne Link-Text
Ohne Linktext im Link-Feld, aber mit URL: die ganze Karte wird klickbar.
Grid: gleiche Höhen und Verschachtelung
Karten und Panels einer Zeile sollen gleich hoch sein, auch bei unterschiedlich langem Text. Die Linkzeile steht am Fuß der Karte.
Kurze Karte
Ein Satz.
Karte mit langem Text
Diese Karte hat deutlich mehr Text als ihre Nachbarn. Sie bestimmt die Höhe der Zeile, und die anderen Karten sollen sich daran angleichen, statt kürzer zu enden. Die Linkzeile bleibt in allen Karten auf derselben Höhe.
Panel neben Karten
Auch ein Panel als einziges Kind der Spalte nimmt die Zeilenhöhe an.
Spalte mit mehreren Kindern
Überschrift, Absatz und Karte direkt in der Spalte. Hier wird nichts gestreckt, die Kinder stehen untereinander.
Karte unter Text
Als eines von mehreren Kindern behält die Karte ihre eigene Höhe.
Verschachteltes Grid
Innen kurz
Kurz.
Innen lang
Die inneren Karten gleichen sich ebenfalls an, ohne das äußere Grid zu strecken.
Core-Buttons, eingefärbter Text, Spalte ans Ende
Dieser Absatz ist im Editor ganz eingefärbt. Er steht an derselben Kante wie die Überschrift, ohne Einzug.
Links, unter 768px unten
Steht im Editor zuerst. Die Spalte hat „Ans Ende rücken: nur unter 768px“ und steht auf dem Telefon unter der rechten.
Rechts, unter 768px oben
Ohne Einstellung. Auf dem Telefon steht diese Karte zuerst.
Formular neben Kontaktdaten
WPForms-Block in einer Spalte. Die Formular-ID gilt für die Entwicklungsseite; in anderen Installationen das Formular im Editor neu wählen.
Formular auf dunkler Fläche
Grid: 4 Spalten, Video-Komponente (lokal + embed)
Container-Varianten (max_width)
Wichtig für diese Demo: die umgebende Section steht bewusst auf max_width „full“ — nur so werden die unterschiedlichen Container-Breiten überhaupt sichtbar. Bei einer Section mit max_width „container“ wären alle drei Varianten identisch breit, siehe docs/BLOCKS.md.
layout-container mit max_width „normal“ (.container).
layout-container mit max_width „wide“ (.container-fluid).
layout-container mit max_width „full“ (kein Wrapper, volle Breite der umgebenden Section).
Häufige Fragen
Noch Fragen?
Es ist Teil des internen Setups und wird projektweise wiederverwendet.
Ja — neues Verzeichnis unter foundation/blocks/ anlegen, in BlockRegistrar.php registrieren, ACF-Feldgruppe per acf-json ergänzen.
Was uns ausmacht
Drei Beispiel-Features mit unterschiedlichen Icons.
Messbarer Erfolg
Kurze Erläuterung zum ersten Feature.
Klare Kommunikation
Kurze Erläuterung zum zweiten Feature.
Verlässliche Betreuung
Kurze Erläuterung zum dritten Feature.
Bild rechts (Standard)
media_position auf right (Standard): Text links, Bild rechts.
Bild links
media_position auf left: Bild links, Text rechts. Bei mehreren Text+Medium-Blöcken auf einer Seite abwechseln.
Bereit für den nächsten Schritt?
Mit primärem und sekundärem Button.
Nur ein Aufruf zur Handlung
Core-Blöcke & Theme-Styles
Topline
Normaler Fließtext ohne Style-Variante (core/paragraph, kein className).
Ich bin ein großes Zitat für Testimonials oder Statements.
- Normale Liste, Punkt eins
- Normale Liste, Punkt zwei
- Bulletpoints-Style, Punkt eins
- Häkchen-Style, Punkt eins
- Häkchen-Style, Punkt zwei
Stack ohne Grid (standalone)
Erster Absatz im Stack.
Zweiter Absatz, gap „md“ statt „sm“.
Card im Stack
Components dürfen auch direkt in einem Stack liegen, nicht nur im Grid.
Container „narrow“: zentriertes Textmaß
Bis 760px breit, auch in einer Section mit Breite „Container“. Auf dem Telefon volle Breite.
Verschachtelter Stack (gap sm)
Überschrift und Text stehen eng beieinander, zum Grid darunter gilt der große Abstand (gap lg) des äußeren Stacks.
Panel „surface“
Neutrale Fläche wie eine Karte, folgt dem Farbkontext der Section.
Panel „accent“
- Rahmen in Markenfarbe
- für Hinweise, die auffallen sollen
Panel „dark“
Text und Buttons stellen sich über @mixin on-dark automatisch um.