Chciał bym wam przedstawić bardzo kreatywne a zarazem efektowane rozwiązanie dla przewijania waszej strony www. Standardowo każda strona w momencie przewijania myszką zatrzymuje się tam gdzie chcemy. Nie zawsze jest to praktyczne rozwiązanie, tym bardziej jeśli chcemy mieć wyraźny podział na sekcje.
Efekt jaki chcemy uzyskać, to możliwość przewijania i przejścia całej sekcji z jednej do drugiej.
Jest to jeden z poradników, w którym użyjemy wtyczki, która jest nam niezbędna do osiągnięcia tego efektu. Pomimo że jestem przeciwnikiem instalowania wtyczek kiedy jest możliwość zastosowania kodu, to w tym przypadku niestety Elementor nie zapewnia nam sposobu na dodanie kodu do nagłówka witryny.
Wtyczkę jaką dziś użyjemy to Simple Custom CSS and JS. Umożliwi nam ona dodanie niezbędnych kodów, które pozwolą nam stworzyć założony efekt. Jest to najprostsza i najlżejsza wtyczka jaką udało mi się znaleźć i przetestować do tego typu rozwiązań.
Krok nr.1
Po dość długim wstępie możemy wziąć się do pracy. Po zainstalowaniu naszej wtyczki możemy od razu przejść do jej funkcji i wybrać opcję
„dodaj wstawkę HTML”, do której wkleimy poniższy kod:
<script src = „https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.js” ></script> <link rel = „stylesheet” type = „text/css” href = „https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.css” /> <script src = „https://cdnjs.cloudflare.com/ajax/libs/ fullPage.js/3.0.4/fullpage.extensions.min.js” ></script>
Jest to tak zwana funkcja fullPage.js, która uruchomi i pozwoli nam stworzyć przewijanie na naszej stronie w trybie pełnoekranowym.
Ważne jest aby Pamiętać o tym żeby po prawej stronie w sekcji „Opcje” zaznaczyć „in the <head> element” ponieważ koniecznie poniższy fragment kodu musi znajdować się w nagłówku strony.
Następnie musimy dodać trochę kodu JS, który zainicjuje fullPage.js i ustawi jego opcje i metody działania. Ważne żeby w przypadku kodu JS w ustawieniach zaznaczyć tym razem lokalizacje kodu w stopce. Czyli wykonujemy to samo działanie co w przypadku uruchomienia pierwszego kodu z tym że zaznaczamy opcję „In the <footer> element”. A kod o którym mowa to :
jQuery ( dokument ). ready ( function ( $ ) {
$ ( ’ #fullpage ’ ) .fullpage ({
scrollingSpeed : 1000 ,
nawigacja : true ,
slidesNavigation : true });
$ .fn .fullpage .setAllowScrolling ( true ) ; });
W tym kroku ustawiamy również nasze opcje dla FullPage. Powyższy przykład zawiera najbardziej podstawowe opcje wymagane dla witryny z przewijaniem FullPage i zawiera kropki nawigacyjne, które będą wyświetlane po prawej stronie naszej witryny z przewijaniem.
Krok nr.2
W kolejnym kroku musimy skonfigurować stronę za pomocą Elementora. Fullpage.js wymaga użycia kodu HTML, składającego się ze znaczników DIV czyli elementów, które są używane do definiowania części strony.
Każdy element div z sekcją klasy będzie jedną pełnoekranową sekcją naszej przewijanej strony. Najłatwiejszym sposobem, aby to zadziałało z Elementorem, jest użycie szablonów.
Najpierw skonfigurujmy naszą aktualną stronę. Przejdź do stron, stwórz nową stronę , nadaj jej odpowiedni tytuł i adres URL i edytuj ją za pomocą elementora.
Teraz w Elementorze utwórz sekcję z jedną kolumną . W tej kolumnie chcemy dodać widżet HTML. Ten Widget będzie szkieletem naszej strony, zawierającym skróty dla każdego pojedynczego slajdu. Oto kod, który chcemy dodać:
<div id = „fullpage” >
<div class = „sekcja” >
// to wkleimy shortcode sekcji nr.1
</div>
<div class = „sekcja” >
// to wkleimy shortcode sekcji nr.2
</div>
<div class = „sekcja” >
// to wkleimy shortcode sekcji nr.3
</div>
</div>
Upewnij się, że sekcja ma pełną szerokość . Ustaw również dopełnienia sekcji i kolumny na 0, ponieważ Elementor domyślnie dodaje kilka dopełnień do kolumn, czego nie chcemy.
Krok nr.3
Ostatnim krokiem jaki musimy wykonać jest utworzenie każdej sekcji osobni i zapisanie ich jako szablonów. Aby korzystać z krótkich kodów będzie potrzebny Elementor Pro. ( będzie on dostępny jako załącznik do e-booka, jednak polecam zakupienie własnej pełnowymiarowej wersji, ponieważ w przypadku tej dołączonej ode mnie, wykonacie niezbędne czynności opisywane powyżej, jednak nie będziecie otrzymywać niezbędnych aktualizacji, które są dość istotne ).
Przejdź do Szablony – Dodaj nowy i utwórz nową sekcję.
Utworzymy teraz pierwszy slajd naszej witryny z przewijaniem całej strony. W Elementorze dodaj nową sekcję i ustaw jej wysokość na „Dopasuj do ekranu”. W tej sekcji możesz teraz dodawać i stylizować swoje treści. Tylko upewnij się, że używasz tylko jednej sekcji w każdym szablonie. Możesz użyć dowolnej liczby kolumn i kolumn wewnętrznych, aby dostosować układ.
Po zakończeniu tworzenia slajdu zapisz i wróć do szablonów Elementor. Powinieneś teraz zobaczyć szablon, który właśnie utworzyłeś na liście. Skopiuj „krótki kod” tego szablonu i wstaw go na stronie, którą utworzyliśmy
w kroku 2.
Teraz powtórz ten proces dla każdego ze slajdów. Każdy szablon musi składać się z jednej sekcji o wysokości dopasowanej do ekranu.
I to wszystko! Jest to najbardziej podstawowy sposób wykorzystania fullPage.js do tworzenia pełnoekranowych stron przewijanych.
Pamiętaj, że fullpage.js nie jest darmowy dla komercyjnych projektów innych niż open source.