Dlaczego Twoim klientom to się spodoba?

Długie artykuły blogowe są wartościowe, ale bez nawigacji trudno się w nich poruszać. Klienci chcą szybko przejść do konkretnego fragmentu - bez żmudnego przewijania. Spis treści z klikalnymi linkami do sekcji sprawia, że czytanie staje się wygodniejsze i zachęca do głębszego zapoznania się z treścią.

Moduł automatycznie generuje spis treści na podstawie nagłówków artykułu - bez konieczności ręcznego tworzenia linków.

Jakie posiada możliwości?

Moduł tworzy interaktywny spis treści dla wpisów blogowych:

  • - Automatyczne wykrywanie wybranych nagłówków H2-H6 z treści artykułu blogowego - wybór poziomów przez checkboxy (domyślnie H2, H3, H4),
  • - Klikalne linki do sekcji - płynne przewijanie do wybranego nagłówka,
  • - Podświetlanie aktualnie czytanej sekcji podczas scrollowania strony,
  • - Opcjonalny tytuł modułu i dodatkowy tekst wprowadzający,
  • - Wyśrodkowanie tytułu i tekstu,
  • - Numeracja pozycji spisu z opcją wiodącego zera (01, 02...),
  • - Opcja wyświetlania spisu jako poziomej belki nawigacyjnej z linkami w rzędzie - styl zbliżony do nawigacji sekcji strony,
  • - Tryb poziomy z możliwością przyklejenia belki do góry ekranu podczas scrollowania (z konfigurowalnym odstępem od górnej krawędzi),
  • - Poziome przewijanie listy przez przeciąganie myszą lub gestem - gdy linki nie mieszczą się w szerokości ekranu,
  • - Opcja przyklejania modułu do górnej krawędzi podczas scrollu - idealna gdy moduł jest w bocznej kolumnie obok artykułu,
  • - Na urządzeniach mobilnych: przycisk otwierający/zamykający spis,
  • - Możliwość dodania własnej klasy CSS,
  • - własny identyfikator HTML (kotwica do przewijania strony) oraz własna klasa CSS do niestandardowego stylowania.

Korzyści dla Ciebie (Sprzedawcy)

Spis treści artykułu to inwestycja w jakość bloga i SEO:

  • - Lepszy UX bloga: czytelnicy łatwiej odnajdują interesujące fragmenty i spędzają więcej czasu na stronie,
  • - Niższy bounce rate: przejrzysta nawigacja zachęca do czytania całego artykułu zamiast jego opuszczania,
  • - Automatyczna aktualizacja: spis treści generuje się dynamicznie z nagłówków - wystarczy pisać artykuł z nagłówkami w wybranych poziomach H2-H6,
  • - Praca bez kodu: jeden moduł na stronie artykułu działa automatycznie dla wszystkich wpisów.

Co zyska Twój klient?

Czytelnik artykułu blogowego ze spisem treści:

  • - Szybki przegląd struktury: od razu widzi co artykuł zawiera i do której sekcji chce przejść,
  • - Wygodne nawigowanie: jedno kliknięcie przenosi do dowolnej sekcji artykułu,
  • - Orientację podczas czytania: podświetlona aktywna pozycja spisu pokazuje w którym miejscu artykułu aktualnie jest.

Jak to działa? (3 proste kroki)

Krok 1: Instalacja: Zainstaluj moduł z Shoper AppStore i umieść go na szablonie strony artykułu blogowego w edytorze SVE - w kolumnie bocznej lub nad treścią artykułu.

Krok 2: Konfiguracja: Ustaw opcjonalny tytuł modułu (np. "Spis treści"), włącz numerację jeśli chcesz, zdecyduj czy spis ma być przyklejony podczas scrollu. Na mobile spis automatycznie staje się wysuwanym panelem.

Krok 3: Działa automatycznie: Na każdej stronie artykułu blogowego moduł automatycznie wykrywa nagłówki wybranych poziomów i buduje z nich klikalny spis treści. Podczas czytania aktualna sekcja jest podświetlana w spisie.

Najczęściej zadawane pytania (FAQ)

Jakie nagłówki są wykrywane?
Moduł obsługuje nagłówki H2-H6. Wybierasz które poziomy mają być uwzględnione przez checkboxy w sekcji "Poziomy nagłówków" (domyślnie H2, H3, H4). Nagłówki H1 (tytuł artykułu) są zawsze pomijane.

Czy spis treści działa na wszystkich wpisach bloga automatycznie?
Tak, po umieszczeniu modułu w szablonie strony artykułu działa automatycznie na każdym wpisie który ma nagłówki wybranych poziomów w treści.

Czy mogę wyłączyć sticky dla wersji desktopowej?
Opcja sticky dotyczy obu urządzeń. Na mobile moduł zawsze pojawia się jako wysuwany panel z przyciskiem - niezależnie od ustawienia sticky.

Dodatkowe informacje

Moduł jest przeznaczony do szablonu Storefront.

Instrukcja modułu

Jeśli chcesz zobaczyć jakie inne aplikacje/moduły aktualnie oferujemy w sprzedaży w sklepie shoper - kliknij tutaj

Działanie przedstawionego modułu można zobaczyć w demo naszego szablonu Avant Storefront oraz można kupić gotowy szablon z wieloma innymi modułami dostępnymi w cenie szablonu.

Demo szablonu Avant Storefront

Dane kontaktowe