Semua yang Perlu Anda Ketahui Tentang Modul Carousel Grup Divi 5

Salah satu modul terbaru Divi 5, carousel grup, ada di sini untuk memudahkan untuk membuat korsel dan animasi yang menakjubkan secara visual untuk situs web Divi Anda. Penambahan yang kuat ini memungkinkan perancang web untuk membuat korsel situs web yang menarik tanpa memerlukan plugin pihak ketiga atau CSS khusus. Apakah Anda sedang membangun portofolio ramping, toko e-commerce, atau blog, Modul Carousel grup membuka kreativitas baru.

Dalam posting ini, kami akan membahas semua yang perlu Anda ketahui tentang modul carousel grup, lengkap dengan contoh dan panduan langkah demi langkah tentang cara menggunakannya. Ayo menyelam!

Apa itu Modul Carousel Grup?

Modul Carousel Grup di Divi 5 memungkinkan Anda untuk membuat korsel dan slider yang dinamis dan menarik yang dapat menambah sedikit gerakan dan interaktivitas ke situs web Anda. Baik Anda menampilkan potongan portofolio, anggota tim, atau produk, modul serba guna ini memungkinkan Anda untuk membangun hampir semua jenis korsel, termasuk yang pasca-pasca yang menarik konten secara dinamis.

Setiap slide adalah kanvas kosong, memungkinkan Anda untuk menambahkan modul divi apa pun, menjadikannya alat yang hebat untuk desain kreatif dan fungsional.

Fitur utama

Modul Carousel Grup dibangun di atas fondasi yang dioptimalkan Divi 5, memastikan waktu beban yang cepat dan transisi yang lancar. Antarmuka drag-and-drop Divi 5 memungkinkan Anda dengan mudah menambahkan modul ke slider, dengan kontrol responsif untuk tata letak yang menyempurnakan untuk desktop, tablet, dan seluler, sambil mempertahankan kinerja yang cepat.

Slide yang dapat disesuaikan

Modul Carousel Grup menawarkan kontrol penuh atas jumlah slider, konten mereka, dan pengaturan animasi. Anda dapat menyesuaikan transisi slide, waktu, dan opsi navigasi untuk membuat pengalaman pengguna yang mulus yang cocok dengan visi Anda.

Konten dinamis dengan pembangun loop

Terintegrasi dengan pembangun loop Divi 5, modul mendukung korsel dinamis berdasarkan posting, istilah, atau data pengguna. Misalnya, Anda dapat membuat korsel testimonial menggunakan jenis posting khusus dan bidang kustom canggih (ACF), secara otomatis menarik ulasan klien atau studi kasus tanpa memerlukan pembaruan manual.

Fleksibilitas desain

Anda dapat memanfaatkan pengaturan desain Divi 5 untuk membangun gaya korsel yang unik. Terapkan Transformasi, Filter, Bayangan Kotak, atau Efek Melayang ke Slide, dan Menyesuaikan Modul Individual Dalam Grup untuk Membuat Slide Banding Visual yang membuat pengunjung Anda tetap terlibat.

Cara menggunakan modul carousel grup

Menyiapkan korsel kelompok di Divi 5 adalah intuitif dan fleksibel. Mulailah dengan menambahkan baris satu kolom ke halaman. Selanjutnya, pilih Modul Carousel Grup di pembangun visual dan tambahkan ke halaman Anda.

Di tab Konten , klik untuk memperluas menu dropdown Pengaturan Carousel .

Aktifkan rotasi otomatis , mode tengah , dan atur slide untuk ditampilkan ke 3 .

Aktifkan navigasi show dot di menu dropdown elemen. Anda dapat meninggalkan panah show diaktifkan atau menonaktifkannya.

Tetapkan gaya ke grup pertama

Dengan pengaturan korsel kami di tempat, kami dapat menambahkan grup pertama kami. Klik ikon Pengaturan Grup untuk memunculkan pengaturan.

Di tab Konten , perluas menu dropdown latar belakang . Klik tab Latar Belakang dan kemudian klik +tambahkan gambar latar belakang untuk menambahkan gambar ke grup.

Selanjutnya, arahkan ke tab desain . Perluas menu tata letak tata letak dan atur konten Justify untuk mengakhiri .

Selanjutnya, perluas menu dropdown spasi dan tambahkan margin 5% ke kiri dan kanan grup kami. Ini akan menambah beberapa ruang bernapas di antara kelompok -kelompok di korsel.

Atur padding atas menjadi 100%. Terapkan padding 25px ke kiri dan kanan.

Tambahkan konten ke grup pertama

Kami dapat mengalihkan perhatian kami untuk menambahkan konten ke grup kami. Klik ikon Black + dan tambahkan modul pembagi .

Arahkan ke tab Desain . Perluas menu dropdown garis dan ubah warna menjadi #FFFFFF .

Selanjutnya, perluas tab ukuran. Atur bobot pembagi menjadi 4px dan lebar hingga 15% .

Selanjutnya, tambahkan modul heading ke grup. Berikan judul judul.

Beralih ke tab Desain . Di bawah teks heading , atur level heading ke H2 (atau heading lain yang Anda inginkan) , pilih Inter untuk font heading , pilih Light for the Font Weight, #FFFFFFF untuk warna teks heading , dan 2em untuk ukuran teks heading .

Sebelum menduplikasi grup kami, mari kita kembali ke tab Desain dan sesuaikan celah vertikal ke 10px. Ini akan menghilangkan ruang vertikal yang tidak perlu antara modul.

Menambahkan grup tambahan

Sekarang setelah grup pertama kami dirancang, kami dapat menyalin grup gaya dan cukup menukar konten kami (gambar latar belakang dan judul) untuk korsel. Gandakan grup delapan kali, dan kami akan memiliki sembilan slide secara total.

Setelah menduplikasi grup, korsel grup Anda harus terlihat seperti ini.

Sementara kami di sini, merupakan ide yang baik untuk memberi setiap kelompok nama unik sehingga lebih mudah diidentifikasi. Klik ikon pengaturan grup pertama dan gulir ke bawah ke label admin . Beri nama grup Yunani.

Klik pada grup ke -2 di korsel. Perluas tab latar belakang dan ganti gambar dengan yang baru.

Saat berada di tab Konten , jangan lupa menambahkan nama ke bidang label admin . Selanjutnya, ubah judul modul heading menjadi Maine .

Ulangi langkah -langkah dengan semua grup tambahan. Setelah selesai, korsel Anda akan terlihat seperti ini. Saat berada di pembangun visual, Anda dapat menggunakan titik -titik navigasi untuk menggulir carousel untuk memastikan Anda tidak melewatkan langkah apa pun.

Seperti yang Anda lihat, teks pada beberapa slide kami agak sulit dibaca. Kami dapat memperbaikinya di tab Desain di tingkat korsel tanpa harus mengedit setiap item grup secara individual.

Menyesuaikan Grup dan Grup Aktif

Dalam modul Carousel Grup, Anda dapat menata grup yang aktif dan tidak aktif. Kuncinya adalah bahwa modul carousel grup itu sendiri berfungsi sebagai kanvas kosong, dan Anda menerapkan gaya pada grup modul di dalamnya. Ini memungkinkan tingkat kustomisasi yang tinggi, memungkinkan Anda membuat tata letak dan efek yang unik.

Sekarang kami telah membuat korsel grup, menuju ke tab Desain di pengaturan Carousel utama.

Perluas menu dropdown grup . Tab ini mengontrol pengaturan desain untuk grup modul yang terkandung dalam korsel grup. Pengaturan apa pun yang Anda terapkan di sini akan diterapkan pada modul grup yang tidak aktif .

Perluas tab Latar Belakang . Kami akan menerapkan gradien ringan ke tab yang tidak aktif untuk memastikan teks tersebut dapat dibaca. Atur stop gradien pertama ke #000000 dengan opacity 0% . Sesuaikan sedikit slider ke kanan. Aktifkan gradien tempat di atas sakelar gambar latar belakang .

Atur stop gradient ke -2 ke #000000 dengan opacity 40% .

Aktifkan gradien tempat di atas sakelar gambar latar belakang .

Selanjutnya, temukan tab Filter . Kami akan mengurangi saturasi pada kelompok tidak aktif untuk memberikan gambar latar belakang efek hitam dan putih. Temukan slider jenuh dan atur ke 0 .

Selanjutnya, perluas menu dropdown grup aktif dan klik pada tab Latar Belakang . Terapkan pengaturan gradien yang sama seperti di atas.

Pastikan untuk mengaktifkan gradien tempat di atas sakelar gambar latar belakang .

Perluas menu dropdown filter di bawah grup aktif dan sesuaikan slider saturasi menjadi 75% . Ini hanya akan mewarnai item korsel aktif, yang memungkinkan pengguna untuk mengidentifikasi slide aktif di korsel.

Kustomisasi tata letak responsif

Sekarang setelah grup kami Carousel siap untuk desktop, kami akan menggunakan breakpoint responsif Divi 5 untuk menata versi seluler dari korsel kami. Secara default, Divi 5 memungkinkan tiga breakpoint. Anda dapat menggunakan ketujuh breakpoint yang tersedia jika Anda ingin lebih banyak kontrol atas berbagai ukuran perangkat. Klik menu Ellipsis di tengah bilah atas di pembangun visual.

Aktifkan breakpoint yang Anda inginkan dan klik Simpan untuk melanjutkan.

Klik pada breakpoint tablet untuk melihat bagaimana tata letak akan terlihat pada perangkat tablet. Gulir ke bawah ke pengaturan korsel dan sesuaikan slide untuk ditampilkan ke 1 . Ini juga akan berlaku untuk breakpoint yang lebih kecil, seperti telepon dan telepon .

Terakhir, klik tombol Pratinjau di kiri atas layar untuk melihat korsel grup Anda di tab baru.

Setelah selesai, korsel grup Anda harus terlihat mirip dengan video di bawah ini.

Itu saja! Membangun korsel kelompok di Divi 5 sangat mudah dan menawarkan hasil yang luar biasa.

Integrasi dengan Pembangun Loop Divi

Pembangun Loop Divi 5 adalah fitur yang kuat yang dapat mengubah modul grup menjadi tampilan konten yang dinamis. Fitur ini memungkinkan desainer untuk membuat korsel dinamis dan otomatis yang menarik konten langsung dari WordPress, mengubah konten statis menjadi tampilan produk, arsip kategori, atau korsel anggota tim dengan beberapa klik.

Dengan mengintegrasikan Loop Builder dengan korsel grup, Divi 5 memberdayakan pengguna untuk membuat korsel yang canggih dan digerakkan oleh konten dengan pekerjaan manual minimal, menjadikannya fitur yang menonjol untuk desain web yang dinamis.

Pembuat loop memungkinkan carousel grup untuk secara dinamis mengulang posting, istilah, atau data pengguna, membuat korsel yang secara otomatis mencerminkan konten terbaru situs Anda. Karena pembangun loop menarik data langsung dari database WordPress Anda, Anda dapat dengan mudah menampilkan posting blog, kategori produk, atau profil pengguna.

Misalnya, Anda dapat membuat Carousel posting blog menggunakan jenis pos atau slider kategori produk menggunakan istilah WooCommerce, membuat modul sangat fleksibel untuk kebutuhan konten yang dinamis.

Contoh Dunia Nyata dari Modul Carousel Grup

Fleksibilitas modul carousel grup membuatnya cocok untuk berbagai kasus penggunaan. Berikut adalah beberapa contoh dunia nyata untuk menunjukkan apa yang mungkin.

Slider Lebar Lengkap / Layar Lengkap Kustom

Dalam contoh ini, kami telah membuat slider layar penuh/penuh untuk fitur shake untuk toko es krim. Kami mengatur carousel untuk menampilkan satu slide pada satu waktu, masing-masing berisi gambar latar belakang, dua judul, dan tombol ajakan bertindak. Kami juga telah mengatur animasi untuk maju ke slide berikutnya setelah penundaan 3 detik. Anda dapat mencapai tampilan ini dengan mengatur korsel grup dan bagian menjadi 100VH.

Showcase Anggota Tim

Ketika Anda ingin menampilkan anggota tim di situs web Anda, menggunakan Modul Carousel Grup adalah cara yang bagus untuk melakukannya. Dalam contoh ini, kami telah mengkonfigurasi tata letak 3-kolom ke dalam korsel kami. Setiap slide menyertakan tautan headshot, nama, peran, dan media sosial menggunakan modul Ikuti Sosial Divi. Atur korsel untuk menggulir satu slide sekaligus untuk tampilan yang bersih dan profesional.

Kategori menampilkan

Modul Carousel Grup Divi 5 berfungsi dengan sempurna dengan pembangun loop. Ini memungkinkan Anda untuk membuat slider menarik yang menampilkan kategori produk situs web Anda. Setiap slide secara dinamis menarik nama kategori dan gambar unggulan, menjadikannya cara yang bagus untuk memamerkan produk Anda. Dalam contoh ini, kami menggunakan efek filter untuk

Kesaksian

Modul Carousel Grup juga bagus untuk membuat slider testimonial. Anda dapat dengan mudah menampilkan ulasan pelanggan terbaik Anda, testimonial klien, dan banyak lagi. Berkat modul carousel grup, Anda tidak lagi terbatas pada kolom statis atau plugin eksternal.

Unduh file

Unduh secara gratis

Bergabunglah dengan The Divi Newsletter dan kami akan mengirimi Anda email salinan paket tata letak halaman pendaratan Ultimate Divi, ditambah banyak sumber daya divi yang luar biasa dan gratis, tips, dan trik. Ikuti bersama dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

Unduh

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan mendapatkan akses ke paket tata letak divi mingguan gratis!

Buka kunci kemungkinan kreatif dengan modul Carousel Divi 5

Modul Carousel Grup Divi 5 adalah tambahan yang kuat yang membuka kunci baru untuk membuat situs web Divi yang dinamis. Dari membuat slider produk yang menarik hingga testimonial, modul ini membuat penambahan konten interaktif ke situs divi Anda lebih mudah.

Sekarang fondasi Divi 5 yang dirubah telah membuka jalan bagi lebih banyak fitur, ini adalah waktu yang tepat untuk menyelam! Sudahkah Anda mencoba modul Carousel Grup? Beri tahu kami di komentar di bawah.