Sorotan Plugin Divi: Modul Carousel Produk Divi

Modul Carousel Produk Divi adalah plugin pihak ketiga untuk Divi yang menampilkan produk WooCommerce dalam slider carousel. Bangun korsel produk dan letakkan di dalam tata letak Divi apa pun. Anda dapat menatanya dan memilih beberapa opsi tata letak dan tampilan. Pada artikel ini, kita akan melihat Modul Carousel Produk Divi, melihat fitur-fiturnya, dan melihat betapa mudahnya menggunakannya.

Modul Carousel Produk Divi tersedia dari situs web pengembang dan di pasar Divi.

Modul Korsel Produk Divi

Setelah Anda mengunggah dan mengaktifkan plugin, buka DiviGear di menu dasbor dan aktifkan lisensi Anda. Jika Anda memiliki beberapa plugin dari pengembang ini, Anda harus memilih tab plugin.

Modul baru ditambahkan ke Divi Builder yang disebut Product Carousel. Ini termasuk ikon ungu sehingga menonjol dari keramaian.

Pengaturan termasuk tab Konten, Desain, dan Lanjutan. Tab Konten memiliki pengaturan untuk konten WooCommerce. Pilih jenis produk dari kategori produk terbaru, unggulan, obral, terlaris, peringkat teratas, atau produk dari kotak tarik-turun. Masukkan nomor untuk jumlah produk yang ingin Anda tampilkan. Pilih urutan penyortiran dari popularitas, peringkat, tanggal, atau harga. Anda juga dapat mengaktifkan tombol dan deskripsi Tambahkan ke keranjang. Tampilkan deskripsi lengkap atau kutipan.

Pengaturan Carousel memungkinkan Anda memilih jumlah kolom berdasarkan perangkat yang digunakan. Ini juga mencakup multislide (mengaktifkannya untuk meluncur dengan jumlah slide di layar atau menonaktifkannya untuk menggeser satu slide pada satu waktu), spasi item, durasi transisi, tengah, loop, putar otomatis, navigasi titik dan panah, perataan, dan efek geser. Pengaturan lainnya termasuk tautan dan latar belakang. Sangat menarik bahwa Anda dapat menggunakan titik dan panah bersama-sama. Anda dapat menempatkan titik-titik di kanan, tengah, atau kiri di bagian bawah slide.

Tab Desain mencakup pengaturan untuk hamparan, judul, harga, deskripsi, lencana penjualan, tombol tambahkan ke keranjang, ulasan, panah, titik, gambar, arahkan kursor, spasi, batas, dan bayangan kotak. Pengaturan lain ditambahkan berdasarkan pilihan yang Anda pilih. Masing-masing pengaturan ini sangat luas.

Tab Lanjutan menyertakan fitur CSS, visibilitas, dan transisi yang diharapkan. CSS Kustom mencakup bidang untuk produk, gambar, judul, harga, panah lencana penjualan sebelumnya, panah berikutnya, dan titik. Ini memberi Anda banyak kontrol dengan CSS.

Pengaturan Modul Carousel Produk Divi

Anda dapat memindahkan judul dan harga ke atas atau bawah. Dalam contoh ini, saya telah memindahkan keduanya ke atas dan mengubah ukuran dan warnanya. Saya telah menata lencana penjualan dengan mengubah warna latar belakang dan ukuran font. Saya juga menata titik-titik tidak aktif dan aktif.

Begini tampilannya di bagian depan. Saya juga telah menambahkan overlay dan tombol Add to cart muncul di hover. Anda dapat mengatur gaya tombol ini untuk overlay hover dan tombol hover.

Dalam hal ini, saya telah memilih 6 kolom, memindahkan semua teks kembali ke bawah, menyesuaikan warna teks, dan menambahkan beberapa opacity ke tombol tambahkan ke troli. Saya membiarkan opacity hover secara default, jadi tombolnya solid jika Anda mengarahkan kursor ke tombol itu sendiri.

Untuk yang satu ini, saya mengatur layout menjadi 4 kolom. Saya telah menambahkan panah dan mengubah warna panah dan titik. Saya juga telah menambahkan latar belakang ke judul, harga, dan deskripsi, dan mengubah semua teks menjadi putih. Untuk menyelaraskan teks dengan baik di dalam kotak, saya menambahkan beberapa pengisi konten. Ini juga termasuk pengisi konten untuk bagian atas (jika Anda menempatkan judul atau harga di atas gambar).

Begini tampilannya di bagian depan. Panah di sebelah kanan lebih terang untuk menunjukkan bahwa itu ada di akhir produk yang dapat ditampilkan. Jika saya mengaturnya ke loop, itu akan menjadi warna normal.

Berikut tampilannya dengan Overflow dipilih. Ini memberikan efek kartu 3D yang bagus. Anda dapat menyesuaikan jumlah rotasi dan mengaktifkan bayangan slide.

Dalam contoh ini, saya memberi kartu bayangan kotak dan menyesuaikan blur. Saya juga telah mengubah panah menjadi lingkaran dan menyesuaikan warnanya.

Begini tampilannya di bagian depan dengan Center Slide diaktifkan. Ini adalah tata letak 4 kolom. Tampilannya berbeda saat Anda memilih Center Slide.

Ini adalah tata letak 5 kolom menggunakan pengaturan yang sama seperti contoh di atas.

Korsel produk sangat cocok dengan tata letak Divi. Dalam contoh ini, saya telah mengganti modul Divi shop dengan Modul Carousel Produk Divi dan menatanya agar sesuai dengan tata letak.

Dalam yang satu ini, saya memindahkan judul ke atas, menambahkan beberapa padding ke atas dan bawah, dan membuat judul semi-tebal. Saya juga telah mengubah warna tombol Tambahkan ke troli agar sesuai dengan tata letak.

Untuk yang satu ini, saya telah menyesuaikan batas untuk slide dan gambar untuk membuat sudut membulat. Saya melanjutkan dan membuat gambar menjadi lingkaran. Saya juga telah menambahkan bayangan kotak.

Ini terlihat sangat baik dalam tata letak. Itu menyembunyikan sebagian besar lencana penjualan. Mungkin ada jalan keluarnya dengan CSS.

Yang ini menggunakan Overflow dengan tata letak 3 kolom.

Untuk yang satu ini, saya menghapus batas gambar tetapi mempertahankan batas untuk slide. Saya menambahkan bayangan kotak dan menyesuaikan kekuatan dan posisinya.

Itu juga menunjukkan peringkat bintang dari ulasan di hover. Ini menempatkan peringkat di sebelah tombol Tambahkan ke troli. Ini menyatukan mereka dengan animasi yang keren. Ini adalah pengaturan default. Anda dapat menata warna latar belakang dan bintang.

Dalam hal ini, saya telah menata peringkat agar sesuai dengan elemen dari tata letak.

Untuk yang ini, saya pindahkan harga ke atas dan judul ke bawah. Saya telah menambahkan deskripsi dan overlay. Saya memindahkan navigasi titik ke kanan. Saya harus menambahkan beberapa bantalan agar bayangan kotak ditampilkan di samping. Tanpa bantalan, itu menempatkan produk di tepi ruang modul.

Demo Modul Carousel Produk Divi

Saat ini ada 13 demo yang dapat diunduh di situs web pengembang. Ini adalah tata letak yang dapat Anda unggah ke Perpustakaan Divi dan digunakan dengan tata letak Divi apa pun. Semua termasuk gaya untuk modul Carousel Produk Divi dan beberapa menyertakan modul dan latar belakang gaya lainnya. Ini bagus untuk mendapatkan titik awal dengan desain carousel produk Anda dan untuk menunjukkan beberapa hal yang dapat dilakukan dengan modul. Mari kita lihat beberapa di antaranya.

Yang ini menempatkan judul di atas, gaya ke atas dan bawah untuk dicocokkan, menambahkan panah yang dilingkari di luar gambar dan menyertakan titik. Ini juga memiliki batas bawah untuk membuat slide menonjol. Saya suka warna-warna berani. Bagian atas dan bawah memiliki sedikit transparansi sehingga pola latar belakang terlihat jelas. Tata letak ini menyertakan modul teks bergaya untuk judul.

Beberapa tata letak menyertakan modul lain dengan gaya. Yang ini menggunakan tata letak dua kolom untuk menambahkan ajakan bertindak menggunakan modul teks dan tombol.

Begini tampilannya dari ujung depan. Ini mencakup batas, judul di bagian atas, dan dua warna untuk tombol Tambahkan ke troli. Panah ditampilkan di dalam gambar modul.

Yang ini menyertakan latar belakang hijau dan slide bergaya untuk dicocokkan. Tombol Tambahkan ke troli berwarna hijau muda saat Anda mengarahkan kursor ke produk dan kemudian hijau tua saat Anda mengarahkan kursor ke tombol. Ini termasuk modul teks gaya untuk judul.

Yang ini termasuk gaya biru untuk lencana penjualan, panah bulat di luar gambar, dan tombol Tambahkan ke troli. Ini menambahkan batas kecil ke slide. Ini menampilkan slide dengan efek Overflow.

Yang ini juga menampilkan produk dengan efek Overflow. Itu juga menggunakan warna biru untuk panah dan tombol Tambahkan ke troli. Judul dipindahkan ke atas. Hamparan berwarna putih dengan opasitas tinggi dan lencana penjualan berwarna merah.

Yang ini menyertakan latar belakang bergaya dan menambahkan batas, tombol Tambahkan ke keranjang bergaya, lencana penjualan, dan panah yang dilingkari. Lapisannya berwarna putih. Ini menempatkan harga di bagian atas dan semua data lainnya di bagian bawah.

Harga dan Dokumentasi Modul Carousel Produk Divi

Ada dua opsi pembelian untuk Modul Carousel Produk Divi:

• Situs tunggal – $19
• Situs tidak terbatas – $39

Ini tersedia dari situs web pengembang dan di pasar.

Dokumentasi disediakan oleh video YouTube yang memandu Anda melalui fitur-fiturnya. Anda akan menemukan tautannya di menu DiviGear di dasbor. Jika Anda memiliki lebih dari satu produk DiviGear, pilih tab produk, lalu pilih Dokumentasi.

Mengakhiri Pikiran

Carousel Produk Divi mudah digunakan dan sangat bagus untuk membuat produk Anda menonjol. Bahkan jika Anda tidak ingin menampilkannya sebagai slider, ia memiliki banyak pilihan gaya dan presentasi produk untuk membuatnya layak dipertimbangkan. Saya tidak bekerja dengan baik dengan Extra. Saya ingin melihat Extra didukung karena sudah memiliki banyak fitur WooCommerce dan merupakan platform hebat untuk membangun toko WooCommerce.

Saya suka itu memiliki demo yang dapat diunduh. Mereka termasuk latar belakang dan gaya untuk modul. Ini bagus untuk memberi Anda titik awal atau memicu imajinasi Anda untuk mempresentasikan produk WooCommerce Anda dalam tata letak Divi Anda.

Jika Anda tertarik untuk mempresentasikan produk WooCommerce Anda dalam carousel, atau hanya memiliki beberapa opsi desain lagi, Modul Carousel Produk Divi layak untuk dilihat. Ini tersedia dari situs web pengembang dan di pasar Divi.

Kami ingin mendengar dari Anda. Sudahkah Anda mencoba Modul Carousel Produk Divi? Beri tahu kami pendapat Anda tentang hal itu di komentar.

Gambar Unggulan Letters-Shmetters / shutterstock.com