Jak zwiększyć konwersję na Twojej stronie mobilnej

Dodawani przycisków, które zwiększą konwersję

No i już Ci mówię, co będziemy tutaj robić. Jestem na stronie restauracji. Ja ostatnio takie rozwiązanie robiłem na stronie u klienta, który ma pensjonat, że można po prostu na telefonie komórkowym zadzwonić, napisać albo zarezerwować i to zawsze użytkownik ma pod ręką. Natomiast myślę, że będzie działało to i w innych branżach, również w gastro. No i dzięki Kadence możemy to na maksa customizować, czyli zadecydować na jakiej podstronie to będzie.

Ja bym chciał, żeby to było tylko na jednej podstronie, czyli w momencie gdy ktoś będzie przeglądał “Menu” to wtedy pokazuje mu się przycisk, żeby zadzwonił do firmy i pokaże Ci jak to w bardzo fajny, łatwy sposób zrobić.

No i jak będę to sprawdzał? Na telefonie komórkowym i na Firefox Developer. Jeśli jesteś tutaj na kanale nowy/a to tu są anegdotki. I anegdotka jest taka, że jak tworzę strony dla klientów to zawsze je przeglądam na telefonie komórkowym, na kilku przeglądarkach i właśnie na Firefox Developer, czyli taka przeglądarka jak Firefox tylko niebieska i ma więcej opcji. Tutaj mogę sobie ustalić szerokość urządzenia na jakim to przeglądam i będę patrzył czy mi na mobile tutaj to działa.

Kopiowanie bloków w Kadence, pomiędzy różnymi stronami

Więc przechodzimy do rzeczy i lecimy z tematem. Jeśli chodzi o stronę klienta to teraz jesteśmy na stronie klienta, bo widzisz, że tło jest niebieskie, czyli jesteśmy na innej stronie po prostu. Pokażę jak w bardzo łatwy sposób to skopiować. To jest wspaniałe w Gutenbergu i w Kadence, że możesz kopiować pomiędzy różnymi stronami bloki. Czyli klikasz tak-> “kopiuj blok” i to wszystko.

Idziemy do innej strony, zmieniamy zakładkę na inną. No i tutaj jesteśmy w mojej stronie testowej w Elementach. To jest najwspanialsza funkcja Kadence, bo możemy dzięki niej zrobić ogromnie dużo od przyklejenia jakiegoś komunikatu, od pojawienia się bloku w jakimś określonym miejscu np. właśnie tak jak dzisiaj zrobimy tylko na jednej podstronie, tylko nad menu. Tu jest morze możliwości i bez kodowania możemy naprawdę fajnie customizować naszą stronę. No i tutaj jeśli klikniesz Kadence to zobaczysz, że to jest w wersji PRO.

Gdzie kupić Kadence Pro

No i teraz tak, masz trzy drogi co najmniej, żeby taki Kadence Pro pozyskać. Wbijasz do naszego kursu: Gutenberg i Kadecne Pro i tam dostajesz w ramach kursu licencje lifetime na jedną domenę. Druga opcja jest taka, że wbijasz do sklepu WPziomka i jesteś moim klientem, więc ja Ci mogę zainstalować swoją licencję Kadence Pro a trzecia – niezależna opcja, kupujesz sobie za dolary Kadece i to są naprawdę świetnie wydane pieniądze. Ja wydałem je parę lat temu i zwróciły mi się wielokrotnie, więc bardzo Ci polecam działanie na Kadence Pro.

Dodawanie Elementów w Kadence 3.0

No i lecimy z tematem. Czyli będziemy mówili o elementach I tutaj mamy jeszcze kilka innych opcji, ale to nie na dzisiaj. Ja stworzyłem sobie starter templates. Ten starter templates ma trochę lat. Ta strona nie wygląda na nowoczesną, ale chodzi o to, żeby ona była z branży gastro. Nie ma to najmniejszego teraz znaczenia. Klikamy “Elements” -> “Dodaj nowy” i możemy zadecydować jaki ten element będzie. Czy to będzie content section, czy to będzie fixed section, template czy kawałek HTML-a. Content section, no to jest jakaś określona sekcja w danej części strony.

My zajmiemy się fixed section, czyli jak sama nazwa wskazuje to będzie przyklejony blok Gutenbergowy w jakimś określonym miejscu. Można jeszcze zrobić template, czyli możemy dowolny wygląd wpisu, kategorii w blogu. Różne kategorie mogą różnie wyglądać. To wszystko bez kodowania można zrobić w Kadence Pro. To też pokazuję w kursie – link znajdziesz oczywiście w opisie. I HTML – używane szczerze mówiąc przeze mnie najrzadziej, bo HTML-a nie używam tutaj często. Lecimy z tematem. I teraz jak widziałeś/aś, skopiowałem z tamtej strony ctrl+c albo command+c jak na Macu i tutaj napiszę też: “Mobile CTA” – call to action, czyli wezwanie do działania po polsku. I dodaje te bloki.

Ten tytuł jest tylko dla nas, więc nie przejmujemy się tym absolutnie. I zobaczysz, że bloki będą ostylowane już w kolorkach już tej strony, a nie tamtej. Kliknąłem Control+v no i mam wszystkie bloki z innych stron. Ciekawostka – widziałem taki dodatek do Elementora, który kosztuje 69 dolarów i też pozwala to robić co zrobiłem przed chwilą w Gutenbergu. Dlaczego to tak działa? No bo właśnie Kadence jest oparty o Gutenberga, a Gutenberg ma jasny, konkretny kod, który będzie działał Ci po prostu na każdym WordPressie. To jest game changer, jeśli przechodzisz z Elementora na Gutenberga i tutaj nie ma się nad czym zastanawiać, bo nie wykrzacza Ci się dużo rzeczy przy aktualizacjach i tak dalej, bo tu nie ma się co wykrzaczać, bo ten kod jest taki fajny, zdrowy.

I tutaj mamy te wszystkie bloki, które mieliśmy tam, czyli mamy: zadzwoń, napisz i zarezerwuj, w tamtym przypadku. Przy restauracji może byśmy mieli tylko: zadzwoń i napisz, a może zarezerwuj też – nie wiem. W każdym razie my damy te trzy. Możesz sobie oczywiście zmienić na 2 jak będziesz chciał/a.

Ustawienia Elements

Czyli tutaj zmieniamy liczbę kolumn. I co tu mamy? Sekcje klasycznie – 3, ikonkę i advanced text. Moglibyśmy zrobić to info boxem też od Kadence, ale ja to zrobię w ten sposób. No i teraz chcę ustawić, żeby na telefonie komórkowym to się pokazywało tylko i wyłącznie i tylko i wyłącznie na jednej stronie. Klikam tutaj. No i gdzie to ma się pokazywać? Chcę, żeby to się pokazywało na dole albo na dole pod stopką. To jest ważne jeśli masz np. stopkę swojej strony jako wykonawca witryny, to pewnie nie chcesz, żeby na mobile była zasłonięta, więc tutaj pod stopką będzie miejsce. Width 100%, czyli na całą szerokość telefonu. No i teraz właśnie, gdzie mamy to pokazywać.

Teraz wybieramy sobie, że na pojedynczej stronie: single strony tak to przetłumaczone jest i nie na wszystkich, tylko na tej jednej, którą sobie wybiorę. I tutaj po prostu wybieramy nasze menu, bo chcę właśnie tutaj. Co więcej chcę to tylko zrobić na mobile. Tutaj możemy zaznaczyć BTW powiem Ci anegdotkę, że możemy zaznaczyć, że pokazuje się na całej stronie, jeśli nie chcemy wybierać konkretnych podstron i wykluczyć np. z jakiejś jednej strony np. na kontakcie. Chcemy, żeby każdy miał kontakt pod ręką, ale jak już jest w zakładce “Kontakt” to bez sensu mu to dwa razy wyświetlać.

Możemy zadecydować czy chcemy dla zalogowanych czy niezalogowanych, czy dla wszystkich albo dla specyficznej roli. Czyli dzięki Kadence możemy sobie stworzyć tzn. nie dzięki Kadence, ale w ogóle możemy sobie stworzyć rolę jakąś tam np. “ziomek” i tylko ziomki mogą widzieć jakąś konkretną rzecz. Ja to używam na swojej stronie i tylko kursanci widzą np. jakieś określone komunikaty, wyskakujące okna i tak dalej. No i teraz device, czyli urządzenia i chcemy, żeby to było tylko na mobile, więc zaznaczamy mobile.

I tu bardzo ciekawa opcja. Jeśli to jest jakaś promocja czasowa, najczęściej to jest promocja np. 20% rabatu tylko do końca dnia, no to możemy sobie ustawić i nie musimy przed komputerem tego wyłączać, dzisiaj wieczorem o 22:00, tylko że do dzisiaj do godziny PM 10:00 możemy sobie tutaj to ustawić i to nam po prostu nie będzie się pojawiało od tej godziny. Mega opcja, więc sprawdźmy jak nam to działa.

Klikam “Opublikuj”. Ok, mogę zobaczyć element, ale to nic nie da, bo ten element w oderwaniu od wszystkiego to wygląda po prostu tak. Czyli tu jest na całą szerokość, a my chcemy, żeby był na całą szerokość, ale telefonu komórkowego. Więc przechodzimy do: “Our Menu” i klikam “Odśwież” no i jadę na dół i kompletnie nic się nie dzieje. Czyli dobrze, bo nie ma się dziać. I teraz przechodzę na tryb responsywny. No i jestem na wersji mobilnej. I teraz po dokładnie 300 px pokazuje mi się wezwanie do akcji – call to action: zadzwoń, napisz, zarezerwuj.

Linkowanie przycisków w Kadecne

Oczywiście pokażę Ci jeszcze linki tutaj, bo tutaj nie powiedziałem tego, bo jakby to nie jest najważniejsze. Znaczy to jest bardzo ważne w ogóle (to mi zniknęło, więc tutaj sobie klikamy koło zębate) ale chodzi o to, że to nie było clou tego filmu. Natomiast Overlay Link to jest -> “tel:” i teraz numer telefonu napisane razem i +48, żeby to działało dobrze z mobile. Jeśli chodzi o, w tym przypadku, section kolejną i to zaznaczamy na całym section. Czy ktoś kliknie w advanced tekst w icon, czy gdzieś obok nawet kliknie to i tak mu zadzwoni.

No i tutaj mamy po prostu “mailtu” napisane, to jest też bardzo ważne. “General” -> “Overlay Link” i “mailto:kontakt”. No i tutaj jest akurat adres klienta, bo stamtąd to skopiowałem, więc możemy sobie tutaj kliknąć edytuj i edytować. Można jeszcze tutaj dynamiczny ten link dać, czyli możemy do jakiejś konkretnej podstrony i adres tej strony się zmieni. No to wtedy tu też się zmieni bez naszej większej zmiany.

Mam nadzieję, że to dla Ciebie jasne, ale już nie chcę mieszać, bo mamy naprawdę bardzo dużo opcji jeśli chodzi o Kadence. O części z nich mówię na kursie, na który Cię zapraszam i sobie z WPziomkami rozkminiamy różne rzeczy. Zobacz sobie podstronę kursu i tam właśnie są też opinie kursantów jak sobie pracujemy, a też o części mówię tak jak dzisiaj tutaj na YouTube. Więc subskrybuj, jeśli jeszcze tego nie robisz i zobacz sobie film ze zmianami w Kadence 3.0, bo niedawno miały takie miejsce i omawiam je właśnie w tym filmie, który Ci się pokazał i mam nadzieję, że widzimy Cię w kolejnym filmie. Elo!