Melepaskan Kekuatan Modul Teks Divi untuk Desain Daftar Kreatif

Membuat desain daftar yang unik merupakan aspek penting dari desain web. Pembaca menghargai struktur dan estetika daftar yang dirancang dengan baik karena memungkinkan mereka memproses informasi lebih cepat.

Dengan modul teks Divi, Anda memiliki semua yang Anda butuhkan untuk mengubah daftar biasa menjadi karya seni yang indah. Pengaturan modul teks Divi memungkinkan Anda untuk menargetkan dan menata elemen html yang berbeda dalam konten Anda – termasuk daftar. Dan dengan beberapa teknik desain, Anda dapat memanfaatkan kekuatan opsi ini untuk menyesuaikan daftar Anda dengan cara yang mengejutkan.

Dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat membuat desain daftar unik di Divi.

Mari kita mulai.

Sneak Peek

Berikut adalah intip dari empat desain daftar yang akan kita buat dalam tutorial ini.

Terinspirasi oleh Pengaturan Modul Teks

Jika Anda seperti saya, Anda mungkin cenderung mengabaikan beberapa opsi "tersembunyi" yang bersembunyi jauh di dalam Divi Builder. Salah satu modul yang memiliki beberapa harta terpendam adalah Modul Teks. Pengaturan Modul Teks memiliki beberapa tab yang menyimpan opsi gaya untuk elemen html yang berbeda. Ini bisa menjadi alat desain yang sangat nyaman dan kreatif. Tab ini mencakup opsi untuk teks isi, tautan, daftar tidak berurutan, daftar berurutan, dan kutipan blok.

Dan, ada beberapa permata tersembunyi di bawah tab ini yang mungkin tidak terpikirkan untuk Anda gunakan dalam desain Anda. Misalnya, tahukah Anda bahwa Anda dapat mengubah opsi gaya daftar untuk daftar yang tidak berurutan? Ada sejumlah opsi unik yang tersedia (18 tepatnya), termasuk Angka Romawi dan desimal dengan nol di depan.

Ini mungkin tampak tidak penting, tetapi ketika Anda memanfaatkan opsi desain, Anda dapat menghasilkan beberapa desain yang sangat kreatif.

Anda juga dapat menargetkan gaya tingkat judul (atau tag) yang berbeda di bawah setiap tab di bawah opsi gaya judul.

Kemampuan untuk menargetkan beberapa elemen html dalam konten Anda membuka beberapa kemungkinan luar biasa. Semoga mereka juga menginspirasi Anda.

Untuk lebih lanjut tentang ini, lihat pembaruan fitur yang menjelaskan beberapa opsi teks yang luar biasa ini.

Membuat Daftar HTML Anda

Daftar html dapat "diurutkan" (dengan angka, angka romawi, dll.) atau "tidak berurutan" (dengan ikon persegi, ikon lingkaran, dll.). Untuk daftar yang tidak berurutan, item daftar akan dibungkus dengan tag "ul" ("ul" adalah singkatan dari "daftar tidak berurutan"). Untuk daftar yang dipesan, item daftar dibungkus dengan tag "ol" ("ol" adalah singkatan dari "daftar yang dipesan"). Setiap item daftar dibungkus dengan tag “li” (“li” untuk “item daftar”).

Berikut adalah struktur dasar dari daftar yang dipesan:

<ol>
     <li>List Item</li>
     <li>List Item</li>
     <li>List Item</li>
</ol>

Yang secara default akan terlihat seperti berikut:

1. Daftar barang
2. Daftar barang
3. Daftar barang

Anda sebenarnya dapat membuat daftar HTML menggunakan editor wysiwyg dalam Modul Teks Divi. Pastikan Anda mengedit di tab visual dan cukup ketik item daftar Anda memastikan ada jeda baris (tekan enter) setelah masing-masing. Kemudian sorot konten dan klik salah satu ikon daftar di bagian atas editor.

Sekarang buka tab teks untuk melihat seperti apa HTML itu:

Ini berfungsi dengan baik untuk daftar sederhana, tetapi jika Anda ingin membuat daftar bersarang (daftar di dalam daftar), Anda lebih baik membuatnya menggunakan HTML (menggunakan tab teks) untuk menghindari sakit kepala saat mencoba melakukannya di wysiwyg editor (tab visual).

Berikut adalah struktur dasar daftar bersarang yang memiliki daftar terurut dengan setiap item daftar memiliki daftar tak bersarang bersarang.

<ol>
  <ol>
  <li>Ordered List Item
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li>Ordered List Item
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li>Ordered List Item
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
</ol>

Secara default, daftar html bersarang ini akan terlihat seperti ini:

1. Item Daftar yang Dipesan
   • Item Daftar Tidak Terurut
2. Item Daftar yang Dipesan
   • Item Daftar Tidak Terurut
3. Item Daftar yang Dipesan
   • Item Daftar Tidak Terurut

Anda juga dapat menambahkan tag html lain dalam daftar. Misalnya, kita dapat membungkus item daftar yang dipesan dalam tag h5. Hasilnya akan terlihat seperti ini:

<ol>
  <li><h5>Ordered List Item</h5>
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li><h5>Ordered List Item</h5>
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li><h5>Ordered List Item</h5>
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
</ol>

Jangan khawatir, ini serumit yang akan saya dapatkan untuk tutorial ini. Tetapi yang perlu Anda sadari adalah bahwa struktur ini memiliki tiga tag berbeda (ol, ul, dan h5) yang dapat ditata secara independen satu sama lain dengan pengaturan desain Divi yang kuat dalam modul teks.

Kita akan membutuhkan struktur ini nanti, tetapi untuk sekarang, mari kita mulai dan menjalankan halaman kita untuk memulai desain kita di pembuat visual.

Membuat Bagian dan Baris untuk Daftar

Buat halaman baru dan gunakan Visual Builder. Kemudian pilih opsi untuk Buat Halaman dari Awal. Kemudian buat bagian reguler dengan dua baris kolom.

Membuat Daftar HTML dalam Modul Teks

Di kolom pertama baris Anda, tambahkan modul teks baru. Di kotak konten dalam pengaturan teks, masukkan Daftar HTML berikut:

<ol>
 	<li>
<h5>Design</h5>
<ul>
 	<li>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.</li>
</ul>
</li>
 	<li>
<h5>Develop</h5>
<ul>
 	<li>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.</li>
</ul>
</li>
 	<li>
<h5>Deliver</h5>
<ul>
 	<li>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.</li>
</ul>
</li>
</ol>

Struktur ini seharusnya terlihat familiar dari sebelumnya. Teks header h5 akan menjadi item daftar yang diurutkan dan teks dummy “lorem ipsum” akan menjadi item daftar yang tidak diurutkan.

Secara default akan terlihat seperti ini:

Tidak terlalu mengesankan sejauh ini, saya tahu. Tetapi dengan konten ini, sekarang kita dapat memulai bagian yang menyenangkan dari mendesain daftar kita dengan Divi!

Catatan Penting: Karena setiap desain adalah versi modifikasi dari desain pertama, akan lebih baik untuk memulai dengan desain pertama dalam tutorial ini dan menjaganya tetap teratur.

Daftar Desain #1

Sebagai permulaan, mari beri modul teks kita latar belakang gradien sebagai berikut:

Warna Kiri Latar Belakang Gradien: rgba(0,0,0,0.04)
Warna Kanan Latar Belakang Gradien: rgba(255,255,255,0)
Arah Gradien: 90 derajat
Posisi Awal: 25%
Posisi Akhir: 0%

Menata Item Daftar yang Dipesan

Sekarang buka tab desain dan pilih tab daftar terurut di bawah sakelar Teks.

Kemudian perbarui yang berikut ini:

Font Daftar yang Dipesan: Abril Fatface
Berat Font Daftar yang Dipesan: Tebal
Warna Teks Daftar yang Dipesan: #559cad
Ukuran Teks Daftar yang Dipesan: 45px
Tinggi Baris Daftar yang Dipesan: 1.6em
Tipe Gaya Daftar yang Diurutkan: desimal-depan-nol
Posisi Gaya Daftar yang Dipesan: Di Luar
Indentasi Item Daftar yang Dipesan: 2vw

Anda akan melihat bahwa h5 dan daftar tak terurut bersarang akan mewarisi gaya daftar terurut induk. Jangan khawatir, Anda akan dapat mengganti gaya item lainnya.

Menata Item Daftar yang Tidak Diurutkan

Sekarang klik tab daftar pesanan untuk mengubah pengaturan berikut:

Font Daftar Tidak Terurut: Montserrat
Berat Font Daftar Tidak Terurut: Ringan
Warna Teks Daftar Tidak Terurut:
Ukuran Teks Daftar Tidak Terurut: 18px
Tipe Gaya Daftar Tidak Terurut: Tidak Ada
Indentasi Item Daftar Tidak Terurut: 0,01px

Menata Header H5

Item terakhir yang perlu kita gaya adalah header H5. Untuk melakukannya, buka opsi di bawah Teks Judul dan klik tab H5. Kemudian perbarui yang berikut ini:

Judul 5 Font: Montserrat
Judul 5 Berat Font: Ringan
Judul 5 Gaya Font: Huruf Besar (TT)
Judul 5 Warna Teks: #4f6d7a
Judul 5 Ukuran Teks: 5vw (desktop), 70px (tablet), 40px (smartphone)

Untuk menyelesaikan desain modul teks kita, tambahkan padding khusus berikut:

Padding Kustom (desktop): 3vw Atas, 3vw Bawah
Padding Kustom (tablet): Kiri 2vw
Padding Kustom (ponsel cerdas): Kiri 50px

Simpan Pengaturan.

Sekarang salin modul teks dan tempel ke kolom kedua dari baris. Anda mungkin memperhatikan bahwa nomor daftar perlu disesuaikan dalam modul teks duplikat sehingga melanjutkan dari daftar sebelumnya. Kami ingin daftar modul teks kedua kami dimulai dengan angka 4 (bukan 1). Untuk melakukan ini, kita perlu menambahkan satu perubahan kecil ke daftar html kita. Buka kotak konten di pengaturan modul teks dan ganti tag pembuka "ol" dengan yang berikut:

<ol start="4">

Sekarang mari kita lihat hasil akhirnya.

Daftar Desain #2

Untuk contoh desain daftar kedua ini, saya akan menduplikasi bagian pertama yang kita buat untuk memberi kita permulaan. Saya juga akan memperkenalkan latar belakang keren untuk desain daftar menggunakan gradien latar belakang.

Membuat Desain Gradien Latar Belakang Kustom

Di bagian duplikat, perbarui pengaturan bagian dengan latar belakang gradien berikut:

Warna Kiri Latar Belakang Gradien: #ffffff
Warna Kanan Latar Belakang Gradien: rgba(155,29,32,0.08)
Arah Gradien: 45deg
Posisi Awal: 50%
Posisi Akhir: 0%

Simpan Pengaturan.

Sekarang perbarui pengaturan Baris Anda dengan gradien latar belakang berikut:

Warna Kiri Latar Belakang Gradien: rgba(155,29,32,0.08)
Warna Kanan Latar Belakang Gradien: rgba(255,255,255,0)
Arah Gradien: 45deg
Posisi Awal: 25%
Posisi Akhir: 0%

Kolom 2 Latar Belakang Gradien Warna Kiri: rgba(255,255,255,0)
Kolom 2 Warna Latar Belakang Gradien Kanan: #ffffff
Kolom 2 Arah Gradien: 45deg
Kolom 2 Posisi Awal: 65%
Kolom 2 Posisi Akhir: 0%

Kunci dari desain gradien latar belakang ini adalah bahwa semuanya memiliki arah gradien yang sama yaitu 45 derajat. Kemudian Anda dapat menggunakan posisi awal untuk memberi ruang pada desain secara merata.

Pengaturan Gaya untuk Desain Daftar #2

Pada titik ini, kita benar-benar dapat bersenang-senang mengubah desain daftar kita dengan cara yang unik. Untuk contoh kedua ini, saya akan menunjukkan kepada Anda betapa mudahnya mengubah desain Anda hanya dengan beberapa perubahan kecil. Buka modul teks di kolom pertama dan perbarui pengaturan sebagai berikut:

Pertama-tama hapus gradien latar belakang.
Berat Font Daftar Tidak Terurut: Sedang
Warna Teks Daftar Tidak Berurutan: rgba(0,0,0,0.5)
Berat Font Daftar yang Dipesan: Reguler
Warna Teks Daftar yang Dipesan: #9b1d20
Judul 5 Berat Font: Tipis
Judul 5 Warna Teks: rgba(0,0,0,0.8)
Judul 5 Ukuran Teks: 5vw (desktop)

Sekarang salin gaya modul ke modul teks di kolom kanan.

Berikut adalah desain akhir dari contoh kedua kami.

Daftar Desain #3

Untuk contoh ketiga, saya pikir akan lebih baik untuk memberikan contoh desain daftar satu kolom yang terpusat. Untuk membuat desain ini, duplikat bagian contoh kedua. Di bagian duplikat baru, ubah struktur baris menjadi satu kolom, lalu hapus modul teks kedua.

Sekarang perbarui pengaturan bagian dengan warna latar belakang gradien baru:

Warna Kiri Latar Belakang Gradien: #559CAD
Warna Kanan Latar Belakang Gradien: #4f6d7a

Perbarui pengaturan Baris dengan warna latar belakang gradien kiri yang baru:

Warna Kiri Latar Belakang Gradien: #4f6d7a

Kemudian tambahkan gradien latar belakang baru ke modul teks .

Warna Kiri Latar Belakang Gradien: rgba(255,255,255,0)
Warna Kanan Latar Belakang Gradien: #559cad
Arah Gradien: 45deg
Posisi Awal: 75%
Posisi Akhir: 0%

Ini menciptakan versi yang lebih gelap dari desain latar belakang simetris dalam desain daftar #2 untuk daftar satu kolom. Kunci dari desain ini adalah melapisi gradien latar belakang dengan menambahkan satu ke bagian, baris, dan modul.

Pengaturan Gaya untuk Desain Daftar #3

Untuk contoh ketiga ini, saya ingin menunjukkan kepada Anda seperti apa tampilan daftar rata tengah. Dan untuk item daftar yang dipesan, saya akan menggunakan gaya desimal/angka yang lebih tradisional.

Buka pengaturan modul teks dan perbarui yang berikut:

Font Daftar yang Dipesan: Poppins
Berat Font Daftar yang Dipesan: Berat
Penjajaran Teks Daftar yang Dipesan: Tengah
Ukuran Teks Daftar yang Dipesan: 4vw (desktop), 50px (tablet)
Warna Teks Daftar yang Dipesan: #f4f1bb
Tipe Gaya Daftar yang Dipesan: desimal
Posisi Gaya Daftar yang Dipesan: Di dalam
Indentasi Item Daftar yang Dipesan: 0vw

(Catatan: Mengubah posisi gaya ke dalam akan menyebabkan nomor menumpuk di atas teks header yang sesuai untuk desain ini.)

Berat Font Daftar Tidak Terurut: Ringan
Warna Teks Daftar Tidak Terurut: #ffffff

Judul 5 Font: Lato
Judul 5 Berat Font: Tipis
Judul 5 Spasi Huruf: 6vw (desktop), 70px (tablet), 40px (smartphone)
Judul 5 Warna Teks: #ffffff
Judul 5 Ukuran Teks: 6vw

Padding Kustom (desktop): 15% Kiri, 15% Kanan
Padding Kustom (tablet): 5% Kiri, 5% Kanan

Anda juga harus mengeluarkan bantalan kiri 50px khusus pada ponsel cerdas untuk desain ini.

Berikut adalah desain akhir.

Daftar Desain #4

Untuk contoh keempat ini, saya akan menggunakan desain “daftar” yang lebih minim (lihat apa yang saya lakukan di sana?). Untuk daftar yang diurutkan, saya akan menggunakan Angka Romawi Huruf Besar Besar di Font Lato. Saya juga akan membingkai daftar dengan menambahkan bayangan kotak ke setiap modul.

Pengaturan Gaya untuk Desain Daftar #4

Untuk memulai desain daftar ini, duplikat bagian pertama dengan desain daftar #1. Kemudian perbarui pengaturan modul teks pertama di bagian baru sebagai berikut:

Hapus gradien Latar Belakang.

Font Daftar yang Dipesan: Lato
Berat Font Daftar Pesanan: Ringan
Warna Teks Daftar yang Dipesan: #000000
Ukuran Teks Daftar yang Dipesan: 6vw
Tipe Gaya Daftar yang Dipesan: roman atas
Indentasi Item Daftar yang Dipesan: 0vw

Judul 5 Font: Lato
Judul 5 Berat Font: Tebal
Gaya Font Judul: Garis Bawah
Judul 5 Warna Garis Bawah: rgba(0,0,0,0.14)
Judul 5 Gaya Garis Bawah: ganda
Judul 5 Warna Teks: #000000
Judul 5 Ukuran Teks: 40px

Padding Kustom: Kiri 3vw, Kanan 3vw

Hapus padding kiri kustom untuk tablet dan smartphone yang dibawa dari desain sebelumnya.

Posisi Horizontal Bayangan Kotak: 6px
Posisi Vertikal Bayangan Kotak: 6px
Kekuatan Penyebaran Bayangan Kotak: 0px
Kekuatan Buram Bayangan Kotak: 0px
Warna Bayangan: #000000
Posisi Bayangan Kotak: Bayangan Dalam

Salin Gaya Modul ke kolom kedua. Kemudian perbarui posisi bayangan kotak ke bayangan luar.

Berikut adalah hasil akhirnya.

Itu dia!

Pikiran Akhir

Setelah membangun dan mengubah daftar html Anda dalam contoh di atas, Anda harus memiliki pemahaman yang lebih baik tentang bagaimana memanfaatkan kekuatan pengaturan modul teks seperti ahli Divi. Anda tidak lagi harus puas dengan desain daftar yang membosankan di konten Anda. Saya harap teknik ini akan menginspirasi Anda untuk membuat desain daftar yang luar biasa untuk proyek Anda berikutnya.

Saya ingin melihat beberapa contoh dari Anda, jadi silakan berbagi di komentar.

Bersulang!