Zacznę od tego, czym jest nawigacja na stronie sprzedażowej (czyli landing page) i dlaczego warto o nią zadbać. Dalej we wpisie pokażę przykłady nawigacji na stronach lądowania. W ten sposób przejdziemy do tego, jak ustawić kotwicę HTML.
W przypadku klasycznej strony wizytówki zazwyczaj mamy do czynienia z menu górnym (i ewentualnie dolnym) strony, a nieraz korzystamy także z przycisków typu “Czytaj więcej”, które przekierowują nas do innej zakładki.
W przypadku stron sprzedażowych rzecz ma się nieco inaczej – tutaj chcemy zatrzymać uwagę odbiorcy na tej konkretnej stronie i zachęcić do wykonania określonej akcji (ang. call-to-action, CTA), którą jest zazwyczaj albo dokonanie zakupu albo zapis na newsletter.
Dlatego strony sprzedażowe robimy zazwyczaj bez menu górnego. Sprawdź jak ustawić szablon strony typu “Blank Canvas”, czyli właśnie bez menu górnego.
Przykłady nawigacji na stronie sprzedażowej
Przede wszystkim zadbaj o to, aby na maksa ułatwić Twojemu odbiorcy wykonanie akcji, do której zapraszasz (CTA). Możesz to zrobić poprzez:
- Umieszczenie formularza zapisu na newsletter na samej górze strony (w przypadku stron zapisu)
- Umieszczenie na samej górze stron przycisków kierujących do sekcji z podsumowanie oferty, jej ceną i przyciskiem “add-to-cart” lub do formularza zapisu
- Umieszczenie takich przycisków pod innymi sekcjami, ważne, żeby miało to sens dla odbiorcy
- Ustawienie przycisku “add-to-cart”, aby od razu dodawał produkt do koszyka (sprawdź jak ustawić przycisk “add-to-cart”)
Ustawienie przycisku “Sprawdź szczegóły”
Jak ustawić, żeby przycisk “Sprawdź szczegóły” kierował w odpowiednie miejsce na stronie?
Krok 1: Ustaw kotwicę HTML
To trochę wiedza tajemna, bo wymaga kodowania. ?
Ale dobra wiadomość jest taka, że nie jest to jakieś skomplikowane kodowanie. A jeśli korzystasz z Elementora można się obejść i bez kodowania. ?
Sposób 1: Napisanie kotwicy w kodzie HTML
W sekcji, do której chcesz przekierować musisz ustawić kotwicę. Wygląda to jak na screenie poniżej:
Jak widzisz używam edytora tekstowego, a nie wizualnego i dodaję tam znaczniki:
<a id=”szczegoly”>OFERTA</a>Pogrubione to znaczniki, słowo szczegoly to nazwa sekcji, a OFERTA to nagłówek, który widzisz na stronie. ?
Sposób 2: Skorzystaj z widgeta Elementora “Kotwica menu”
Dodaj widget i wpisz w nim nazwę kotwicy, najlepiej jedno, maksymalnie dwa słowa, jak na screenie poniżej.
Kotwicę możesz zrobić także do jakiejkolwiek innej sekcji, np. o mnie. ?
Krok 2: Przekieruj z przyciska do kotwicy. ?
Zazwyczaj ustawiając przycisk, jako odnośnik podajemy link do innej strony. Tutaj przycisk będzie prowadził do innej sekcji na tej samej stronie i będzie wyglądał jak na screenie poniżej.
Czyli:
#szczegoly
Krok 3: Zapisz zmiany i przetestuj czy działa ?
Ja zawszę testuję landingi swoje i moich Klientek po kilka razy, właśnie pod kątem nawigacji. Lubię używać tych przycisków całkiem sporo i nieraz kierują one w inne miejsca (bo tutaj nie ma limitu ?).
Jak już wiesz, że działa… to gotowe!
Oczywiście jak już opanujesz kotwicę HTML to możesz jej także użyć do tego, aby kierować odbiorcę z innej strony w Twojej witrynie do konkretnego miejsca na swojej stronie sprzedażowej czy wpisu blogowego. Najedź kursorem na link, które podałam na samym początku tego wpisu i zobacz jak wygląda adres URL, do którego kieruje odnośnik. ?
Mam nadzieję, że ten wpis okazał się dla Ciebie przydatny.
Wiem też, że w momencie, gdy zaczynasz sprzedawać swoje oferty online, taki jak kursy czy programy grupowe, tej wiedzy technicznej jest sporo. Moje Klientki wielokrotnie mówią, że dużo ułatwiają im spotkania ze mną w formie szkoleń z obsługi sklepu interentowego czy platformy kursowej.
Podczas tych spotkań 1:1 działamy u Ciebie w panelu, więc masz pewność, że te ustawienia faktycznie tak wyglądają u Ciebie. To duża oszczedność czasu i mnóstwo spokoju!
Po sesji otrzymujesz także nagranie naszego spotkania w formie video, a po dwóch tygodniach spotykamy się na sesji pytań i odpowiedzi.
