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:
- Otwórz stronę, na której chcesz zastosować moduł Scroll Navigation w kreatorze stron Elementor.
- W centrum strony naciśnij Dodaj nową.
- W otwartym menu kliknij Edytuj i przejdź do ustawień zaawansowanych po lewej stronie.
- 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.). - Pamiętaj, że możesz utworzyć dowolną liczbę sekcji, ale nie mniej niż dwie.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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?