Cara Menampilkan Gambar Sebelum dan Sesudah dengan Efek Slider di WordPress

Mari kita asumsikan bahwa Anda adalah seorang blogger kebugaran dan ingin menginspirasi audiens Anda dengan membagikan gambar sebelum dan sesudah transformasi tubuh Anda. Alih-alih hanya menempatkan gambar berdampingan, akan lebih keren jika Anda dapat menggunakan penggeser gambar sebelum dan sesudah untuk menunjukkan perbedaannya.

Tunggu! Apa itu penggeser gambar sebelum dan sesudah?

Ini adalah penggeser gambar yang menumpuk satu gambar di atas yang lain dan menggunakan penggeser interaktif untuk menampilkan gambar. Jika penggeser bergerak secara horizontal, maka gambar pertama akan terungkap saat penggeser bergerak ke paling kanan dan yang kedua akan terlihat saat bergerak ke kiri.

Slider semacam itu berguna untuk membandingkan dua gambar yang serupa. Dan karenanya, ini dapat berguna bagi sejumlah profesional seperti fotografer, ahli kecantikan, desainer, dokter, dan dokter gigi.

Jika Anda adalah pengguna WordPress dan bertanya-tanya bagaimana Anda dapat menggunakannya di situs web Anda, maka Anda berada di tempat yang tepat. Pada artikel ini, saya akan membagikan bagaimana Anda dapat menambahkan gambar sebelum dan sesudah dengan efek slider di situs web Anda.

Jadi tanpa basa-basi lagi, mari kita mulai.

Berlangganan Saluran Youtube Kami

Cara Menambahkan Slider Sebelum Setelah Gambar

Ada banyak plugin gratis dan premium yang dapat digunakan untuk menambahkan penggeser gambar sebelum-sesudah di halaman web.

Namun, kami akan menggunakan plugin Twenty20 Image Before After di artikel ini. Nanti, saya juga akan menyebutkan beberapa alternatif gratis dan premium yang populer.

Instal Twenty20 Gambar Sebelum Setelah Plugin

Twenty20 adalah plugin gratis dan tersedia di repositori plugin WordPress. Ini memungkinkan Anda untuk menambahkan slider gambar sebelum-sesudah di posting, halaman, dan sidebar Anda. Ini juga mendukung pembuat halaman populer seperti Elementor dan WPBakery.

Untuk menginstal plugin ini, buka Plugins -> Add New dan cari Twenty20 Image Before-After. Setelah Anda menemukan plugin, cukup instal dan aktifkan:

Tambahkan Gambar Sebelum-Sesudah di Postingan atau Halaman Anda

Plugin Twenty20 tidak hadir dengan halaman pengaturan apa pun. Jadi Anda dapat mulai melakukan pekerjaan kotor setelah menginstal plugin.

Sekarang, setelah pembaruan WordPress 5.0, Anda mungkin menggunakan editor Klasik atau Gutenberg. Jadi izinkan saya menunjukkan kepada Anda bagaimana plugin ini bekerja pada kedua editor.

Editor Gutenberg

Plugin Twenty20 sejauh ini tidak memiliki blok, tetapi Anda dapat menggunakan fungsionalitas kode pendeknya dan menambahkan kode di blok kode pendek.

Mari kita lihat contoh kode pendeknya:

[twenty20 img1=”3442″ img2=”3442″ direction=”horizontal” offset=”0.4″ align=”none” width=”100%” before=”Sebelum” sesudah=”Setelah” hover=”false”]

Mari saya jelaskan masing-masing parameter:

• img1 – Di sini Anda harus menambahkan ID gambar (bukan URL gambar) dari gambar pertama.
• img2 – Tambahkan ID (dan bukan URL gambar) dari gambar kedua.
• arah – Ini memungkinkan Anda untuk memutuskan apakah Anda ingin penggeser dalam arah horizontal atau vertikal. Jadi, nilainya akan horizontal atau vertikal.
• offset – Nilai offset harus antara 0,1 hingga 1.
• align – Ini menentukan perataan gambar sebelum-sesudah. Nilai bisa tidak ada, kiri, atau kanan.
• lebar – Lebar gambar bisa dalam persentase atau piksel.
• sebelum – Anda dapat menambahkan keterangan gambar sebelum di sini.
• after – Tambahkan keterangan gambar setelahnya.
• hover – Parameter ini memutuskan apakah Anda ingin memindahkan slider pada gerakan mouse. Ia menerima nilai benar atau salah.

Tidak tahu bagaimana menemukan ID dari sebuah gambar? Buka Media -> Perpustakaan dari bilah sisi kiri dasbor WordPress Anda dan klik gambarnya. Sekarang periksa bilah alamat browser web Anda:

Dalam contoh di atas, Anda dapat melihat item = 50 di URL. Jadi, 50 adalah ID dari gambar tersebut.

Oke! Sekarang setelah Anda tahu cara menggunakan kode pendek Twenty20, buat (atau edit) posting atau halaman tempat Anda ingin menambahkan penggeser gambar sebelum-sesudah. Dan kemudian, tambahkan blok baru dan cari widget kode pendek:

Salin kode yang saya gunakan pada contoh di atas, tempel di kotak kode pendek dan atur sesuai kebutuhan Anda:

Itu dia. Anda sekarang dapat melihat pratinjau posting (atau halaman) dan memeriksa apakah itu berfungsi dengan baik atau tidak.

Editor Klasik

Jika Anda menggunakan Editor Klasik, Anda akan melihat tombol baru Tambahkan Dua Puluh 20 setelah Anda menginstal plugin. Klik tombol itu dan jendela pop-up akan terbuka meminta Anda untuk memilih dua gambar:

Setelah Anda memilih dua gambar dan mengklik Sisipkan, jendela baru akan terbuka menanyakan beberapa detail untuk menghasilkan kode pendek:

Setelah Anda selesai dengan pengaturan, Anda dapat mengklik tombol Insert Shortcode.

Anda juga dapat membuat perubahan pada kode pendek ini nanti – cukup ikuti contoh di bagian Editor Gutenberg.

Tambahkan Gambar Sebelum-Sesudah di Sidebar Anda

Plugin Twenty20 juga memungkinkan Anda untuk menambahkan gambar sebelum-sesudah di bilah sisi situs web Anda. Muncul dengan widget yang melakukan pekerjaan keren untuk Anda.

Buka Penampilan -> Widget. Sekarang temukan widget Twenty20 dan seret ke area sidebar. Pengaturan widget ini mirip dengan bagian sebelumnya – hanya Anda memiliki dua tombol tambahan untuk memilih (atau mengunggah) gambar sebelum dan sesudah.

Setelah selesai, simpan pengaturan widget dan kemudian periksa situs web Anda. Sederhana, bukan?

Beberapa Plugin Alternatif

Meskipun saya menyukai plugin Twenty20 karena sederhana dan gratis, Anda mungkin lebih suka yang lain. Oleh karena itu, saya memutuskan untuk membagikan beberapa alternatif gratis dan premium untuk plugin ini:

1. Gambar Sebelum + Sesudah untuk Divi

Jika Anda pengguna Divi, plugin Before + After Images for Divi adalah yang terbaik untuk kebutuhan Anda. Ringan, responsif, dan mendukung pemuatan lambat. Ini membuat modul baru yang membantu Anda menambahkan gambar sebelum dan sesudah ke situs web Anda. Plugin gratis ini akan bekerja dengan plugin Divi Builder, tema Divi, dan tema lainnya oleh Elegant Themes.

Harga – Gratis | Informasi Lebih Lanjut

2. Serbaguna Sebelum Setelah Slider

Serbaguna Before After Slider adalah plugin premium yang diaktifkan dengan sentuhan dan gesek. Muncul dengan panel admin yang mudah digunakan yang membantu Anda mengubah setiap penggeser gambar sesuai kebutuhan Anda dan tidak memerlukan penggunaan kode pendek. Anda dapat membuat gambar sebelum-sesudah tanpa batas dan menggunakannya pada posting, halaman, dan sidebar.

Harga – $18 | Informasi Lebih Lanjut

3. Cerdas Sebelum Setelah Penampil

Smart Before After Viewer adalah plugin premium yang sepenuhnya responsif dan ramah sentuhan. Ini memungkinkan Anda untuk menambahkan teks label khusus pada gambar sebelum dan sesudah. Dan Anda dapat mengubah posisi dan warna label tanpa repot. Plugin ini juga memungkinkan Anda untuk menambahkan beberapa gambar pada satu halaman.

Harga – $18 | Informasi Lebih Lanjut

Catatan akhir

Penggeser gambar sebelum-sesudah adalah cara yang bagus untuk menunjukkan perbedaan antara dua gambar yang identik. Dan Anda dapat menggunakan slider seperti itu di situs WordPress Anda dengan mengikuti tutorial ini.

Jadi, apakah Anda pernah menggunakan salah satu plugin yang disebutkan dalam artikel ini? Atau, apakah Anda ingin menyarankan plugin tertentu yang cocok untuk mencapai hal yang sama? Beri tahu kami di bagian komentar.

Gambar unggulan melalui __ / shutterstock.com