Wybór odpowiedniego motywu WordPressa jest kluczowy dla każdej strony internetowej, ponieważ wpływa na jej wygląd, funkcjonalność i wydajność. Astra i Kadence to dwa z najpopularniejszych motywów WordPressa, które zdobyły szerokie uznanie wśród twórców stron internetowych. Astra ma obecnie ponad milion aktywnych instalacji, natomiast Kadence ponad 300 000.

W tym artykule porównamy te dwa motywy i spróbujemy odpowiedzieć na pytanie czy jeden z nich jest lepszy od drugiego, a także który z tych motywów wybrać dla strony firmowej.

Astra vs. Kadence – strony startowe

Jednym z kluczowych elementów, które mogą pomóc w szybkim rozpoczęciu pracy z nowym motywem WordPressa, są gotowe strony startowe. Astra i Kadence oferują bogate biblioteki predefiniowanych szablonów, które można łatwo zaimportować i dostosować do swoich potrzeb.

Część tych zestawów szablonów, jak również opcji personalizacji, dostępnych jest tylko w wersjach płatnych motywów. W tym artykule skupię się wyłącznie na funkcjonalnościach, które są dostępne bezpłatnie.

Astra posiada ponad 130 bezpłatnych szablonów stron startowych, które są zbudowane w edytorze blokowym. Muszę przyznać, że projekty są naprawdę profesjonalne, widać że zostały zaprojektowane przez doświadczonych dizajnerów. Możemy wybierać spośród projektów ogólnych, jak i stworzonych specjalnie z myślą o danej branży. Z pewnością każdy przedsiębiorca znajdzie tu coś dla siebie.

Startery stron Astra
Startery stron Astra

Kadence oferuje ok 50 bezpłatnych starterów stron dla edytora blokowego. Tu również bez problemu znajdziemy coś dla siebie. Moim zdaniem jednak projekty Kadence wypadają nieco słabiej w porównaniu ze stronami oferowanymi przez motyw Astra. Są mniej różnorodne i czuć tu brak ręki bardziej doświadczonego dizajnera. Niemniej jednak, na potrzeby strony internetowej małej firmy oferowane projekty są wystarczające.

Kadence - startery stron
Startery stron Kadence

W obu motywach startery stron nie są niestety zbudowane z natywnych bloków WordPressa, chociaż spokojnie mogłyby z nich korzystać. Twórcy motywów przygotowali własne wtyczki z blokami, które częściowo powielają natywne bloki. Z mojego punktu widzenia jest to bezsensowny nadmiarowy kod, a dodatkowo zostajemy uwiązani do danego producenta motywu i nie będziemy w stanie później łatwo zmienić motywu. Ale o to pewnie twórcom chodziło.

Dodatkowo, w obu przypadkach, startery oferowane przez Astra i Kadence cierpią na niestety powszechny problem tego typu rozwiązań. Nagłówki w tych gotowych szablonach często są użyte niepoprawnie, co skutkuje nieprawidłową hierarchią. Zamiast logicznej struktury, gdzie H1 jest używany jako główny tytuł, a H2, H3 i kolejne poziomy nagłówków są stosowane zgodnie z ich znaczeniem i ważnością, często można znaleźć przypadki, gdzie nagłówki są używane chaotycznie lub niekonsekwentnie.

Nieodpowiednia hierarchia nagłówków w starterze Astra
Nieodpowiednia hierarchia nagłówków w starterze Astra
Nieodpowiednia hierarchia nagłówków w starterze Kadence
Nieodpowiednia hierarchia nagłówków w starterze Kadence

Taka sytuacja może wprowadzać zamieszanie w odbiorze treści przez użytkowników, a także negatywnie wpływać na SEOSEO (Search Engine Optimization) to proces optymalizacji strony internetowej lub treści online w taki sposób, aby była lepiej widoczna i rankowana przez wyszukiwarki internetowe, takie jak Google, Bing czy Yahoo. Głównym celem SEO jest zwiększenie ruchu organicznego na stronie poprzez poprawę jej pozycji w wynikach wyszukiwania dla określonych słów kluczowych. Jak działa SEO? SEO opiera się na trzech głównych filarach: Optymalizacja techniczna – Zapewnienie, że strona działa sprawnie, szybko się...Czym jest SEO?, gdyż wyszukiwarki mogą mieć trudności z poprawnym zrozumieniem struktury i znaczenia strony. 

Dlatego pierwszą rzeczą, którą powinniśmy zrobić po zaimportowaniu startera to dokładnie przejrzeć i dostosować hierarchię nagłówków, aby była zgodna z dobrymi praktykami i wspierała zarówno czytelność, jak i optymalizację pod kątem wyszukiwarek.

Astra vs. Kadence – możliwości personalizacji

Oba motywy można zaklasyfikować do motywów hybrydowych. Nie wykorzystują one bowiem w pełni potencjału nowego edytora WordPressa np. funkcjonalności Full Site Editing. Jedynie treść stron i wpisów zbudowana jest z bloków.

Nadal korzystają ze znanej z motywów klasycznych opcji Dostosuj, gdzie znajdziemy różne ustawienia wyglądu. Oba motywy, w darmowej wersji, oferują podobny zestaw ustawień.

Stronę możemy dostosować do swoich potrzeb w następującym zakresie:

Kolory

Oba motywy oferują zaawansowane opcje zmiany kolorów. Astra i Kadence posiadają kilkanaście predefiniowanych styli kolorystycznych, które można łatwo zastosować na stronie. Ponadto, użytkownicy mają możliwość zbudowania własnej palety kolorów, co pozwala na dostosowanie strony do kolorów brandu i zachowanie spójności wizualnej.

paleta kolorów w motywie Astra
Astra – paleta kolorów
paleta kolorów w motywie Kadence
Kadence – paleta kolorów

Typografia

Oba motywy oferują możliwość wyboru dowolnego fontu z bogatej biblioteki Google Fonts. Dodatkowo, użytkownicy mogą indywidualnie ustawić fonty dla nagłówków i tekstu, a dla nagłówków można dostosować czcionki osobno dla każdego poziomu od H1 do H6. To pozwala na pełną kontrolę nad wyglądem tekstu i umożliwia tworzenie estetycznych i czytelnych stron.

wybór typografii w motywie Astra
Astra – typografia
wybór typografii w motywie Kadence
Kadence – typografia

Szerokość kontenera

Oba motywy umożliwiają zmianę szerokości kontenera, zarówno na szeroki, jak i wąski. Jest to szczególnie ważne dla edytora blokowego, gdzie szerokość kontenera może znacząco wpłynąć na układ i wygląd treści na stronie. Niestety motyw Kadence, mimo że posiada tą opcję, nie implementuje jej w natywnych blokach.

Ustawienia kontenera w motywie Astra
Astra – ustawienia kontenera
Ustawienia kontenera w motywie Kadence
Kadence – ustawienia kontenera

Personalizacja szablonów bloga

Astra i Kadence oferują również podstawowe opcje personalizacji szablonów bloga. Użytkownicy mogą dostosować wygląd i układ postów, w tym takie elementy jak obrazki wyróżniające, metadane, układ siatki czy listy. To pozwala na stworzenie kilku różnych wersji szablonu bloga.

ustawienia layoutu bloga w Astra
Astra – ustawienia layoutu bloga
ustawienia layoutu bloga w Kadence
Kadence – ustawienia layoutu bloga

Inne opcje

Astra oferuje dodatkową, bardzo przydatną opcję: możliwość włączenia smooth scroll, czyli płynnego przewijania strony w górę lub do danej sekcji. Jest to szczególnie użyteczne w przypadku stron typu one-page, gdzie użytkownicy mogą cieszyć się płynnym przejściem między sekcjami, co poprawia ogólne wrażenia z przeglądania strony i nadaje jej bardziej profesjonalny wygląd.

Podsumowując, zarówno Astra, jak i Kadence zapewniają wystarczające możliwości personalizacji, które pozwalają na dostosowanie strony internetowej do indywidualnych potrzeb i preferencji.

Astra vs. Kadence – jakość wtyczek z blokami

Jak już wyżej wspomniałam, gdy instalujemy gotowy starter strony instaluje nam się także wtyczka z blokami. W przypadku motywu Astra jest to wtyczka Spectra, a w przypadku Kadence jest to wtyczka Kadence Blocks.

Obie te wtyczki zawierają zestaw bloków, częściowo takich samych jak natywne bloki WordPressa (np. nagłówek), częściowo rozszerzających edytor o nowe funkcjonalności (np. otwierane taby czy animowany licznik).

bloki Spectra
Spectra – część z 39 wszystkich bloków
bloki kadence
Kadence blocks – wszystkie bloki

Gotowe startery stron zbudowane są wyłącznie z bloków Spectra lub Kadence Blocks, dlatego też jakość strony w dużej mierze zależy od jakości tych wtyczek – a konkretnie kodu, który jest generowany przez bloki.

Często bowiem twórcy różnej maści page builderów nie przykładają należytej uwagi do jakości kodu i ilości ładowanych sasobów, co prowadzi do niepotrzebnego obciążenia strony i ładowania zasobów które nie są wykorzystywane. Skutkuje to wolniejszym wczytywaniem strony, co może negatywnie wpłynąć na doświadczenie użytkowników oraz pozycjonowanie w wynikach wyszukiwania.

Problem ten jest szczególnie widoczny w przypadku złożonych stron z wieloma elementami, gdzie page buildery ładują duże ilości CSSCSS (Cascading Style Sheets) to język stylów używany do definiowania wyglądu i formatowania stron internetowych napisanych w języku HTML (HyperText Markup Language). CSS umożliwia oddzielenie treści strony internetowej od jej prezentacji, co pozwala na bardziej elastyczne i konsekwentne zarządzanie wyglądem witryny.  CSS pozwala na definiowanie różnych stylów, takich jak kolor, czcionka, rozmiar, odstępy, tła itp., dla różnych elementów HTML, takich jak nagłówki, akapity, tabele, linki. CSS umożliwia oddzielenie treści strony...Czym jest CSS? i JavaScriptJavaScript to wysokopoziomowy, dynamiczny język programowania stosowany głównie do tworzenia interaktywnych elementów na stronach internetowych. Jest on szeroko używany zarówno po stronie klienta (w przeglądarkach internetowych), jak i po stronie serwera (za pomocą platform takich jak Node.js) do tworzenia interaktywnych stron internetowych, aplikacji internetowych, gier internetowych, aplikacji mobilnych i innych. JavaScript pozwala na dodawanie interaktywności do stron internetowych. Jest to jeden z kluczowych składników technologii webowych, obok HTML i CSS,...Czym jest JavaScript?, mimo że faktycznie używane jest tylko kilka komponentów. Rozwiązanie tego problemu często wymaga dodatkowej optymalizacji, takiej jak ręczne usuwanie niepotrzebnych zasobów czy korzystanie z bardziej wydajnych metod ładowania skryptów i stylów.

Wtyczki Spectra od Astry i Kadence Blocks zastosowały zoptymalizowane podejście do ładowania zasobów, aby zminimalizować obciążenie strony i poprawić jej wydajność.

W obu przypadkach ładowane są tylko te zasoby, które są faktycznie używane na danej podstronie, co znacząco ogranicza ilość przesyłanych danych. Unikając ładowania zbędnych zasobów, strona nie jest niepotrzebnie obciążana, co skraca czas jej wczytywania i zapewnia lepsze doświadczenie użytkownikom. Jest to podejście podobne do zastosowanego w natywnych blokach WordPressa.

Spectra

Spectra ładuje skrypty i style tylko dla tych bloków, które są faktycznie używane na stronie, co zapobiega ładowaniu niepotrzebnych zasobów.

Patrząc na przykładowy blok „Licznik” (Counter), zarówno style, jak i skrypty są załączane na stronie tylko wtedy, gdy ten blok jest na niej dodany. Jeśli blok nie jest używany na danej podstronie, jego zasoby nie są ładowane.

skrypty bloków Spectra
Skrypty Spectra ładowane dla bloku „Licznik”

Kadence Blocks

W Kadence Blocks, podobnie jak w przypadku wtyczki Spectra, ładowane są tylko te style i skrypty bloków, które zostały faktycznie użyte na danej stronie.

Wtyczka posiada podobny do przykładu powyżej blok „Licznik w górę”, którego zasoby również są ładowane tylko jeśli ten blok został użyty na stronie. Jeśli blok nie jest używany, skrypt nie jest ładowany, co znacząco redukuje ilość zbędnych zasobów i przyspiesza ładowanie strony.

skrypt Kadence
Skrypty Kadence ładowane dla bloku „Licznik”

Astra vs. Kadence – jakość samych motywów

Chociaż większość strony jest zbudowana z bloków towarzyszących tym motywom, co w dużej mierze wpływa na jej jakość, nie można zapominać o elementach wbudowanych bezpośrednio w motyw.

Oba motywy są hybrydowe, co oznacza, że za takie elementy jak nagłówek i stopkę odpowiada kod motywu, a nie wtyczki z blokami. Sam motyw też przeważnie ładuje dodatkowy kod PHPPHP - (Hypertext Preprocessor) to popularny język skryptowy, który jest szeroko stosowany w tworzeniu dynamicznych stron internetowych oraz aplikacji webowych. PHP jest językiem open-source, co oznacza, że jest dostępny bezpłatnie i może być modyfikowany przez użytkowników. Jednym z głównych zastosowań PHP jest generowanie dynamicznych treści na stronach internetowych. Dzięki PHP możliwe jest tworzenie stron, które reagują na dane wprowadzone przez użytkowników, co jest kluczowe w przypadku aplikacji takich jak sklep internetowy czy...Czym jest PHP?, JavaScript czy CSS, który nie jest związany z blokami.

Aby sprawdzić jakie zasoby są wczytywane przez motyw na pustej stronie, wystarczy utworzyć nową podstronę, bez żadnych bloków i zdjęć. Strona taka zawierać będzie właściwie tylko sam nagłówek i stopkę.

I tutaj wyniki obu motywów są badzo porównywalne. Oba motywy dosyć oszczędnie ładują zasoby JS i CSS, a sporą część zasobów zajmują fonty Google. Właściwie nie ma się tutaj do czego przyczepić. Ciężko także uznać, że któryś z motywów się tu jakoś wyróżnia, oba są pod względem wydajności bardzo podobne.

Czas wczytywania motywu Astra
Astra – ładowanie samego motywu
Czas wczytywania motywu Kadence
Kadence – ładowanie samego motywu

Astra vs. Kadence – ogólne wrażenia i podsumowanie

Oba motywy są bardzo podobne pod wieloma względami. Myślę, że każdy z nich nada się do stworzenia strony małej firmy. W obu przypadkach mamy sporo gotowych starterów stron do wyboru, które możemy szybko zainstalować.

Oba motywy są całkiem przyzwoicie zoptymalizowane, świadomie wczytują kod CSS i JavaScript oraz unikają ładowania nieużywanych zasobów. A to na pewno można uznać za duży plus.

Jeśli chcesz szybko zbudować stronę dla swojej firmy na tzw. “gotowcu” to śmiało wybierz starter strony jednego z tych motywów, który najbardziej odpowiada Twoim potrzebom i po prostu go zainstaluj. Stworzona w ten sposób strona będzie wystarczająco dobra na potrzeby małej firmy.

>
Magdalena Paciorek
Ewangelistka WordPress, deweloperka, organizatorka naszych webinarów. Fanka Gutenberga.

Dodaj komentarz

Twój adres e-mail nie będzie opublikowany.

Polecane dla Ciebie

Szukasz dalej?

Przeglądaj wg dat
  • Przeglądaj wg dat
  • marzec 2025
  • luty 2025
  • styczeń 2025
  • grudzień 2024
  • listopad 2024
  • październik 2024
  • wrzesień 2024
  • sierpień 2024
  • lipiec 2024
  • czerwiec 2024
  • maj 2024
  • kwiecień 2024
  • marzec 2024
  • luty 2024
  • styczeń 2024
  • grudzień 2023
  • listopad 2023
  • październik 2023
  • wrzesień 2023
  • sierpień 2023
  • lipiec 2023
  • czerwiec 2023
  • maj 2023
  • kwiecień 2023
  • marzec 2023
  • luty 2023
  • styczeń 2023
  • grudzień 2022
  • listopad 2022
  • październik 2022
  • wrzesień 2022
  • sierpień 2022
  • lipiec 2022
  • czerwiec 2022
  • maj 2022
  • kwiecień 2022
  • marzec 2022
  • luty 2022
  • styczeń 2022
  • grudzień 2021
  • listopad 2021
  • październik 2021
  • wrzesień 2021
  • sierpień 2021
  • lipiec 2021
  • czerwiec 2021
  • maj 2021
  • kwiecień 2021
  • marzec 2021
  • luty 2021
  • styczeń 2021
  • grudzień 2020
  • listopad 2020
  • październik 2020
  • wrzesień 2020
  • sierpień 2020
  • lipiec 2020
  • czerwiec 2020
  • maj 2020
  • kwiecień 2020
  • marzec 2020
  • luty 2020
  • styczeń 2020
  • grudzień 2019
  • listopad 2019
  • październik 2019
  • wrzesień 2019
  • sierpień 2019
  • lipiec 2019
  • czerwiec 2019
  • maj 2019
  • kwiecień 2019
  • marzec 2019
  • styczeń 2019
  • grudzień 2018
  • listopad 2018
  • październik 2018
  • sierpień 2018
  • lipiec 2018
  • maj 2018
  • kwiecień 2018
  • marzec 2018
  • styczeń 2018
  • grudzień 2017
  • październik 2017
  • czerwiec 2017
  • kwiecień 2017
  • marzec 2017
  • luty 2017
  • styczeń 2017
  • grudzień 2016
  • listopad 2016
  • październik 2016
  • wrzesień 2016
  • sierpień 2016
  • lipiec 2016
  • czerwiec 2016
  • maj 2016
  • kwiecień 2016
  • marzec 2016
  • lipiec 2015
  • maj 2015
  • grudzień 2014
  • sierpień 2014
  • lipiec 2014
  • czerwiec 2014
  • kwiecień 2014

Chat online

Cześć!

Zapraszamy do rozmowy, chętnie odpowiemy na Twoje pytania. Jeśli dotyczą one bezpośrednio posiadanych przez Ciebie usług, zalecamy wcześniejsze zalogowanie się do swojego panelu klienta. Dzięki autoryzacji będziemy mogli zaoferować pomoc w szerszym zakresie.

Zachęcamy też do sprawdzenia naszej sekcji wsparcia na https://cyberfolks.pl/pomoc.

Aktualny stan pracy serwerów:

Autoryzacja: nieautoryzowany - Zaloguj się

W związku z przepisami o ochronie danych osobowych informujemy, kto i na jakich zasadach będzie administrować Twoimi danymi: Polityka prywatności cyber_Folks S.A.