Cara Membuat Judul Bagian yang Vibrant untuk Proyek Divi Anda Berikutnya

Kami tahu bahwa sebagian besar dari Anda selalu mencari cara baru untuk membuat situs web yang Anda buat unik. Dengan Divi, ada banyak cara untuk membuat situs web Anda menonjol dari yang lain di luar sana. Hari ini, kami akan menunjukkan kepada Anda bagaimana Anda dapat membuat judul bagian yang menakjubkan menggunakan opsi bawaan Divi saja. Pendekatan ini sangat bagus jika Anda ingin membuat desain yang memukau, mempertahankan struktur halaman secara keseluruhan, dan menjaga navigasi tetap mulus.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat hasil yang ingin kita capai pada ukuran layar yang berbeda:

Mari Mulai Berkreasi!

Tambahkan Bagian Reguler Baru

Jarak

Mulailah dengan membuka halaman baru, beralih ke Visual Builder dan menambahkan bagian pertama Anda. Tanpa menambahkan baris atau modul apa pun, buka pengaturan bagian dan tambahkan beberapa bantalan:

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

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris menggunakan struktur kolom berikut:

Warna latar belakang

Buka pengaturan baris berikutnya dan tambahkan warna latar belakang ke seluruh baris Anda:

• Warna Latar Belakang: #f9f9f9

Kolom 1 Latar Belakang Gradien

Kemudian, tambahkan latar belakang gradien halus ke kolom pertama Anda. Ini akan membantu menciptakan tumpang tindih judul bagian di antara kolom.

• Warna 1: #0031c4
• Warna 2: #00aeff
• Kolom 1 Arah Gradien: 125deg

Perekat

Ubah spasi baris Anda juga untuk memastikannya memenuhi seluruh lebar layar.

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Khusus: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya

Jarak

Terakhir, ubah pengaturan Spasi sesuai dengan ukuran layar yang berbeda:

• Padding Atas: 0px
• Padding Bawah: 0px
• Kolom 2 Padding Atas: 200px
• Kolom 2 Padding Bawah: 200px
• Kolom 2 Padding Kiri: 350px (Desktop), 50px (Tablet & Ponsel)
• Kolom 2 Padding Kanan: 50px

Tambahkan Modul Teks Judul Bagian ke Kolom 1

Pengaturan Teks H2

Sekarang semua pengaturan baris sudah ada, kita bisa mulai menambahkan modul. Kita akan mulai dengan kolom pertama. Di sini, satu-satunya modul yang kita perlukan adalah Modul Teks. Setelah menambahkan konten H2 di kotak Konten, lanjutkan dan ubah pengaturan teks H2:

• Judul 2 Berat Font: Ultra Tebal
• Judul 2 Gaya Font: Huruf Besar
• Judul 2 Perataan Teks: Tengah
• Judul 2 Warna Teks: #ffffff
• Judul 2 Ukuran Teks: 150px
• Pos 2 Tinggi Baris: 1.25em
• Judul 2 Panjang Vertikal Bayangan Teks: -0,55em
• Judul 2 Warna Bayangan Teks: rgba (0,255,255,0.25)

Jarak

Tumpang tindih antar kolom berbeda di desktop, tablet, dan ponsel. Untuk membuat tumpang tindih, kami akan membuat beberapa perubahan pada pengaturan Spasi Modul Teks kami:

• Margin Atas: 325px (Desktop), 150px (Tablet & Ponsel)
• Margin Bawah: 325px, -120px (Tablet), -110px (Telepon)
• Margin Kanan: -100% (Desktop), 0px (Tablet & Ponsel)

Saring

Last but not least, kita akan menggunakan mode campuran untuk membuat perbedaan warna untuk teks yang muncul.

• Mode Campuran: Hamparan

Tambahkan Modul Teks Judul ke Kolom 2

Pengaturan Teks H3

Mari kita beralih ke kolom kedua. Di sana, modul pertama yang kita perlukan adalah modul teks judul. Setelah menambahkan konten H3 Anda, ubah pengaturan teks H3:

• Judul 3 Berat Font: Semi Tebal
• Judul 3 Warna Teks: #00aeff
• Judul 3 Ukuran Teks: 60px
• Spasi Judul 3 Huruf: -3px

Jarak

Buat beberapa ruang dengan menambahkan margin bawah berikutnya:

• Margin Bawah: 50px

Tambahkan Modul Pembagi ke Kolom 2

Warna Pembagi

Modul kedua yang kita perlukan adalah Modul Pembagi. Buka pengaturan Warna dan ubah warnanya agar sesuai dengan palet warna desain:

• Warna Pembagi: #00ffff

Perekat

Kemudian, ubah pengaturan Ukuran:

• Tinggi: 56px
• Lebar: 75%

Tambahkan Modul Teks Deskripsi ke Kolom 2

Pengaturan Teks

Lanjutkan dengan menambahkan modul teks deskripsi menggunakan pengaturan teks berikut:

• Ukuran Teks: 17px
• Tinggi Baris Teks: 1.3em
• Orientasi Teks: Justify

Perekat

Ubah pengaturan Ukuran selanjutnya:

• Ukuran: 70% (Desktop), 100% (Tablet & Ponsel)

Jarak

Tambahkan beberapa ruang di bawah modul ini menggunakan margin bawah juga:

• Margin Bawah: 50px

Tambahkan Modul Tombol ke Kolom 2

Pengaturan Tombol

Modul terakhir yang kita perlukan di kolom ini adalah Modul Tombol. Setelah menambahkan CTA, ubah pengaturan tombol:

• Gunakan Gaya Kustom untuk Tombol: Ya
• Ukuran Teks Tombol: 17px
• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #00aeff
• Lebar Batas Tombol: 0px
• Radius Batas Tombol: 100px
• Jarak Huruf Tombol: -1px
• Berat Huruf: Sangat Tebal
• Gaya Font: Huruf Besar

Jarak

Dan untuk memberikan tampilan dan nuansa yang lebih bersih pada tombol, kami juga akan menambahkan beberapa padding:

• Padding Atas: 10px
• Padding Bawah: 10px
• Padding Kiri: 30px
• Padding Kanan: 30px

Bayangan Kotak

Last but not least, kami akan menggunakan bayangan kotak halus untuk menambahkan sedikit kedalaman ke bagian kami:

• Kekuatan Buram Bayangan Kotak: 54px
• Kekuatan Penyebaran Bayangan Kotak: -8px
• Warna Bayangan: rgba(0,0,0,0.3)

Bagian Klon

Ubah Semua Salin

Untuk membuat bagian kedua, kita cukup mengkloning yang sudah kita buat dan kemudian, ubah semua salinannya.

Ubah Warna Latar Baris

Untuk bagian baru ini, kita akan menggunakan palet warna lain. Mulailah dengan mengubah warna latar belakang baris Anda.

• Warna Latar Belakang: #efefef

Ubah Latar Belakang Gradien Kolom 1

Kemudian, pilih juga latar belakang gradien lainnya.

• Warna 1: #5f00a8
• Warna 2: #9000ff

Ubah Judul Bagian Warna Bayangan

Kami juga mencocokkan Warna Bayangan Teks dengan palet warna baru kami:

• Judul 2 Warna Bayangan Teks: rgba(255,0,255,0.24)

Ubah Pengaturan Spasi Judul Bagian

Bergantung pada panjang salinan yang Anda gunakan, Anda harus bermain-main dengan margin kanan negatif.

• Margin Kanan: -110% (Desktop)

Ubah Judul Teks Modul Warna Teks

Kemudian, ubah Warna Teks judul Modul Teks di kolom 2.

• Judul 3 Warna Teks: #9000ff

Ubah Warna Pembagi

Demikian juga, buatlah warna sekat sesuai dengan desain.

• Warna: #ff00ff

Ubah Warna Latar Belakang Tombol

Untuk menyelesaikannya, Anda harus mengubah warna latar belakang Modul Tombol.

• Warna Latar Tombol: #9000ff

Pratinjau

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

Pikiran Akhir

Ada banyak cara untuk membuat desain web Anda menonjol dari situs web lain di luar sana. Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat judul bagian yang menakjubkan, dan bagian secara umum, hanya menggunakan opsi bawaan Divi. Kami telah menggabungkan latar belakang gradien kolom dengan tumpang tindih Modul Teks, bayangan teks, dan mode campuran untuk menciptakan hasil akhir yang menakjubkan. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!