Tworzenie pełnoekranowych przewijanych stron w Elementorze jest również bardzo łatwe i wygodne. Aby to osiągnąć, użyjemy wtyczki o nazwie fullPage.js . Istnieją inne metody osiągnięcia tego efektu, takie jak przewijanie CSS lub dodatki Elementor . Jednak fullPage.js zapewnia najlepsze rozwiązanie pod względem zgodności, responsywności i użyteczności.

Tworzenie pełnoekranowych przewijanych stron internetowych w Elementorze

Teraz zademonstrujemy proces tworzenia przewijanej strony internetowej w Elementorze.

Krok 1: Ładowanie pliku fullPage.js

Aby skorzystać z funkcji wtyczki fullPage.js , musimy ją najpierw załadować.

Poniższy kod musi zostać dodany do nagłówka naszej strony internetowej, aby ładowała się poprawnie:

<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>

Potrzebujemy wtyczki do wykonania tego kodu, ponieważ Elementor obecnie nie oferuje możliwości dodania kodu do nagłówka witryny. Chociaż istnieje kilka wtyczek, które mogą dodawać kod do naszego nagłówka, odkryłem, że ta jest najłatwiejsza w użyciu.

Wybierz opcję Dodaj niestandardowy kod HTML w sekcji Niestandardowy CSS & JS w panelu WordPress po zainstalowaniu wtyczki. Teraz wklej powyższy kod, pamiętając o umieszczeniu go zarówno w nagłówku, jak i na froncie.

Następnym krokiem jest dołączenie unikalnego JS. Aby zainicjować plik fullPage.js oraz ustawić jego opcje i procedury, musimy użyć jQuery. Oto kilka podstawowych wyborów, które mają zastosowanie do wszystkich witryn z przewijaniem w pionie.

jQuery(document).ready(function($) {
    $('#fullpage').fullpage({
        //options here
        scrollingSpeed: 1000,
        navigation: true,
        slidesNavigation: true
    });
    //methods
    $.fn.fullpage.setAllowScrolling(true);
});

Pamiętaj, aby umieścić ten kod w stopce interfejsu użytkownika.

W tej fazie określamy również nasze ustawienia FullPage. Poprzedni przykład zawiera kropki nawigacyjne, które pojawią się po prawej stronie naszej przewijanej strony, a także absolutne minimum opcji potrzebnych do przewijania całej strony. Kiedy zmodyfikujemy nasz projekt, aby był responsywny, omówię więcej alternatyw. Odwiedź oficjalną dokumentację, aby uzyskać więcej informacji na temat dostępnych opcji.

Krok 2: Skonfiguruj stronę Elementor

Poniższy znacznik jest wymagany przez plik fullPage.js dla naszej przewijanej strony.

<div id="fullpage">
    <div class="section">Section 1</div>
    <div class="section">
        <div class="slide">Slide 2.1</div>
        <div class="slide">Slide 2.2</div>
        <div class="slide">Slide 2.3</div>
    </div>
    <div class="section">Section 3</div>
</div>

Poszczególne elementy div naszej przewijanej strony z sekcją klasy będą sekcjami pełnoekranowymi. Wykorzystanie szablonów to najprostsze podejście do tego, aby działało to z Elementorem.

Najpierw skonfigurujmy naszą rzeczywistą stronę. Utwórz nową stronę w Pages, nadaj jej odpowiedni tytuł i adres URL, a następnie edytuj ją za pomocą Elementora.

Utwórz teraz sekcję z jedną kolumną w Elementorze. Chcemy dodać HTML-Widget do tej kolumny. Ten widżet, który zawiera skróty dla każdego slajdu, będzie służył jako szkielet naszej strony. Chcemy dodać następujący kod:

<div id="fullpage">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</div>

Sprawdź, czy sekcja ma pełną szerokość. Dodatkowo, ponieważ nie chcemy dopełnienia, które Elementor domyślnie dodaje do kolumn, ustaw dopełnienie sekcji i kolumny na 0.

Po utworzeniu rzeczywistych slajdów w późniejszych krokach zmienimy identyfikator szablonu Elementora na jego poprawną wartość.

Krok 3: Skonfiguruj sekcje

Ostatnim krokiem jest osobne zbudowanie i zapisanie każdej sekcji jako szablonu.

Będziesz potrzebować Elementor Pro , aby używać skrótów. Nadszedł czas, aby go kupić, jeśli jeszcze o tym nie pomyślałeś. Masz wszystkie narzędzia potrzebne do zbudowania strony internetowej za pomocą Elementora. Nie musisz zawsze kupować nowego motywu!

Utwórz nową sekcję, przechodząc do Szablony - Dodaj nowy.

Zostanie utworzony pierwszy slajd naszej witryny z przewijaniem całej strony. Utwórz nową sekcję w Elementorze i ustaw jej wysokość na „Dopasuj do ekranu”. Po dodaniu materiału możesz nadać mu styl. Upewnij się tylko, że każdy szablon zawiera maksymalnie jedną część. Aby stworzyć unikalny układ, możesz użyć dowolnej liczby kolumn i kolumn wewnętrznych.

Zapisz slajd, gdy skończysz, a następnie wróć do szablonów Elementora. Szablon, który niedawno opracowałeś, powinien teraz pojawić się na liście. Weź identyfikator tego szablonu i wklej go do strony utworzonej w kroku 2, kopiując go.

Teraz powtórz tę procedurę dla każdego slajdu, który masz. Każdy szablon musi mieć jeden obszar o wysokości dopasowanej do ekranu.

Podsumowanie

To wszystko! Jest to najprostszy sposób tworzenia pełnoekranowych stron z przewijaniem za pomocą pliku fullPage.js w Elementorze . Mam nadzieję, że może to pomóc w zaprojektowaniu łatwej i minimalistycznej strony internetowej dla przyszłych przedsięwzięć.