Cara Membuat Situs Web Bergulir Halaman Penuh Di Elementor

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

Membuat Situs Web Bergulir Layar Penuh Di Elementor

Sekarang kami akan mendemonstrasikan proses pembuatan situs web bergulir 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 header 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 mengeksekusi 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 plugin ini adalah yang paling mudah digunakan.

Pilih Tambahkan HTML Khusus di bawah CSS & JS Khusus di Dasbor WordPress setelah menginstal plugin. Sekarang, tempelkan kode yang disebutkan di atas, pastikan untuk menempatkannya di header dan front end.

Langkah selanjutnya adalah memasukkan beberapa JS unik. Untuk menginisialisasi fullPage.js dan mengatur opsi dan prosedurnya, kita harus menggunakan jQuery. Berikut 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 di fase ini. Contoh sebelumnya mencakup titik navigasi, yang akan muncul di sisi kanan situs gulir kami, serta opsi minimum yang diperlukan untuk situs gulir satu halaman penuh. Saat kami memodifikasi desain kami menjadi responsif, saya akan membahas lebih banyak alternatif. Kunjungi dokumentasi resmi untuk detail lebih lanjut tentang pilihan Anda.

Langkah 2: Siapkan Halaman Elementor

Markup berikut diperlukan oleh fullPage.js untuk Halaman Bergulir kami.

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

Div individual 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 kita konfigurasikan halaman kita yang sebenarnya terlebih dahulu. 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 mencakup kode pendek untuk setiap slide, akan berfungsi sebagai kerangka Halaman kami. Kami ingin menambahkan kode berikut:

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

Pastikan bagian tersebut memiliki lebar penuh. Selain itu, karena kita tidak ingin padding yang ditambahkan Elementor secara default ke kolom, atur padding bagian dan kolom ke 0.

Setelah membuat slide sebenarnya pada 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 templat.

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

Buat bagian baru dengan membuka Templat - Tambah Baru.

Slide pertama dari situs pengguliran satu halaman penuh kami sekarang akan dibuat. Buat bagian baru di Elementor dan atur tingginya ke "Sesuaikan dengan 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 Templat Elementor Anda. Templat yang baru-baru ini Anda kembangkan seharusnya sudah muncul dalam daftar. Ambil ID template ini dan paste ke Halaman yang kita buat pada Langkah 2 dengan menyalinnya.

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

Membungkus

Itu saja! Ini adalah cara paling sederhana 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.