Na naszym blogu wielokrotnie poruszaliśmy temat page builderów w WordPressie. Testowaliśmy Divi od podszewki, porównywaliśmy Divi z Gutenbergiem, a także przyglądaliśmy się Gutenbergowi kontra płatne page buildery. Temat jest wciąż żywy, bo wybór narzędzia do budowy stron ma ogromny wpływ na wydajność serwisu, wygodę pracy i ostateczny efekt wizualny.

Dziś weźmiemy pod lupę Spectra – page builder, który w ostatnich miesiącach zyskuje coraz większą popularność w społeczności WordPressa. Twórcy tego narzędzia (Brainstorm Force – ci sami, którzy stoją za motywem Astra) obiecują, że Spectra łączy prostotę natywnego edytora Gutenberg z zaawansowanymi możliwościami płatnych builderów. Brzmi dobrze, ale czy tak jest w rzeczywistości?

Postanowiłem zainstalować Spectrę na serwisie testowym i sprawdzić, co dokładnie oferuje, jak wypada w porównaniu z Elementorem i Divi, oraz czy faktycznie może być darmową alternatywą dla tych płatnych rozwiązań.

Czym dokładnie jest Spectra?

Spectra to wtyczka, która rozszerza natywny edytor bloków WordPress (Gutenberg) o dodatkowe bloki, szablony i narzędzia projektowe. W przeciwieństwie do Elementora czy Divi, Spectra nie zastępuje edytora WordPress’a własnym interfejsem – zamiast tego integruje się bezpośrednio z Gutenbergiem.

To kluczowa różnica. Elementor i Divi tworzą własne, odseparowane środowiska edycji, co wiąże się z dodatkowym kodem JavaScript i CSS ładowanym na stronie. Spectra natomiast korzysta z natywnych mechanizmów WordPressa, co teoretycznie powinno przekładać się na lepszą wydajność i szybkość ładowania strony.

Moduł dostępny jest w dwóch wersjach:

  • Spectra Free – darmowa wersja z ponad 30 blokami, gotowymi szablonami i podstawowymi ustawieniami projektowymi,
  • Spectra Pro – wersja płatna z dodatkowymi blokami, zaawansowanymi opcjami stylizacji, dynamiczną treścią i priorytetowym wsparciem.

Warto podkreślić, że darmowa wersja Spectry oferuje naprawdę spory zestaw funkcji. To nie jest typowa „wersja demo”, w której najważniejsze rzeczy są zablokowane – większość bloków i szablonów jest dostępna bez płacenia.

Instalacja i pierwsze uruchomienie

Instalacja Spectry przebiega standardowo, jak w przypadku każdej wtyczki z repozytorium WordPress.

Przechodzimy do “Wtyczki” → “Dodaj nową” i wyszukujemy “Spectra”. Po zainstalowaniu i aktywowaniu, w panelu bocznym WordPressa pojawi się nowa pozycja “Spectra”.

Po aktywacji Spectra uruchomi kreator konfiguracji, w którym możemy wybrać, które bloki chcemy aktywować. To przydatne rozwiązanie – nie musimy ładować wszystkich bloków, jeśli korzystamy tylko z kilku. To kolejny plus pod kątem wydajności.

W ustawieniach głównych znajdziemy również sekcję z gotowymi szablonami stron i sekcji – Design Library. Spectra oferuje bibliotekę podzieloną na zakładki: Patterns (gotowe sekcje), Pages (kompletne podstrony), Kits (zestawy projektowe) oraz Favorites (ulubione).

Ważna uwaga: aby uzyskać dostęp do biblioteki szablonów, Spectra wymaga założenia darmowego konta na platformie ZipWP (należącej do Brainstorm Force). Po kliknięciu „Get Started” zostaniemy przekierowani do rejestracji – jest całkowicie bezpłatna. Po zalogowaniu uzyskujemy dostęp do setek gotowych wzorców, a dodatkowo otrzymujemy darmowe kredyty AI do generowania treści i dostęp do biblioteki zdjęć stockowych.

Dla osób, które wolą nie zakładać konta – sama wtyczka Spectra z blokami działa w pełni bez rejestracji. Konto ZipWP jest potrzebne wyłącznie do korzystania z biblioteki gotowych szablonów.

Dostępne bloki i funkcjonalności

Spectra w darmowej wersji oferuje naprawdę pokaźną listę bloków. Nie będę wymieniał wszystkich, ale skupię się na tych, które wyróżniają się na tle domyślnych bloków Gutenberga:

Bloki układu i struktury:

  • Container – zamiennik domyślnej grupy/kolumn, z zaawansowanymi opcjami paddingu, marginesów, tła i obramowania,
  • Advanced Columns – responsywne kolumny z pełną kontrolą nad układem na różnych urządzeniach.

Bloki treści:

  • Info Box – połączenie ikony, nagłówka i opisu w jednym eleganckim bloku,
  • Icon List – listy z ikonami zamiast standardowych punktorów,
  • Tabs – zakładki z treścią, przydatne np. do prezentacji specyfikacji produktów,
  • FAQ (Schema) – blok FAQ z automatycznym dodawaniem znaczników Schema.org – świetna sprawa pod SEO.

Bloki wizualne:

  • Image Gallery – galeria z różnymi układami (siatka, masonry, karuzela),
  • Counter – animowane liczniki,
  • Testimonials – sekcja z opiniami klientów.

Z mojego doświadczenia, bloki Container i Info Box to te, po które sięgam najczęściej. Container daje znacznie więcej kontroli nad układem strony niż domyślny blok Gutenberga, a Info Box pozwala szybko tworzyć sekcje z usługami czy funkcjonalnościami bez konieczności ręcznego stylowania.

Test w praktyce – budujemy podstronę

Aby rzetelnie ocenić Spectrę, postanowiłem zbudować prostą podstronę – stronę typu „O firmie” z kilkoma sekcjami: hero z nagłówkiem i tłem, sekcja z trzema kolumnami opisującymi usługi, sekcja z opiniami klientów i formularz kontaktowy.

Zaczynam od bloku Container, ustawiam tło jako obraz z efektem overlay (przyciemnienie), dodaję wewnątrz blok Heading i Button. W ustawieniach Container’a mogę precyzyjnie określić padding, kolor overlay oraz wyrównanie treści.

Efekt wizualny jest bardzo zbliżony do tego, co osiągnęlibyśmy w Elementorze czy Divi. Różnica polega na tym, że cały czas pracujemy w natywnym edytorze WordPressa – nie przeskakujemy do oddzielnego interfejsu.

Sekcja usług

Dodaję kolejny Container, a w nim trzy bloki Info Box ułożone w kolumnach. Każdy Info Box zawiera ikonę, nagłówek i krótki opis. Mogę wybrać ikony z biblioteki Font Awesome, dostosować kolory i rozmiary.

Sekcja opinii

Do sekcji z opiniami wykorzystuję blok Testimonials. Konfiguruję go jako karuzele z automatycznym przewijaniem. Dodaję imiona, zdjęcia i treści opinii.

Efekt końcowy

Po około 30 minutach pracy mam gotową, profesjonalnie wyglądającą podstronę. Ważne – cały czas pracowałem wyłącznie w edytorze Gutenberg, bez konieczności instalowania dodatkowego page buildera.

Muszę przyznać, że tempo pracy ze Spectrą jest naprawdę dobre. Brak konieczności przełączania się między edytorem WordPressa a osobnym interfejsem page buildera to spora oszczędność czasu.

Wydajność strony zbudowanej w Spectra

Skoro mamy gotową podstronę, sprawdźmy, jak wypada pod kątem wydajności. Przepuściłem ją przez PageSpeed Insights – narzędzie Google’a do analizy szybkości ładowania.

Wyniki dla wersji stacjonarnej są bardzo dobre: wydajność na poziomie 88/100, First Contentful Paint 0,9s, LCP 1,2s, Total Blocking Time 0ms i zerowe przesunięcia układu (CLS 0). Sprawdzone metody to pełne 100/100.

W wersji mobilnej wynik wydajności to 71/100, co jest typowym rezultatem – Google znacznie surowiej ocenia wersje mobilne. FCP utrzymuje się na dobrym poziomie 1,0s, TBT to nadal 0ms, a CLS wynosi 0. Problematyczne okazały się natomiast LCP (6,6s) i Speed Index (6,2s) – oba na czerwono. To najczęściej kwestia optymalizacji obrazów i serwera, a nie samej wtyczki Spectra.

Co warto podkreślić: Total Blocking Time wynosi 0ms zarówno na mobile, jak i desktopie. To potwierdza, że Spectra nie dokłada ciężkiego JavaScriptu blokującego renderowanie strony – w przeciwieństwie do builderów, które ładują własne frameworki. Ułatwienia dostępu (100 na mobile, 96 na desktopie) i sprawdzone metody (100/100 w obu przypadkach) to również mocne punkty.

Wyniki te dotyczą strony testowej bez dodatkowej optymalizacji – bez wtyczki cache’ującej, bez CDN-a, bez kompresji obrazów. Po zastosowaniu standardowych technik optymalizacyjnych, te liczby mogłyby być jeszcze lepsze.

Podsumowanie

Spectra to solidny page builder, który świetnie sprawdzi się jako rozszerzenie Gutenberga. Największe atuty to wydajność (brak dodatkowego frameworka), integracja z natywnym edytorem WordPressa oraz bogata darmowa wersja. Jeżeli dopiero zaczynacie swoją przygodę z tworzeniem stron na WordPressie, lub szukacie lżejszej alternatywy dla Elementora czy Divi – gorąco zachęcam do przetestowania.

Oczywiście, jeżeli ktoś jest zaawansowanym użytkownikiem Divi lub Elementora i korzysta z ich zaawansowanych funkcji na co dzień – przesiadka na Spectrę może nie mieć większego sensu. Ale jako darmowa opcja dla nowych projektów? Zdecydowanie warto mieć ją na uwadze.

Jeżeli macie inne pytania odnośnie tworzenia stron internetowychadministracji stron internetowych lub pozycjonowaniem stron śmiało piszcie do nas.

Mateusz Adamski

Mateusz Adamski

Frontend Developer, Specjalista SEO. Od 2009 roku zajmuję się pozycjonowaniem oraz optymalizacją stron internetowych. Od 2012 roku specjalizuję się w tworzeniu stron i sklepów internetowych opartych na systemach CMS WordPress oraz Prestashop. Posiadam dobrą znajomość HTML5, CSS3, Bootstrap. Dysponuję również dużym doświadczeniem z programami Adobe Photoshop, Dreamweaver oraz CorelDRAW. Prywatnie jestem dużym fanem fotografii oraz motoryzacji. Od 2013 roku udzielam się jako klubowicz oraz moderator ogólnopolskiego klubu motoryzacyjnego. Masz jakieś pytania? Napisz do nas.