Membuat Preloader Elementor Pro

Apabila kamu menemukan halaman cara membuat preloader Elementor Pro ini dari mesin pencari, mungkin kamu sudah tahu apa itu maksudnya Preloader.

Tapi, disini kita akan bahas dulu maksudnya preloader itu gimana.

Jadi, seperti namanya, preloader ini berfungsi untuk menampilkan gambar atau animasi loading sebelum konten websitemu ditampilkan sepenuhnya, sehingga bisa menjadi lebih berkesan dan dapat mengenalkan logo atau icon websitemu. Contohnya seperti ini

Jadi, apakah kamu sudah paham maksudnya? Apabila sudah, maka kita bisa lanjut ke cara membuat preloader Elementor Pro.

Cara Membuat Preloader Elementor Pro

Sebenarnya cara ini bisa kamu lakukan dengan Elementor versi gratis, namun disini kita menggunakan Elementor Pro supaya bisa membuat elemen Header dan preloader bisa diterapkan ke semua halaman yang ada didalam website.

Selain itu, untuk menggunakan cara ini dan melakukan kustomisasi lebih lanjut, kamu perlu memahami penggunaan CSS dan Javascript.

Langsung saja, berikut langkah-langkah membuat preloader Elementor Pro.

1. Buat Template Header

Jika kamu belum memiliki template Header, maka kamu bisa membuatnya dulu. Namun jika kamu sudah memiliki template Header, maka kamu bisa mengedit template tersebut.

Untuk membuat template Header, kamu bisa membuka menu Templates > Theme Builder > Header > Klik icon +

2. Tambahkan Container

Setelah berada dihalaman Elementor Header Builder, kamu bisa menambahkan container pertamamu. Pilih saja container dengan satu kolom.

Setelah menambahkan container 1 kolom, buka tab Advanced dan pada bagian Layout > CSS ID isikan dengan wpg_preload

3. Tambahkan Widget Icon/Image

Sekarang, kamu bisa menambahkan widget kedalam container tersebut seperti gambar, icon, dan lainnya. Misalnya disini menggunakan icon

Sama seperti ketika menambahkan container, pada opsi Edit Icon, klik menu Advanced, kemudian tambahkan CSS ID dengan nama wpg_loader

Terakhir, buka menu Style dan pada opsi Size ubah ukurannya menjadi 1

4. Tambahkan Widget HTML

Sekarang tambahkan lagi widget HTML dibawah widget icon atau image yang sudah kamu buat sebelumnya

Tambahkan kode berikut ini kedalam widget HTML

1<script>2    document.addEventListener('DOMContentLoaded', function () {3        setTimeout(function () {4            document.getElementById('wpg_preload').style.display = 'none';5            document.getElementById('content').classList.add('visible');6        }, 2000);7    });8</script>

Sehingga hasilnya akan menjadi seperti ini

Tambahkan juga CSS ID dengan nama wpg_preloader_adds untuk menyembunyikan widget ini, sehingga nantinya halamanmu tidak terlihat ada spasi atau jarak kosong

5. Tambahkan Custom CSS

Langkah terakhir yang perlu kamu lakukan supaya preloader bisa berjalan adalah dengan cara menambahkan custom CSS pada halaman atau template Header. Caranya, klik icon pengaturan yang ada di pojok kiri bawah

Setelah berada di pengaturan halaman, klik atau buka menu Advanced

Tambahkan kode berikut ini kedalam custom CSS yang tersedia

1#wpg_preload {2    position: fixed;3    top: 0;4    left: 0;5    width: 100%;6    height: 100%;7    background: #fff;  /*Warna background penutup konten*/8    display: flex;9    align-items: center;10    justify-content: center;11    z-index: 1000;12}13#wpg_loader {14    top: 50%; /*Batas atas loader*/15    left: 50%; /*Batas kiri loader*/16    border: 8px solid #363636; /*Primary loader*/17    border-top: 8px solid #3498db; /*Secondary loader*/18    border-radius: 50%;19    width: 50px;20    height: 50px;21    animation: spin 1s linear infinite; /*animasi loader*/22}23@keyframes spin {24    0% { transform: rotate(0deg); }25    100% { transform: rotate(360deg); }26}27#wpg_preloader_adds  {display: none;} /*Menyembunyikan widget HTML*/

Ketika kamu sudah menambahkan kode diatas, maka tampilan di Elementormu akan menjadi seperti ini

6. Publish Halaman

Karena sekarang sudah selesai, maka kamu bisa mempublish halaman atau template yang sudah kamu buat tersebut dan pada pop-up Display Condition, kamu bisa menentukan dimana saja preloader akan ditampilkan, misalnya disini kita akan menampilkan preloader ke semua halaman yang ada di website

7. Akses Halaman Websitemu

Sekarang kamu bisa membuka halaman websitemu dan mencoba membuka berbagai halaman sesuai dengan kondisi yang sudah kamu terapkan di langkah nomor 6.

Apabila berhasil, maka hasilnya menjadi seperti ini

Bagaimana, Mudah bukan?

Tentunya kamu bisa melakukan kustomisasi lebih lanjut pada tampilan preload tersebut supaya tampilannya lebih menarik, mengingat kode yang digunakan dalam tutorial ini merupakan kode dasar saja.