Apakah Anda ingin membuat slider akordeon? Divi responsif?
Slider akordeon adalah cara yang menyenangkan dan menarik untuk ditampilkan isi di ruang kecil.
Penggeser akordeon umumnya terdiri dari beberapa elemen (atau panel) yang ditumpuk secara horizontal seperti lipatan tirai. Dan saat Anda mengarahkan kursor ke salah satu panel, panel akan melebar untuk menampilkannya isi sementara panel akordeon lainnya berkontraksi. Di sinilah kita mendapatkan efek ekspansi dan kontraksi tipe akordeon.
Dalam tutorial ini, kami akan menunjukkan cara membuat slider akordeon responsif di Divi hanya menggunakan CSS. Untuk melakukan ini, kita akan menggunakan beberapa modul Divi untuk berfungsi sebagai panel akordeon.
penelitian
Berikut adalah ikhtisar singkat tentang apa yang akan kita capai dalam tutorial ini.
Unduh DIVI Sekarang!!!
Membuat halaman baru dengan Divi Builder
Untuk memulai, Anda perlu melakukan hal berikut:
- Dari dasbor WordPress, buka Halaman> Tambah Baru untuk membuat halaman baru.
- Berikan judul yang masuk akal bagi Anda dan klik Gunakan Divi Builder
- kemudian klik Mulai Membangun (Bangun Dari Awal)
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Pembuatan slider akordeon responsif di Divi
Penciptaan garis
Untuk memulai, tambahkan baris satu kolom ke bagian reguler.
Kemudian buka pengaturan baris dan perbarui yang berikut:
- Gunakan Lebar Talang Kustom: YA
- Lebar Talang: 1
- Lebar: 100%
- Lebar Maks: 800px
- Tinggi: 400px (Desktop); 700px (Tablet dan Ponsel)
Nilai lebar dan lebar maksimum dapat diubah sesuai dengan kebutuhan Anda. Akordeon akan pas dan berfungsi dalam lebar garis apa pun.
Parameter kolom
Sekarang kita memiliki ketinggian yang ditentukan untuk baris, buka pengaturan kolom dan tambahkan CSS berikut ke elemen utama:
Desktop
display:flex;
flex-direction: row;
align-items:center;
height: 100%;
Tablette
display:flex;
flex-direction: column;
align-items:center;
height: 100%;
Membuat Panel Akordeon dengan Modul Blurb
Slider akordeon dapat dibuat menggunakan semua jenis modul. Jika kita mau, kita bisa menggunakan kombinasi modul yang berbeda untuk bertindak sebagai panel akordeon. Tapi untuk desain ini, kita akan menggunakan modul Blurb.
Mulailah dengan menambahkan modul Blurb ke baris.
Desain Mod Blurb
Buka pengaturan modul presentasi dan perbarui yang berikut ini:
Pertahankan judul fiksi dan isi dari tubuh. Kami selalu dapat mengubahnya nanti.
Selanjutnya, perbarui ikon presentasi sebagai berikut:
- Ikon (Desktop): ikon garis panah horizontal (lihat tangkapan layar)
- Ikon (Hover): (lihat tangkapan layar)
- Ikon (Tablet dan Ponsel): (lihat tangkapan layar)
Latar belakang
Kemudian berikan blurb gambar latar belakang dan overlay gradien pada hover sebagai berikut:
- Tambahkan gambar latar belakang dengan lebar minimal 1000px
- Posisi Gambar Latar Belakang: Kiri Tengah
Kemudian tambahkan overlay latar belakang gradien.
Melayang-layang
- Latar Belakang Gradien Kiri (Hover): #3e215b
- Gradien latar belakang kanan (arahkan kursor): rgba(0,0,0,0)
- Arah Gradien: 90 derajat
- Gradien Persegi Di Atas Gambar Latar Belakang : YA
icon
- Warna Ikon: #ffffff
- Penempatan Gambar/Ikon: Kanan
Selanjutnya, beralih ke tab Desain dan perbarui yang berikut ini:
Judul dan isi teks
- Judul Font: Poppins
- Berat Font: semi-tebal
- Judul Teks Warna: transparan (Desktop), #ffffff (Hover)
- Ukuran Teks Judul: 22px
- Warna Teks Tubuh: transparan (Desktop), #ffffff (Hover)
Tinggi kotak dan bayangan
Setelah teks dikustomisasi, berikan modul ketinggian 100% dan bayangan kotak sebagai berikut:
- Tinggi: 100%
- Bayangan Kotak: Lihat tangkapan layar
- Posisi horizontal: -12px
- Posisi Vertikal: 0px
CSS khusus
Agar panel akordeon (atau modul Blurb) kami tumbuh dan berkontraksi dengan modul lainnya, kami perlu menambahkan CSS khusus untuk mengubah ukuran modul dengan flex-grow.
Karena kita akan memiliki total 5 modul yang membentuk akordeon, kita menambahkan "flex:1" untuk status default dan kemudian mengubahnya menjadi "flex:5" pada status hover.
Di bawah tab Advanced, tambahkan CSS khusus berikut ke elemen Blurb utama:
Biro
flex:1;
position: relative !important;
transition: flex 800ms !important;
Saat melayang
flex:5;
position: relative !important;
transition: flex 800ms !important;
Kemudian tambahkan CSS khusus berikut ke CSS konten Blurb:
Biro
position: absolute !important;
width: 280px;
padding: 20px;
transition: color 400ms;
Tablette
position: relative !important;
width: 100%;
height: 100%;
padding: 20px;
transition: color 400ms;
Overflow dan transisi
- Luapan Horisontal: Tersembunyi
- Overflow Vertikal: Tersembunyi
- Durasi Transisi: 400ms
- Kurva Kecepatan Transisi: Linear
Sangat baik! Itu adalah penyesuaian serius dari modul Blurb. Tapi kabar baiknya adalah yang harus kita lakukan adalah menduplikasinya untuk membuat panel akordeon yang tersisa.
Tata letak duplikat untuk lebih banyak panel akordeon
Arahkan kursor ke modul presentasi dan klik ikon ganda empat kali untuk membuat total lima panel (atau modul) akordeon.
Selanjutnya, perbarui gambar latar belakang untuk setiap uraian baru yang Anda duplikat.
Hasil akhir
Sekarang kita telah melalui semua langkah, mari kita lihat hasil akhirnya.
Unduh DIVI Sekarang!!!
Kesimpulan
Slider akordeon responsif ini benar-benar memiliki beberapa elemen unik yang membuatnya menyenangkan untuk digunakan. Panel akordeon mengembang dan berkontraksi dengan mulus pada gerakan mouse tanpa gangguan yang tidak terduga.
Dan ikon presentasi berubah saat melayang dan di ponsel untuk meningkatkan UX. Kami harap tutorial ini akan menginspirasi Anda untuk proyek Divi Anda berikutnya. Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Anda juga dapat berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
