Widget FeedKit Slider: Aliran Ucapan & Doa Touch-Friendly
Widget FeedKit Slider menyajikan aliran pesan ucapan dan doa restu para tamu dalam format korsel (carousel slider) modern yang ramah sentuhan layar smartphone, dilengkapi lencana kehadiran, stiker reaksi, dan penomoran halaman halus.
Memahami Kebutuhan & Masalah Lapangan
Ketika puluhan hingga ratusan tamu memberikan ucapan doa pada website undangan digital, daftar ucapan vertikal biasa (infinite vertical scroll) sering kali menimbulkan masalah pada desain tata letak:
- Halaman menjadi sangat panjang ke bawah (scroll fatigue), membuat tamu malas menggulir hingga ke bagian bawah di mana tombol kado pernikahan atau peta lokasi acara berada.
- Tampilan smartphone menjadi berat karena merender puluhan kartu ucapan secara berurutan dalam satu viewport vertikal panjang.
- Ucapan-ucapan doa yang indah dan menyentuh hati menjadi terlewatkan begitu saja karena tamu terburu-buru melakukan fast scroll.
Widget FeedKit Slider Mode dari WDP RSVPKit memecahkan masalah ini dengan mengemas seluruh ucapan ke dalam korsel horizontal yang ringkas, elegan, dan dinamis. Tamu dapat menyimak setiap doa satu per satu dengan gestur geser sentuh yang intuitif.
Prasyarat Sebelum Memulai
Sebelum mengonfigurasi FeedKit dalam mode Slider:
- Plugin WDP RSVPKit v1.4.0 aktif berlisensi resmi.
- Pasang widget WDP RSVPKit FeedKit pada halaman Elementor (dapat diletakkan berdampingan atau di bawah widget formulir).
- Pastikan sudah ada beberapa data ucapan uji coba yang tersimpan untuk melihat efek pergeseran secara nyata.
Pokok Bahasan & Konfigurasi Teknis
1. Anatomi Kartu Ucapan pada FeedKit Slider
Setiap slide kartu ucapan di dalam FeedKit Slider dirancang dengan detail visual tingkat tinggi:
- Avatar Inisial Tamu: Lingkaran avatar elegan berisi 2 huruf inisial nama tamu dengan palet warna harmonis yang membedakan masing-masing pengirim.
- Header Nama & Status Kehadiran: Nama lengkap tamu disertai lencana kehadiran hijau (
Akan Hadir) atau abu-abu (Doa Restu), serta keterangan sesi acara yang dihadiri. - Isi Pesan Doa: Tipografi isi doa yang nyaman dibaca dengan ukuran huruf proporsional (13-14px) dan spasi baris yang longgar (relaxed line-height).
- Stiker Reaksi Tersemat: Jika tamu memilih stiker pada saat mengisi form, stiker tersebut ditampilkan rapi di sudut kiri bawah kartu.
- Indikator Waktu Lampau (Time Ago): Penanda waktu interaktif ramah manusia, misalnya "2 menit yang lalu" atau "1 jam yang lalu".
2. Mengaktifkan Mode Slider di Elementor
Langkah-langkah menyetel widget FeedKit menjadi format slider:
- Klik widget WDP RSVPKit FeedKit pada kanvas Elementor Anda.
- Pada panel pengaturan kiri, buka tab Content > accordion Layout & Query Settings.
- Cari opsi Feed Display Mode, lalu ubah dari Vertical List menjadi Slider Carousel.
- Konfigurasikan parameter operasional slider berikut:
- Slides Per View (Desktop): Rekomendasi 2 atau 3 kartu.
- Slides Per View (Mobile): Otomatis terkunci pada 1 kartu penuh (full-width card) agar fokus membaca optimal.
- Space Between Slides: Jarak antar kartu (rekomendasi: 20px).
- Enable Touch Swipe: Aktifkan agar tamu di smartphone bisa menggeser kartu dengan ibu jari.
- Enable Autoplay: Geser otomatis (atur durasi delay, misalnya
4000ms). - Pause on Touch/Hover: Jeda otomatis jika tamu sedang menyentuh atau membaca kartu ucapan.
3. Tabel Parameter Navigasi & Paginasi Tab Style
| Kontrol di Tab Style | Pilihan Pengaturan | Fungsi & Rekomendasi Desain |
|---|---|---|
| Arrow Navigation Buttons | Outside / Hidden on Mobile | Tombol panah navigasi kiri-kanan (sebaiknya disembunyikan di layar HP kecil demi kerapian) |
| Pagination Dots Style | Pill Active Indicator | Titik indikator bawah yang melebar saat kartu aktif terpilih |
| Card Active Shadow | 0 6px 20px rgba(200,149,86,0.3) | Bayangan glow emas pada kartu yang sedang berada di tengah (center slide) |
| Card Border Radius | 16px | Lengkungan sudut kartu modern yang serasi dengan widget formulir |
| Card Background Tint | #191b2a | Warna gelap bernuansa mewah yang kontras dengan teks putih |
4. Counter Live Ucapan Realtime
Di bagian atas widget FeedKit Slider, Anda dapat mengaktifkan Live Wishes Counter (misal: "Total 142 Ucapan Masuk"). Counter ini bekerja secara dinamis: setiap kali tamu baru menekan tombol konfirmasi pada formulir di atas, angka pada counter ini otomatis bertambah tanpa reload halaman.
Studi Kasus Nyata: Pernikahan Andy & Zhea
Pasangan Andy & Zhea menempatkan widget FeedKit tepat di bawah section profil kedua mempelai pada website undangan mereka:
- Tantangan: Andy & Zhea menginginkan section ucapan terlihat seperti galeri testimoni cinta yang hangat tanpa membuat halaman menjadi terlalu panjang hingga puluhan ribu pixel.
- Penerapan: Mereka mengaktifkan mode FeedKit Slider Carousel dengan 1 slide di smartphone dan 3 slide di layar tablet/laptop. Autoplay disetel berputar tiap 5 detik dengan efek kartu tengah yang menyala (active glow).
- Hasil: Halaman undangan tetap ramping dan ringkas. Tamu-tamu undangan sangat menikmati membaca doa-doa yang bergeser perlahan, dan banyak tamu yang menggeser slide secara manual untuk mencari ucapan mereka sendiri.
Tips & Praktik Terbaik
Durasi Autoplay yang Manis: Jangan menyetel autoplay terlalu cepat (di bawah 3 detik) agar tamu memiliki waktu yang cukup untuk membaca isi ucapan doa secara nyaman sebelum kartu bergeser.
Optimasi Memori Mobile: Tetapkan batasan kuota query pesan maksimal 20 atau 30 ucapan terbaru pada slider untuk menjaga performa memori peramban smartphone tamu tetap ringan dan tidak laggy.
Pertanyaan yang Sering Diajukan (FAQ)
Kapan sebaiknya menggunakan mode Slider dibanding Vertical List di FeedKit?
Gunakan mode Slider jika halaman undangan Anda memiliki banyak section panjang dan Anda ingin menghemat ruang layar vertikal (*vertical scroll real-estate*) di smartphone agar tamu tidak lelah menggulir.
Apakah mode Slider mendukung gestur geser jari (touch swipe) di smartphone?
Ya. FeedKit Slider mengadopsi kontrol sentuh alami berbasis akselerasi jari (*native touch gestures*) dengan transisi halus tanpa hambatan (*flick free*).
Bisakah mengatur agar slider bergeser secara otomatis (autoplay)?
Bisa. Anda dapat mengaktifkan Autoplay serta mengatur interval durasi pergeseran (misal tiap 4 detik) dan mengaktifkan jeda saat disentuh (*pause on touch/hover*).
Apakah ucapan baru yang baru saja dikirim tamu langsung muncul di slider?
Ya. Berkat integrasi AJAX real-time, ucapan yang baru saja dikonfirmasi akan langsung disisipkan ke urutan paling depan slider tanpa perlu muat ulang halaman.
Bagaimana cara membatasi jumlah kartu ucapan yang dimuat dalam slider?
Anda dapat membatasi jumlah pesan yang ditampilkan (misal: 10 atau 20 ucapan terbaru) melalui kontrol 'Posts Per Page' pada panel Elementor.