Theme Bricks Builder - 2.4.2

Bricks ist ein visueller Site-Builder für WordPress, der als Theme ausgeliefert wird – er ersetzt das Website-Theme und ermöglicht den Aufbau der gesamten Seite, vom Header bis zum Footer, aus einer einzigen Drag-&-Drop-Oberfläche. Er richtet sich an Webentwickler, Agenturen und Freelancer, denen sauberer HTML/CSS-Code und hohe Performance wichtig sind.

Was ist Bricks und wie funktioniert es als Theme

Bricks ist ein visueller Site-Builder, der als WordPress-Theme und nicht als Plugin ausgeliefert wird – er ersetzt das Website-Theme vollständig. Er ist sowohl für die gestalterische Ebene als auch für die Struktur der gesamten Seite zuständig, vom Header über den Inhalt bis zum Footer. Dieser Ansatz eliminiert die doppelte Codeerzeugung, die für den Aufbau „Theme plus Builder“ typisch ist – einer der Hauptgründe für seine Performance.

Das Produkt entstand 2021. Entwickelt wird es von Codeer Limited – einem Unternehmen mit Sitz auf Zypern, gegründet von Thomas Ehrig. Das Entwicklungsmodell ist ausdrücklich community-orientiert: Ein öffentliches Ideen-Board und eine offene Roadmap ermöglichen es, Vorschläge einzureichen und über die Richtung kommender Releases abzustimmen.

Theme, nicht Plugin — was das in der Praxis bedeutet

Bricks wird wie jedes WordPress-Theme installiert und nutzt die Standardstruktur der Templates. Statt jedoch eine Builder-Ebene auf ein bestehendes Theme aufzusetzen, übernimmt es selbst dessen Rolle. In der Praxis entfällt so die parallele Ebene „Theme plus Plugin“ – und damit auch überflüssiger Code im Frontend.

Diese Unterscheidung hat Folgen für die Migration. Der Wechsel zu Bricks von einem als Plugin laufenden Page-Builder ist ein Themewechsel, kein weiteres Add-on.

Engine ohne jQuery (Vue.js 3) und sauberer Ausgabecode

Bricks kommt im Frontend ohne jQuery aus – die Builder-Oberfläche basiert auf Vue.js 3, und der Output selbst ist leichtes, semantisches HTML/CSS. Weniger überflüssige Markups, keine schweren Bibliotheken. Das Ergebnis? Schnelleres Laden und hohe PageSpeed-Werte.

Nutzer berichten von Ergebnissen im Bereich von 95–99 Punkten, und das ohne aufwendige Cache-Plugins. Sauberer Code erleichtert später die Pflege des Projekts.

Funktionen von Bricks

Bricks umfasst visuelles Full Site Editing, ein Design-System auf Basis von CSS-Klassen und -Variablen, den Query Loop Builder mit Dynamic Data, einen nativen WooCommerce Builder, wiederverwendbare Komponenten sowie über 110 integrierte Elemente. Die meisten Funktionen, die in anderen Konfigurationen separate Plugins erfordern – SEO, Popups, Menüs, Passwortschutz – sind hier direkt ins Theme eingebaut.

• Visuelles Full Site Editing – Aufbau von Headern, Footern, Archiven, einzelnen Beiträgen und Popups aus einer einzigen Drag-&-Drop-Oberfläche, mit verschachtelbaren Elementen und Bearbeitung im Struktur-Panel.
• Design-System auf CSS-Klassen und -Variablen – der Class & Variable Manager ermöglicht das Umbenennen, Duplizieren, Importieren und Exportieren von Klassen sowie das Kopieren zwischen Seiten.
• Query Loop Builder – visuelles Abfragen der WordPress-Datenbank oder eine eigene PHP-Query, mit Optionen für Load More, Infinite Scroll und AJAX-Pagination.
• Dynamic Data – Versorgung beliebiger Bereiche der Website mit Custom Fields aus ACF, Meta Box, JetEngine, Toolset, Pods und ACPT.
• WooCommerce Builder – visuelles Design der Shop-, Produkt-, Warenkorb-, Checkout- und Kundenkonto-Seiten, mit Variation Swatches ab Version 2.0.
• Komponenten und Slots – wiederverwendbare Komponenten mit Stilvarianten, Verschachtelung ab 2.0 sowie Bereitstellung als Gutenberg-Blöcke (Components as Blocks).
• Visual CSS Grid Builder – ab Version 2.0 visuelles Grid-Design per Drag & Drop für Zeilen, Spalten und Inhalte in der Schleife.
• Conditions und Interactions – bedingte Inhalte mit AND/OR-Verknüpfungen sowie Trigger für Klick, Hover und Scroll ohne Code.
• Fluid Typography und Spacing – skalierbare Typografie- und Abstandsskalen, die automatisch in CSS-Variablen umgewandelt werden.
• Integriertes SEO, Open Graph, Popups, Menu Builder und Passwortschutz – Funktionen, die separate Plugins in einem typischen Projekt ersetzen.

Aufbau der gesamten Website und responsive Layouts (Flexbox, CSS Grid)

Das gesamte Projekt entsteht in einem einzigen Builder – vom Menü und Header über die Inhaltsbereiche bis zu Footer und Archivseiten. Layouts werden mit Flexbox und CSS Grid aufgebaut, manuell oder visuell über den ab Version 2.0 verfügbaren Visual CSS Grid Builder.

Die Responsivität basiert auf eigenen, unbegrenzten Breakpoints. Bricks erlaubt sowohl einen Desktop-first- als auch einen Mobile-first-Ansatz, und die Ansicht lässt sich an jedem Breakpoint direkt im Builder bearbeiten.

Design-System — CSS-Klassen, Variablen und Fluid Typography

Das Styling in Bricks basiert auf CSS-Klassen und Variablen und nicht auf Einstellungen, die einem einzelnen Element zugewiesen sind. Der Class & Variable Manager gruppiert Klassen, löst Namenskonflikte und überträgt sie zwischen Projekten per Import, Export sowie Copy&Paste.

CSS-Variablen werden an einer Stelle bearbeitet, und die Änderung wirkt sich auf die gesamte Website aus. Fluid Typography und Spacing skalieren fließend vom Desktop bis zum Mobilgerät und landen automatisch in Variablen und Utility-Klassen.

Query Loop Builder und Dynamic Data

Der Query Loop Builder ermöglicht das visuelle Abfragen der WordPress-Datenbank – Beiträge, Benutzer, Medien, Taxonomien und Custom Fields – oder das Schreiben einer eigenen PHP-Query für komplexere Fälle. Hinzu kommen AJAX-Filterung und -Sortierung sowie eine Live Search mit sofortigen Ergebnissen während der Eingabe.

Dynamic Data versorgt jedes beliebige Element der Website mit Daten aus benutzerdefinierten Feldern. Die tiefe Integration mit gängigen Custom-Fields-Plugins sorgt dafür, dass dynamische Kataloge oder Verzeichnisse fast ohne zusätzliche Tools entstehen.

WooCommerce Builder und E-Commerce

Der WooCommerce Builder ermöglicht das visuelle Gestalten aller Shop-Templates – Shopseite, einzelnes Produkt, Archive, Warenkorb, Checkout und Kundenkonto – in derselben Oberfläche wie der Rest der Website. Die gesamte Kaufstrecke erhält so ein konsistentes, eigenes Design, ohne mehrere Plugins zusammenzuflicken.

Seit Version 2.0 sind integrierte Variation Swatches hinzugekommen – Farbe, Bild oder Textlabel für Produkte mit Variationen – sowie Interaktionen, die auf Warenkorb-Ereignisse reagieren, etwa das Hinzufügen eines Produkts oder das Einlösen eines Gutscheins.

Wann sich Bricks lohnt

Bricks bewährt sich am besten bei Webentwicklern, Agenturen und fortgeschrittenen Freelancern, die visuell arbeiten möchten, aber volle Kontrolle über CSS-Klassen, eigenen Code und sauberes, semantisches HTML brauchen. Für absolute Anfänger ohne HTML- und CSS-Kenntnisse ist es deutlich weniger geeignet – die Lernkurve ist hier steil.

Entwickler, Agenturen und performanceorientierte Creator

Webentwickler, die Kundenseiten bauen, gewinnen mit Bricks volle Kontrolle über CSS-Klassen, eigenes CSS, JS und PHP und behalten dabei den visuellen Workflow. Die Kombination aus Dynamic Data und Query Loop eröffnet den Weg zu anspruchsvollen, dynamischen Seiten fast ohne zusätzliche Plugins.

Agenturen nutzen wiederverwendbare Komponenten, Design-Sets, Remote Templates sowie eine auf Builder Capabilities basierende Zugriffskontrolle. Performance- und SEO-orientierte Creator schätzen sauberen Code, den Verzicht auf jQuery sowie integriertes SEO und Lazy Loading – all das schlägt sich in hohen Core-Web-Vitals-Werten nieder.

Migration von Elementor, Divi oder Oxygen

Bricks ist ein typisches Migrationsziel für alle, die unter überschüssigem Code und niedrigen Geschwindigkeitswerten klassischer Page-Builder gelitten haben. Es speichert Daten außerdem in einem mit Gutenberg kompatiblen Format, mit einer in beide Richtungen funktionierenden Konvertierung.

Hinweis zur Migration: Bricks bietet keine native, automatische 1:1-Migration von Elementor, Divi oder Oxygen – der Wechsel bedeutet in der Praxis einen Neuaufbau der Seiten von Grund auf, keine Konvertierung per Klick.

Für wen Bricks nicht die beste Wahl ist

Die steile Lernkurve führt dazu, dass sich manche Projekte besser mit einfacheren Tools umsetzen lassen.

• absolute Anfänger ohne HTML- und CSS-Kenntnisse – Bricks ist im Kern eine Oberfläche für HTML und CSS, und die volle Funktionsvielfalt erschließt sich erst durch das Verständnis von Klassen, Variablen und Komponenten;
• Projekte, die auf fertigen, umfangreichen „schlüsselfertigen“ Template-Bibliotheken basieren – Bricks setzt auf den Aufbau von einem leeren Blatt aus und hat eine kleinere Template-Bibliothek als die Marktführer;
• Teams, in denen Inhalte von nicht-technischen Kunden ohne Vorbereitung bearbeitet werden – die Bearbeitung im Canvas kann anspruchsvoll sein, auch wenn Components as Blocks und die Front-End-Administration dies teilweise abmildern;
• Situationen, die eine schnelle 1:1-Migration von einem anderen Builder erfordern – die fehlende automatische Konvertierung bedeutet einen Neuaufbau.

Praktische Einsatzmöglichkeiten von Bricks

Bricks bewährt sich in Projekten, die eigenes Design und dynamische Daten erfordern: Katalogen und Verzeichnissen auf Basis von Custom Fields, vollständig visuell gestalteten WooCommerce-Shops, Unternehmensseiten mit Animationen und bedingter Logik sowie in der Teamarbeit, bei der Designer, Entwickler und Kunde unterschiedlichen Zugriff auf den Builder haben.

Dynamische Kataloge und Verzeichnisse auf Custom Fields

Ein Katalog mit hunderten Einträgen und benutzerdefinierten Feldern – etwa ein lokales Restaurantverzeichnis – entsteht in Bricks aus der Kombination von Query Loop Builder, Dynamic Data sowie AJAX-Filterung und -Sortierung. Die Live Search ergänzt das Ganze um eine Suche mit sofortigen Ergebnissen.

Ein solcher Aufbau zeigt, filtert und sortiert große Datenmengen ohne Neuladen der Seite und ohne mehrere Plugins zusammenzuflicken. In der Community werden Kataloge beschrieben, die ausschließlich mit Bricks und einem einzigen Custom-Fields-Plugin gebaut wurden.

Visuell gestaltete WooCommerce-Shops

Ein Shop, der sich in jeder Phase der Kaufstrecke durch sein Design abheben soll, erhält in Bricks ein einheitliches Erscheinungsbild für Produktseite, Archiv, Warenkorb und Checkout, gestaltet in einer einzigen Oberfläche. Variation Swatches und Interaktionen auf Warenkorb-Ereignisse erweitern diese Ebene um Elemente, die für umfangreiche E-Commerce-Themes typisch sind.

Teamarbeit in Agenturen (Rollen und Berechtigungen)

In einem Projekt, in dem der Designer am Erscheinungsbild arbeitet, der Entwickler implementiert und der Kunde Inhalte bearbeitet, trennt Bricks die Rollen über Builder Capabilities mit mehr als 50 granularen Berechtigungen. Als Gutenberg-Blöcke bereitgestellte Komponenten sowie die Front-End-Administration ermöglichen es dem Kunden, Inhalte sicher zu bearbeiten, ohne Zugriff auf den gesamten Builder-Canvas zu haben.

Integrationen von Bricks mit gängigen Tools

Bricks integriert sich nativ mit gängigen Custom-Fields-Plugins – ACF, Meta Box, JetEngine, Toolset, Pods und ACPT –, die Dynamic Data versorgen, sowie mit WooCommerce über den integrierten WooCommerce Builder. Es unterstützt Mehrsprachigkeit über WPML und Polylang, speichert Daten in einem mit Gutenberg kompatiblen Format und verbindet sich mit Diensten wie Google Maps, Mailchimp oder SendGrid.

Custom-Fields-Plugins und Dynamic Data (ACF, Meta Box, JetEngine)

Dynamic Data in Bricks bezieht Daten aus sechs gängigen Plugins für benutzerdefinierte Felder: Advanced Custom Fields, Meta Box, JetEngine, Toolset, Pods sowie ACPT. Die Integration reicht tief – Felder lassen sich an beliebige Elemente der Website anbinden und in Query Loops verwenden.

Neben benutzerdefinierten Feldern verbindet sich Bricks über integrierte Anbindungen mit externen Diensten: Adobe Fonts, Google Maps, Leaflet, Unsplash, reCAPTCHA, Mailchimp und SendGrid. Seit Version 2.0 sind Formular-Webhooks hinzugekommen, die mit Tools wie Zapier zusammenarbeiten.

Mehrsprachigkeit (WPML, Polylang) und Gutenberg

Bricks integriert sich mit WPML und Polylang und deckt die Übersetzung von Inhalten, Strings und Medien ab. Eine mehrsprachige Website lässt sich also mit einem der beiden Plugins umsetzen, je nach Bedarf des Projekts.

Daten werden in einem mit Gutenberg kompatiblen Format gespeichert, und die Konvertierung Gutenberg–Bricks funktioniert für die meisten Inhalte. Komplexe, in Bricks gebaute Komponenten stehen auch Redakteuren zur Verfügung, die im Block-Editor arbeiten.

Technische Anforderungen und Kompatibilität

Bricks benötigt mindestens PHP 7.4 (empfohlen 8.0 oder neuer), MySQL 5.6+ sowie ein WordPress-Speicherlimit von mindestens 64 MB, empfohlen werden 512 MB. Der Builder funktioniert in aktuellen Versionen von Chrome, Firefox, Safari und Edge, unterstützt Multisite sowie vollständige Lokalisierung mit RTL.

Serveranforderungen (PHP, MySQL, Arbeitsspeicher)

Die beste Performance bietet PHP 8.0 oder neuer, wobei alle stabilen Versionen ab 7.4 unterstützt werden. Die Dokumentation empfiehlt außerdem, die maximale Ausführungszeit bei umfangreichen Vorgängen wie dem Import von Templates auf 180 Sekunden zu erhöhen.

Kompatibilität mit WordPress, WooCommerce und Multisite

Die Bricks-Dokumentation nennt kein festes Minimum für WordPress- oder WooCommerce-Version – empfohlen wird jeweils die aktuelle Versionslinie. Die Changelogs aus dem Jahr 2025 weisen auf laufende Kompatibilität mit den neuesten WooCommerce-Releases hin, und der integrierte WooCommerce Builder unterstützt den vollständigen Satz an Shop-Templates.

Multisite wird unterstützt, wobei jede Subsite eine eigene Aktivierung benötigt. Die Builder-Oberfläche wurde in mehr als 20 Sprachen übersetzt, mit vollständiger RTL-Unterstützung, und Sprache sowie Textrichtung werden separat für den Builder selbst eingestellt.

Häufig gestellte Fragen