Szablon Bricks Builder - 2.3.8

Bricks to wizualny site builder dla WordPressa dostarczany w formie motywu – zastępuje motyw witryny i pozwala zbudować całą stronę, od headera po footer, z jednego interfejsu drag & drop. Jest przeznaczony dla web developerów, agencji i freelancerów, którym zależy na czystym kodzie HTML/CSS i wysokiej wydajności.

Czym jest Bricks i jak działa jako motyw

Bricks jest wizualnym site builderem dostarczanym w formie motywu WordPress, a nie wtyczki – zastępuje motyw witryny w całości. Odpowiada zarówno za warstwę projektową, jak i strukturę całej strony, od headera przez treść po footer. Takie podejście eliminuje dublowanie kodu typowe dla układu „motyw plus builder”, a to jedno z głównych źródeł jego wydajności.

Produkt powstał w 2021 roku. Rozwija go Codeer Limited – firma z siedzibą na Cyprze, założona przez Thomasa Ehriga. Model rozwoju jest jawnie społecznościowy: publiczny idea board i otwarty roadmap pozwalają zgłaszać pomysły oraz głosować na kierunek kolejnych wydań.

Motyw, nie wtyczka — co to oznacza w praktyce

Bricks instaluje się jak każdy motyw WordPress i korzysta ze standardowej struktury szablonów. Zamiast jednak doklejać warstwę buildera do istniejącego motywu, sam przejmuje jego rolę. W praktyce znika równoległa warstwa „temat plus plugin”, a więc i nadmiar generowanego kodu na froncie.

To rozróżnienie ma swoje konsekwencje przy migracji. Przejście na Bricks z page buildera działającego jako wtyczka to zmiana motywu, a nie dodanie kolejnego dodatku.

Silnik bez jQuery (Vue.js 3) i czysty kod na wyjściu

Bricks działa na froncie bez jQuery – interfejs buildera oparto na Vue.js 3, a sam output to lekki, semantyczny HTML/CSS. Mniej zbędnych znaczników, brak ciężkich bibliotek. Efekt? Szybsze ładowanie i wysokie wyniki PageSpeed.

Użytkownicy raportują rezultaty rzędu 95–99 punktów, i to bez sięgania po rozbudowane wtyczki cache. Czysty kod ułatwia później utrzymanie projektu.

Możliwości Bricks

Bricks obejmuje wizualne full site editing, design system oparty na klasach i zmiennych CSS, Query Loop Builder z dynamic data, natywny WooCommerce Builder, reużywalne komponenty oraz ponad 110 wbudowanych elementów. Większość funkcji, które w innych konfiguracjach wymagają osobnych wtyczek – SEO, popupy, menu, ochrona hasłem – siedzi tu wbudowana wprost w motyw.

• Wizualne full site editing – budowa headerów, footerów, archiwów, pojedynczych wpisów i popupów z jednego interfejsu drag & drop, z zagnieżdżalnymi elementami i edycją w panelu struktury.
• Design system na klasach i zmiennych CSS – Class & Variable Manager pozwala zmieniać nazwy, duplikować, importować i eksportować klasy oraz kopiować je między stronami.
• Query Loop Builder – wizualne odpytywanie bazy WordPress lub własne zapytanie PHP, z opcjami load more, infinite scroll i paginacją AJAX.
• Dynamic Data – zasilanie dowolnej części witryny custom fieldami z ACF, Meta Box, JetEngine, Toolset, Pods i ACPT.
• WooCommerce Builder – wizualne projektowanie stron sklepu, produktu, koszyka, checkoutu i konta klienta, z variation swatches od wersji 2.0.
• Komponenty i sloty – reużywalne komponenty z wariantami stylów, zagnieżdżaniem od 2.0 oraz udostępnianiem jako bloki Gutenberga (Components as Blocks).
• Visual CSS Grid Builder – od wersji 2.0 wizualne projektowanie siatek metodą drag & drop dla wierszy, kolumn i treści w pętli.
• Conditions i Interactions – warunkowa treść z relacjami AND/OR oraz triggery na klik, hover i scroll bez pisania kodu.
• Fluid typography i spacing – skalowalne skale typografii i odstępów zamieniane automatycznie na zmienne CSS.
• Wbudowane SEO, Open Graph, popupy, menu builder i ochrona hasłem – funkcje zastępujące osobne wtyczki w typowym projekcie.

Budowa całej witryny i responsywne layouty (Flexbox, CSS Grid)

Cały projekt powstaje w jednym builderze – od menu i headera, przez sekcje treści, po footer i strony archiwów. Layouty buduje się na Flexboksie i CSS Grid, ręcznie albo wizualnie przez Visual CSS Grid Builder dostępny od wersji 2.0.

Responsywność opiera się na własnych, nieograniczonych breakpointach. Bricks dopuszcza podejście desktop-first lub mobile-first, a widok edytuje się na każdym punkcie łamania bezpośrednio w builderze.

Design system — klasy CSS, zmienne i fluid typography

Stylowanie w Bricks opiera się na klasach CSS i zmiennych, a nie na ustawieniach przypisanych do pojedynczego elementu. Class & Variable Manager grupuje klasy, rozwiązuje konflikty nazw i przenosi je między projektami przez import, eksport oraz copy&paste.

Zmienne CSS edytuje się w jednym miejscu, a zmiana odbija się na całej witrynie. Fluid typography i spacing skalują się płynnie od desktopu do mobile i trafiają automatycznie do zmiennych oraz klas użytkowych.

Query Loop Builder i dynamic data

Query Loop Builder pozwala wizualnie odpytać bazę danych WordPress – wpisy, użytkowników, media, taksonomie i custom fields – albo napisać własne zapytanie PHP dla bardziej złożonych przypadków. Do tego dochodzi AJAX-owe filtrowanie i sortowanie oraz Live Search z natychmiastowymi wynikami podczas pisania.

Dynamic Data zasila dowolny element witryny danymi z pól niestandardowych. Głęboka integracja z popularnymi wtyczkami custom fields sprawia, że dynamiczne katalogi czy dyrektoria powstają niemal bez dodatkowych narzędzi.

WooCommerce Builder i e-commerce

WooCommerce Builder pozwala zaprojektować wizualnie wszystkie szablony sklepu – stronę sklepu, pojedynczego produktu, archiwa, koszyk, checkout i konto klienta – w tym samym interfejsie co reszta witryny. Cała ścieżka zakupowa dostaje spójny, własny wygląd bez sklejania wielu wtyczek.

Od wersji 2.0 doszły wbudowane variation swatches – kolor, obraz lub etykieta tekstowa dla produktów wariantowych – oraz interakcje reagujące na zdarzenia koszyka, takie jak dodanie produktu czy zastosowanie kuponu.

Kiedy warto wybrać Bricks

Bricks sprawdza się najlepiej u web developerów, agencji i zaawansowanych freelancerów, którzy chcą budować wizualnie, ale potrzebują pełnej kontroli nad klasami CSS, własnym kodem i czystym, semantycznym HTML. Wyraźnie mniej trafiony okaże się dla całkowicie początkujących bez znajomości HTML i CSS – krzywa uczenia jest tu stroma.

Developerzy, agencje i twórcy zorientowani na wydajność

Web developerzy budujący strony klienckie zyskują w Bricks pełną kontrolę nad klasami CSS, własnym CSS, JS i PHP, a przy tym zachowują wizualny workflow. Połączenie dynamic data z query loop otwiera drogę do zaawansowanych, dynamicznych stron niemal bez dodatkowych wtyczek.

Agencje korzystają z reużywalnych komponentów, design setów, remote templates oraz kontroli dostępu opartej na Builder Capabilities. Twórcy zorientowani na wydajność i SEO doceniają czysty kod, brak jQuery oraz wbudowane SEO i lazy loading – wszystko to przekłada się na wysokie wyniki w Core Web Vitals.

Migracja z Elementora, Divi czy Oxygen

Bricks to typowy kierunek migracji dla osób, którym ciążył nadmiar kodu i niskie wyniki szybkości w klasycznych page builderach. Zapisuje też dane w formacie zgodnym z Gutenbergiem, z konwersją działającą w obie strony.

Uwaga o migracji: Bricks nie ma natywnej, automatycznej migracji 1:1 z Elementora, Divi czy Oxygen – przejście oznacza w praktyce przebudowę stron od podstaw, nie konwersję jednym kliknięciem.

Dla kogo Bricks nie jest najlepszym wyborem

Stroma krzywa uczenia sprawia, że część projektów lepiej oprzeć na prostszych narzędziach.

• całkowici początkujący nieznający HTML i CSS – Bricks jest w istocie nakładką na HTML i CSS, a pełnię możliwości otwiera dopiero rozumienie klas, zmiennych i komponentów;
• projekty oparte na gotowych, bogatych bibliotekach szablonów „pod klucz” – Bricks zakłada budowę od czystej kartki i ma mniejszą bibliotekę szablonów niż liderzy rynku;
• zespoły, w których treść edytują nietechniczni klienci bez przygotowania – edycja w canvasie bywa wymagająca, choć Components as Blocks i administracja z frontu częściowo to łagodzą;
• sytuacje wymagające szybkiej migracji 1:1 z innego buildera – brak automatycznej konwersji oznacza przebudowę.

Praktyczne zastosowania Bricks

Bricks sprawdza się w projektach wymagających własnego designu i dynamicznych danych: katalogach i dyrektoriach opartych na custom fields, sklepach WooCommerce projektowanych w całości wizualnie, stronach firmowych z animacjami i logiką warunkową oraz w pracy zespołowej, gdzie designer, developer i klient mają różny zakres dostępu do buildera.

Dynamiczne katalogi i dyrektoria na custom fields

Katalog z setkami wpisów i polami niestandardowymi – choćby lokalny spis restauracji – powstaje w Bricks z połączenia Query Loop Builder, Dynamic Data oraz AJAX-owego filtrowania i sortowania. Live Search dokłada wyszukiwanie z natychmiastowymi wynikami.

Taki układ wyświetla, filtruje i sortuje duże zbiory danych bez przeładowań i bez sklejania wielu wtyczek. Społeczność opisuje katalogi zbudowane wyłącznie na Bricks i jednej wtyczce custom fields.

Sklepy WooCommerce projektowane wizualnie

Sklep, który ma wyróżniać się designem na każdym etapie ścieżki zakupowej, dostaje w Bricks spójny wygląd strony produktu, archiwum, koszyka i checkoutu, zaprojektowany w jednym interfejsie. Variation swatches i interakcje na zdarzenia koszyka rozszerzają tę warstwę o elementy typowe dla rozbudowanych motywów e-commerce.

Praca zespołowa agencji (role i uprawnienia)

W projekcie, gdzie designer pracuje nad wyglądem, developer implementuje, a klient edytuje treść, Bricks rozdziela role przez Builder Capabilities z ponad 50 granularnymi uprawnieniami. Komponenty udostępniane jako bloki Gutenberga oraz administracja z frontu pozwalają klientowi bezpiecznie edytować treść bez dostępu do całego canvasu buildera.

Integracje Bricks z popularnymi narzędziami

Bricks integruje się natywnie z popularnymi wtyczkami custom fields – ACF, Meta Box, JetEngine, Toolset, Pods i ACPT – które zasilają dynamic data, oraz z WooCommerce przez wbudowany WooCommerce Builder. Obsługuje wielojęzyczność przez WPML i Polylang, zapisuje dane w formacie zgodnym z Gutenbergiem i łączy się z usługami takimi jak Google Maps, Mailchimp czy SendGrid.

Wtyczki custom fields i dynamic data (ACF, Meta Box, JetEngine)

Dynamic Data w Bricks czerpie dane z sześciu popularnych wtyczek pól niestandardowych: Advanced Custom Fields, Meta Box, JetEngine, Toolset, Pods oraz ACPT. Integracja sięga głęboko – pola podpina się pod dowolny element witryny i wykorzystuje w pętlach zapytań.

Poza polami niestandardowymi Bricks łączy się z usługami zewnętrznymi przez wbudowane integracje: Adobe Fonts, Google Maps, Leaflet, Unsplash, reCAPTCHA, Mailchimp i SendGrid. Od wersji 2.0 doszły webhooki formularzy współpracujące z narzędziami typu Zapier.

Wielojęzyczność (WPML, Polylang) i Gutenberg

Bricks integruje się z WPML i Polylang, obejmując tłumaczenie treści, stringów oraz mediów. Witryna wielojęzyczna powstaje więc przy użyciu dowolnej z tych dwóch wtyczek, w zależności od potrzeb projektu.

Dane zapisywane są w formacie zgodnym z Gutenbergiem, a konwersja Gutenberg–Bricks działa dla większości treści. Złożone komponenty zbudowane w Bricks trafiają też do edytorów pracujących w edytorze blokowym.

Wymagania techniczne i kompatybilność

Bricks wymaga PHP w wersji minimum 7.4 (rekomendowane 8.0 lub nowsze), MySQL 5.6+ oraz limitu pamięci WordPress co najmniej 64 MB, z rekomendacją 512 MB. Builder działa w aktualnych wersjach przeglądarek Chrome, Firefox, Safari i Edge, obsługuje multisite oraz pełną lokalizację z RTL.

Wymagania serwerowe (PHP, MySQL, pamięć)

Najlepszą wydajność daje PHP 8.0 lub nowsze, choć obsługiwane są wszystkie stabilne wersje od 7.4 w górę. Dokumentacja sugeruje też podniesienie maksymalnego czasu wykonania do 180 sekund przy dużych operacjach, takich jak import szablonów.

Kompatybilność z WordPress, WooCommerce i multisite

Dokumentacja Bricks nie podaje sztywnego minimum wersji WordPress ani WooCommerce – rekomendowana jest aktualna linia obu. Changelogi z 2025 roku wskazują na bieżącą zgodność z najnowszymi wydaniami WooCommerce, a wbudowany WooCommerce Builder obsługuje pełny zestaw szablonów sklepu.

Multisite jest obsługiwane, przy czym każda subwitryna wymaga osobnej aktywacji. Interfejs buildera przetłumaczono na ponad 20 języków z pełnym wsparciem RTL, a język i kierunek tekstu ustawia się osobno dla samego buildera.

Najczęściej zadawane pytania