Cara Membuat Preloader di Sitepad

Jika sebelumnya kita sudah membahas cara membuat preloader di WordPress baik itu menggunakan Elementor maupun Gutenberg, gimana kalau kamu mau membuat preloader, tapi di sitepad?

Dalam artikel ini, kita akan membahas cara lengkap membuat preloader di Sitepad sehingga ketika websitemu diakses, akan ada animasi loading yang bisa membuat tampilannya lebih menarik.

Cara Membuat Preloader di Sitepad

Karena WordPress dan Sitepad menggunakan konsep sama dan bahkan kamu juga menggunakan plugin Pagelayer di WordPress jika ingin mengedit halaman seperti sitepad, maka cara membuat preloader juga hampir sama.

Tapi sebelum memulai, pastikan kamu sudah:

• Login ke halaman admin sitepad
• Upload gambar yang digunakan untuk preloader, biasanya dengan ekstensi .gif

Sebagai informasi tambahan, tutorial ini akan membuat preloader yang berjalan disemua halaman website yang menggunakan sitepad. Jika kamu ingin membuat preloader di satu halaman saja, maka kamu bisa edit halaman yang akan kamu tambah preloader saja.

1. Edit Template Header

Ketika sudah berada dihalaman dashboard WordPress, kamu bisa membuka halaman Templates kemudian edit bagian Header yang sudah ada

Jika kamu tidak langsung diarahkan ke editor Sitepad, maka kamu bisa klik link Edit using Pagelayer

2. Buat Row Baru

Tambahkan Row baru dengan klik tombol Add New Row ketika kamu sudah berada dihalaman editor Pagelayer

3. Tambahkan CSS ID di Row

Ketika sudah menambahkan Row baru, kamu bisa menambahkan CSS ID, misalnya dengan preload-wpg dengan cara klik icon pensil, kemudian buka tab Options > Custom CSS

4. Tambahkan Gambar

Sekarang kamu bisa menambahkan gambar kedalan Row yang baru saja kamu tambahkan. Disini kamu bisa menambahkan gambar preloader yang sudah kamu siapkan

5. Tambahkan Custom HTML

Ketika gambar sudah ditambahkan kedalam Row, kamu bisa menambahkan block Custom HTML didalam Row yang sama supaya preloader sudah berjalan

Untuk bagian Custom HTML, isikan dengan kode berikut:

1<script>2 document.addEventListener('DOMContentLoaded', function () {3        setTimeout(function () {4            document.getElementById('preload-wpg').style.display = 'none';5        }, 2000);6    });7</script>8<style>9#preload-wpg {10    position: fixed;11    top: 0;12    left: 0;13    min-height: 100vh;14    width: 100%;15    height: 100%;16    background: #fff; /* warna background preloader */17    z-index: 9999;18    display: flex; 19    justify-content: center; 20    align-items: center;21}</style>

Dengan kode diatas, maka preloader akan ditampilkan dalam 2 detik. Jika kamu ingin membuat lebih lama, maka bisa mengubah 2000 dengan angka lebih tinggi.

6. Publish dan Periksa Hasilnya

Sekarang kamu bisa publish atau update template Header dan lihat hasilnya. Jika berhasil, maka ketika kamu akses website atau membuka halaman, akan ada preloader seperti ini

Itulah cara mudah membuat preloader di Sitepad. Jika kamu masih belum menginstall sitepad, maka kamu bisa menginstallnya mengikuti tutorial berikut ini: Cara Install Sitepad di Hosting