Sorotan Plugin Divi: Divi Sensei Sebelum Setelah Slider

Slider Sebelum dan Setelah adalah cara yang bagus untuk membiarkan pengunjung membandingkan dua gambar. Seperti namanya, mereka dapat berupa gambar sebelum dan sesudah sesuatu diubah, seperti penurunan berat badan, gambar yang diperbaiki, ruangan yang didekorasi, mobil yang dicat, dll. Tentu saja, mereka berguna untuk lebih dari sebelumnya. dan setelah foto. Mereka dapat digunakan untuk membandingkan grafik, produk, tujuan liburan, dan banyak lagi.

Dalam artikel ini, kita akan melihat Divi Sensei Before and After Slider, modul slider sebelum dan sesudah untuk Divi Builder, melihat apa yang dapat dilakukannya, dan membantu Anda memutuskan apakah Anda memerlukan plugin pihak ketiga ini di Divi Anda. kotak peralatan.

Divi Sensei Sebelum dan Setelah Modul Slider

Unggah dan instal plugin Divi Sensei Before and After seperti biasa. Tiga tidak ada pengaturan yang harus dilalui. Setelah Anda mengunggah dan mengaktifkan plugin, Anda akan melihat modul baru ditambahkan ke Divi Builder yang disebut Sensei Before and After Slider.

Modul menampilkan gambar sebelum di sisi kiri dan gambar setelah di sebelah kanan. Ini menampilkan bilah penggeser di tengah yang dapat diambil dan digeser pengguna dari satu sisi ke sisi lain. Melayang di atas gambar mengungkapkan sebelum dan sesudah label dan menambahkan overlay. Anda memiliki kontrol desain atas masing-masing elemen ini.

Mari kita lihat fitur dan opsi untuk slider. Untuk contoh ini, saya menggunakan gambar dari Unsplash.com.

Tab Konten

Tab Konten memungkinkan Anda menambahkan gambar sebelum, setelah gambar, dan label. Dalam contoh ini, saya telah menambahkan dua versi berbeda dari gambar yang sama untuk membuat gambar sebelum dan sesudah. Ini berguna untuk menampilkan hasil foto yang telah di-retouch. Opsi ini juga mencakup pengaturan tautan standar, latar belakang, dan label admin.

Ini juga menyediakan bidang di mana Anda dapat mengubah teks sebelum dan sesudah label. Saya mengarahkan kursor ke gambar untuk membuka label. Mereka hanya ditampilkan saat mengarahkan kursor secara default, tetapi Anda dapat mengubahnya.

Tab Desain

Tab Desain menyertakan pengaturan untuk penggeser, label, dan hamparan. Ini juga mencakup pengaturan standar untuk ukuran, jarak, batas, bayangan kotak, filter, transformasi, dan animasi.

Penggeser

Pengaturan Slider memungkinkan Anda memilih arah slider antara horizontal dan vertikal, mengatur offset awal untuk menentukan di mana pada gambar slider dimulai, dan mengubah warna slider, handle, handle background, dan handle icon. Saya telah menyesuaikan setiap pengaturan ini dalam contoh di atas.

Label

Untuk label, Anda dapat membuatnya selalu ditampilkan atau hanya ditampilkan saat dilayangkan, dan menyesuaikan latar belakang dan font. Warna latar belakang termasuk warna solid dan penyesuaian opacity. Anda dapat menyesuaikan latar belakang satu per satu, tetapi tidak memungkinkan Anda menyesuaikan warna teks satu per satu. Anda juga dapat memilih font, mengubah ukurannya, gaya, perataan, tinggi garis, menambahkan bayangan, dll. Tinggi garis mengatur ukuran latar belakang.

Pada contoh di atas, saya telah menentukan latar belakang dan warna font, mengubah ukuran font, dan ukuran tinggi garis. Saya juga mengaturnya untuk selalu ditampilkan sehingga terlihat tanpa pengguna harus mengarahkan kursor ke gambar untuk melihatnya.

Hamparan

Hamparan diaktifkan secara default. Anda dapat menonaktifkannya, menyesuaikan warna, dan menyesuaikan opacity. Warna default adalah hitam dengan opacity 50%.

Saya telah memilih biru dalam contoh ini dan meninggalkan opacity pada 50%. Membiarkan gambar ditampilkan saat Anda mengarahkan kursor tampaknya berfungsi paling baik. Apakah Anda menggunakan warna terang atau gelap dan jumlah opacity yang Anda atur akan ditentukan oleh warna pada gambar dan bagaimana Anda ingin menggunakan overlay.

Untuk contoh ini, saya telah menggunakan skema warna hitam dan putih. Teks overlay dan label berwarna putih dan elemen penggeser berwarna hitam. Saya telah mengurangi opacity dari latar belakang label untuk menggelapkannya. Saya membiarkannya dalam ukuran default.

Divi Sensei Sebelum dan Setelah Contoh Slider

Mari kita lihat beberapa contoh cara penggeser dapat digunakan dan tampilannya dalam tata letak Divi. Saya menggunakan gambar dari Unsplash dan yang tersedia di tata letak Divi gratis yang ada di dalam Divi. Saya akan mengidentifikasi tata letak Divi yang saya gunakan saat ini.

Perbandingan Grafis

Untuk yang ini, saya menggunakan elemen desain dari paket tata letak Divi Video Game. Saya telah menonaktifkan overlay, mengubah elemen slider menjadi hijau, dan membuat label selalu ditampilkan. Latar belakang untuk label berwarna biru solid. Saya telah meningkatkan ukuran font, mengubah warna, menggunakan keluarga font Rubik, membuat media berat font, dan menjadikannya huruf besar semua. Kudos jika Anda telah memiliki atau memainkan sistem permainan ini dan Anda tahu mengapa perbandingan grafis yang dibuat-buat ini tidak ada.

Ini adalah tampilannya di dalam tata letak. Sangat bagus untuk melakukan perbandingan seperti mockup grafis dua mesin game yang berbeda ini.

Layanan Sebelum dan Setelah Portofolio

Contoh ini meniru ide ruangan sebelum dan sesudah renovasi dilakukan. Apabila kedua gambar tersebut berbeda ukuran, maka akan menggunakan ukuran untuk gambar yang lebih besar dan gambar yang lebih kecil akan menunjukkan celah. Ini akan menempatkan tinggi atau lebarnya secara merata dan mengisi sisanya sebagai ruang kosong. Dalam contoh ini, gambar di sebelah kanan lebih pendek dari gambar di sebelah kiri. Meskipun memiliki gambar dengan ukuran yang sama berfungsi lebih baik, itu masih berfungsi dengan baik dengan gambar yang mendekati ukuran yang sama.

Saya telah menambahkan warna dan font dari paket tata letak Perbaikan Rumah. Berikut tampilannya dalam sebagian tata letak.

Berikut tampilannya dengan overlay. Saya telah memindahkan penggeser ke satu sisi untuk menampilkan lebih banyak gambar sebelumnya.

Untuk referensi, inilah gambar dengan pegangan yang dipindahkan untuk menunjukkan lebih banyak gambar setelahnya.

Perbandingan Produk

Untuk contoh ini, saya mengganti tiga gambar teh di tata letak Tea Shop dengan 3 penggeser B&A DS. Saya menggunakan warna dari tata letak untuk tombol dan kontrol slider. Slider tengah diatur ke vertikal hanya agar berbeda. Overlay menggunakan warna dari tata letak dengan opacity yang berkurang.

Inilah tampilannya di dalam tata letak. Ini sangat baik untuk membandingkan detail visual dari beberapa produk, beberapa lokasi, beberapa warna, untuk produk yang memiliki banyak opsi untuk ditampilkan dengan dan tanpa opsi, dll.

Membandingkan Lokasi

Dalam contoh ini, saya menggunakan penggeser untuk membandingkan dua lokasi. Mereka tidak harus serupa, hanya sesuatu untuk dibandingkan karena satu dan lain alasan. Saya telah menambahkan warna dari tata letak untuk penggeser dan label, serta font untuk label. Saya juga telah menambahkan bayangan kotak untuk membuatnya menonjol dari sisa gambar.

Berikut tampilannya dalam paket tata letak Siteseeing menggunakan warna dari tata letak. Ini adalah contoh yang baik tentang bagaimana dua gambar tidak harus menjadi sebelum dan sesudah dari hal yang sama atau bahkan hal yang serupa. Ini adalah cara yang baik untuk menunjukkan tempat pernikahan, tempat liburan, dll., untuk membantu pembeli memilih di antara mereka (atau membuat pemilihan lebih sulit, tetapi saya tidak menyarankan itu sebagai tujuan).

Pembelian

Kamu bisa membeli Divi Sensei Before dan After Slider di Divi Marketplace. Biayanya $5 untuk penggunaan situs web tanpa batas dan dukungan serta pembaruan selama 1 tahun. Harga ini sudah termasuk jaminan uang kembali 30 hari.

Mengakhiri Pikiran

Divi Sensei Before and After Slider adalah modul sederhana. Misalnya, penggeser tidak memiliki kontrol lebar dan label tidak menyertakan batas, bayangan kotak, gradien, dll., tetapi pengaturannya membuatnya mudah untuk menyesuaikan gaya setiap tata letak yang saya tambahkan. Untuk harga, dan untuk apa yang bisa dilakukan, tingkat pengaturan masuk akal dan saya bisa mendapatkan desain yang saya inginkan dengan mudah.

Semua kontrolnya intuitif dan saya tidak pernah berpikir untuk membutuhkan instruksi. Anda bahkan dapat menggunakan tag alt yang berbeda untuk gambar untuk membantu meningkatkan SEO. Jika Anda tertarik dengan slider sebelum dan sesudah untuk digunakan dengan situs web Divi Anda, Divi Sensei Before dan After Slider layak untuk dipertimbangkan.

Kami ingin mendengar dari Anda. Sudahkah Anda mencoba Divi Sensei Before and After Slider? Beri tahu kami pendapat Anda tentang hal itu di komentar di bawah.

Gambar Unggulan melalui Elvetica / shutterstock.com