Preloader undangan digital Elementor adalah layar pembuka singkat yang tampil sebelum isi undangan terbuka, biasanya berisi animasi atau inisial pasangan. Layar ini membuat undangan terasa istimewa sejak detik pertama, tetapi membuatnya secara manual ternyata merepotkan: kamu perlu custom CSS, custom JS, dan banyak pengujian. Artikel ini membandingkan cara manual dengan fitur preloader bawaan yang cukup kamu nyalakan lewat toggle.
Jawaban singkat: Ada dua cara membuat preloader di Elementor. Cara manual memakai custom CSS dan JS, rawan error dan harus diulang untuk tiap undangan. Cara praktis memakai fitur bawaan Akunika: nyalakan toggle preloader, pilih satu dari 8 varian, lalu atur gayanya dari editor.
Apa itu preloader undangan digital
Preloader adalah layar sementara yang tampil saat halaman sedang dimuat. Pada undangan digital, preloader sering dipakai sebagai pembuka yang menampilkan animasi, nama mempelai, atau ajakan untuk membuka undangan.
Selain mempercantik, preloader menyembunyikan proses muat gambar dan musik sehingga tamu tidak melihat tampilan yang berantakan sesaat. Efek kesan pertama inilah yang membuatnya populer.
Cara manual dan pain point-nya
Secara umum, membuat preloader manual di Elementor melibatkan beberapa pekerjaan teknis:
- Membuat elemen layar penuh yang menutupi halaman.
- Menulis custom CSS untuk animasinya.
- Menulis custom JS agar layar menghilang setelah halaman selesai dimuat.
- Mengatur agar tidak muncul terus di editor Elementor.
- Mengujinya di beberapa ponsel dan peramban.
Masalahnya, setiap langkah punya risiko. Layar bisa tersangkut dan tidak pernah hilang, berkedip saat halaman muncul, atau bentrok dengan plugin cache yang mengoptimalkan skrip. Dan karena kodenya melekat pada satu halaman, setiap undangan baru berarti mengulang pekerjaan atau menyalin kode.
Bagi vendor yang menjual banyak undangan, ini membuang waktu dan sulit dipelihara, terutama bila yang mengedit nanti bukan orang yang menulis kodenya.
Contoh versi custom code
Kalau kamu tetap ingin mencoba cara manual, berikut contoh kerja yang bisa kamu salin. Contoh ini sederhana: satu lingkaran berputar di atas latar krem, lalu menghilang setelah halaman selesai dimuat. Sesuaikan warna dan ukurannya.
Langkah 1: Tambahkan kerangka HTML
Di Elementor, tambahkan widget HTML di bagian paling atas halaman undangan, lalu tempel kode berikut:
<div id="akn-preloader" aria-hidden="true"><span class="akn-ring"></span></div>Langkah 2: Tambahkan CSS
Tempel di Tampilan, Sesuaikan, CSS Tambahan (atau di fitur Custom CSS Elementor bila kamu memakai Pro):
#akn-preloader {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
background: #f7f6f0;
transition: opacity .5s ease, visibility .5s ease;
}
#akn-preloader.akn-hide { opacity: 0; visibility: hidden; }
.akn-ring {
width: 56px;
height: 56px;
border: 5px solid #dce8e1;
border-top-color: #d4b038;
border-radius: 50%;
animation: akn-spin .9s linear infinite;
}
@keyframes akn-spin { to { transform: rotate(360deg); } }
body.akn-lock { overflow: hidden; }
.elementor-editor-active #akn-preloader { display: none; }
@media (prefers-reduced-motion: reduce) {
.akn-ring { animation-duration: 3s; }
}Langkah 3: Tambahkan JavaScript
Tempel di widget HTML yang sama, tepat di bawah kerangka tadi (atau lewat plugin penyisip kode):
<script>
(function () {
var el = document.getElementById('akn-preloader');
if (!el) return;
if (document.body.classList.contains('elementor-editor-active')) { el.remove(); return; }
document.body.classList.add('akn-lock');
var done = false, start = Date.now(), MIN = 800;
function hide() {
if (done) return;
done = true;
el.classList.add('akn-hide');
document.body.classList.remove('akn-lock');
setTimeout(function () { el.remove(); }, 600);
}
function schedule() {
setTimeout(hide, Math.max(0, MIN - (Date.now() - start)));
}
if (document.readyState === 'complete') { schedule(); }
else { window.addEventListener('load', schedule); }
setTimeout(hide, 6000); // pengaman bila halaman tidak selesai dimuat
})();
</script>Kode ini sudah menangani beberapa jebakan: layar disembunyikan di editor Elementor, ada batas waktu pengaman 6 detik supaya tidak tersangkut, preloader tampil minimal 0,8 detik agar tidak berkedip, dan animasi diperlambat bagi pengguna yang meminta gerak berkurang.
Keterbatasan cara ini
- Harus disalin ke tiap undangan. Kerangka HTML dan skrip menempel pada halaman, jadi setiap undangan baru berarti menyalin ulang.
- Satu gaya saja. Mengganti animasi berarti menulis ulang CSS.
- Rentan terhadap plugin optimasi. Bila plugin cache menunda atau menggabungkan JavaScript, skrip bisa jalan terlambat. Pengaman 6 detik mencegah layar tersangkut selamanya, tetapi tamu tetap menunggu.
- Perlu diuji ulang setiap pembaruan. Perubahan pada tema atau Elementor bisa memengaruhi hasilnya.
Karena itu, cara manual cocok untuk satu atau dua undangan. Untuk vendor yang menjual banyak undangan, fitur bawaan lebih praktis.
Cara praktis: preloader bawaan Akunika
Akunika menyediakan preloader sebagai fitur bawaan. Tidak ada kode yang perlu kamu tulis:
- Buka pengaturan tampilan global undangan.
- Nyalakan toggle Preloader.
- Pilih salah satu dari 8 varian animasi.
- Atur warna, ukuran, dan gaya dari editor.
- Simpan, lalu lihat hasilnya di undangan.
Karena diatur di tingkat global, preloader berlaku konsisten untuk undangan yang kamu buat setelahnya, dan tetap bisa disesuaikan per kebutuhan.
Perbandingan kedua cara
| Aspek | Manual (CSS dan JS) | Preloader Akunika |
|---|---|---|
| Keahlian | Perlu paham CSS dan JS | Tidak perlu coding |
| Waktu per undangan | Berulang atau salin kode | Sekali atur, berlaku seterusnya |
| Risiko error | Tersangkut, berkedip, bentrok cache | Dibuat untuk alur undangan |
| Variasi | Buat sendiri | 8 varian siap pakai |
| Pemeliharaan | Sulit bila ganti orang | Diatur dari editor |
Tips memakai preloader dengan baik
- Jaga durasinya singkat. Preloader yang terlalu lama membuat tamu bosan, jadi pilih animasi yang ringan.
- Samakan dengan tema undangan. Warna dan gaya sebaiknya senada dengan cover.
- Uji di ponsel dengan koneksi biasa. Tamu membuka undangan dari ponsel, bukan hanya dari laptop.
- Jangan membebani halaman. Gambar yang terlalu besar di preloader justru memperlambat muat.
Panduan pengaturan tampilan lainnya ada di edit undangan digital sendiri.
Kapan preloader membantu dan kapan tidak
Preloader bukan keharusan. Ia membantu dalam situasi tertentu:
- Undangan berisi banyak foto atau musik yang butuh waktu muat. Preloader menutupi proses itu.
- Kamu ingin kesan pertama yang istimewa. Animasi pembuka membuat undangan terasa dirancang.
- Kamu menjual undangan dengan citra premium. Detail seperti ini membedakan tampilanmu.
Namun preloader justru mengganggu bila terlalu lama, terlalu ramai, atau tampil di halaman yang sebenarnya sudah cepat. Gunakan secukupnya.
Memilih varian yang tepat untuk tema
Pilih gaya animasi yang selaras dengan karakter undangan:
- Tema minimalis dan modern: animasi sederhana dengan satu warna.
- Tema klasik atau adat: animasi yang lembut dan tidak terlalu cepat.
- Tema ceria: animasi dengan gerak yang lebih hidup, tetapi tetap singkat.
Akunika menyediakan 8 varian preloader. Coba beberapa, lalu pilih yang paling pas dengan cover dan warna undanganmu.
Kenapa preloader manual sering bermasalah
Bila kamu tetap ingin membuat sendiri, ketahui jebakannya:
- Layar tersangkut. Bila skrip penutup gagal berjalan, preloader tidak pernah hilang dan tamu tidak bisa membuka undangan.
- Berkedip saat halaman muncul. Kode yang terlambat dimuat membuat isi halaman terlihat sesaat sebelum tertutup.
- Bentrok dengan plugin cache. Optimasi skrip kadang menunda atau menggabungkan kode, sehingga preloader tidak berfungsi.
- Mengganggu editor. Layar penuh bisa menutupi area kerja Elementor.
- Sulit dipindahkan. Kode yang menempel pada satu halaman harus disalin dan diuji ulang untuk undangan lain.
Dengan fitur bawaan, masalah-masalah itu sudah ditangani sebagai bagian dari alur undangan.
Checklist uji preloader
Sebelum mempublikasikan undangan, periksa:
- Preloader hilang sendiri setelah halaman selesai dimuat.
- Tidak ada kedipan isi halaman sebelum preloader tampil.
- Tampilan rapi di ponsel kecil maupun layar besar.
- Durasinya terasa singkat, tidak membuat tamu menunggu.
- Warna dan gaya senada dengan cover undangan.
Pembahasan lain tentang fitur tampilan ada di fitur undangan digital yang wajib ada.
Contoh pengaturan untuk tiga jenis undangan
Berikut contoh cara berpikir memilih pengaturan preloader:
Undangan minimalis. Pilih animasi satu warna yang tenang, dengan durasi singkat. Fokusnya kesan bersih.
Undangan bernuansa adat. Pilih animasi yang lembut, dengan warna selaras motif atau cover. Hindari gerak yang terlalu cepat.
Undangan modern dengan banyak foto. Pilih animasi ringan yang tidak mencolok, karena fungsinya menutupi proses muat gambar.
Dalam ketiga kasus, ujilah di ponsel sungguhan sebelum undangan dikirim.
Preloader dan kecepatan halaman
Preloader tidak menggantikan optimasi. Bila halaman lambat karena gambar terlalu besar, preloader hanya menyamarkannya. Kompres foto ke format WebP, batasi ukuran gambar, dan gunakan hosting yang memadai. Setelah itu preloader berfungsi sebagai sentuhan akhir, bukan penutup masalah. Ukur kecepatan halaman dengan dan tanpa preloader di ponsel untuk memastikan kesannya tetap nyaman.
Ringkasan poin penting
- Preloader manual butuh custom CSS dan JS, rawan error, dan harus diulang.
- Di Akunika, preloader cukup di-toggle ON, pilih satu dari 8 varian, lalu diatur dari editor.
- Preloader yang baik singkat, senada dengan tema, dan ringan.
Pertanyaan yang sering diajukan
Apakah preloader memperlambat undangan?
Preloader tidak mempercepat muat halaman, tetapi menyamarkan prosesnya. Pilih animasi ringan dan hindari gambar terlalu besar.
Apakah saya perlu menulis kode untuk preloader di Akunika?
Tidak. Cukup nyalakan toggle dan atur dari editor.
Berapa banyak varian preloader yang tersedia?
Akunika menyediakan 8 varian.
Apakah preloader tersedia di semua tier?
Ketersediaan varian mengikuti tier lisensi. Cek rinciannya di halaman harga.
