Modul Beralih dari Divi memungkinkan Anda untuk menampilkan isi tambahan per klik, tanpa memerlukan kode jQuery tambahan. Mirip dengan modul Accordion, modul sakelar biasanya digunakan untuk berbagi a isi dikelompokkan, seperti pertanyaan yang sering diajukan. Namun, Anda juga dapat menggunakannya untuk tugas lain, misalnya untuk menyusun halaman Anda. Dalam tutorial ini, kita akan menggunakan modul pengalih lebar penuh untuk membuat desain halaman sederhana yang berfungsi saat diklik. Gaya desain yang kami tangani berani dan bersih. Anda juga dapat mengunduh file JSON secara gratis!
Mari kita pergi.
Sebelum kita menyelami tutorial, mari kita lihat sekilas bagaimana kita melihat berbagai ukuran layar.
Mari kita mulai menciptakan kembali
Tambahkan bagian baru
jarak
Mulailah dengan membuat halaman baru (atau membuka yang sudah ada) dan menambahkan bagian biasa ke dalamnya. Satu-satunya hal yang harus dilakukan di pengaturan bagian adalah menghapus semua bantalan atas dan bawah default dari pengaturan jarak.
- Top Padding: 0px
- Lapisan bawah: 0px
Tambahkan baris baru
Struktur kolom
Lanjutkan menambahkan baris baru menggunakan struktur kolom berikut:
perekat
Tanpa menambahkan modul apa pun, buka pengaturan baris dan pastikan garis menyentuh sisi kiri dan kanan wadah bagian dengan mengubah pengaturan ukuran. Ini adalah langkah penting dalam tutorial ini. ini memungkinkan modul Toggle, yang akan kita tambahkan nanti dalam tutorial ini, menjadi lebar penuh.
- Gunakan lebar selokan khusus: Ya
- Lebar selokan: 1
- Lebar: 100%
- Lebar maksimum: 100%
jarak
Kami juga menghapus bantalan atas dan bawah default dari baris. Ini akan menghapus semua ruang antara modul sakelar dan wadah baris / kolom tempatnya ditempatkan.
- Top Padding: 0px
- Lapisan bawah: 0px
Tambahkan modul rocker
Masukkan judul dan konten
Saatnya untuk mulai menambahkan modul! Satu-satunya modul yang kita perlukan di baris ini adalah modul Toggle. Kami akan menggunakan area judul untuk menambahkan judul dan menempatkan semuanya isi yang ingin kami bagikan pada area body content. Jangan ragu untuk menempatkan apa pun yang Anda inginkan di area konten; dari teks ke gambar dan banyak lagi.
Negara
Kami menggunakan status sakelar tertutup, tetapi jangan ragu untuk membiarkannya terbuka juga.
- Negara: tutup
Pengaturan ikon default
Beralih ke tab Desain dan ubah pengaturan ikon modul sesuai:
- Warna Ikon: # 570fff
- Gunakan ukuran ikon khusus: YES
- Ikon Ukuran Huruf: 6vw
Pengaturan ikon saat melayang
Ubah warna ikon hover.
- Warna Ikon: # f2f2f2
Pengaturan failover default
Kemudian ubah warna latar belakang sakelar tertutup.
- Alihkan warna latar belakang: #ffffff
Arahkan kursor ke pengaturan
Dan ubah warnanya juga melayang.
- Alihkan warna latar belakang: # 000000
Pengaturan teks judul
Lanjutkan dengan mengubah pengaturan teks pada judul sebagai berikut:
- Judul teks berwarna: # 000000
- Judul Level Judul: H2
- Judul Polisi: Montserrat
- Judul Teks: Alignment Kiri
- Ukuran Judul Teks: 8vw (desktop), 10vw (tablet dan telepon)
- Penjarangan huruf judul: -1vw (desktop), -0.5vw (tablet dan telepon)
- Tinggi baris judul: 0.7em
Pengaturan teks judul standar tertutup
Kemudian, akses parameter teks dari judul tertutup dan modifikasi sesuai:
- Font Judul Tertutup: Montserrat
- Judul ditutup Ukuran teks: 18vw (desktop), 16vw (tablet dan telepon)
- Tinggi judul tertutup: 0.8em
Arahkan kursor ke pengaturan teks judul
Ubah warna teks teks tertutup di arahkan.
- Judul ditutup Warna teks: # f4f4f4
Pengaturan teks tubuh
Buka pengaturan teks isi dan buat beberapa perubahan juga.
- Jenis huruf: Fira Sans
- Berat font: Ringan
- Alignment of the body text: Membenarkan
- Ukuran teks isi: 1.2vw (desktop), 2vw (tablet), 3vw (telepon)
- Tinggi badan: 2.1em
jarak
Tambahkan juga padding khusus di bagian atas, bawah dan kiri modul.
- Top Padding: 10vw
- Lapisan bawah: 10vw
- Padding Kiri: 6vw
Batas
Lanjutkan dengan menghapus batas default modul dalam pengaturan perbatasan.
- Lebar perbatasan: 0px
Alihkan konten CSS
Tetapkan Toggle parameter modul dengan menambahkan baris kode CSS berikut ke desktop:
lebar: 60vw; batas-kiri: 0.2vw solidblack; bantalan: 5vw 5vw 5vw 5vw XNUMXvw;
Ubah lebar baris kode CSS di tablet dan ponsel:
lebar: 85vw;
Gandakan seluruh bagian sebanyak yang Anda inginkan
Setelah Anda menyelesaikan bagian pertama, baris dan modul Toggle, Anda dapat mengkloning seluruh bagian sebanyak yang Anda inginkan. tergantung pada jumlah konten yang ingin Anda tampilkan di halaman Anda.
Ubah konten
Pastikan untuk mengubah seluruh isi flip-flop di setiap modul flip-flop.
Ubah warna ikon
Kemudian buka setiap modul Toggle satu per satu dan ubah warna ikon. Yang kami gunakan untuk tutorial ini disebutkan di bawah ini:
- Warna ikon 1: # ff9000
- Warna ikon 2: # 00ffd4
penelitian
Sekarang semua langkah telah diambil, mari kita lihat terakhir apa yang terjadi dengan ukuran layar yang berbeda.
final pikiran
Dalam artikel ini, kami menunjukkan cara berkreasi dengan modul Toggle dari Divi. Lebih tepatnya; kami membuatnya dengan lebar penuh dan menggunakannya untuk menampilkan konten dari berbagai bagian dengan cara yang kreatif. Tutorial ini menunjukkan bahwa Anda dapat dengan mudah menggunakan modul Divi di luar kotak ketika Anda memperhitungkan berbagai wadah. Anda juga dapat mengunduh file JSON tutorial secara gratis! Jika Anda memiliki pertanyaan atau saran, silakan tinggalkan komentar di bagian komentar di bawah.
