Kadence – Bezpłatny motyw WordPress, który musisz zobaczyć

Motyw Kadence

W związku z tym, że dość często pytacie o zarządzanie nagłówkiem waszych motywów chciałbym Was zainteresować bardzo ciekawym tematem o nazwie Kadence. Dostępny jest bezpłatnie, ale UWAGA nie w repozytorium WordPressa (przynajmniej na obecną chwilę).

Możliwości jego dostosowania są nie mniej imponujące jak ma to miejsce w przypadku darmowego OceanWP, a mogę pokusić się nawet o stwierdzenie, że są ciekawsze 🙂 Zobaczcie:

Chcę tylko napisać, że jak chodzi o nagłówek, to motyw Kadence ma wbudowany builder! Co to oznacza? Jeśli nie pracujecie z Elementorem PRO i jego Theme Builderem, gdzie można stworzyć praktycznie dowolny wygląd nagłówka, to zapewne wasze motywy na polu jego dostosowania nie dają pełnej swobody. Macie do wyboru jeden lub kilka wariantów nagłówka, możecie pobawić się ostylowaniem i na tym zazwyczaj się kończy.

Tymczasem Motyw Kadence pozwoli Wam zaaranżować nagłówek lub stopkę w sposób niespotykany. Nie znam innego darmowego motywu z takimi możliwościami, co oczywiście nie oznacza, że takich nie ma 🙂

Kadence – Skrócona Transkrypcja Filmu

[00:00:00.150]
Czy zdarzyło wam się kiedykolwiek poczuć bezsilność, bezradność w momencie kiedy pracujecie ze swoim motywem? Chcecie wprowadzić jakieś modyfikacje w nagłówku, dostosować go do własnych potrzeb i okazuje się, że motyw, mówię tu o motywach bezpłatnych, niestety ale ma dosyć ograniczone możliwości na tym polu.

[00:00:19.830]
Wiele nie możecie zdziałać, poza wyborem jednego z kilku dostępnych wariantów. Ewentualnie delikatne ostylowanie do lewej, do prawej, kolorystyka, trochę zmniejszyć, trochę zwiększyć logotyp i na tym się kończy.

[00:00:33.000]
Zdarzyło Wam się kiedyś coś takiego? Chcieliście więcej, a motyw was ograniczał? Podejrzewam że tak!

[00:00:39.220]
No właśnie podczas naszego dzisiejszego spotkania pokażę motyw dostępny bezpłatnie, który na tym polu ma naprawdę świetne możliwości. Zapraszam serdecznie.

[00:01:28.400]
Motyw nazywa się Kadence i uwaga. Tu jest istotna informacja. Tego motywu nie znajdziecie w repozytorium WordPress!

[00:01:43.280]
Można go natomiast pobrać ze strony producenta. To jest właśnie ta strona https://jzswp.pl/kadence Można kliknąć… Klikamy w przycisk „Pobierz bezpłatnie„, uruchomi się modal. Jeżeli chcemy możemy wprowadzić nasz adres e-mail i zapisać się na listę mailingową, a jeżeli nie, wystarczy podziękować, czyli kliknąć w ten linki i bierzemy motyw bez udostępniania naszych danych.

[00:02:08.370]
Motyw pobieramy, instalujemy i później będziemy mogli dalej z nim pracować. Gdybyś chciał, gdybyś chciała, gdybyście chcieli, można sobie zerknąć również na demówkę. W tym miejscu jest przycisk do wersji demo.

[00:02:18.800]
Wygląda ona w taki oto sposób. Nie jest specjalnie atrakcyjna, prawda? Jeżeli ktoś wchodzi na tę stronę, uruchamia demo, to podejrzewam że nie jest jakoś specjalnie oczarowany tym motywem. Przynajmniej wersją demonstracyjną.

[00:02:35.670]
No ale tu mam nadzieję, że zdajecie sobie sprawę z tego, że w przypadku WordPressa, w przypadku motywów z którymi mamy dzisiaj do czynienia, zwłaszcza z tymi nowoczesnymi, to możliwości mamy praktycznie nieograniczone jeżeli chodzi o część wizualną. A więc to co widzimy w tym miejscu to tylko przykład, który może się bardziej lub mniej podobać. Natomiast to co ostatecznie zrobimy z naszą stroną może być zupełnie odmienne.

[00:03:08.320]
Ten motyw wcześniej zainstalowałem, dlatego nie będę się w to teraz bawił. Jeżeli nie wiesz w jaki sposób motywy się instaluje serdecznie zapraszam na PoznajWP.

[00:03:20.950]
Wygląda po instalacji w taki sposób. Można powiedzieć że nic tu nie ma. Dlatego żeby podczas naszego dzisiejszego spotkania ta strona troszeczkę lepiej wyglądała, zwłaszcza że będzie mi to potrzebne do fragmentu, gdzie będziemy omawiali możliwości związane z nagłówkiem, dorzucimy jakiś kontent.

[00:04:35.830]
Myślę że to nie potrwa długo i zaraz będziemy mogli zobaczyć jakie możliwości motyw daje nam w kontekście dostosowania poszczególnych elementów naszej strony.

[00:04:54.440]
Wrócimy z powrotem do naszej strony. Uruchomimy stronę główną. W taki sposób ona wygląda.

[00:05:04.220]
Przechodzimy do sekcji Dostosuj i sprawdzimy cóż takiego Kadence oferuje nam jeżeli chodzi o dostosowanie rozmaitych opcji związanych z tym motywem.

[00:05:19.500]
Przede wszystkim zakładka Ogólne. Przechodzimy do zakładki ogólne i mamy tutaj całkiem sporo możliwości.

[00:05:27.650]
Pierwsza zakładka. Możemy zdecydować o takich parametrach jak szerokość kontenera dla naszych treści. Pozostałe opcje też możemy dostosować do własnych potrzeb.

[00:05:45.590]
Idziemy dalej, Sidebar. Również w tym miejscu możemy zdecydować jaką ma mieć szerokość.

[00:06:07.100]
Przechodzimy dalej. Mamy kolory i tu jest jedna z fajnych rzeczy jeżeli chodzi o Kadence, a mianowicie możemy zarządzać globalną paletą kolorów. Innymi słowy, możecie dostosować sobie tę paletę pod kątem własnych potrzeb. Macie jakąś swoją kolorystykę, z której chcecie korzystać? W tym miejscu możecie sobie te kolory zdefiniować. Wystarczy kliknąć na wybranym kolorze i go zmodyfikować. Gdy paletę mamy skonfigurowaną, wszędzie w sekcji Dostosuj możemy z niej korzystać. Naprawdę bardzo przydatna rzecz.

[00:06:44.350]
Wyobraźcie sobie w tym momencie sytuację, kiedy macie kolor pomarańczowy, czerwony, zielony, nieważne. I teraz za każdym razem, gdy klikacie żeby ten kolor ustawić, robicie to na oko. No chyba że kupujecie KOD i za każdym razem go będziecie wklejać. Mało komfortowe.

[00:07:04.700]
Natomiast tu mamy paletę, można ją zdefiniować i później wszędzie z niej korzystać.

[00:08:43.610]
Zwróćcie uwagę na to że mamy możliwość definiowania kolorów dla różnych ekranów czyli desktop, dalej mamy tablety i smartfony. Dla każdego z tych ekranów możemy indywidualnie skonfigurować kolorystykę dotyczącą tła itd…

[00:09:04.430]
Jeszcze jedną rzecz podpowiem. Zobaczcie. Mamy standardowy kolor, jednolity kolor. Moglibyśmy operować na gradientach albo wykorzystać obraz. Całkiem fajne możliwości 🙂

[00:09:25.610]
Przechodzimy dalej. Przyciski. W tym miejscu możemy bawić się konfiguracją domyślną przycisków na naszej stronie. Mamy topografię, domyślne fonty. Poniżej możemy zdefiniować je także dla poszczególnych rodzajów nagłówków

[00:09:51.260]
Idziemy dalej czyli ScrollUp. Scroll To Top. Jeżeli to sobie aktywujemy, mam nadzieję że to będzie widać. Chodzi o tę strzałkę, po kliknięciu której będzie można przewinąć szybko stronę do góry. W tym miejscu również możemy to dokonfugurować. Opcji jest naprawdę całkiem, całkiem sporo.

[00:11:35.690]
Przechodzimy do nagłówków. Mamy nasz nagłówek, to jest ten u góry, czyli z lewej strony jest nazwa naszej strony, a z prawej menu.

[00:11:54.260]
Po lewej stronie zakładka z ustawieniami ogólnymi logo i główne menu. To są te dwa obiekty, które właśnie tu widzimy. I gdybyśmy teraz kliknięli na logo, możemy przejść do jego ustawień. Na przykład wybierzemy jakiś plik graficzny. Niech to będzie ten. Wskakuje nam w to miejsce. Pasowałby go troszeczkę zmniejszyć, powiedzmy do takich rozmiarów… i logo jest widoczne.

[00:12:24.860]
Moglibyśmy zdecydować teraz o tym jak chcemy żeby to logo się wyświetlało. W tej chwili mamy grafikę i nazwę naszej strony czyli wybrana jest ta opcja: Logo i tytuł.

[00:12:36.020]
Jeżeli klikniecie na samo logo, tytuł zniknie, jeżeli klikniecie na logo tytuł i tagline czyli dodatkowy opis, pojawi się wówczas również on w tym miejscu.

[00:12:47.750]
Poniżej możemy zdefiniować tytuł naszej witryny i opis, jeżeli oczywiście będziemy chcieli go wyświetlać. Ja zostawię domyślnie logo i sam tytuł. Poniżej jeszcze mamy dodatkowe opcje konfiguracji, a więc wersja gdzie najpierw będzie nazwa strony, a później dopiero obrazek graficzny, wersja gdzie będzie obrazek graficzny u góry, a tekst u dołu – mimo że nie wygląda to najlepiej, ale też tak można to skonfigurować. Takie opcje konfiguracji w tym miejscu mamy.

[00:13:27.710]
Jeżeli przejdziemy do sekcji design, możemy również zdecydować jaki będzie font dla napisów. Kolorystyka, odstępy. Dodatkowo możemy dorzucić ikonkę dla naszej strony, to ikonka, która później będzie się pojawiała np. w wynikach wyszukiwania. Idziemy dalej.

[00:13:48.020]
To co jest tu istotne, zobaczcie. Mamy dodatkowe elementy, które moglibyśmy wyświetlić w nagłówku. Np. ulokowanie gdzieś drugiego menu. Możemy uruchomić ikonkę wyszukiwarki, możemy wstawić przycisk, możemy wstawić ikonki do naszych profili w mediach społecznościowych i ewentualnie jeszcze kod HTML.

[00:14:31.460]
Moglibyśmy wrzucić przycisk wyszukiwania. No to łapiemy, przeciągamy, ale… nie w to miejsce! Mogłoby się wydawać na pierwszy rzut oka: aha jak tu mamy te dwa obiekty aktywne, to wystarczy złapać przeciągnąć i upuścić. Nie, nie, nie, nie.

[00:14:46.880]
Popatrzcie. To jest miejsce, przy pomocy którego możemy indywidualnie skonfigurować wygląd naszego menu i obiekty jakie na nim się znajdują. Zauważcie, że mamy trzy wiersze. Pierwszy drugi i trzeci wiersz. Pierwszy to top bar, czyli coś co może się pojawić nad naszym nagłówkiem. Drugi element to ta główna sekcja, czyli główna część naszego główka, gdzie jest logotyp, gdzie jest menu.

[00:16:00.800]
I jeszcze mamy trzeci, gdzie moglibyśmy dorzucić coś jeszcze. To pojawi się poniżej.

[00:16:08.640]
Do czego to można wykorzystać? Jeżeli na przykład macie sklep internetowy, jeżeli macie bloga na swojej stronie z jakimiś kategoriami i chcielibyście je pokazać tak, żeby były cały czas widoczne. Jeżeli zrobicie sobie to standardowo w menu, to w pewnym momencie troszeczkę miejsca zabraknie na inne elementy, które mogą być dla was istotne. Natomiast jeżeli wykorzystacie trzecią sekcję, wówczas pojawi się poniżej. Tu możemy umieścić kategorie z bloga, kategorie produktów, co tylko będziecie chcieli.

[00:16:46.490]
Natomiast jak tymi obiektami zarządzamy? Mamy trzy wiersze i te trzy wiersze zwróćcie uwagę też są podzielone na trzy sekcje, choć tak naprawdę tych sekcji jest troszeczkę więcej. Zaraz wam pokażę.

[00:17:01.850]
Pierwsza sekcja, jak nietrudno się domyślić, to jest to, co będzie po lewej stronie. Dalej mamy obszar w centrum i obszar po prawej stronie. Tak też widzimy: logo z lewej, menu z nawigacją po prawej.

[00:17:20.900]
No i teraz gdybyśmy menu, które tu widzimy przerzucili do centrum, to wystarczy złapać, przeciągnąć i upuścić. Automatycznie wskakuje nam na środek. I teraz gdybyśmy chcieli dorzucić na przykład ikonkę wyszukiwarki wystarczy, że złapiemy, przeciągniemy…

[00:17:42.150]
I popatrzcie co się teraz dzieje. Mamy jeden obszar, drugi obszar i pojawiły się dwa dodatkowe obszary. Co to oznacza? Jeżeli upuścimy w tym miejscu, ikonka pojawi się zaraz za naszym menu, a jeżeli przeciągnę ją w tę część, pojawi się w tym miejscu.

[00:18:06.520]
No i moglibyśmy dalej idąc dorzucić jeszcze ikonki mediów społecznościowych. Upuszczamy, pojawiają się ikonki mediów społecznościowych.

[00:18:16.640]
I tak właśnie możemy sobie zbudować niczym z klocków nasz nagłówek. Gdybyśmy chcieli teraz stworzyć pasek górny i tam umieścilibyśmy powiedzmy ikonki mediów społecznościowych, to wystarczy przeciągnąć do góry, upuścić i automatycznie pasek się pojawił.

[00:18:39.710]
Pewnie trzeba by było go delikatnie ostylować. Co można zrobić. Wystarczy że w tym miejscu, gdzie mamy ikonkę konfiguracji, klikniemy i pojawiają się opcje związane z tym paskiem.

[00:18:54.050]
Jeżeli przejdziemy do sekcji design, moglibyśmy zmienić kolor. Załóżmy że będzie taki.

[00:19:01.580]
OK wrócimy do sekcji ustawień ogólnych i moglibyśmy jeszcze delikatnie podkręcić wysokość tego paska, ewentualnie jeżeli uważamy, że te ikonki są zbyt duże, moglibyśmy w tym miejscu kliknąć ikonę ustawień. Klikamy i mamy dodatkowe możliwości konfiguracji. Moglibyśmy dodać inne ikonki prowadzące do naszych profili na innych mediach społecznościowych, ewentualnie usunąć to z czego nie korzystamy.

[00:20:16.430]
Wracamy do ustawień naszego górnego paska i możemy jego wysokość również delikatnie zmniejszyć. W taki sposób w tym momencie to wygląda.

[00:20:45.740]
Zwróćcie uwagę na to że mamy tu naprawdę bardzo dużo opcji konfiguracji. Jeżeli klikamy np. na nawigację główną, to również moglibyśmy zmniejszyć albo zwiększyć odstępy pomiędzy poszczególnymi elementami naszego menu. Moglibyśmy pobawić się kolorystyką i innymi opcjami. Na tym wszystkim można operować.

[00:21:37.190]
Myślę że to co najważniejsze pokazałem. Widzicie jaka jest moc jeżeli chodzi o ten motyw. Ale to jeszcze wciąż nie wszystko, bo popatrzcie. Jeżeli wrócimy się do ustawień nagłówka, to mamy tu dodatkowe opcje.

[00:22:13.460]
Przezroczysty nagłówek. I to jest opcja, której w zasadzie w zdecydowanej większości motywów dostępnych bezpłatnie brakuje. Mamy jakiś motyw, zainstalowaliśmy go sobie no i okazuje się że jeżeli chcielibyśmy wykorzystać przezroczysty nagłówek, no to fajnie, ale trzeba zapłacić za motyw w wersji Pro. Natomiast Kadence ma tę funkcjonalność dostępną bezpłatnie. Popatrzcie jak to funkcjonuje.

[00:22:38.090]
Jeżeli aktywuję nagłówek przezroczysty. Coś się stanie? Chwilę poczekamy.

[00:22:46.370]
Stało się coś takiego. Nagłówek jest na tle naszego głównego obszaru. No i teraz wiadomo, trzeba by było to dokonfigurować żeby jakoś wyglądało. Gdybyśmy przeszli do sekcji design, moglibyśmy zmienić kolor nazwy strony, kolor nawigacji. Ja wybieram byle jakie kolory, ale pamiętajcie, że mamy paletę.

[00:23:57.650]
Mamy jeszcze możliwość przypięcia nagłówków. W tej chwili jeżeli przewijamy stronę, to ten nagłówek nam ucieka, a pewnie niejednokrotnie widzicie strony, gdzie w momencie kiedy zaczynamy scrollować, nagłówek cały czas jest widoczny u góry. Jest przyklejony do górnej krawędzi ekranu. Kolejna opcja, która zazwyczaj dostępna jest w motywach Pro, a tu macie ją w wersji bezpłatnej.

[00:24:15.500]
Możemy też zdecydować cóż takiego moglibyśmy przykleić. Wyłącznie główny, ten środkowy pasek, moglibyśmy przykleić górny, czyli ten który mieliśmy wcześniej z ikonkami i ten który jest poniżej. Jeżeli wybierzemy tę opcję moglibyśmy przykleić całość czyli wszystkie trzy wiersze naszego nagłówka.

[00:25:10.020]
My przykleimy sobie tylko i wyłącznie ten podstawowy, środkowy… OK więc zaznaczam tę opcję i zobaczcie w tym momencie jak będziemy scrollowali. Nagłówek jest widoczny cały czas.

[00:25:55.910]
Możemy także aktywować opcję pod tytułem: inne logo dla przyklejonego paska, co również może być przydatne i dodatkowo mamy opcję określającą czy chcemy, aby ten nasz pasek był przyklejony także na urządzeniach mobilnych czy nie.

[00:26:15.560]
Podobnie jak powyżej możemy zdecydować co chcemy przykleić. Co ciekawe moglibyśmy skonfigurować to w taki sposób, że na desktopach przyklejony byłby główny element, natomiast na urządzeniach mobilnych moglibyśmy przykleić tylko górny pasek.

[00:27:12.680]
Idźmy dalej. Mamy stopkę. Dokładnie ta sama sytuacja, z tym że elementów jest troszeczkę więcej, bo tu również są obszary z widgetami, ale poza tym dokładnie ta sama sytuacja. Popatrzcie. Trzy wiersze

[00:27:58.370]
Co jest poniżej. Mamy jeszcze Page Layout, czyli możemy zdecydować o tym w jaki sposób będą się prezentowały domyślnie strony w ramach naszej witryny.

[00:28:08.540]
I tu też opcji konfiguracji jest całkiem, całkiem sporo łącznie z designem, więc jest co ustawiać.

[00:28:17.420]
Mamy również opcje konfiguracji dotyczące postów czyli wpisów jakie mamy np. na naszym blogu. Pojedynczy wpis i archiwa. Więc to wszystko też możemy sobie skonfigurować i ustawiać tak jak będziemy chcieli.

[00:28:33.690]
Jeżeli korzystacie ze sklepu WooCommerce, to dodatkowo pojawią się opcje związane właśnie z konfiguracją stron produktów, stron z listami produktów itd.

[00:28:45.830]
Tyle jeżeli chodzi o ten motyw. Mam nadzieję że was zainteresowałem, bo jest naprawdę ciekawy. Zwłaszcza że jest dostępny bezpłatnie, a możliwości ma olbrzymie. Jeżeli bawiliście się wcześniej z innymi motywami np. z OceanWP, to wiecie doskonale że ten motyw posiada naprawdę rozbudowane możliwości konfiguracji, ale Kadence również je posiada, a do tego jeszcze builder nagłówka i stopki.

[00:29:22.130]
Dziękuję serdecznie za uwagę i zapraszam na kolejne filmy. Do zobaczenia.

Podobne Artykuły

Odpowiedzi