Cara Menggunakan Opsi Gaya Teks dan Daftar Divi untuk Desain Konten Toggle dan Akordeon Unik

Opsi teks dan gaya daftar Divi adalah fitur umum yang tersedia di sebagian besar Modul Divi. Ini membuka peluang baru untuk mendesain konten kreatif dan desain daftar dalam modul (seperti modul sakelar dan akordeon) yang sebelumnya hanya dimungkinkan dalam modul teks. Triknya adalah mengatur konten Anda dengan html yang sesuai sehingga Anda dapat menargetkan item tersebut menggunakan pengaturan desain bawaan.

Dalam tutorial ini, saya akan menunjukkan cara menggunakan opsi gaya teks dan daftar Divi untuk desain konten sakelar dan akordeon yang unik. Ini akan berguna kapan pun Anda ingin menggabungkan desain teks yang berbeda tanpa harus menggunakan kelas CSS atau css sebaris.

Mari kita mulai.

Sneak Peek

Berikut ini sekilas desain yang akan kita buat menggunakan opsi gaya teks dan daftar Divi.

Unduh Daftar Desain Gaya untuk Tata Letak Toggles dan Akordeon GRATIS

Untuk mendapatkan desain dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. 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!

Untuk mengimpor tata letak ke halaman Anda, cukup ekstrak file zip dan seret file json ke Divi Builder.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda harus memiliki yang berikut:

1. Tema Divi diinstal dan aktif
2. Halaman baru dibuat untuk membangun dari awal di ujung depan (pembuat visual)
3. Gambar yang akan digunakan untuk konten tiruan

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

Bagian 1: Menggunakan Gaya Daftar di Modul Toggle

Di bagian pertama tutorial ini, kita akan membuat tiga sakelar yang masing-masing memiliki konten yang dirancang menggunakan opsi gaya daftar. Ini akan berguna untuk memisahkan item daftar Anda di matikan terpisah hampir seperti uraian konten khusus.

Pertama buat bagian reguler dengan baris tiga kolom. Kemudian perbarui pengaturan baris sebagai berikut:

Lebar Talang: 2
Lebar: 100%
Lebar Maks: 90vw

Tambahkan Modul Beralih

Selanjutnya, tambahkan modul toggle ke kolom 1. Ini akan menjadi yang pertama dari tiga modul toggle yang akan ditambahkan ke masing-masing dari tiga kolom.

Tambahkan Konten HTML Beralih

Konten HTML adalah kunci untuk desain ini. Agar kami dapat memanfaatkan gaya daftar yang berbeda dalam pengaturan sakelar Divi, kami perlu menambahkan daftar HTML ke kotak konten kami.

Silakan dan rekatkan HTML berikut ke dalam
Kotak isi tubuh.

<ol start="1">
    <li>
        <ul style="margin-top: -1.5em;">
            <li>Lorem ipsum dolor sit amet</li>
        </ul>
    </li>
</ol>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</p>

Sekarang potongan kode HTML ini membuat daftar terurut menggunakan tag ol. Daftar yang diurutkan hanya memiliki satu item daftar (li) yang merupakan daftar tidak berurutan (ul) dengan satu item daftar (li) yang memiliki beberapa konten tiruan. Di bawah daftar yang diurutkan adalah paragraf dasar teks.

Dengan pengaturan ini, kita dapat menargetkan setiap tag tersebut (ol, ul, p) untuk gaya yang berbeda menggunakan gaya teks bawaan Divi yang menyertakan gaya daftar.

Perhatikan tag ol awal memiliki start="1″ di dalamnya. Ini memberi tahu daftar nomor mana yang harus dimulai dengan mencantumkan nomor daftar yang dipesan dengan setiap item daftar. Secara teknis, ini tidak diperlukan untuk nomor pertama karena secara otomatis akan dimulai dengan 1 secara default. Tapi kita akan membutuhkannya untuk matikan berikutnya yang akan kita tambahkan.

Juga, tag daftar yang tidak diurutkan memiliki beberapa gaya sebaris untuk membawa konten ul sedikit menggunakan margin negatif. Ini adalah bagaimana kita akan tumpang tindih nomor dari daftar yang dipesan dengan teks dari daftar yang tidak berurutan dalam desain.

Menata Konten

Sekarang kita dapat mulai menambahkan beberapa warna dan gaya font menggunakan pengaturan bawaan dan gaya daftar. Perbarui pengaturan desain sakelar sebagai berikut:

Warna Ikon: #ff3d97
Ukuran Font Ikon: 26px
Buka Toggle Background Color: #ffffff
Warna Latar Toggle Tertutup: #ffffff
Warna Teks Judul Terbuka: #333333
Warna Teks Judul: #333333

Judul Font: Oswald
Ukuran Teks Judul: 18px
Tinggi Baris Judul: 3em

Font Daftar Tidak Berurutan: Oswald
Berat Font Daftar Tidak Terurut: Ringan
Warna Teks Daftar Tidak Terurut: #333333
Ukuran Teks Daftar Tidak Terurut: 36px
Tipe Gaya Daftar Tidak Terurut: Tidak Ada

Font Daftar yang Dipesan: Kameron
Berat Font Daftar yang Dipesan: Tebal
Warna Teks Daftar yang Dipesan: rgba(255,61,151,0.34)
Ukuran Teks Daftar yang Dipesan: 100px
Tinggi Baris Daftar yang Dipesan: 1.1em

Duplikat Modul Toggle Pertama untuk Membuat Toggles Lainnya

Untuk membuat toggle untuk kolom 2 dan 3, kita akan menduplikasi modul toggle yang baru saja kita desain. Kemudian kita dapat menyeretnya ke setiap kolom sehingga setiap kolom memiliki modul sakelar yang sama.

Perbarui Nomor Mulai Daftar yang Dipesan

Untuk sakelar duplikat di kolom 2, daftar urutan harus dimulai dengan angka “2”, bukan “1”. Untuk mengubahnya, buka pengaturan modul sakelar dan ubah nomor awal di tag ol menjadi "2".

Anda juga perlu memperbarui sakelar di kolom 3 dengan nomor awal daftar urut "3".

Desain Akhir

Sekarang mari kita periksa desain akhir.

Bagian 2: Menggunakan Gaya Daftar di Modul Akordeon

Di bagian kedua tutorial ini, saya akan menunjukkan cara cepat dan mudah untuk membawa desain konten gaya daftar dari modul sakelar ke modul akordeon. Prosesnya mudah karena Anda dapat menggunakan teks dan gaya daftar yang sama dalam modul akordeon (atau hampir semua modul) yang kami gunakan di sakelar sebelumnya. Untuk melakukan ini, pertama buat bagian baru dengan baris satu kolom. Kemudian tambahkan modul akordeon ke baris.

Kemudian duplikat salah satu dari dua akordeon default di bawah tab konten untuk total tiga akordeon. Kemudian perbarui konten untuk setiap akordeon individu dengan konten html toggle yang sama persis di dalam masing-masing dari tiga toggle yang kita buat sebelumnya.

Perluas Gaya Beralih ke Akordeon

Salah satu cara cepat untuk membawa gaya dari sakelar yang kami buat ke modul akordeon adalah dengan menggunakan fitur gaya ekstensi. Untuk melakukan ini, buka salah satu modul sakelar dan klik kanan pada kategori gaya ikon dan pilih "perpanjang gaya ikon" dari menu klik kanan. Kemudian pilih untuk memperluas gaya ikon ini ke "Semua Akordeon" di seluruh "Halaman Ini".

Kemudian lakukan hal yang sama untuk setiap kategori desain yang memiliki gaya kustom yang perlu diperluas ke modul akordeon. Ini termasuk gaya untuk "Toggle" "Teks Judul", dan "Teks Isi".

Kemudian lihat hasil akhir untuk desain akordeon.

Bagian 3: Menggunakan Gaya Daftar untuk Membuat Konten Beberapa Kolom dalam Modul Toggle

Di bagian ketiga tutorial ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat membuat beberapa kolom konten untuk desain gaya daftar Anda.

Pertama, buat bagian baru dengan baris satu kolom. Kemudian salin dan tempel salah satu modul sakelar yang kita buat sebelumnya ke dalam baris.

Kemudian perbarui konten isi modul toggle dengan beberapa HTML baru sebagai berikut:

<ol style="column-count: 2">
<li>
        <ul>
	        <li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
        </ul>
</li>
<li>
        <ul>
	        <li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
        </ul>
</li>
<li>
        <ul>
	        <li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
        </ul>
</li>
<li>
        <ul>
	        <li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
        </ul>
</li>
</ol>

Perhatikan atribut gaya inline “column-count:2” yang telah ditambahkan ke tag ol awal. Ini akan memungkinkan konten daftar yang diurutkan untuk disusun menjadi dua kolom, bukan satu. Anda dapat mengubah ini ke nomor apa pun untuk kolom lainnya sesuai kebutuhan.

Dan perhatikan bagaimana kita memiliki kemampuan untuk menggunakan pengaturan desain bawaan Divi untuk gaya judul, tautan, dan daftar.

Menata Teks Tautan

Karena gaya judul dan daftar sudah ada dari desain sebelumnya, yang perlu kita lakukan hanyalah menambahkan beberapa desain untuk teks tautan.

Buka pengaturan sakelar dan perbarui yang berikut:

Berat Huruf Tautan: Semi Tebal
Gaya Font Tautan: Garis Bawah
Warna Teks Tautan: #ff3d97
Ukuran Teks Tautan: 15px

Dan karena kita tidak tumpang tindih teks apa pun dengan desain ini, lanjutkan dan berikan nomor gaya daftar terurut warna yang lebih cerah sebagai berikut:

Warna Teks Daftar yang Dipesan: #ff3d97

Tambahkan Latar Belakang ke sakelar

Untuk menyelesaikan desain, kita dapat menambahkan latar belakang kustom ke sakelar kita. Untuk melakukannya, perbarui pengaturan sakelar berikut:

Gambar Latar Belakang: [unggah gambar pilihan Anda]
Warna Kiri Gradien Latar Belakang: rgba(255,255,255,0.92)
Warna Kanan Gradien Latar Belakang: rgba(255,255,255,0.8)
Arah Gradien: 90 derajat
Posisi Awal: 50%
Posisi Akhir: 0%
Tempatkan Gradien Di Atas Gambar Latar Belakang: YA

Menambahkan Elemen Responsif ke dua kolom toggle

Karena konten toggle sekarang menjadi dua kolom, mari perbarui desain dengan beberapa gaya responsif agar skalanya bagus di seluler.

Pertama, perbarui pengaturan baris sebagai berikut:

Lebar: 100%
Lebar Maks: 89vw (desktop), 90vw (tablet dan ponsel)

Buka pengaturan sakelar dan perbarui yang berikut:

Ukuran Font Ikon: 5vw

Judul Teks Ukuran: 4vw

Ukuran Teks Daftar Tidak Terurut: 26px (desktop), 18px (tablet), 14px (ponsel)
Indentasi Item Daftar Tidak Terurut: 1px

Ukuran Teks Daftar yang Dipesan: 8vw

Desain Akhir Konten Toggle Multi-Kolom

Berikut adalah desain pada tampilan tablet dan ponsel.

Dan di sini adalah desain yang sama dengan latar belakang yang lebih gelap dan warna teks putih.

Pikiran Akhir

Sebagian besar waktu, toggle dan akordeon akan memiliki konten tubuh dasar yang benar-benar tidak memerlukan desain kreatif. Tetapi jika saatnya tiba ketika Anda ingin membumbui konten sakelar dan akordeon Anda, Anda dapat memanfaatkan opsi teks dan gaya daftar bawaan Divi. Setelah html Anda terpasang, Anda dapat menargetkan tag html tersebut untuk desain yang berbeda tanpa harus menggunakan CSS atau kelas khusus eksternal. Ini juga merupakan cara yang bagus untuk menampilkan gaya daftar materi iklan dalam modul apa pun menggunakan pembuat Divi karena opsi gaya daftar yang sama ini tersedia di semua modul.

Bersenang-senang menjelajahi desain baru.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!