Cara Membangun Slider Layar Penuh Kustom Dengan Divi 5 (Unduh Gratis)

Salah satu rilis terbaru Divi 5 memperkenalkan modul carousel grup, fitur untuk membuat slider dan carousel yang menarik, untuk situs WordPress Anda. Anda dapat dengan mudah memamerkan portofolio, produk, pahlawan yang mendalam, atau slider layar penuh, dan membawa desain situs Anda ke ketinggian baru.

Dalam posting ini, kami akan memberikan panduan langkah demi langkah untuk membuat slider layar penuh menggunakan Modul Carousel Grup. Ayo menyelam!

Memahami Modul Carousel Grup

Modul Carousel Grup adalah tambahan serbaguna untuk Divi 5, memungkinkan Anda untuk membuat slider dan carousel dinamis.

Tidak seperti modul tradisional, ini mendukung berbagai tata letak, dari carousel gambar sederhana hingga slider yang kompleks dan pasca yang ditenagai oleh pembangun loop. Fleksibilitas ini membuatnya sempurna untuk menampilkan konten seperti portofolio, testimonial, atau galeri produk dengan cara yang menarik.

Fitur Utama dari Modul Carousel Grup

Modul Carousel grup bersinar dengan fitur yang kuat. Ini mendukung loop konten dinamis, memungkinkan Anda untuk menarik posting, halaman, atau tipe posting khusus langsung ke slider Anda menggunakan pembangun loop.

Modul ini juga memungkinkan Anda menggunakan modul divi apa pun untuk membangun slider yang indah dan menarik menggunakan barisan bersarang dan kelompok modul. Anda dapat menyesuaikan navigasi dengan panah dan titik pagination, menyesuaikan posisi, warna, dan gaya lainnya agar sesuai dengan situs Anda.

Opsi autoplay, kecepatan yang dapat disesuaikan, dan fitur jeda-on-hover memberikan pengalaman yang menarik bagi pengunjung Anda, memastikan mereka tetap di situs Anda lebih lama. Selain itu, modul ini sepenuhnya dapat disesuaikan, memungkinkan Anda untuk membuat tata letak layar penuh dan penuh, menjadikannya ideal untuk pahlawan, layanan, atau bagian fitur di situs web Anda.

Cara Membangun Slider Layar Penuh Dengan Modul Carousel Grup Divi 5

Dalam tutorial ini, kami akan menunjukkan kepada Anda cara menggunakan Modul Carousel Grup untuk membangun slider layar penuh untuk situs web Divi 5 Anda yang akan datang. Pada akhirnya, Anda akan memiliki keterampilan untuk membangun slider yang menawan untuk mendorong pengunjung Anda untuk bertindak.

Langkah 1: Menyiapkan Halaman Baru

Buat halaman baru, tambahkan judul, dan klik Gunakan Divi Builder untuk memulai.

Saat pembangun visual terbuka, pilih Build From Scratch di bawah opsi Buat Halaman Anda .

Arahkan kursor ke bagian pada halaman baru Anda untuk mengungkapkan ikon Pengaturan . Klik untuk mengungkapkan pengaturan bagian.

Arahkan ke tab Desain . Klik menu dropdown tata letak . Di bawah konten Justify , pilih Center . Di bidang Align Items , pilih Center . Ini akan memungkinkan konten bagian kami dipusatkan secara horizontal dan vertikal.

Selanjutnya, kami akan menyesuaikan pengaturan jarak untuk bagian ini. Perluas menu dropdown spasi . Atur margin ke 0px , atas dan bawah. Di bawah padding , atur bagian atas dan bawah ke 0px .

Dengan pengaturan bagian di tempat, klik ikon Green + untuk menambahkan baris baru.

Pilih baris satu kolom di bawah kolom yang sama .

Selanjutnya, tambahkan modul carousel grup ke baris.

Sebelum menambahkan konten, kita harus mengatur Modul Baris dan mengelompokkan Modul Carousel dengan Flexbox dan Kontrol Jarak.

Langkah 2: Mengkonfigurasi pengaturan baris

Membuat slider layar penuh mengharuskan kami untuk mengatur baris dan modul carousel grup hingga lebar 100% . Klik ikon Layers untuk dengan mudah menyesuaikan bagian. Ini sangat penting ketika bekerja dengan bagian dan baris penuh, terutama ketika bantalan dan margin telah diatur ke 0. Ini membuatnya lebih mudah untuk melihat struktur tata letak halaman Anda

Dalam tampilan Layers, klik untuk memilih baris satu kolom yang menampung modul carousel grup. Arahkan ke pengaturan desain. Di menu dropdown tata letak, sesuaikan celah horizontal ke 0 .

Juga, atur item Sejajarkan ke pusat baris.

Atur lebar dan lebar maks di tab ukuran menjadi 100%.

Di tab spasi , atur margin atas dan bawah dan bantalan ke 0px .

Langkah 3: Mengkonfigurasi Pengaturan Carousel Grup

Selanjutnya, kami akan mengkonfigurasi pengaturan carousel grup. Perluas menu dropdown Pengaturan Carousel di tab Konten. Anda dapat mengaktifkan rotasi otomatis , pilih kecepatan rotasi otomatis pada pengaturan default 2000ms , dan aktifkan jeda pada hover .

Di tab Elements , nonaktifkan acara navigasi dot dan cuti diaktifkan. Anda juga dapat memilih ikon khusus untuk panah kiri dan kanan.

Klik untuk memperluas tab Panah di tab Desain. Tetapkan #FFFFFF sebagai warna panah , tinggalkan ukuran panah di 48px default, dan tinggalkan posisi panah yang disetel ke dalam .

Perluas tab latar belakang dan tetapkan #000000 sebagai warna latar belakang .

Langkah 4: Gaya grup pertama

Kami dapat menambahkan konten ke slide pertama dengan bagian, baris, dan mengelompokkan pengaturan korsel di tempat. Klik tab Konten di Modul Carousel Grup dan klik ikon Pengaturan untuk grup.

Perluas menu dropdown latar belakang dan pilih tab Gradient .

Klik slider gradien pertama untuk menetapkan warna baru. Masukkan #EFB648 ke dalam bidang warna .

Selanjutnya, klik ke Slider Gradient ke -2 dan tetapkan #F28F52 sebagai warnanya.

Di bidang tipe gradien , pilih Circular .

Selanjutnya, arahkan ke tab desain . Perluas tab spasi dan tetapkan 5% padding ke bagian atas dan bawah grup.

Langkah 5: Tambahkan konten ke grup pertama

Sekarang pengaturan grup kami dikonfigurasi, kami dapat mulai menambahkan konten ke grup. Klik ikon Black + untuk menambahkan modul.

Ketika kotak dialog Sisipkan Modul atau Baris muncul, klik tab Baris Baru . Di bawah bagian kolom yang sama , pilih baris kolom tunggal .

Tambahkan modul heading

Pilih dan masukkan modul heading .

Perluas menu dropdown teks dan masukkan jus jeruk sebagai judul .

Arahkan ke tab Desain . Perluas menu dropdown teks heading . Pilih H1 sebagai level heading , gunakan bebas neue sebagai font heading , atur gaya heading font ke huruf besar , perataan teks heading ke tengah , warna teks heading ke #FFFFFFFF , dan ukuran teks heading ke 20EM .

Gunakan kontrol responsif Divi 5 untuk menyesuaikan ukuran teks heading ke 15em pada tablet, dan 8em di ponsel.

Tambahkan baris baru

Selanjutnya, kami akan menambahkan baris baru di bawah baris satu kolom yang berisi modul heading. Klik ikon Black + untuk menambahkan modul baru.

Klik tab Baris Baru . Di bawah kolom offset , pilih opsi 1/4 + 1/2 + 1/4.

Di tab Desain , perluas tab ukuran dan masukkan 70% untuk lebar dan lebar maks . Atur penyelarasan ke pusat .

Tambahkan modul heading

Pilih modul heading dan tambahkan ke kolom pertama .

Berikan judul judul dan menuju ke tab Desain . Perluas menu dropdown teks heading . Pilih H2 untuk level heading , bebas neue sebagai font heading , huruf besar sebagai gaya heading font , #ffffff sebagai warna teks heading , dan 6em sebagai ukuran teks heading .

Gunakan kontrol responsif Divi untuk menyesuaikan ukuran teks heading ke 4em .

Tambahkan Modul Teks

Tambahkan modul teks di bawah judul di kolom pertama. Masukkan beberapa teks tubuh, dan beralih ke tab Desain . Pilih poppins sebagai font teks , atur warna teks ke #FFFFFF , dan ukuran teks ke 16px .

Tambahkan modul tombol

Tambahkan modul tombol di bawah modul teks di kolom pertama. Tetapkan teks ke tombol di tab Konten dan bertukar ke tab Desain. Perluas menu dropdown tombol dan aktifkan Gunakan gaya khusus untuk tombol . Kemudian perluas menu latar belakang tombol . Di tab Warna Latar Belakang , tambahkan #528bf2 sebagai warna tombol.

Gunakan kontrol hover Divi 5 untuk menetapkan #6A7C9D sebagai warna hover untuk tombol.

Beralih kembali ke tampilan desktop. Perluas tab Dropdown Border Tombol . Tambahkan 100px di bawah jari -jari perbatasan tombol dan atur lebar batas tombol ke 0px .

Perluas menu dropdown teks tombol . Tetapkan poppins sebagai font tombol , #FFFFFFF sebagai warna teks tombol , dan 16px sebagai ukuran teks tombol .

Perluas pengaturan ikon tombol dan nonaktifkan sakelar ikon tombol tampilkan .

Terakhir, perluas menu dropdown spasi . Tambahkan bantalan 15px ke atas dan bawah dan 35px ke kiri dan kanan.

Tambahkan Modul Gambar

Tempatkan modul gambar di kolom kedua. Ketika pengaturan muncul, melayang di atas bidang gambar untuk mengungkapkan pengaturan. Klik ikon Pengaturan untuk memuat perpustakaan media dan mengunggah gambar ke modul.

Selanjutnya, kami akan menambahkan interaksi ke gambar untuk membuat efek mouse-over. Arahkan ke tab Advanced . Perluas menu interaksi untuk mengungkapkan pengaturannya. Klik tombol +Tambahkan Interaksi .

Pilih Mouse Enter saat opsi muncul.

Masukkan kemiringan gambar di bidang label admin , pilih Mouse ENTER sebagai peristiwa pemicu, gerakan Mirror Mouse sebagai tindakan efek, pilih gambar sebagai modul target, miring sebagai jenis gerakan, dan 15 untuk sensitivitas. Terakhir, klik tombol Simpan Interaksi untuk mengaktifkan interaksi.

Tambahkan modul penghitung batang

Klik untuk menambahkan modul penghitung batang di kolom ke -3. Di tab Konten. Di tab Elements , nonaktifkan persentase pertunjukan .

Selanjutnya, perluas tab latar belakang. Tambahkan #FFFFFF sebagai warna latar belakang.

Tukar ke tab Desain dan perluas menu dropdown bar . Di bidang warna latar belakang batang , tambahkan #528bf2 sebagai warnanya.

Perluas menu dropdown teks judul . Di bidang judul Font , pilih Bebas Neue . Pilih #FFFFFF sebagai warna teks judul dan 22px sebagai ukuran teks judul .

Tukar kembali ke tab Konten. Kali ini, klik ikon Pengaturan untuk item penghitung batang pertama.

Masukkan teks ke dalam bidang judul dan atur bidang persen menjadi 75 .

Klik untuk kembali ke tab Konten Utama untuk modul Bar Counters.

Sekarang pengaturan desain kami diatur, Anda dapat dengan mudah menyalin item penghitung batang pertama untuk melestarikan pengaturan.

Gandakan item penghitung batang dan ubah judul dan persen ke pengaturan yang Anda inginkan.

Langkah 6: Tambahkan animasi

Untuk membuat grup lebih mendalam, kami akan menambahkan beberapa efek animasi. Pertama, kami akan menambahkan efek zoom ke judul utama kami. Klik untuk memilih judul utama untuk grup. Arahkan ke tab Desain dan gulir ke bawah untuk memperluas tab Animasi. Pilih zoom untuk animasi. Tinggalkan semua pengaturan apa adanya.

Selanjutnya, klik untuk memperluas baris ke-2 (baris tiga kolom). Klik ke dalam pengaturan kolom pertama.

Klik tab Desain dan gulir ke bawah untuk mengungkapkan tab Animasi. Pilih Slide untuk gaya animasi dan tepat untuk arah animasi. Tinggalkan semua pengaturan lainnya.

Klik kembali ke tab Konten Utama untuk baris. Kali ini, pilih kolom ke -3. Arahkan ke tab Desain, perluas tab animasi, dan pilih Slide> Left untuk animasi. Tinggalkan pengaturan lainnya di default mereka.

Langkah 7: Baris yang tumpang tindih

Untuk menambahkan sedikit bakat tambahan ke tata letak, kami akan menyesuaikan margin pada baris ke -2 untuk membuat efek tumpang tindih. Ini akan mendorong baris ke atas, memungkinkannya untuk tumpang tindih tajuk utama untuk efek yang bagus. Pilih baris ke -2 di tata letak dan navigasikan ke tab Desain. Perluas tab spasi untuk mengungkapkan pengaturan. Di margin atas, atur nilainya menjadi -8%.

Selanjutnya, kami akan menerapkan nilai indeks Z untuk menempatkan baris ke -2 di atas tanggal 1. Arahkan ke tab Advanced, perluas pengaturan posisi, dan terapkan 999999 ke bidang Indeks Z.

Saat Anda mempratinjau slider, Anda akan melihat bahwa baris ke -2 telah didorong ke atas sedikit tumpang tindih baris pertama, menciptakan efek tumpang tindih yang bagus.

Langkah 8: Tes Responsif

Sebelum kita menyalin grup pertama, itu ide yang bagus untuk menguji respon tata letak. Gunakan breakpoint responsif divi 5 yang dapat disesuaikan untuk melakukan penyesuaian apa pun.

Di Divi 5, sekarang ada 7 breakpoint alih -alih Divi 4's 3. Anda dapat menggunakan breakpoint ini untuk memastikan tata letak Anda terlihat luar biasa pada ukuran layar apa pun. Navigasikan melalui breakpoint dan buat tweak yang diperlukan sebelum kita menyalin grup pertama.

Salah satu fitur baru terbaik di Divi 5 adalah kemampuan untuk mengubah urutan kolom untuk perangkat seluler. Ini adalah cara yang bagus untuk menjaga desain fungsional dan efektif pada semua ukuran layar. Saat berada di tampilan seluler, pilih kolom ke-2 dari baris ke-2 di tata letak kami (baris 3-kolom).

Di tab Konten , perluas tab Pesanan . Dari sana, atur urutan tampilan ke -1 . Itu akan menempatkan kolom dengan gambar di bagian atas, memungkinkan gambar untuk menutupi heading seperti pada tampilan desktop dan tablet.

Langkah 9: Duplikasi Grup

Setelah kami memiliki semuanya, kami dapat dengan mudah menyalin grup pertama dan mengubah gradien latar belakang, teks, dan gambar tanpa mengulangi semua langkah. Di tab Konten Grup Carousel Utama, klik untuk menduplikasi grup pertama.

Sebelum menyalin, tetapkan label admin ke grup untuk membuatnya lebih mudah.

Dari sana, ubah judulnya, bertukar gambar, dan tetapkan gradien latar belakang baru ke grup. Gunakan #FC6A3C untuk slider gradien pertama dan #C52F00 untuk yang kedua.

Anda juga ingin mengubah tombol dan bar counter warna menjadi #3DFCCA dan #C52F00 di Hover.

Kami juga perlu menyesuaikan waktu animasi untuk grup ke -2. Ini memastikan animasi tidak akan memuat untuk slide lain sampai slider maju. Di modul heading utama, navigasikan ke tab desain , perluas menu animasi , dan atur penundaan animasi ke 2000ms .

Lakukan hal yang sama untuk baris 3-kolom. Di kolom pertama dan ketiga , atur penundaan animasi ke 2000ms .

Perubahan pada grup ketiga

Untuk grup ke -3, gunakan #71B953 dan #617A56 untuk gradien latar belakang .

Untuk modul Tombol dan Bar Counter , gunakan #BA54B3 dan #654F64 untuk warna hover.

Anda juga perlu mengubah penundaan animasi pada modul heading dan kolom pertama dan ketiga dari baris ke -2 menjadi 4000ms .

Perubahan pada kelompok keempat

Untuk gradien latar belakang , gunakan #AD52B7 dan #AD52B7 .

Gunakan #83B853 dan #83B853 untuk penghitung batang dan modul tombol.

Akhirnya, atur penundaan animasi ke 6000ms pada judul utama dalam grup, bersama dengan kolom pertama dan ketiga dari baris 3-kolom.

Langkah 10: Pratinjau dan simpan slider

Langkah terakhir adalah menyimpan tata letak dan melihat pratinjau untuk memastikan tidak ada langkah yang terlewatkan. Di pembangun visual, klik tombol simpan di sudut kanan atas.

Klik tombol Pratinjau untuk membuka tata letak di tab baru.

Setelah selesai, slider Anda akan terlihat seperti ini:

Itu saja! Modul Carousel Grup adalah tambahan baru yang serba guna untuk Divi 5. Ini memungkinkan Anda untuk membuat slider dan carousel untuk proyek apa pun dan menawarkan opsi kustomisasi tanpa batas.

Unduh tata letak carousel layar penuh

Jika Anda ingin menggunakan tata letak yang telah kami buat kembali di posting ini, Anda dapat mengaksesnya melalui formulir di bawah ini. Setelah Anda mengunduh dan membuka ritsleting folder, Anda akan menemukan file JSON. Arahkan ke perpustakaan Divi Anda untuk mengunggah file sehingga Anda dapat mengakses dan menggunakannya untuk halaman apa pun yang Anda bangun.

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!

Bangun korsel pertama Anda di Divi 5 hari ini

Membuat slider layar penuh khusus dengan modul Carousel grup Divi 5 membuka dunia kemungkinan untuk menciptakan pengalaman yang menarik di situs web Anda. Mengikuti langkah -langkah dalam posting ini, Anda telah belajar cara menggunakan fitur modul, dari opsi kustomisasi canggih seperti animasi, breakpoint responsif, dan efek interaktif. Fleksibilitas Modul Carousel Grup memungkinkan Anda membangun slide untuk apa pun yang dapat Anda bayangkan, semuanya sambil mempertahankan tampilan profesional yang mulus di semua ukuran layar.

Unduh Alpha Public Divi 5 terbaru, bereksperimen dengan modul carousel grup, dan beri tahu kami pendapat Anda di komentar atau di saluran media sosial kami.