Tutorial: moduł Scroll Navigation do tworzenia płynnego przewijana na stronie WordPress

Dzisiaj dowiesz się, jak stworzyć efekt płynnego przewijania wykorzystując moduł Scroll Navigation.

Aby zastosować tą funkcję, będziesz potrzebował kreatora stron Elementor i dodatku JetElements, który zawiera ten moduł Scroll Navigation (nie zapominaj, że wtyczka JetElements jest najbardziej funkcjonalnym dodatkiem do Elementora i można ją użyć do zastosowania wielu innych funkcji).

Wiąc, aby stworzyć efekt płynnego przewijania należy wykonać następujące kroki:

  1. Otwórz stronę, na której chcesz zastosować moduł Scroll Navigation w kreatorze stron Elementor.
  2. W centrum strony naciśnij Dodaj nową.
  3. W otwartym menu kliknij Edytuj i przejdź do ustawień zaawansowanych po lewej stronie.
  4. Wprowadź nazwę sekcji, z którą będziesz pracował, w polu CSS ID.
    Zwróć uwagę na wielkie i małe litery oraz podkreślenia. Pamiętaj też, że nazwa każdej sekcji powinna być unikalna (sekcja_1, sekcja_2 itd.).
  5. Pamiętaj, że możesz utworzyć dowolną liczbę sekcji, ale nie mniej niż dwie.
  6. Po dodaniu wszystkich sekcji znajdź widżet moduł Scroll Navigation w polu wyszukiwania po lewej stronie menu. Przeciągnij i upuść go powyżej wszystkich sekcji.
  7. Po lewej stronie zobaczysz ustawienia zawartości tego widżetu. Na karcie Element musisz dodać liczbę elementów równą liczbie utworzonych sekcji. Zobaczysz trzy elementy już wymienione. A jeśli potrzebujesz więcej, po prostu kliknij Dodaj nowy.
  8. Otwórz wszystkie elementy po kolei i sprawdź poprawność identyfikatora sekcji dodanego w polu CSS ID kilka kroków temu. Jeśli identyfikatory nie są zgodne, przewijanie będzie działało nieprawidłowo.
  9. Możesz także ustawić ikonę podpowiedzi i tytuł etykiety dla każdego elementu nawigacyjnego. W zależności od potrzeb możesz włączyć lub wyłączyć odwrotność w tej sekcji.
  10. Na karcie Ustawienia możesz zmienić pozycję elementów przewijania, ustawić niestandardową szybkość przewijania, użyć przesunięcia lub zezwolić na domyślne przełączanie sekcji.
  11. Teraz przejdź do ustawień stylu modułu Scroll Navigation. Możesz zobaczyć ustawienia, takie jak typ tła, zdjęcie w tle i obramowanie. Tutaj możesz także ekseperementować się wyglądem typografii podpowiedzi i etykiet.

No i gotowe - tak działa moduł Scroll Navigation. Dzięki tej funkcji klienci będą mogli łatwo wyszukiwać pożądane informacje!


(wideo w jęyzku angielskim)

Ten artykuł został przetłumaczony z angielskiego. Orygimał można znaleźć tutaj: How to Create Scroll Navigation with Elementor?



Katarzyna Pawłowska

W branży IT od 8 lat. Fan nowych technologii webowych, web designu oraz rozwiązań użytecznych i funkcjonalnych. W praktyce: marketer, DJ, blogerka. W wolnym czasie wspiera inicjatywy propagujące wiedzę z dziedziny SMM i rozwija swoją miłość do crossfitu.