Nawigacja na stronie sprzedażowej: przyciski i kotwica HTML

Strona sprzedażowa: Przyciski nawigacyjne i kotwica HTML do ułatwienia poruszania się po treści i odnośnikach.

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”

Pokazanie wizualnie jak wygląda gotowy przycisk na stronie
Przyciski nawigacji wewnątrz strony sprzedażowej – przykłady

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:

Zrzut ekranu z pokazaniem jak wygląda kotwica w kodzie HTML
Ustawienie kotwicy HTML korzystając z edytora tekstowego i kodu HTML

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.

pokazanie wizualnie jak wygląda sekcja z kotwicą HTML w Elementorze
Ustawienie kotwicy HTML w Elementorze – widok live edit
Pokazanie opcji jak ustawić kotwicę HTML w elementorze
Ustawienie kotwicy HTML w Elementorze – widok paska bocznego

Kotwicę możesz zrobić także do jakiejkolwiek innej sekcji, np. o mnie. ?

Pokazanie wizualnie jak wygląda kotwica HTML w edytorze Elementora
Pokazanie opcji ustawień opisu kotwicy HTML

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.

pokazanie opcji ustawień przycisku
odnośnik kierujący do innego miejsca na tej samej stronie, zaznaczonego kotwicą HTML

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 elementów landing page, który wspiera Twoja sprzedaż jest więcej niż sama nawigacja. Dlatego przygotowałam dla Ciebie praktyczną checklistę, którą odbierzesz zapisując się na mój newsletter w formularzu poniżej.

A jeśli wolisz zajrzyj na stronę zapisu i zobacz, jak w praktyce wygląda nawigacja na stronie. ?

Leave a Comment

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Scroll to Top