Wordpress: Cara Menampilkan Foto Before dan After dengan Efek Slide

Cara Menampilkan Foto Before dan After di WordPress (dengan Efek Slide)

Wordpress-Apakah Anda ingin menampilkan foto before dan after di situs web Anda? foto before dan after dapat berguna untuk menampilkan perbandingan berdampingan dari dua gambar identik dengan perbedaan kecil. Dalam artikel ini, kami akan membagikan cara mudah menampilkan before dan after foto di WordPress.

Bagaimana Efek Foto Before dan After Bekerja?


Biasanya orang menggunakan Photoshop untuk membuat gambar Before dan After. Ini adalah satu foto yang menunjukkan efek sebelum / sesudah, dan Anda dapat menambahkannya sebagai gambar statis di situs web WordPress Anda.

Penggeser foto fungsional adalah cara interaktif untuk menampilkan 2 versi berbeda dari gambar serupa dalam ukuran penuh. Anda dapat memindahkan gagang slider untuk membandingkan kedua gambar secara berdampingan.

Mari kita lihat cara mudah menampilkan Before dan After foto di WordPress.


Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin Twenty20 Image Before-After.

Setelah aktivasi, Anda perlu membuat atau mengedit halaman / posting di area admin WordPress Anda di mana Anda ingin menampilkan gambar Before dan After. Sekarang, klik tombol Add Twenty20 di atas editor teks.

Ini akan membuka WordPress Media Library dalam popup. Dari sini, Anda perlu memilih dua gambar untuk slider Before dan After.

Add twenty20 button

Setelah gambar dipilih, klik tombol Insert.

Before after images

Selanjutnya, ini akan menampilkan bidang teks untuk menambahkan konten di bagian atas Before dan After foto. Anda juga dapat menambahkan lebar untuk slider, nilai offset, arah slider, dan banyak lagi.

Insert before after photo shortcode

Setelah itu, klik tombol Sisipkan Kode Pendek untuk menambahkan foto Before dan After di halaman WordPress Anda.

Anda juga dapat menggunakan widget gambar Twenty20 untuk menampilkan foto Before dan After di sidebar WordPress Anda. Cukup buka bagian Appearance »Widget di admin WordPress Anda, lalu seret widget Twenty20 Slider di area widget Sidebar Anda.

Sidebar widget for before and after photo

Widget Twenty20 Slider memiliki pengaturan serupa untuk foto Before dan After seperti yang kami bagikan di atas dalam panduan ini. Anda dapat memilih 2 gambar satu per satu dalam pengaturan widget untuk membuat slider foto Before dan After.

Sekarang, Anda dapat mengunjungi situs web Anda untuk melihat Before dan After foto beraksi.

Before and after photo

Saat pengguna menggeser pegangan ke setiap gambar, gambar lainnya akan terlihat. Pengguna dapat mengambil slider ke kanan atau ke kiri untuk melihat penuh Before dan After gambar. Saat pengguna menggeser label Before dan After akan hilang secara otomatis.

Slide before and after image

Plugin ini berfungsi dengan baik dengan pembuat halaman WordPress populer seperti Beaver Builder dan Elementor untuk segera menampilkan Before dan After foto di halaman situs web Anda tanpa menggunakan shortcode.

Kami harap artikel ini membantu Anda mempelajari cara menampilkan Before dan After foto di WordPress.