Cara Kreatif Menggunakan Batas Baris Divi untuk Membuat Desain Bagian Pahlawan yang Menakjubkan

Bagian pahlawan halaman Anda biasanya menetapkan standar untuk sisa halaman. Ini juga memainkan peran utama dalam kesan pertama pengunjung Anda. Dengan Divi, Anda dapat membuat bagian pahlawan yang luar biasa menggunakan opsi bawaan saja. Sekarang, jika Anda sedang mencari cara untuk membuat bagian pahlawan Anda berikutnya menonjol, Anda akan menyukai posting ini. Kami akan menunjukkan cara membuat desain bagian pahlawan yang efektif dan indah sambil bermain-main dengan batas baris Divi. Anda juga dapat mengunduh file JSON desain secara gratis!

Mari kita lakukan.

Pratinjau

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

Unduh Tata Letak Bagian Pahlawan GRATIS

Untuk mendapatkan tata letak bagian pahlawan 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!

Mari Mulai Berkreasi!

Berlangganan Saluran Youtube Kami

Tambahkan Bagian Baru

Latar Belakang Gradien

Lanjutkan dan buat halaman baru atau buka halaman yang sudah ada. Tambahkan bagian reguler baru, buka pengaturan bagian dan tambahkan latar belakang gradien berikut:

• Warna 1: #7e2dff
• Warna 2: #ffffff
• Posisi Awal: 63%
• Posisi Akhir: 63%

Jarak

Pindah ke tab desain dan tambahkan beberapa bantalan atas dan bawah khusus di berbagai ukuran layar.

• Padding Atas: 6vw (Desktop), 13vw (Tablet), 32vw (Telepon)
• Padding Bawah: 6vw (Desktop), 10vw (Tablet), 20vw (Telepon)

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah lebar maksimum.

• Lebar Maks: 100%

Jarak

Hapus padding atas dan bawah default dari baris juga.

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

Tambahkan Modul Gambar ke Kolom

Unggah Gambar

Saatnya mulai menambahkan modul! Modul pertama yang kita butuhkan adalah Modul Gambar. Unggah gambar yang dapat Anda temukan di folder zip yang dapat Anda unduh di awal tutorial ini. Jika Anda lebih suka menggunakan gambar lain, pastikan Anda menggunakan lebar 1160px dan tinggi 1385px.

Perekat

Pindah ke tab desain Modul Gambar dan aktifkan opsi 'Force Fullwidth'.

• Paksa Lebar Penuh: Ya

Jarak

Ubah pengaturan spasi berikutnya.

• Tampilkan Spasi Di Bawah Gambar: Tidak
• Padding Kiri: 17vw

Berbatasan

Dan tambahkan '50vw' ke sudut kanan atas Modul Gambar.

Filter

Kami juga mengubah warna gambar kami agar sesuai dengan palet warna kami. Buka pengaturan filter dan terapkan pengaturan berikut:

• Warna: 211 derajat
• Saturasi: 600%
• Kecerahan: 67%
• Kontras: 112%
• Balikkan: 18%

Tambahkan Modul Teks #1 ke Kolom

Tambahkan Konten H1

Modul kedua yang kita butuhkan di baris ini adalah Modul Teks dengan beberapa konten H1.

Pengaturan Teks H1

Pindah ke tab desain dan ubah pengaturan teks H1 yang sesuai:

• Font Judul: Montserrat
• Berat Huruf Judul: Semi Tebal
• Warna Teks Judul: #ffffff
• Ukuran Teks Judul: 5vw
• Spasi Surat Judul: -2px

Perekat

Ubah lebar modul berikutnya.

• Lebar: 70%

Jarak

Dan buat tumpang tindih antara modul ini dan sebelumnya menggunakan beberapa margin atas negatif.

• Margin Atas: -57vw (Desktop), -75vw (Tablet), -91vw (Telepon)

Tambahkan Modul Pembagi ke Kolom

Visibilitas

Modul selanjutnya yang kita butuhkan adalah Modul Pembagi. Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Garis

Ubah warna garis selanjutnya.

• Warna Garis: #00dcff

Perekat

Ubah juga pengaturan ukuran.

• Berat Pembagi: 0.8vw
• Lebar: 27%

Tambahkan Modul Teks #2 ke Kolom

Tambahkan Konten Paragraf

Lanjutkan dengan menambahkan Modul Teks baru dengan beberapa konten paragraf pilihan Anda.

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks yang sesuai:

• Font Teks: Buka Sans
• Warna Teks: #ffffff
• Ukuran Teks: 1vw (Desktop), 2vw (Tablet), 2.5vw (Telepon)
• Tinggi Baris Teks: 1.8em

Perekat

Ubah lebar modul juga.

• Lebar: 53% (Desktop), 65% (Tablet), 100% (Ponsel)

Tambahkan Modul Tombol ke Kolom

Tambahkan Salinan

Modul berikutnya dan terakhir yang kita butuhkan di baris ini adalah Modul Tombol. Tambahkan beberapa salinan pilihan Anda.

Pengaturan Tombol

Buka pengaturan tombol berikutnya dan ubah gaya tombol Anda sesuai dengan itu:

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #000000
• Lebar Batas Tombol: 0px
• Font Tombol: Buka Sans

Jarak

Tambahkan beberapa nilai padding khusus juga.

• Padding Atas: 1vw
• Padding Bawah: 1vw
• Padding Kiri: 4vw
• Padding Kanan: 4vw

Tambahkan Baris #2

Struktur Kolom

Ke baris berikutnya! Pilih struktur kolom berikut:

Warna latar belakang

Tanpa menambahkan modul apa pun, buka pengaturan baris. Ubah warna latar belakang menjadi putih.

• Warna Latar Belakang: #ffffff

Perekat

Pindah ke tab desain dan tambah lebar maksimal.

• Lebar Maks: 100%

Jarak

Tambahkan beberapa nilai padding kustom berikutnya.

• Padding Atas: 3vw
• Padding Bawah: 8vw
• Padding Kiri: 7vw
• Padding Kanan: 7vw

Berbatasan

Kami akan melanjutkan dengan menambahkan '20vw' ke sudut kiri bawah dan kanan atas baris. Kami akan menambahkan batas atas menggunakan pengaturan berikut juga:

• Lebar Batas Atas: 1.2vw
• Warna Batas Atas: #00dcff

Bayangan Kotak

Kami juga menambahkan bayangan kotak halus untuk menciptakan kedalaman pada halaman.

• Kekuatan Buram Bayangan Kotak: 120px

Indeks Z

Untuk memastikan baris muncul di atas Modul Gambar, kita akan meningkatkan indeks Z baris dalam pengaturan visibilitas.

• Indeks Z: 10

Tambahkan Modul Blurb ke Kolom 1

Tambah isi

Setelah Anda menyelesaikan pengaturan baris, Anda dapat menambahkan Modul Blurb ke kolom pertama baris. Masukkan beberapa konten pilihan Anda.

Pilih Ikon

Pilih ikon pilihan Anda selanjutnya.

Pengaturan Ikon

Pindah ke tab desain dan ubah pengaturan ikon.

• Warna Ikon: #000000
• Penempatan Ikon: Atas
• Gunakan Ukuran Font Ikon: Ya
• Ukuran Font Ikon: 5vw

Pengaturan Teks Judul

Ubah juga pengaturan judul.

• Judul Font: Montserrat
• Judul Font Berat: Tebal
• Perataan Teks Judul: Tengah
• Warna Teks Judul: #000000
• Judul Teks Ukuran: 1.1vw (Desktop), 2.5vw (Tablet), 3vw (Telepon)
• Spasi Huruf Judul: -1px

Pengaturan Teks Tubuh

Bersamaan dengan pengaturan teks isi.

• Font Tubuh: Buka Sans
• Perataan Teks Tubuh: Tengah
• Ukuran Teks Tubuh: 0.8vw (Desktop), 1.6vw (Tablet), 2vw (Telepon)
• Tinggi Garis Tubuh: 1.5vw (Desktop), 3vw (Tablet & Telepon)

Clone Blurb Module Dua Kali & Tempatkan Duplikat di Kolom Tersisa

Setelah Anda menyelesaikan Modul Blurb di kolom 1, Anda dapat mengkloningnya dua kali dan menempatkan duplikatnya di dua kolom baris yang tersisa.

Ubah Konten

Pastikan Anda mengubah konten dari kedua duplikat dan selesai!

Pratinjau

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

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara berkreasi dengan batas baris bawaan Divi untuk membuat bagian pahlawan yang menakjubkan yang dapat Anda gunakan untuk proyek Divi Anda berikutnya. Kami telah membuat ulang contoh yang bagus dari awal dan Anda juga dapat mengunduh file JSON secara gratis. Jika Anda memiliki pertanyaan atau saran, pastikan Anda 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.