Cara Membuat Preloader WordPress Dengan Block Editor

Nah, kalau sudah punya gambarnya, sekarang kamu bisa memulai dari langkah pertama

Cara Membuat Preloader WordPress Dengan Block Editor

Tambahan lagi, dalam tutorial ini kita menggunakan tema default wordpress Twenty Twenty-Five yang sudah ada fitur Theme Builder dan bisa edit footer sehingga preloader akan diterapkan ke semua halaman di website.

Jika kamu ingin membuat preloader di satu halaman saja, misalnya di Home, kamu bisa juga edit halaman tersebut menggunakan Block Editor.

1. Buka Halaman Editor

Karena disini kita akan edit di footer, maka kamu bisa membuka halaman Appearance > Editor dari halaman dashboard wordpress

2. Edit Template Footer

Sekarang dari halaman Design, kamu bisa edit template Footer yang digunakan di websitemu dari menu Patterns > Footer. Jika kamu membuat preloader untuk satu halaman, kamu bisa melewati langkah ini

3. Tambahkan Elemen Stack

Sekarang dari halaman block editor WordPress, tambahkan elemen dengan nama Stack

4. Kustomisasi Stack

Sebelum menambahkan elemen lagi, kamu bisa kustomisasi Stack dengan opsi seperti di gambar berikut

Selain kustomisasi tersebut, pastikan kamu menambahkan class dari menu Advanced > Additional CSS class(es) dengan nama bebas, misalnya wpgan-preload (jika mengubah class, kamu harus mengubah script preload yang digunakan)

5. Tambahkan Spacer

Spacer disini digunakan untuk membuat gambar berada ditengah layar, karena berbeda dengan Elementor dimana kamu bisa kustomisasi tata letak langsung, dengan Block Editor kamu perlu menggunakan trik

6. Kustomisasi Spacer

Supaya gambar bisa berada ditengah layar nantinya, kamu bisa kustomisasi spacer dengan menentukan bagian Specify a fixed height dengan nilai antara 30-50%

7. Tambahkan Gambar

Sekarang kamu bisa menambahkan gambar tepat dibawah Spacer yang sudah kamu tambahkan dan pastikan gambarnya berada didalam stack

8. Kustomisasi Gambar

Secara default, ukuran gambar mungkin terlalu besar atau terlalu kecil, sehingga disini kamu perlu kustomisasi ukuran gambar, misalnya dengan width 150px.

9. Tambahkan Kustom HTML

Terakhir, kamu hanya perlu menambahkan kustom HTML dibawah block gambar dan bisa kamu isikan dengan kode berikut

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const preloadElement = document.querySelector('.wpgan-preload');

        setTimeout(function () {
            if (preloadElement) {
                preloadElement.style.display = 'none'; 
            }
        }, 2000);
    });
</script>
<style>
.wpgan-preload {
    position: fixed;
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    min-height: 100vh;
    width: 100%;
    height: 100%;
    background: #fff; 
    z-index: 99;
}
</style>

Setelah menambahkan kode tersebut, preloader tidak akan langsung berjalan didalam editor, sehingga kamu perlu memeriksa preview

10. Simpan Perubahan dan Lihat Hasilnya

Sekarang kamu bisa menyimpan perubahan yang sudah kamu buat, kemudian coba untuk membuka halaman di websitemu, jika berhasil maka ketika diakses akan menjadi seperti ini