Menggunakan Modul Teks Divi untuk Membuat Elemen Blok di Desain Halaman Divi Anda

Modul Teks adalah bagian penting dari setiap desain halaman yang Anda buat dengan Divi, saya yakin itu adalah sesuatu yang kita semua bisa sepakati. Biasanya, mereka digunakan untuk menampilkan teks secara langsung. Tetapi Anda juga dapat menggunakan Modul Teks untuk membuat elemen desain yang menakjubkan. Dalam posting blog sebelumnya, kami telah menunjukkan kepada Anda cara menggunakan teks untuk meningkatkan desain web Anda.

Dalam tutorial ini, kami akan terus menambahkan opsi untuk Anda pilih saat mendesain halaman dan menggunakan Modul Teks. Seperti yang mungkin atau mungkin tidak Anda ketahui, ada beberapa jenis teks berbeda yang dapat Anda gabungkan dalam modul teks yang sama. Selain itu, satu modul dapat berisi beberapa judul, paragraf, tautan, dan lainnya. Dalam posting ini, kita akan menggunakan semua jenis teks ini untuk keuntungan kita untuk membuat elemen blok yang menakjubkan dalam desain halaman kita.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat hasil akhirnya pada ukuran layar yang berbeda.

Ayo Mulai!

Tambahkan Bagian Reguler Baru

Warna latar belakang

Mulailah dengan menambahkan bagian reguler baru ke halaman yang sedang Anda kerjakan. Kemudian, buka pengaturan bagian dan ubah warna latar belakang.

• Warna Latar Belakang: #000000

Jarak

Buka pengaturan Spasi di bagian Anda berikutnya dan tambahkan beberapa nilai padding khusus.

• Padding Atas: 280px (Desktop), 150px (Tablet & Ponsel)
• Padding Bawah: 280px (Desktop), 150px (Tablet & Ponsel)

Tambahkan Baris Baru

Struktur Kolom

Setelah Anda selesai mengubah pengaturan bagian, tambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan buat baris memenuhi seluruh lebar layar dalam pengaturan Ukuran.

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Jarak

Terakhir, tambahkan beberapa bantalan khusus di pengaturan Spasi.

• Kolom 1 Padding Kiri: 100px (Desktop & Tablet), 50px (Telepon)
• Kolom 2 Padding Kustom: 50px
• Kolom 3 Padding Kustom: 50px

Tambahkan Modul Teks Judul ke Kolom 1

Kotak Konten

Saatnya mulai menambahkan modul yang berbeda! Modul pertama yang kita perlukan di kolom pertama adalah Modul Teks. Tambahkan beberapa Konten H2 ke kotak konten.

Pengaturan Teks H2

Lalu, buka pengaturan teks H2 dan buat beberapa perubahan:

• Judul 2 Font: Kode Sumber Pro
• Judul 2 Gaya Font: Huruf Besar
• Judul 2 Warna Teks: #ffffff
• Judul 2 Ukuran Teks: 100px
• Spasi Judul 2 Huruf: 24px

Jarak

Kurangi ruang di bagian atas dengan menggunakan beberapa margin atas negatif.

• Margin Atas: -50px

Tambahkan Modul Teks Deskripsi ke Kolom 1

Pengaturan Teks

Modul kedua yang dibutuhkan pada kolom pertama adalah Modul Teks Deskripsi. Setelah menambahkan konten Anda, buka pengaturan teks dan buat beberapa perubahan:

• Font Teks: Kode Sumber Pro
• Warna Teks: #ffffff
• Orientasi Teks: Justify

Perekat

Kurangi lebar Modul Teks juga.

• Lebar: 68%

Jarak

Dan yang tak kalah pentingnya, buat beberapa ruang antara Modul Teks ini dan yang sebelumnya di pengaturan Spasi.

• Margin Atas: 200px (Desktop), 100px (Tablet & Ponsel)
• Margin Bawah: 100px (Tablet & Ponsel)

Tambahkan Modul Teks Blok ke Kolom 2

Kotak Konten

Saatnya beralih ke kolom kedua! Di sini, kita akan menggunakan Modul Teks untuk membuat elemen blok. Bagian penting dari membuat pekerjaan ini adalah penataan kotak konten dengan benar. Pada layar cetak di bawah, Anda dapat melihat bahwa kami menggunakan judul H3, judul H4, paragraf, dan tautan. Di antara judul H4 dan paragraf, kami memastikan ada beberapa ruang tambahan yang tersisa juga.

Warna latar belakang

Tambahkan warna latar belakang hitam ke Modul Teks.

• Warna Latar Belakang: #000000

Pengaturan Teks

Kami akan memodifikasi masing-masing jenis teks satu per satu. Mulailah dengan mengubah pengaturan paragraf.

• Font Teks: Kode Sumber Pro
• Orientasi Teks: Kiri
• Warna Teks: Cahaya

Pengaturan Teks Tautan

Kemudian, buat beberapa perubahan tambahan pada pengaturan tautan.

• Gaya Font Tautan: Huruf Besar & Garis Bawah
• Warna Garis Bawah Tautan: #ffffff
• Warna Teks Tautan: #edf000
• Ukuran Teks Tautan: 16px
• Jarak Huruf Tautan: 3px

Judul 3 Pengaturan Teks

Judul H3 di kotak konten kami memerlukan pengaturan berikut:

• Judul 3 Gaya Font: Huruf Besar
• Judul 3 Ukuran Teks: 33px

Judul 4 Pengaturan Teks

Lanjutkan dengan membuka pengaturan teks H4 dan buat beberapa perubahan di sana juga.

• Judul 4 Warna Teks: #4f4f4f
• Judul 4 Ukuran Teks: 19px
• Spasi Judul 4 Huruf: -1px

Perekat

Untuk membuat bentuk persis yang kita inginkan, selanjutnya kita akan mengurangi lebar Modul Teks.

• Lebar: 88% (Desktop), 60% (Tablet), 90% (Ponsel)

Jarak

Kita juga perlu mengubah pengaturan Spasi.

• Margin Kiri: 200px (Tablet)
• Padding Atas: 50px
• Padding Bawah: 50px
• Padding Kiri: 50px
• Padding Kanan: 50px

Berbatasan

Kemudian, tambahkan batas halus ke Modul Teks.

• Lebar Perbatasan: 2px
• Warna Perbatasan: #424242

Bayangan Kotak

Dan untuk menyelesaikannya, tambahkan bayangan kotak warna-warni.

• Posisi Horizontal Bayangan Kotak: 19px
• Posisi Vertikal Bayangan Kotak: 16px
• Kekuatan Penyebaran Bayangan Kotak: -4px
• Warna Bayangan: #f2ff00

Modul Teks Blok Klon Dua Kali & Tempatkan di Kolom 3

Untuk menghemat waktu, kita akan mengkloning blok Modul Teks yang telah kita buat dua kali dan menempatkan kedua duplikat di kolom ketiga dari baris.

Modifikasi Modul Teks Merah

Ubah Warna Teks Tautan

Buka Modul Teks pertama di kolom ketiga dan ubah warna tautan.

• Warna Teks Tautan: #e02b20

Ubah Spasi

Lalu, buka pengaturan Spasi dan tambahkan beberapa margin atas.

• Margin Atas: -150px (Desktop), -20px (Tablet), 50px (Telepon)

Ubah Warna Bayangan Kotak

Ubah Warna Bayangan Kotak menjadi warna yang sama dengan yang digunakan untuk teks tautan.

• Warna Bayangan: #e02b20

Modifikasi Modul Teks Biru

Ubah Warna Teks Tautan

Ubah warna tautan Modul Teks kedua di kolom ketiga juga.

• Warna Teks Tautan: #0ff3ff

Ubah Ukuran

Ubah pengaturan Ukuran berikutnya.

• Ukuran: 67% (Desktop), 60% (Tablet), 90% (Ponsel)

Ubah Spasi

Dan untuk membuat beberapa tumpang tindih antara modul ini dan dua Modul Teks lainnya, bermain-main dengan nilai margin kustom.

• Margin Atas: -20px (Desktop), -30px (Tablet), 50px (Telepon)
• Margin Kiri: -160px (Desktop), 200px (Tablet), 0px (Telepon)

Ubah Warna Bayangan Kotak

Untuk menyelesaikannya, ubah warna bayangan kotak menjadi warna biru yang sama dengan yang digunakan untuk teks tautan dan selesai!

• Warna Bayangan: #0ff3ff

Pratinjau

Sekarang kita telah melalui semua langkah, mari kita lihat hasil akhir pada ukuran layar yang berbeda.

Pikiran Akhir

Anda akan kagum dengan banyaknya desain unik yang dapat Anda capai menggunakan Modul Teks yang dikombinasikan dengan opsi bawaan Divi. Tidak diperlukan kode CSS tambahan. Dalam posting ini, kami telah menunjukkan kepada Anda cara menggunakan berbagai jenis teks untuk membuat elemen blok yang menakjubkan pada desain halaman Divi Anda. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!