Hier ein kurzes Tutorial wie mittels ACF Layouts und Bricks Builder nativ ein Contentsystem entworfen werden könnte.

Voraussetzungen

Minimum erforderlich:

• ACF Pro
• Bricks Builder

Ressourcen zum Downloaden:

Nach dem Import der beiden Dateien in die jeweiligen Tools gibt es in ACF drei neue Fieldssets und eine Optionsseite.

Quickstart

1. Importiere scf-export-2025-10-16 in ACF.
2. Importiere template-pagebuilder-2025-10-16 in Bricks.
3. Weise das Template „Page Builder“ allen Seiten zu.

ACF Feldgruppen

Nach dem Import sollten folgende Feldgruppen ersichtlich sein:

Feldgruppe Page Builder

In dieser Feldgruppe werden die Layouts bestimmt. Ein Layout könnte der Hero sein oder auch ein Slider.
Einfach die gewünschten Felder erstellen und als Bonus könnten Optionen eingebunden werden: hierbei wird das Klon-Feld verwendet – wichtig für Bricks Builder ist den „Präfix für Feldnamen“ zu aktivieren. Damit können wir dieselben Einstellungen für alle Layout Einträge verwenden.

Feldgruppe Optionen

In diesem Feldgruppe werden die Optionen für alle Layouts bestimmt. z. B. „Anker Name“, irgendwelche Paddings, Margins usw. Diese Feldgruppe kann nach Belieben erweitert werden. Die Feldgruppe habe ich ausgeblendet, weil diese nur in den Layouts verwendet wird.

Feldgruppe Theme Option Felder

Diese Feldgruppe wird für den Header verwendet und wird auf der Option Seite dargestellt. Damit könnte ein Megamenü oder Footer komplett dynamisch erstellt werden. Einfach, wie bei der Feldgruppe „Page Builder“ die Layouts für die jeweiligen Layouteinträge anlegen.

z. B. für ein Megamenü:

• Layout: Link
• Layout: Megamenü
  • Feld: Text -> Titel
  • Links (Repeater)
    • Feld: Link
  • Feld Bild
• Layout: Button
  • Feld: Link
  • Feld Auswahl: primary, secondary, tertiary, …

Option Seite

Hier kann nach Geschmack die Optionen erweitert werden. Für den Kunden ist es oft einfacher, alles auf einer Seite durchzuführen. z. B. Kontaktdaten, Social Media links, Footer, …

Bricks Builder

Die ganze Magie passiert in Bricks selbst.
Dazu benötigen wir ein Bricks Template (Name: Page Builder) „Single“ und aktiviert es für alle Seiten. (z. B. dort, wo der Builder gerendert werden sollte: alle Seiten, Beiträge, Überall, etc. )

Struktur und Aufbau

Übersicht Struktur:

• Box als Query loop
  • Layout mit Conditions
    • Inhalt des Layouts
  • Layout mit Conditions

Im Single Template benötigen wir einen Block, welcher uns nun die ACF Layoutfelder als Abfrage durchläuft. Der Looper-Provider im Bricks-Element ist:
Provider: Dynamische Daten → ACF Flexible Content Field → pagebuilder_layouts (oder wie dein Feld heißt).

Innerhalb dieses Blocks können nun die einzelnen Blöcke für die Layout-Abschnitte erstellt werden.
Damit die Blöcke auch richtig dargestellt werden, muss dafür eine Bedingung (Condition) erstellt werden.
Datenquelle / Variable: Dynamische Daten → {acf_get_row_layout}
(technisch ist das die aktuelle Layout-ID des ACF Flexible Content Loops)
Als Operator: == (ist gleich)
Als Vergleichswert: hero

Der Vergleichswert muss exakt dem Layout-Namen (Slug) entsprechen, nicht dem Label in ACF.
Beispiel: Wenn das Layout in ACF “Hero Section” heißt, der Slug aber hero, dann ist hero der Vergleichswert.

Dieser Prozess wird solange wiederholt, bis alle Layout Blöcke erstellt sind.

Tipps

Tipp: Die Conditions können auch gemischt werden. z. B. mit einer Checkbox in ACF.

CSS-ID: bei der CSS ID ist es wichtig, dass diese niemals leer sein darf. Dafür muss die fallbackfunktion von Bricks / ACF verwendet werden.

Ich habe als Fallback hero-0 dh. Layoutname und dann die fortlaufende Nummer. Bricks fängt hierbei bei 0 an zu zählen.

{acf_pagebuilder_hero_layout_optionen_anchor @fallback:{acf_get_row_layout}-{query_loop_index }}

Wichtig: Für die Vorschau im Builder muss ein Beitrag mit ACF-Inhalten als Preview Post ausgewählt werden. Sonst zeigt Bricks im Editor „Dynamic Data Empty“.

Mit dieser Methode lässt sich ein voll dynamisches Content-System direkt im Bricks Builder umsetzen – komplett ohne zusätzliche PHP-Parts oder Custom-Code.