Komponen Builder
Komponen Testimonial — Kutipan & Review Customer
Tampilkan kutipan dan review customer untuk membangun kepercayaan pembeli
Apa itu: Section yang menampilkan kutipan, ulasan, atau review dari customer dengan nama, foto, rating, dan peran/jabatan. Kapan pakai: Di setiap landing page yang butuh social proof — bukti nyata bahwa orang lain sudah mencoba dan puas dengan produk atau layananmu.
Apa Itu Testimonial?
Testimonial adalah salah satu elemen paling powerful di landing page. Orang lebih percaya pada pengalaman nyata customer lain daripada klaim dari brand itu sendiri. Komponen ini memudahkan kamu menampilkan review dalam tiga layout berbeda, dengan kontrol penuh atas tampilan kartu, avatar, dan rating.
Properties — Layout
| Property | Pilihan | Default | Keterangan |
|---|---|---|---|
| Layout | Cards / Slider / Grid | Cards | Cara testimonial ditampilkan |
| Columns | 1 / 2 / 3 | 2 | Jumlah kolom (Cards & Grid) |
| Show Rating | Checkbox | Aktif | Tampilkan bintang rating |
| Show Avatar | Checkbox | Aktif | Tampilkan foto/inisial customer |
Layout Cards
Testimonial ditampilkan sebagai kartu-kartu yang tersusun dalam grid. Mudah dibaca, paling umum dipakai. Pilih Columns 1 untuk satu kolom penuh (cocok untuk testimonial panjang), Columns 2–3 untuk tampilan lebih compact.
Layout Slider
Testimonial ditampilkan satu per satu dengan navigasi panah. Cocok kalau kamu punya banyak testimonial tapi tidak mau halaman terlalu panjang. Visitor bisa swipe atau klik panah untuk melihat lebih banyak.
Layout Grid
Mirip Cards tapi dengan gap yang lebih rapat dan tampilan yang lebih padat. Cocok untuk menampilkan banyak testimonial singkat sekaligus.
Properties — Per Item Testimonial
Setiap item dalam daftar testimonial memiliki field berikut:
| Field | Tipe | Keterangan |
|---|---|---|
| Name | Teks | Nama customer |
| Role | Teks (opsional) | Jabatan atau konteks, misal: "CEO @BrandX" atau "Ibu rumah tangga, Surabaya" |
| Content | Rich text | Isi kutipan/review |
| Avatar | Upload gambar | Foto profil customer |
| Rating | 1–5 bintang | Rating yang ditampilkan (jika Show Rating aktif) |
Foto wajah nyata jauh lebih meyakinkan dibanding inisial default (lingkaran dengan huruf nama). Kalau customer belum kasih foto, minta — atau gunakan foto dengan izin dari WhatsApp/sosmed mereka.
Properties — Card Styles
Bagian ini mengontrol tampilan visual kartu testimonial:
| Property | Pilihan / Tipe | Keterangan |
|---|---|---|
| Hover Effect | None / Lift / Shadow / Lift+Shadow | Efek saat kartu di-hover mouse |
| Glass Effect | None / Light / Strong | Efek glassmorphism (backdrop blur) pada kartu |
| Card Background | Color picker | Warna latar kartu |
| Border Color | Color picker | Warna border kartu |
| Border Radius | Default / 8px / 12px / 16px / 24px | Kelengkungan sudut kartu |
Hover Effect
- Lift — kartu terangkat sedikit (translateY) saat di-hover. Memberi kesan interaktif.
- Shadow — shadow kartu menguat saat di-hover.
- Lift+Shadow — kombinasi keduanya. Efek paling dramatis.
Glass Effect
- Light — sedikit blur dan transparansi. Cocok untuk background gambar/gradien.
- Strong — blur lebih kuat, tampak seperti kaca buram. Efek premium tapi harus pastikan teks tetap terbaca.
Properties — Warna Per-Section
| Property | Keterangan |
|---|---|
| Text Color | Warna isi kutipan |
| Name Color | Warna nama customer |
Contoh Penggunaan
1. Social Proof Section "Apa Kata Mereka"
Layout Cards 3 kolom dengan Show Rating dan Show Avatar aktif. Pilih 3–6 testimonial terbaik yang spesifik dan menyebut manfaat nyata — bukan sekadar "bagus banget!". Kutipan yang kuat seperti "Saya closing 12 order dalam 2 hari pertama pakai LP ini" jauh lebih meyakinkan dari pujian generik.
2. Testimonial Singkat di Atas CTA
Satu atau dua testimonial singkat dalam Layout Slider atau Cards 1 kolom ditempatkan tepat di atas tombol beli. Ini adalah "dorongan terakhir" — visitor membaca satu bukti nyata dari orang seperti mereka, lalu klik beli.
3. Wall of Love — Banyak Review Sekaligus
Layout Grid 3 kolom dengan Show Avatar Off (hanya tampilkan inisial), Show Rating On. Cocok untuk menampilkan volume — 9–15 testimonial sekaligus dalam grid yang padat menunjukkan bahwa banyak orang sudah puas tanpa perlu scroll panjang.
Gotchas
- Jangan pakai testimonial generik. "Produknya bagus, recommended!" tidak meyakinkan. Testimonial yang spesifik (menyebut masalah yang terpecahkan, angka, atau konteks) jauh lebih efektif.
- Urutkan testimonial dengan strategis. Testimonial terkuat (paling relevan, paling emosional) di posisi pertama atau kedua — visitor sering tidak scroll ke testimonial ke-5 ke bawah.
- Glass Effect Strong + teks gelap bisa susah dibaca. Selalu preview di mode mobile.
- Layout Slider di mobile: swipe berfungsi, tapi pastikan ada visual cue (panah atau dot indicator) agar visitor tahu ada testimonial lain.
Siap buat landing page pertamamu?
Daftar Konvert gratis dan mulai jualan online hari ini.
Daftar Sekarang