Obserwatorzy kodu

Jak utworzyć witrynę internetową z przewijaniem całej strony w Elementorze

Rifat Poradniki WordPress Mar 31, 2024

Tworzenie przewijanych stron na pełnym ekranie w Elementorze jest również bardzo łatwe i wygodne. Aby to osiągnąć, wykorzystamy wtyczkę 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 kompatybilności, responsywności i użyteczności.

Jak utworzyć witrynę internetową z przewijaniem całej strony w Elementorze

Tworzenie stron internetowych z przewijaniem na pełnym ekranie w Elementorze

Teraz zademonstrujemy proces tworzenia witryny przewijanej na całą stronę w Elementorze.

Krok 1: Ładowanie fullPage.js

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

Aby strona ładowała się poprawnie, do nagłówka naszej witryny należy dodać następujący kod:

Twórz niesamowite strony internetowe

Z najlepszym darmowym kreatorem stron Elementor

Zacząć teraz 
<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, aby wykonać ten kod, ponieważ Elementor obecnie nie oferuje możliwości dodania kodu do nagłówka witryny. Chociaż istnieje kilka wtyczek, które mogą dodać kod do naszego nagłówka, odkryłem, że ta jest najłatwiejsza w użyciu.

Po zainstalowaniu wtyczki wybierz opcję Dodaj niestandardowy kod HTML w obszarze Niestandardowy CSS i JS w panelu WordPress. Teraz wklej powyższy kod, pamiętając o umieszczeniu go zarówno w nagłówku, jak i w interfejsie.

Adding code to the Header using a WordPress Plugin

Następnym krokiem jest włączenie unikalnego JS. Aby zainicjować fullPage.js oraz ustawić jego opcje i procedury, musimy skorzystać z 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 o umieszczeniu tego kodu w stopce frontonu.

Na tym etapie ustalamy również nasze ustawienia FullPage. Poprzedni przykład obejmuje kropki nawigacyjne, które pojawią się po prawej stronie naszej przewijanej witryny, a także absolutne minimum opcji potrzebnych do przewijania całej strony. Kiedy zmodyfikujemy nasz projekt tak, 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ę Elementora

FullPage.js wymaga następujących znaczników 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ą klas będą sekcjami pełnoekranowymi. Korzystanie z szablonów to najprostszy sposób, aby to zadziałało 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ć widget HTML do tej kolumny. Ten widżet, który zawiera krótkie kody dla każdego slajdu, będzie stanowić 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.

Aby móc korzystać ze skrótów, będziesz potrzebować Elementora Pro . Nadszedł czas, aby go kupić, jeśli jeszcze o tym nie myś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 nową.

Zostanie teraz utworzony pierwszy slajd naszej witryny z możliwością przewijania 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 co najwyżej jedną część. Aby stworzyć unikalny układ, możesz użyć dowolnej liczby kolumn i kolumn wewnętrznych.

Zapisz slajd, kiedy skończysz, a następnie wróć do szablonów Elementora. Niedawno opracowany szablon powinien teraz pojawić się na liście. Weź identyfikator tego szablonu i wklej go na stronę, którą utworzyliśmy w kroku 2, kopiując go.

Teraz powtórz tę procedurę dla każdego posiadanego slajdu. Każdy szablon musi posiadać jeden obszar o wysokości dostosowanej do wielkości ekranu.

Podsumowanie

To wszystko! To najprostszy sposób tworzenia pełnoekranowych stron przewijanych za pomocą pliku fullPage.js w Elementorze . Mam nadzieję, że pomoże Ci to zaprojektować łatwą i minimalistyczną stronę internetową dla Twoich przyszłych przedsięwzięć.

Divi WordPress Theme