Slider akordeon adalah cara yang menyenangkan dan menarik untuk ditampilkan isi dalam ruang terbatas. Penggeser akordeon biasanya terbuat 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 efek akordeon dari ekspansi dan kontraksi tercapai.
Dalam tutorial ini, saya akan menunjukkan cara membuat slider akordeon responsif di Divi hanya menggunakan CSS. Untuk melakukan ini, kami akan menggunakan beberapa modul Divi berfungsi sebagai panel akordeon. Modul apa pun dapat digunakan, tetapi untuk contoh ini kita akan menggunakan modul uraian dengan cara yang sangat kreatif untuk membuat penggeser akordeon cantik yang terlihat (dan berfungsi) hebat baik di desktop maupun di seluler.
Check it out!
penelitian
Berikut ini adalah ikhtisar tentang apa yang akan kami bangun dalam tutorial ini.
Mari kita mulai tutorialnya
Apa yang Anda butuhkan untuk memulai
Untuk memulai, Anda perlu melakukan hal berikut:
- Jika Anda belum melakukannya, instal dan aktifkan Tema Divi diinstal (atau plugin Divi Builder jika Anda tidak menggunakan Tema Divi).
- Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di front-end (konstruktor visual).
- Unduh tentang 5 berbagai gambar di perpustakaan untuk digunakan sebagai gambar latar belakang yang diperlukan untuk tutorial.
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Buat penggeser dengan akordeon responsif di Divi
Penciptaan garis
Untuk memulai, tambahkan baris kolom ke bagian reguler.
Kemudian buka pengaturan untuk saluran dan perbarui yang berikut:
- Lebar selokan: 1
- Lebar: 100%
- Lebar maksimum: 800px
- Tinggi: 400px (desktop); 700px (tablet dan ponsel)
Nilai lebar dan lebar maksimal dapat diubah sesuai kebutuhan Anda. Akordeon akan diskalakan dan berfungsi di semua lebar baris. Selain itu, menetapkan ketinggian tetap sangat penting agar desain dapat berfungsi. Elemen anak (kolom dan modul) akan memiliki tinggi 100%. Oleh karena itu, jika Anda tidak menyetel tinggi tetap dari baris, elemen turunan tidak akan memiliki ketinggian.
Parameter kolom
Sekarang setelah tinggi baris diatur, buka pengaturan kolom dan tambahkan kode CSS berikut ke elemen utama:
Biro
display:flex;flex-direction: row;align-items:center;height: 100%;
Tablette
flex-direction: column;
Properti flex akan menyelaraskan panel akordeon secara horizontal di desktop dan secara vertikal di tablet dan ponsel. Ketinggian 100% akan memungkinkan modul yang akan kita tambahkan juga menggunakan nilai ketinggian 100%.
Membuat panel akordeon dengan Ringkasan modul
Penggeser akordeon dapat dibuat menggunakan semua jenis modul. Jika diinginkan, kami dapat menggunakan kombinasi berbagai modul untuk berfungsi sebagai panel akordeon. Tetapi untuk desain ini, kami akan menggunakan Blurb Mods.
Mulailah dengan menambahkan modul presentasi ke baris.
Desain modul abstrak
Buka pengaturan modul ringkasan dan perbarui yang berikut:
Jaga agar judulnya fiktif dan isi dari tubuh. Kami selalu dapat mengubahnya nanti.
Kemudian perbarui ikon presentasi sebagai berikut:
- Ikon (desktop): ikon mewakili garis panah horizontal (lihat tangkapan layar)
- Ikon (arahkan): ikon centang (lihat tangkapan layar)
- Ikon (tablet dan ponsel): ikon yang mewakili garis panah vertikal (lihat tangkapan layar)
konteks
Kemudian berikan gambar latar belakang blurb dan overlay gradien sebagai berikut:
- Tambahkan gambar latar belakang dengan lebar minimal 1000 piksel
- Posisi gambar latar belakang: kiri tengah
Kemudian tambahkan overlay latar belakang gradien.
mengapung
- Latar belakang gradien kiri (hover): # 3e215b
- Gradien latar belakang ke kanan Warna (hover): rgba (0,0,0,0)
- Arah Gradien: 90deg
- Tempatkan gradien di atas gambar latar belakang: YA
icon
- Warna Ikon: #ffffff
- Gambar / lokasi ikon: kiri
Lalu buka tab Desain dan perbarui yang berikut ini:
Judul dan isi teks
- Font Judul: Poppins
- Judul Font: Semi Bold
- Judul Teks Warna: transparan (desktop), #ffffff (hover)
- Ukuran Judul Teks: 23px
- Warna teks badan: transparan (desktop), #ffffff (hover)
Tinggi dan Bayangan Kotak
Setelah teks penuh gaya, tetapkan modul setinggi 100% dan kotak bayangan sebagai berikut:
- Tinggi: 100%
- Box Shadow: Lihat tangkapan layar
- Bayangan kotak Posisi horisontal: -12px
- Bayangan kotak Posisi vertikal: 0px
Hapus CSS Kustom
Agar panel akordeon (atau modul presentasi) kami meluas dan berkontraksi dengan modul lainnya, kami perlu menambahkan CSS khusus untuk mengubah ukuran modul dengan flex-grow. Karena kami akan memiliki total 5 modul yang membentuk akordeon, kami menambahkan "flex: 1" untuk status default, lalu kami mengubahnya menjadi "flex: 5" dalam status hover.
Di bawah tab Advanced, tambahkan CSS khusus berikut, elemen Blurb utama:
Biro
flex:1;position: relative !important;transition: flex 800ms !important;
Tablette
flex:5;
Kemudian tambahkan custom css berikut ke Konten CSS Blurb:
Biro
position: absolute !important;width: 280px;padding: 20px;transition: color 400ms;
Tablette
width: 100%;height: 100%;position: relative !important;
Overflow dan transisi
- Overflow horisontal: disembunyikan
- Overflow vertikal: disembunyikan
- Durasi transisi: 400ms
- Kurva kecepatan transisi: linier
Baik! Itu adalah penyesuaian serius dari modul presentasi. Namun kabar baiknya adalah, yang harus kita lakukan adalah menduplikasinya untuk membuat panel akordeon yang tersisa.
Gandakan Blurbs untuk lebih banyak panel akordeon
Arahkan kursor ke modul presentasi dan klik ikon duplikat empat kali untuk membuat total lima panel akordeon (atau modul).
Kemudian perbarui gambar latar belakang untuk setiap uraian baru yang Anda duplikat.
Hasil akhir
final pikiran
Penggeser akordeon responsif ini benar-benar memiliki beberapa elemen unik yang membuatnya menyenangkan untuk digunakan. Panel akordeon meluas dan berkontraksi saat melayang tanpa masalah tak terduga. Dan ikon presentasi berubah saat melayang dan di perangkat seluler untuk meningkatkan UX. Semoga desain ini bermanfaat untuk proyek Anda selanjutnya.
