Menyusun Halaman Anda dengan Modul Toggle Fullwidth Tebal Menggunakan Divi

Modul Toggle Divi memungkinkan Anda menampilkan konten tambahan saat diklik, tanpa perlu tambahan kode jQuery. Mirip dengan Modul Accordion, Modul Toggle umumnya digunakan untuk berbagi konten yang dikelompokkan, seperti pertanyaan yang sering diajukan. Namun, Anda juga dapat menggunakannya untuk hal lain – misalnya untuk menyusun halaman Anda. Dalam tutorial ini, kita akan menggunakan Modul Toggle lebar penuh untuk membuat desain halaman langsung yang berperilaku saat diklik. Gaya desain yang kami tangani berani dan bersih. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Tata Letak Toggle Lebar Penuh Tebal GRATIS

Untuk meletakkan tangan Anda pada tata letak sakelar lebar penuh tebal gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti 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 dapatkan akses ke paket tata letak Divi mingguan gratis!

Berlangganan Saluran Youtube Kami

Mari Mulai Berkreasi

Tambahkan Bagian Baru

Jarak

Mulailah dengan membuat halaman baru (atau membuka halaman yang sudah ada) dan menambahkan bagian reguler ke dalamnya. Satu-satunya hal yang perlu Anda lakukan di pengaturan bagian adalah menghapus semua bantalan atas dan bawah default dalam pengaturan jarak.

• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan pastikan baris menyentuh sisi kiri dan kanan wadah bagian dengan mengubah pengaturan ukuran. Ini adalah langkah penting dalam tutorial ini; itu memungkinkan Modul Toggle, yang akan kita tambahkan nanti di tutorial ini, menjadi fullwidth.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Kami juga menghapus padding atas dan bawah default baris. Ini akan menghapus semua ruang antara Modul Toggle dan wadah baris/kolom tempatnya ditempatkan.

• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Modul Beralih ke Kolom

Sisipkan Judul & Konten

Saatnya mulai menambahkan modul! Satu-satunya modul yang kita butuhkan di baris ini adalah Modul Toggle. Kami akan menggunakan kotak judul untuk menambahkan judul dan menempatkan semua konten yang ingin kami bagikan di kotak konten isi. Jangan ragu untuk menempatkan apa pun yang Anda inginkan di kotak konten; dari teks ke gambar dan banyak lagi.

Negara

Kami menggunakan status sakelar tertutup tetapi jangan ragu untuk membiarkannya terbuka juga.

• Negara bagian: Tutup

Pengaturan Ikon Default

Pindah ke tab desain dan ubah pengaturan ikon modul yang sesuai:

• Warna Ikon: #570ffff
• Gunakan Ukuran Ikon Kustom: YA
• Ukuran Font Ikon: 6vw

Arahkan ke Pengaturan Ikon

Ubah warna ikon saat melayang.

• Warna Ikon: #f2f2f2

Pengaturan Beralih Default

Ubah warna latar belakang sakelar tertutup berikutnya.

• Warna Latar Toggle Tertutup: #ffffff

Arahkan Geser Pengaturan

Dan ubah warna pada hover juga.

• Warna Latar Toggle Tertutup: #000000

Pengaturan Teks Judul

Lanjutkan dengan mengubah pengaturan teks judul sebagai berikut:

• Warna Teks Judul: #000000
• Judul Judul Tingkat: H2
• Judul Font: Montserrat
• Perataan Teks Judul: Kiri
• Judul Teks Ukuran: 8vw (Desktop), 10vw (Tablet & Telepon)
• Spasi Huruf Judul: -1vw (Desktop), -0,5vw (Tablet & Ponsel)
• Tinggi Baris Judul: 0,7em

Pengaturan Teks Judul Tertutup Default

Kemudian, buka pengaturan teks judul tertutup dan ubah pengaturan yang sesuai:

• Font Judul Tertutup: Montserrat
• Ukuran Teks Judul Tertutup: 18vw (Desktop), 16vw (Tablet & Telepon)
• Tinggi Baris Judul Tertutup: 0.8em

Arahkan ke Pengaturan Teks Judul Tertutup

Ubah warna teks judul tertutup saat mengarahkan kursor.

• Warna Teks Judul Tertutup: #f4f4f4

Pengaturan Teks Tubuh

Pindah ke pengaturan teks isi dan buat beberapa perubahan di sana juga.

• Font Tubuh: Fira Sans
• Berat Huruf Tubuh: Ringan
• Perataan Teks Tubuh: Justify
• Ukuran Teks Tubuh: 1.2vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Tinggi Garis Tubuh: 2.1em

Jarak

Tambahkan beberapa bantalan atas, bawah, dan kiri khusus ke modul juga.

• Padding Atas: 10vw
• Padding Bawah: 10vw
• Padding Kiri: 6vw

Berbatasan

Lanjutkan dengan menghapus batas default modul di pengaturan batas.

• Lebar Perbatasan: 0px

Alihkan CSS Konten

Selesaikan pengaturan Modul Toggle dengan menambahkan baris kode CSS berikut ke desktop:

width: 60vw;
border-left: 0.2vw solid black;
padding: 5vw 5vw 5vw 5vw;

Ubah lebar baris kode CSS pada tablet dan ponsel:

width: 85vw;

Klon Seluruh Bagian sebanyak yang Diinginkan

Setelah Anda menyelesaikan bagian pertama, baris dan Modul Toggle, Anda dapat mengkloning seluruh bagian sebanyak yang Anda inginkan; tergantung pada seberapa banyak konten yang ingin Anda tampilkan di halaman Anda.

Ubah Konten

Pastikan Anda mengubah semua konten toggle di setiap Modul Toggle duplikat.

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

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara berkreasi dengan Modul Toggle Divi. Lebih spesifik; kami telah membuatnya dengan lebar penuh dan menggunakannya untuk menampilkan konten bagian yang berbeda dengan cara yang kreatif. Tutorial ini menunjukkan bahwa Anda dapat dengan mudah menggunakan modul Divi di luar kotak saat Anda mempertimbangkan berbagai wadah. Anda juga dapat mengunduh file JSON tutorial secara gratis! Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah.

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.