Membuat halaman gulir layar penuh di Elementor juga sangat mudah dan nyaman. Untuk mencapainya, kita akan menggunakan sebuah plugin bernama fullPage.js . Ada metode lain untuk mencapai efek ini, seperti CSS scrolling atau Elementor Addons. Namun, fullPage.js memberikan solusi terbaik untuk kompatibilitas, daya tanggap, dan kegunaan.

Membuat Situs Web Pengguliran Layar Penuh Di Elementor

Sekarang kami akan mendemonstrasikan proses pembuatan situs web gulir satu halaman penuh di Elementor.

Langkah 1: Memuat fullPage.js

Untuk menggunakan fungsi plugin fullPage.js , kita harus memuatnya terlebih dahulu.

Kode berikut harus ditambahkan ke tajuk situs web kami agar dapat dimuat dengan benar:

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

Kami memerlukan plugin untuk menjalankan kode ini karena Elementor saat ini tidak menawarkan cara untuk menambahkan kode ke header situs. Meskipun ada beberapa plugin yang dapat menambahkan kode ke header kita, menurut saya ini adalah yang paling mudah digunakan.

Pilih Tambahkan HTML Kustom di bawah CSS Kustom & JS di Dasbor WordPress setelah menginstal plugin. Sekarang, rekatkan kode yang disebutkan di atas, pastikan untuk menempatkannya di header dan ujung depan.

Langkah selanjutnya adalah memasukkan beberapa JS unik. Untuk menginisialisasi fullPage.js dan mengatur opsi dan prosedurnya, kita harus menggunakan jQuery. Berikut adalah beberapa pilihan mendasar yang berlaku untuk semua situs dengan pengguliran vertikal.

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

Pastikan untuk memasukkan kode ini di footer ujung depan.

Kami juga mengatur pengaturan FullPage kami dalam fase ini. Contoh sebelumnya menyertakan titik navigasi, yang akan muncul di sisi kanan situs pengguliran kami, serta opsi minimum yang diperlukan untuk situs pengguliran satu halaman penuh. Saat kami memodifikasi desain kami agar responsif, saya akan membahas lebih banyak alternatif. Kunjungi dokumentasi resmi untuk detail lebih lanjut tentang opsi Anda.

Langkah 2: Siapkan Halaman Elementor

Markup berikut diperlukan oleh fullPage.js untuk Scrolling Page kita.

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

Masing-masing div halaman gulir kami dengan bagian kelas masing-masing akan menjadi bagian layar penuh. Memanfaatkan Templat adalah pendekatan paling sederhana untuk membuat ini berfungsi dengan Elementor.

Mari pertama-tama konfigurasikan halaman kita yang sebenarnya. Buat halaman baru di Pages, berikan judul dan URL yang sesuai, lalu edit menggunakan Elementor.

Buat Bagian dengan satu Kolom di Elementor sekarang. Kami ingin menambahkan HTML-Widget ke kolom ini. Widget ini, yang menyertakan kode pendek untuk setiap slide, akan berfungsi sebagai kerangka Halaman kita. Kami ingin menambahkan kode berikut:

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

Verifikasi bahwa bagian tersebut lebar penuh. Selain itu, karena kami tidak ingin padding yang ditambahkan Elementor secara default ke kolom, setel padding bagian dan kolom ke 0.

Setelah membuat slide sebenarnya di langkah selanjutnya, kami akan mengubah id template Elementor ke nilai yang benar.

Langkah 3: Siapkan bagian

Langkah terakhir adalah membuat dan menyimpan setiap bagian secara terpisah sebagai template.

Anda memerlukan Elementor Pro untuk menggunakan Shortcode. Waktunya telah tiba untuk membelinya jika Anda belum berpikir untuk melakukannya. Anda memiliki semua alat yang Anda butuhkan untuk membuat situs web menggunakan Elementor. Tidak perlu selalu membeli tema baru!

Buat bagian baru dengan masuk ke Template - Add New.

Slide pertama dari situs pengguliran halaman penuh kami sekarang akan dibuat. Buat bagian baru di Elementor dan atur tingginya ke "Sesuai Layar". Sekarang setelah Anda menambahkan materi, Anda dapat menatanya. Pastikan setiap templat berisi paling banyak satu bagian. Untuk membuat tata letak yang unik, Anda dapat menggunakan kolom dan kolom dalam sebanyak yang Anda suka.

Simpan slide Anda setelah selesai, lalu kembali ke Template Elementor Anda. Templat yang baru saja Anda kembangkan seharusnya sekarang muncul dalam daftar. Ambil ID templat ini dan tempelkan ke Halaman yang kita buat di Langkah 2 dengan menyalinnya.

Sekarang ulangi prosedur ini untuk setiap slide yang Anda miliki. Setiap template harus memiliki satu area dengan ketinggian yang disesuaikan dengan layar.

Membungkus

Itu saja, kalau begitu! Ini adalah cara termudah untuk membuat halaman gulir layar penuh dengan fullPage.js di Elementor . Saya harap ini dapat membantu Anda merancang situs web yang mudah dan minimalis untuk usaha masa depan Anda.