Apakah Anda seorang penata gaya, dekorator, retoucher, atau profesional lain yang perlu menampilkan hasil visual dari pekerjaan Anda? Slider sebelum dan sesudah yang ditampilkan di situs web Anda mudah digunakan dan langsung menunjukkan nilai dari karya Anda. Sayangnya bagi pengguna WordPress, platform ini tidak memiliki fitur slider bawaan.
Namun, bukan berarti Anda tidak bisa menambahkan slider ke WordPress. Ada tiga pilihan: menggunakan plugin pihak ketiga, menggunakan widget eksternal ringan yang gratis, atau membuat slider dari awal dengan menulis kode kustom.
Artikel ini menjelaskan cara menambahkan slider sebelum dan sesudah di WordPress dengan ketiga metode tersebut, sehingga Anda dapat menentukan mana yang paling sesuai dengan kebutuhan Anda.
Opsi 1: Instal plugin slider WordPress
Salah satu cara paling umum untuk menambahkan slider sebelum dan sesudah adalah dengan menggunakan plugin WordPress. Namun, pendekatan ini memiliki beberapa kekurangan.
Beberapa plugin menambahkan CSS dan JavaScript tambahan di seluruh situs Anda, sehingga waktu pemuatan halaman menjadi lebih lama. Selain itu, page builder yang “berat”, seperti Elementor, mengharuskan Anda mengelola slider melalui shortcode yang rumit (kode berbasis teks yang khusus untuk WordPress), yang bisa sangat merepotkan bagi pengguna pemula. Jika Anda tidak sengaja menghapus sebagian kode, slider akan langsung rusak. Selain itu, sebagian plugin menggunakan model bisnis freemium, sehingga fitur-fitur lanjutannya hanya bisa diakses dengan membayar.
Plugin memang tidak cocok untuk semua pengguna, tetapi bisa menjadi solusi yang andal jika Anda melek teknologi dan terbiasa dengan WordPress. Ikuti petunjuk berikut untuk menginstal plugin sebelum dan sesudah di WordPress:
- Instal plugin: Buka dasbor WordPress dan klik Plugin. Masukkan “before-and-after slider” di bilah Cari , lalu pilih plugin yang ingin Anda gunakan dari hasil pencarian. (Ada puluhan pilihan. Lihat daftar plugin WordPress terbaik untuk berbagai jenis tugas lainnya.)
Ikuti petunjuk yang muncul untuk menginstal plugin. (Langkah instalasi yang tepat akan bergantung pada plugin yang Anda pilih.)
Perlu diketahui bahwa meskipun banyak plugin yang gratis, ada juga yang dikenai biaya sekali bayar. Dalam kebanyakan kasus, Anda hanya bisa menggunakannya dengan paket WordPress berbayar.
- Buat slider sebelum dan sesudah: Buka plugin dari dasbor WordPress. Pilih opsi untuk membuat slider sebelum dan sesudah yang baru. Unggah gambar sebelum dan sesudah Anda. Sesuai praktik terbaik, gunakan gambar dengan pengambilan sudut (framing) dan dimensi yang sama.
- Sesuaikan slider sebelum dan sesudah: Sebagian besar plugin memungkinkan Anda mengatur berbagai pengaturan, seperti label gambar, posisi awal, tampilan pegangan slider, dan orientasi slider. Atur sesuai keinginan Anda, lalu simpan.
- Tambahkan slider sebelum dan sesudah ke situs WordPress Anda: Buka halaman WordPress tempat Anda ingin slider ditampilkan. Bergantung pada plugin yang digunakan, Anda dapat menambahkannya dengan membuat blok WordPress khusus atau dengan menambahkan shortcode ke halaman.
Pro Tip
Butuh panduan lebih lanjut tentang cara menggunakan plugin WordPress? “Cara menggunakan WordPress” adalah tutorial lengkap yang menyajikan informasi penting tentang penggunaan plugin, formulir, tema, dan lainnya di WordPress.
Opsi 2: Gunakan widget slider gratis tanpa kode (direkomendasikan)
Jika Anda tidak ingin direpotkan dengan shortcode yang rumit atau plugin berat yang membuat situs WordPress Anda lambat dimuat, pilihan terbaik adalah menggunakan widget slider tanpa kode. Widget Slider Sebelum dan Sesudah Jotform sepenuhnya gratis dan mudah digunakan. Karena widget ini bersifat serverless, kecepatan situs Anda sama sekali tidak terpengaruh. Widget ini juga berfungsi dengan sempurna di desktop maupun ponsel pintar.
Widget Slider Sebelum dan Sesudah dari Jotform menawarkan antarmuka visual tanpa perlu coding. Cukup unggah dua gambar ke pembuat widget, sesuaikan warna pegangan geser, dan atur posisi awal default. Lalu salin kodenya dan tempelkan ke WordPress.
Berikut penjelasan lebih rinci:
- Tambahkan pasangan gambar: Buka halaman Widget Slider Sebelum dan Sesudah Jotform, lalu unggah gambar sebelum dan sesudah Anda ke kotak pengaturan widget. Ubah judul widget Anda, dan tentukan jenis interaksi yang ingin Anda tawarkan (seret dan klik atau arahkan kursor). Klik atau ketuk Lanjutkan.
- Sesuaikan pengaturan slider: Anda dapat mengatur berbagai pengaturan, seperti rasio gambar, radius sudut, ketebalan pembatas, dan warna slider. Gulir ke bawah untuk memilih semua spesifikasi Anda.
- Dapatkan kode sematan untuk widget slider: Klik atau ketuk Try It on Your Website for Free. Jotform akan memberikan kode sematan untuk widget slider. Klik atau ketuk Salin. Jotform akan meminta Anda mendaftar atau masuk untuk mendapatkan kodenya.
- Tempelkan kode sematan slider ke WordPress: Buka situs WordPress Anda, lalu tambahkan blok Custom HTML dari Block Inserter. Tempelkan kode sematan ke dalam blok HTML tersebut. Klik atau ketuk Perbarui. WordPress akan secara otomatis memasukkan widget slider sebelum dan sesudah ke situs WordPress Anda.
Opsi 3: Buat slider HTML/CSS kustom dengan kode
Jika Anda penganut WordPress murni yang lebih suka menghindari plugin pihak ketiga atau widget eksternal, Anda dapat membuat slider dari awal dengan menggunakan kode mentah.
Meskipun secara teknis metode ini gratis dan bawaan WordPress, caranya tidak mudah. Anda memerlukan pengalaman tingkat lanjut dalam menulis kode, terutama jika ingin pengunjung situs web dapat menggunakan slider di ponsel pintar. Satu kesalahan penulisan kode saja dapat merusak slider dan memengaruhi responsivitas di ponsel pintar, di antara masalah lainnya.
Berikut cara menambahkan slider sebelum dan sesudah di WordPress dengan kode kustom:
- Unggah gambar sebelum dan sesudah: Tambahkan kedua gambar ke Pustaka Media WordPress.
- Buat kode HTML/CSS kustom untuk slider: Tulis kode HTML/CSS untuk menyusun struktur dan mengatur tampilan slider. Anda mungkin juga memerlukan JavaScript untuk menambahkan fitur geser dan seret yang interaktif.
Anda dapat menulis kode ini sendiri, meminta bantuan rekan yang berpengalaman dalam coding, atau menggunakan alat AI untuk membuat kodenya.
Salin kodenya.
- Tambahkan kode ke situs WordPress Anda: Di situs WordPress Anda, tambahkan blok Custom HTML , lalu tempelkan kode Anda ke dalam blok tersebut. Tambahkan CSS dan JavaScript sesuai kebutuhan melalui tema WordPress atau pengaturan situs.
Tingkatkan situs WordPress Anda dengan widget cerdas tanpa kode
Jika Anda ingin mengutamakan kecepatan dan keamanan situs, menekan biaya, dan menghindari kode yang rumit, Widget Slider Sebelum dan Sesudah dari Jotform adalah cara yang sangat baik untuk menambahkan media interaktif yang menarik ke situs web Anda. Widget ini sepenuhnya gratis, cocok untuk pemula maupun profesional, dan tidak memerlukan penulisan kode sama sekali.
Namun, itu belum semua yang ditawarkan Jotform!
Di direktori Widget Situs Web Jotform, Anda akan menemukan lebih dari 150 widget situs web gratis yang dapat meningkatkan situs WordPress Anda. Misalnya, Widget Penghitung Pengunjung adalah cara yang bagus untuk menunjukkan seberapa populer situs Anda, sedangkan Widget Hitung Mundur membantu menciptakan rasa urgensi untuk acara dan kampanye penting.
Jotform juga menyediakan ribuan formulir WordPress, seperti formulir kontak, formulir lead generation, dan formulir pemesanan. Tambahkan formulir tersebut ke situs Anda untuk mengumpulkan informasi penting dari pengunjung.
Jotform memiliki paket gratis. Cobalah untuk mulai menjelajahi berbagai widget dan lihat betapa mudahnya meningkatkan fungsionalitas situs WordPress Anda tanpa mengorbankan performa atau menulis kode.
Artikel ini ditujukan bagi blogger WordPress, pemilik portofolio, dan agensi yang ingin menampilkan transformasi visual (seperti retusyo foto, desain ulang UI, atau renovasi) tanpa memperlambat situs mereka dengan plugin berat atau direpotkan oleh shortcode yang rumit.
Kirim Komentar: