Cara menambahkan slider sebelum dan sesudah di Wix

Membantu calon pembeli langsung melihat manfaat produk Anda adalah keunggulan besar, terutama saat berjualan online. Di sini, tidak ada tenaga penjual — jadi branding, pesan, dan visual Anda harus bekerja ekstra keras. Inilah kekuatan slider before after (sebelum sesudah).

Meskipun Wix memiliki pustaka elemen desain yang sangat besar, editor standarnya tidak menyertakan slider perbandingan gambar sebelum dan sesudah yang bisa dikustomisasi. Tapi bukan berarti Anda tidak punya pilihan. Anda bisa menginstal aplikasi pihak ketiga dari Wix App Market, menyematkan widget eksternal gratis, atau membuatnya dari nol dengan Velo by Wix. Berikut cara kerja masing-masing opsi, dan mengapa widget gratis adalah pilihan yang sebaiknya digunakan oleh kebanyakan orang.

Opsi 1: Instal ekstensi dari Wix App Market

Cara paling mudah adalah melalui Wix App Market. Cari “before and after slider,” klik sekali, dan Anda sudah memiliki slider perbandingan foto yang berfungsi di halaman. Tanpa kode embed, tanpa mode developer.

Masalahnya baru muncul setelah instalasi. Sebagian besar aplikasi ini menggunakan model freemium, dan Anda harus berkompromi pada paket gratisnya. PURPLE Before & After Slider, salah satu opsi dengan ulasan terbaik di 4,7 bintang, menampilkan watermark pada paket gratis. Untuk menghilangkannya, sekaligus membuka gaya panah kustom dan bentuk tata letak, biayanya $2,50 per bulan. Memang tidak banyak pada awalnya, tapi akan menumpuk seiring bertambahnya langganan aplikasi di situs Anda.

Risiko yang lebih besar adalah pemeliharaan. Pengembang ini adalah pihak ketiga kecil, dan ketika salah satunya berhenti merilis pembaruan, slider Anda akan rusak. Halaman portofolio atau produk Anda adalah tempat terakhir di mana Anda ingin ada elemen yang rusak.

Jika Anda tetap ingin mencoba aplikasi pihak ketiga, berikut cara menginstalnya:

1. Buka situs Anda di Wix Editor dan klik Apps di sidebar kiri, lalu klik App Market. Cari “before and after slider.”

2. Klik aplikasi yang Anda inginkan, lalu klik Add to Site. Konfirmasi dengan Allow and Add.
3. Slider akan muncul di halaman Anda. Klik slider tersebut, buka Settings, tambahkan gambar sebelum dan sesudah Anda, sesuaikan handle dan label, lalu klik Publish.

Wix mendokumentasikan alur instalasi lengkap di panduan Help Center untuk menambahkan aplikasi ke situs Anda.

Opsi 2: Gunakan widget slider gratis tanpa kode (direkomendasikan)

Jika Anda ingin kontrol penuh atas slider tanpa langganan bulanan, lewati App Market dan sematkan widget eksternal gratis sebagai gantinya. Anda mendapatkan efek geser-untuk-mengungkap yang sama, kustomisasi lebih banyak dari yang ditawarkan paket berbayar, dan tanpa perpanjangan.

Jotform Before and After Slider Widget dibuat khusus untuk kebutuhan ini. Anda mengonfigurasinya di editor visual, menyalin kode embed pendek, dan menempelkannya ke Wix. Jotform Website Widgets gratis untuk digunakan, tanpa batas penggunaan dan tanpa persyaratan paket, jadi tidak ada permintaan upgrade yang muncul setelah slider Anda tayang.

Widget ini juga menawarkan lebih banyak fitur dibandingkan opsi di App Market. Anda bisa menampilkan perbandingan gambar secara horizontal atau vertikal, yang penting jika Anda menampilkan ruangan secara penuh atau foto sebelum dan sesudah seseorang. Anda bisa mengatur posisi awal pembatas sehingga pengunjung langsung melihat framing yang Anda inginkan. Anda juga bisa menambahkan hingga tiga pasang perbandingan foto dengan navigasi bawaan, mengubah satu elemen menjadi galeri studi kasus ringkas alih-alih satu perbandingan statis. Bagi dokter gigi yang menampilkan tiga hasil perawatan pasien atau desainer interior yang memandu renovasi bertahap, itulah perbedaan antara satu embed dan tiga.

Ikuti langkah-langkah berikut untuk menambahkan widget Jotform ke situs Wix Anda:

1. Buka Jotform Before and After Slider Widget dan tambahkan pasangan gambar Anda dengan mengunggah file atau menempelkan URL gambar. Tambahkan juga label sebelum sesudah serta keterangan untuk setiap perbandingan.

2. Atur arah pengungkapan, posisi awal pembatas, dan gaya interaksi (geser, klik, atau hover). Sesuaikan lebar, rasio gambar, radius sudut, ukuran pembatas, dan warna agar sesuai dengan situs Anda. Aktifkan layar penuh jika pengunjung perlu memeriksa detail.

3. Salin kode embed.

4. Di Wix Editor, klik + Add dan pilih Embed Code. Tempelkan snippet Anda, ubah ukuran elemen, dan klik Publish.

Panduan Wix untuk menyematkan situs atau widget membahas batasan elemen tersebut, termasuk persyaratan bahwa kode embed Anda harus menggunakan HTTPS.

Opsi 3: Buat slider kustom menggunakan Velo by Wix

Jika Anda lebih memilih untuk tidak bergantung pada aplikasi pihak ketiga atau embed eksternal, Anda bisa membuat kode slider sendiri dengan Velo by Wix. Pendekatannya adalah menumpuk dua gambar Anda di editor, menambahkan elemen garis atau kotak sebagai handle geser, mengaktifkan Dev Mode, dan menulis JavaScript yang menampilkan lebih banyak atau lebih sedikit gambar atas saat pengunjung menggeser.

Namun ada kendalanya. Kode halaman Velo tidak bisa melacak pointer saat bergerak melintasi elemen. Event handler yang tersedia pada elemen standar Wix mencakup klik, fokus, masuk dan keluar dari elemen, serta visibilitas viewport. Tidak ada handler mouse-move dan tidak ada dukungan event sentuh. Slider geser membutuhkan keduanya.

Jalur ideal adalah menulis JavaScript DOM biasa di dalam elemen HTML iFrame dan menggunakan Velo hanya untuk memasukkan data. Pada titik ini, Anda menggunakan mekanisme embed yang sama seperti Opsi 2, hanya saja Anda yang memiliki kodenya, perilaku responsifnya, dan setiap bug-nya.

Jika Anda ingin mencobanya, ikuti langkah-langkah berikut:

1. Di Wix Editor, klik Dev Mode di bilah atas dan aktifkan mode developer. Di Wix Studio, klik Start Coding di sidebar kiri.

2. Tambahkan elemen Embed HTML di tempat Anda ingin meletakkan slider, dengan ukuran sesuai dimensi gambar Anda.

3. Tulis markup slider perbandingan, styling, dan penanganan pointer-event di dalam elemen tersebut, uji baik geser mouse maupun usap sentuh di setiap breakpoint.

Tingkatkan situs Wix Anda dengan widget cerdas tanpa kode

Jotform Before and After Slider Widget adalah cara tercepat untuk menampilkan transformasi Anda tanpa menambah tagihan perangkat lunak bulanan atau men-debug event sentuh di Velo. Konfigurasikan sekali, tempelkan kodenya, dan lanjutkan.

Widget ini juga merupakan salah satu dari lebih dari 150 widget website gratis yang ditawarkan Jotform. Beberapa widget lain yang cocok dipasangkan dengan situs portofolio atau layanan antara lain

• Google Reviews: Tampilkan penilaian klien di samping hasil kerja Anda, sehingga bukti dan pujian berada di halaman yang sama.
• FAQ: Jawab pertanyaan “berapa lama prosesnya” dan “berapa biayanya” sebelum pengunjung pergi untuk mengirim email kepada Anda.
• Popup: Dapatkan email dari seseorang yang sudah menelusuri seluruh galeri Anda tetapi belum siap untuk melakukan pemesanan.
• Back to Top: Widget ini layak ditambahkan begitu halaman portofolio Anda cukup panjang sehingga menggulir kembali ke atas menjadi hal yang merepotkan.

Masing-masing diinstal melalui elemen Embed HTML yang sama seperti yang Anda gunakan untuk slider, jadi menambahkan widget kedua atau ketiga hanya membutuhkan beberapa menit.

Jika Anda masih dalam proses membangun situs, panduan kami untuk membuat website Wix membahas platform secara menyeluruh, dan halaman integrasi Jotform-Wix memandu Anda menambahkan formulir kontak dan pemesanan. Jelajahi direktori widget lengkap dan lihat apa yang belum ada di situs Anda.