Spectra 2.0 – wtyczka do budowania stron na Gutenbergu [Motyw Astra, Kadence Blocks]

Siemaneczko! Dziś opowiem Ci o wtyczce Spectra 2.0. Jest to wtyczka do budowania stron w oparciu o bloki Gutenberga. I może ta wtyczka mieć duży sukces w postaci wielu pobrań z tego względu, że twórcy tej wtyczki są również twórcami najpopularniejszego motywu w repozytorium WordPress – czyli motywu Astra. Filozofia twórców jest podobna jak nasza tutaj. Podobna jak twórców Kadence, Kadence Blocks.

Konkurencja dla Kadence

Czyli chcemy budować w oparciu o natywne rozwiązania WordPress, czyli o Gutenberga. Bez Page Builderów typu Elementor czy Divi. Ale wiemy, że Gutenberg jest jeszcze za słaby, żeby tylko na nim działać. Więc tuningujemy go fajnymi narzędziami, żeby można było wszystko fajnie wyklikać, ale żeby to było szybkie i dobrze działało. Więc pokażę Ci kawałek filmu od Spectra. Przetłumaczę go za chwilę. To będzie tylko 15 sekund i lecimy z konkretami. Już Ci pokazuje wszystko jak to działa. No i też będę porównywał oczywiście do Kadence Blocks, bo jak wiesz lub nie na tym kanale mówimy dużo o Kadence, więc tutaj widzę dużo analogii, dużo podobieństw. No i dla nas to fajnie, że Kadence ma taką konkurencję mocną, no bo to znaczy, że te dwa narzędzia będą się rozwijały.

Co ciekawe jeszcze. Te narzędzia mogą działać ze sobą. Możemy działać na motywie Kadence, na wtyczce Spectra i na wtyczce Kadence Blocks. To taka ciekawostka. Może to być trochę uciążliwe. Co Ci pokaże też w praktyce, więc kawałek filmu od twórców, żeby pokazać Ci filozofię i logujemy się do kokpitu i działamy.

W jakim celu powstaje Spectra

No i tutaj właśnie Ziomek fajnie wytłumaczył, dlaczego zrobili Spectre, żeby uniezależnić się od zewnętrznych Page Builderów, przez które jest troszkę problemów m.in. z performance.

• Przede wszystkim z performance, czyli z wydajnością. Strony zrobione za pomocą Page Builderów nie są tak szybkie jak zrobione po prostu za pomocą bloków Gutenberga.
• Compatibility – czyli kompatybilność. Więc często przy aktualizacjach czy samego np. Elemenora czy jakichś innych dużych WordPressowych. Te wtyczki ze sobą nie współgrają. Nie współgrają też z innymi wtyczkami, więc to jest na pewno spory problem.
• Stabilność tych wtyczek. Ja pracowałem kiedyś na początku na Divi i tutaj o tej stabilność to mogę trochę powiedzieć, bo to był dramat, jak ta wtyczka działała.
• No Uniformity – czyli nie ma tej spójności. Mówiłem wam to parę razy w filmikach, że w momencie gdy możemy sobie budować poszczególne rzeczy za pomocą Page Builderów i wszystko zmieniać, a te Page Buildery nie korzystają z naszych motywów, no to wtedy rozjeżdża się ta spójność, topografia itd. Oczywiście można to poustawiać, ale trzeba mieć pojęcie i nie każdy motyw dobrze z tym współpracuje.
• No i duża krzywa uczenia się. Tu chyba chodzi o to, że trzeba się nauczyć tych Page Builderów. Tutaj taki ostatni argument. Myślę, że trochę na siłę dali.

Ustawienia Spectra 2.0

No dobra przechodzimy do kokpitu i do ustawień Spectry. Mam zainstalowaną, więc klikam ustawienia Spectra. Mam ekran powitany i tutaj jest film Placeholder. No ale to jest wersja beta, więc taki filmik od paru dni wisi. Natomiast to co nas interesuje to m.in. bloki. Bardzo mi się podoba jak to jest tutaj zrobione. Przede wszystkim to, że możemy odpalić bloki których używamy, albo raczej wyłączyć te, których nie używamy. Myślę, że ma to delikatny wpływ na performance, czyli na szybkość ładowania się, bo mniej skryptu się ładuje. Ale i tak to nie jest jakiś obciążający skrypt.

Natomiast to co mi się tu bardzo podoba, to to live demo np. Post Timeline. No to tutaj zobaczymy jak ten Post Timeline będzie wyglądał. Musisz wiedzieć, że tego nie powiedziałem na początku, Spectra to jest kontynuacja wtyczki, która nazywała się Ultimate Addons For Gutenberg i działała już od 2018 roku, więc tutaj twórcy zbudowali to na podstawie tej wtyczki. Natomiast wersja 2.0 różni się dosyć sporo. Wracamy do kokpitu i tutaj właśnie możemy sobie wszystko fajnie podejrzeć. Ciekawe rzeczy dzieją się przy zakładce rozszerzenia.

Tutaj, myślę, że będziemy szli w kierunku dynamicznego kontentu. Akurat tę kwestię ma bardzo rozbudowaną Kadence, więc to jest dosyć zaawansowane, jeśli chodzi o Kadence Blocks. Fajnie to działa. Bardzo dużo z tego korzystam. I myślę, że tutaj też będzie taki kierunek. To jest taka w ogóle ciekawostka. Zobacz, że można korzystać z konkretnych bloków na konkretnych przeglądarkach. To mnie zaciekawiło. Czyli kawałek strony może się nie wyświetlać np. na Google Chrome według tego. No i będę Ci pokazywał w praktyce przy dodawaniu konkretnych bloków co one robią. Szybko przelećmy przez ustawienia. Powiem o kilku najważniejszych.

Copy Paste Styles – czyli podobnie jak w Elementorze możemy skopiować właściwości z danego bloku i wkleić do innego bloku, już mamy takie samo. W Kadence Blocks też oczywiście to jest. Nie oczywiście, ale też to jest, więc Ci mówię.

Z takich ważnych rzeczy to tutaj mamy takie techniczne o generowaniu się assetów. Templates Button. Właśnie, bardzo dużo templatek jeśli chodzi o Spectre. W ogóle Astra akurat słynie z tych startowych templatek, więc to jest mega. Dużo osób budowało za pomocą Elementora i gotowych templatek Astry. No a tutaj jeśli importujemy gotową templatkę, to w tym momencie mamy ją dostosowaną do naszego motywu jak tworzymy to w Gutenbergu. Więc to jest mega, bo to jest już spójne z naszą konwencją strony.

Możemy się zapisać do programu beta. Ja się zapisałem, czyli pobrałem betę i jeszcze się zapisałem do programu beta, więc będę dostawał powiadomienia. Tutaj mamy odnośnie fontów performance, czyli możemy załadować te fonty lokalnie. No i mamy jeszcze reCAPTCHA wersje drugą albo trzecią do natywnych formularzy, które są w Spectra.

A także możemy ustawić stronę Coming Soon, czyli w momencie gdy mamy stronę w budowie. Myślę, że twórcy WP Spectry czytali trochę prośby na forum Kadence. Bo co ciekawe, użytkownicy oczekują tego, że będzie taka opcja w Kadence Blocks, że właśnie będzie można Coming Soon ustawić. Nie wiem dlaczego to jest takie ważne, ale ma dosyć dużo głosów na tamtym forum.

OK. Przejdźmy do strony, żeby dodać nową. Pokażę Ci te bloki w praktyce. Jakie ja widzę różnice na pierwszy rzut oka, bo nie robiłem jeszcze strony dla klienta żadnej na WP Spectrze. Tak naprawdę nie wiem czy zrobię, bo jestem mocno zakotwiczony w Kadence Blocks, ale na pewno to jest fajna ciekawostka i dobra konkurencja właśnie dla Kadence Blocks i mam nadzieję, że twórcy będą od siebie troszkę, nie ściągali, ale inspirowali się i nakręcali. Przede wszystkim w Kadence dużo bardziej rozwinięty jest Dynamic Content i WP Astra to znaczy WP Spectra nie ma jeszcze wersji Pro, nie?

Chciałem Ci pokazać taką ciekawostkę jaką jest Container. To jest odpowiednik Row Layout. Na pierwszy rzut oka widzimy, że inaczej jest rozwiązana kwestia dwóch linijek, bo tutaj żeby mieć po prostu coś w dwóch linijkach, czy dwóch wierszach trzeba po prostu stworzyć dwa razy Row Layout. Czyli w momencie gdy tu klikniemy, to w tym momencie musimy kliknąć najpierw tak, a potem jeszcze jeden Row Layout i potem tak. No i możemy tutaj sobie po prostu dodawać kolejne bloki, tak jak to zwykle bywa. Więc ja tutaj dodam jakieś Social Share i menu. I wygląda to w ten sposób. Co teraz? Price List. Klikamy podgląd. Będzie to dobrze działało na responsive, czyli na wersjach mobilnych. OK. Klikamy tak. To wszystko nam się będzie przesuwało, wiec całkiem ok to działa, już od pierwszego dodania. To co jest ważne, to przede wszystkim to, że te bloki biorą style z Twojego motywu, czyli z opcji dostosuj. Ja mam tu akurat Kadence Theme i fajnie, że mi się to wszystko uzupełnia, więc teoretycznie mogę pracować na WP Astra, Kadence Blocks.

Tu jest jeszcze jedna wtyczka do bloków Gutenberga. Natomiast może być to troszkę utrudnione z tego względu, że zobacz: klikam dodaj i klikam info np. i mam Info Box z Kadence mam Info Box z Spectry i mam Info Box z tego trzeciego dodatku. I to może być trochę uciążliwe i może się mylić. Natomiast można to też mieszać. No i oczywiście jeśli skasujesz konkretną wtyczkę, no to te bloki mogą wyglądać troszkę inaczej.

Container – ustawienia

Dobra, przejdźmy do ustawień samego tego kontenera. Klikam tutaj koło zębate, żeby to było. I to jest ciekawa rzecz, która nie wiem czy do końca poprawnie jeszcze działa, akurat z tym motywem. Natomiast to co ja zawsze robiłem, być może widziałe(a)ś moje poprzednie filmiki. To widać to np. na filmie “Zbuduj stronę jak z klocków – Kadence Blocks” w opisie albo u góry będzie link do tego filmu. No i tam buduje sobie kawałek strony i żeby na całą szerokość był obrazek a w środku był tekst i jakieś tam inne itemy – czyli kontent. No to muszę zrobić Row Layout i w środku kolejny Row Layout. Czyli ten pierwszy Row Layout jest na całą szerokość, a ten drugi Row Layout jest na szerokość, którą mam ustawioną w motywie.

Powoduje to, że kolor mam na całą szerokość, ale to co się dzieje w środku mam tylko na szerokość motywu. A tutaj jest to zrobione za pomocą jednego kliknięcia, bo mam Container – Full Width a Content – Boxed. Więc jak sobie wezmę na Full Width to mam na całą szerokość, nie? Czyli to mi powoduje ułatwienie, że mogę sobie wziąć style -> color i tutaj dodać kolor z palety. No i tutaj ważna rzecz, którą podkreślają też twórcy, że są to kolory z palety motywu. Czyli wszystko jest spójne, bo ja właśnie sobie ustawiłem takie kolorki w Kadence i teraz mogę z nich po prostu korzystać. No i mam na całą szerokość kolor i na określoną szerokość zawartość tego kontenera. Pokażę Ci jak to wygląda w podglądzie. No mniej więcej podobnie po prostu, że to nie jest na całą szerokość. To jest na pewno fajne i wygodne.

Flex Box

I tutaj rozbudowa Flex jest bardzo.. No dużo opcji mamy w porównaniu do Kadence. Jeśli chodzi o Kadence, to niedawno, czyli niecały miesiąc temu, patrzę na datę, wprowadzili też Flex Boxy i trochę inaczej używamy section. Już Ci pokazuję, ale żeby tak nie za bardzo odbiegać od tematu. Troszkę inaczej używamy tego co się dzieje, jak dodamy Row Layout. O, to jest Section i ona też może się ułożyć we Flex Boxie, albo z góry na dół, albo do boku.

Chodzi o to, że coś tam się jakieś elementy tutaj układają według jakiegoś kolejności i też potem na mobile się przesuwają według jakiejś kolejności. Teraz będzie ciężko to pokazać, bo tam nierówne te elementy i się pewnie będzie rozsypywało. Zobacz. Tutaj jest taka kolejność, że wszystko się układa z góry na dół. Przed chwilą od lewej do prawej, teraz z góry na dół, teraz od prawej do lewej i też z dołu do góry. Potem możemy dalej się tym pobawić i ten content w zależności od tego co masz tu ustawione, albo będzie reagował albo nie. Ale tutaj mamy już dużo opcji. To jest fajne. Tu jest w ogóle ciekawie to podzielone, że mamy Styl: i tutaj mamy jakieś rzeczy typu Border, typu Shape Dividers, czyli jakieś odstępy. No i też ciekawe to jest i dużo tych opcji tutaj mamy.

Advanced Image

To co jest też ciekawe to Advanced Image. Jeśli kojarzysz Advanced Image z Kadence, to na pewno znajdziesz tutaj wiele podobieństw, bo zobacz jak to wygląda. Możemy tutaj dodać z biblioteki mediów, albo prześlij. Co ciekawe bierze tłumaczenia z motywu. Jeśli chodzi o Kadence, no to nie bierze tłumaczeń z motywu. I tutaj mamy jakieś rzeczy. I zobacz na ustawienia. Layout. OK. Tutaj możemy sobie alt ustawić, co się dzieje na Hoverze. Przybliża się troszkę.

Ustawienia Mask w Spectra 2.0

No ale Mask chciałem Ci pokazać, bo tutaj jest prawie dokładnie tak samo, tylko są Blob-y 4. A jeśli chodzi o Kadence to są 3 i tutaj może tak się to zmieniać. I bardzo fajnie to wygląda. Akurat lubię te Bloby. A zresztą mogę pokazać od razu. Advanced Image. To jest to, że teraz trzeba pamiętać, żeby kliknąć w niebieskie. I tutaj masz po prostu tłumaczenie z Kadence bezpośrednio a nie z motywu. Dlatego nie jest po polsku. To jest taka ciekawostka, że to jest inaczej napisane.

Znowu ten sam obrazek. No i tutaj mamy znowu bardzo podobne opcje, tylko tu jest to inaczej zrobione i nie ma tego podziału na jeszcze takie trzy taby jakby, nie? Tutaj mask. Widzisz podobne rzeczy. I tu też możesz w ogóle swój custom, czyli masz obrazek w jakim kształcie. Wybierasz ten obrazek i w takim samym kształcie jest ten obrazek. Tutaj też można tak zrobić. Patrz. Klikam i.. Kurcze, aa tutaj.. Sorry, że tak się gubię. Tu też masz custom, nie? No tutaj gdzie to ma być. Jakie ma być duże, jak ma się powtarzać. No więc tutaj mamy też kilka ciekawych opcji. Ja sobie to trochę pokasuję, bo mi się tutaj bałagan zrobił.

Póki co nie mamy jeszcze informacji o wersji Pro tego produktu. Jeśli chodzi o WP Spectre, ale mamy już tutaj dużo opcji w wersji darmowej, co jest na pewno spoko. Bardzo podoba mi się Template Kits. Myślę, że jest ładniejsze od Kadence Blocks. Jeśli ktoś nie koduje stron, nie klika nawet stron za pomocą projektów graficznych, albo nie ma jakieś takiego zamysłu czy wizji, to może bardzo mu się to przydać, bo tego jest naprawdę tutaj sporo. Jeśli będziemy importować, to będzie nam się, będą nam się brały ustawienia z motywu, więc całkiem spoko, że jest aż tego tyle. To są konkretne strony. Mamy też konkretne Patterny, czyli sekcje od Astry i też jest tego naprawdę sporo. Naprawdę tutaj Astra zrobiła robotę, jeśli chodzi o darmową opcję. I też mamy podobnie jak w Kadence Blocks Wireframes, czyli takie jakby Placeholdery i taką przykładową strukturę strony, którą możemy pokazać dla klienta. Całkiem spoko opcja. Jestem muszę wam powiedzieć, pod wrażeniem. Zobaczcie design, jeśli chodzi o Kadence.

To co różni te dwie wtyczki, to właśnie to. Tu mamy zaimportowane takie customowe bloki jakiegoś kolesia. No i też możesz w Kadence Cloud odpalić swoje bloki i albo je sprzedawać, albo samemu z nich korzystać. Czyli robiłe(a)ś dla klientów jakiejś już strony i tam masz swoje bloki, których używasz do konkretnych projektów. To jest bardzo fajna, bardzo fajna opcja. Tak jako anegdotkę Ci powiem. No i tutaj jest też Wireframes, ale tych bloków jest mniej i nie wyglądają tak dobrze jak te właśnie od Astry. A wiem, że ludzie na to zwracają mocno uwagę, więc można też pracować na tej wtyczce i na tej. Myślę, że całkiem spoko, ciekawa opcja mogłaby być jeśli by się pracowało na tej. Ja chyba sobie spróbuję, tak sobie myślę. Chociaż nie wiem czy będę miał taką potrzebę i zobaczę jak to przede wszystkim wpływa na wydajność. Więc jeśli zrobię jakieś testy to na pewno się z Tobą podzielę. Czy strona się dużo wolniej ładuje ze wszystkimi blokami, czy nie.

No i to tyle dzisiaj, więc możesz sobie na spokojnie przejrzeć te bloki zapisując się do programu startowego Astry. Nie startowego tylko Beta. Link zostawię Ci w opisie. Jeśli nie subskrybujesz tego kanału to koniecznie. A my widzimy się w szkole Gutenberga. Jeśli zapiszesz się na listę email albo w kolejnych filmach. Do miłego zobaczenia. Hej.