Jak stworzyć funkcjonalny top bar?

Dodatkowy pasek górny (z ang. top bar) to opcjonalny element strony, który pełni najczęściej funkcję informatywną. Dzięki niemu można w łatwy sposób przyciągnąć uwagę i przekazać użytkownikowi, że trwa właśnie promocja, zbliża się ważne wydarzenie lub zachęcić go do nawiązania kontaktu.

Sprawdź, jak możemy Ci pomóc!

Jak wygląda top bar i co zawiera?

Pasek informacyjny rozpościera się na całej szerokości strony, jednak jest wąski, zwykle do 50 px wysokości. „Przykleja się” go do górnej krawędzi (może być stale widoczny – tzw. sticky bar – lub znikać wraz z przewijaniem strony). Jeśli chcemy, aby informacja na nim zawarta się wyróżniała, warto wykorzystać intensywny, rzucający się w oczy kolor. Dzięki temu zwróci on na siebie uwagę, mimo że nie zajmuje dużo miejsca.

Strona cast.pl – zachęcenie do złożenia zamówienia oraz ikonki mediów społecznościowych.

Strona ltb.pl – zachęcenie do pobrania magazynu internetowego.

Strona reserved.com – informacja o promocji oraz kodzie rabatowym.

Top bar to doskonałe miejsce do umieszczenia krótkiej treści i/lub ikonek (telefon, e-mail, social media), a także przycisku wywołującego akcję. Przykładowe teksty, które można spotkać w pasku górnym:

• „Trwa promocja walentynkowa – wpisz w koszyku kod rabatowy WALENTYNKI2023 ❤️”,
• „Darmowa wysyłka dla zamówień powyżej 149 zł”,
• „Nowy punkt w Gliwicach – zapraszamy! Adres: ul. Bekasa 78”,
• „Zadbaj o swoje zdrowie i skorzystaj z wideokonsultacji. Otrzymaj e–receptę bez wychodzenia z domu!”,
• „Wiosenna wyprzedaż: rabaty nawet do 60% – sprawdź”,
• „Jesteśmy otwarci od poniedziałku do piątku w godz. 8:00–16:00”,
• „Możliwe opóźnienia ⚠️ Aktualny czas dostawy to 3–4 dni robocze”.

Dobrze skonfigurowany pasek górny nie zasłania zawartości strony i nie przeszkadza w jej przeglądaniu – nie ma więc ryzyka, że zostanie szybko wyłączony bez zapoznania się z komunikatem, jak na przykład w przypadku wyskakujących okienek pop-up. Musi spełniać jednak dwa ważne warunki: nie może zasłaniać tego, co jest pod nim, oraz nie powinien zajmować dużo miejsca. Ważne jest to zwłaszcza w przypadku urządzeń mobilnych, dlatego zawsze należy sprawdzić, w jaki sposób top bar wyświetla się na telefonach.

Pasek informacyjny przyklejony do górnej krawędzi strony jest skuteczną metodą zwiększania konwersji, ponieważ dzięki niemu osoby przeglądające stronę nie przegapią m.in. ofert specjalnych. Można też wykorzystać regułę niedostępności i włączyć w top barze odliczanie, np. trwania promocji. Tego typu informacje są często impulsem, który skłania użytkownika do zapoznania się z ofertą i dokonania zakupu, dlatego top bar to chętnie wykorzystywana metoda komunikacji marketingowej w e-commerce.

W przypadku systemu zarządzania treścią WordPress dostępnych jest wiele wtyczek, które umożliwiają dopasowanie wyglądu i funkcjonalności paska do indywidualnych potrzeb.

Jak dodać top bar na stronie? Przykład na podstawie wtyczki WPFront Notification Bar

Dodanie paska górnego to zaledwie kilka kliknięć. Wystarczy zalogować się do strony oraz zainstalować odpowiednią wtyczkę, np. WPFront Notification Bar. Po aktywowaniu jej możliwe będzie przejście do ustawień.

Konfiguracja krok po kroku:

1. Ustaw pozycję: top.

2. Zaznacz tę opcję, jeśli chcesz, aby pasek wyświetlał się także przy przewijaniu strony.

3. Wpisz treść komunikatu.

4. Określ kolor paska oraz tekstu.

5. Ustaw aktywność i zapisz zmiany.

Podstawowy top bar jest już gotowy! Jeśli nie jesteś zadowolony z tego, jak się prezentuje, w każdej chwili możesz zmienić ustawienia.

Wtyczka umożliwia także m.in.:

• zmianę wysokości paska (height),
• określenie, na jakich urządzeniach ma wyświetlać się pasek górny (display on devices),
• dodanie przycisku (display button),
• określenie terminu wyświetlania (start/end date & time),
• zaznaczenie stron, na których ma wyświetlać się pasek (display on pages),
• dodanie własnego kodu CSS (custom CSS).

Napisz i poznaj nasze usługi!

Czy dodatkowy pasek górny to dobre rozwiązanie dla Twojej strony?

Jeśli chcesz podzielić się ważną informacją, zachęcić do skorzystania z oferty lub wyróżnić metody kontaktu, to jak najbardziej! Dzięki paskowi informacyjnemu możesz w wygodny sposób komunikować się z potencjalnymi klientami oraz przekonać ich do podjęcia działania poprzez wyróżnienie możliwych korzyści. Sposobów na użycie tego elementu jest wiele – warto wykorzystać jego potencjał, aby cieszyć się zwiększoną liczbą zamówień oraz zaangażowaniem użytkowników.