Testseite: Alle Bloecke
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.
Card ohne Link-Text
Ohne Link-Text, aber mit Link-URL: die ganze Karte wird klickbar.
Grid: 4 Spalten, Video-Komponente (lokal + embed)
Container-Varianten (max_width)
Wichtig fuer diese Demo: die umgebende Section steht bewusst auf max_width „full“ — nur so werden die unterschiedlichen Container-Breiten ueberhaupt sichtbar. Bei einer Section mit max_width „container“ waeren alle drei Varianten identisch breit, siehe docs/BLOCKS.md.
layout-container mit max_width „normal“ (.container).
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
layout-container mit max_width „wide“ (.container-fluid).
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
layout-container mit max_width „full“ (kein Wrapper, volle Breite der umgebenden Section).
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Haeufige 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 ergaenzen.
Was uns ausmacht
Drei Beispiel-Features mit unterschiedlichen Icons.
Messbarer Erfolg
Kurze Erlaeuterung zum ersten Feature.
Klare Kommunikation
Kurze Erlaeuterung zum zweiten Feature.
Verlaessliche Betreuung
Kurze Erlaeuterung 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-Bloecken auf einer Seite abwechseln.
Bereit fuer den naechsten Schritt?
Mit primaerem und sekundaerem Button.
Nur ein Aufruf zur Handlung
Core-Bloecke & Theme-Styles
Topline
Normaler Fliesstext ohne Style-Variante (core/paragraph, kein className).
Ich bin ein grosses Zitat fuer Testimonials oder Statements.
- Normale Liste, Punkt eins
- Normale Liste, Punkt zwei
- Bulletpoints-Style, Punkt eins
- Haekchen-Style, Punkt eins
- Haekchen-Style, Punkt zwei
Stack ohne Grid (standalone)
Card ausserhalb des Stacks
Karte als eigenes Element im Grid
Erster Absatz im Stack.
Card im Stack
Components duerfen auch direkt in einem Stack liegen, nicht nur im Grid.
Zweiter Absatz, gap „md“ statt „sm“.