Cara Mendesain Bagian Pahlawan Multi Kolom yang Unik dengan Bagian Khusus Divi

Sepanjang semua tren desain, cara Anda mendesain bagian pahlawan Anda tetap sangat penting. Dengan Divi, Anda dapat mengambil pendekatan yang berbeda dan membuat bagian pahlawan yang menonjol dan mendorong orang untuk memperpanjang masa tinggal mereka di situs web Anda. Untuk membantu Anda mendapatkan inspirasi untuk proyek Divi Anda yang akan datang, kami akan menunjukkan kepada Anda cara mendesain bagian pahlawan multi-kolom yang unik menggunakan opsi bawaan Divi saja. Bagian pahlawan multi-kolom tidak hanya tampak hebat, tetapi juga membantu Anda menempatkan lebih banyak konten secara strategis di bagian pahlawan tanpa membebani pengunjung Anda.

Mari kita lakukan!

Pratinjau

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

Unduh Tata Letak Bagian Pahlawan Multi-Kolom GRATIS

Untuk meletakkan tangan Anda pada tata letak bagian pahlawan multi-kolom, 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!

Tambahkan Bagian Khusus Baru

Struktur Kolom

Untuk membuat bagian pahlawan multi-kolom yang mulus, kami akan menggunakan salah satu bagian khusus Divi yang dapat Anda akses di dalam Visual Builder. Memilih bagian khusus memungkinkan Anda untuk memiliki pegangan yang lebih baik pada struktur kisi yang Anda gunakan saat Anda mendesain bagian pahlawan multi-kolom. Untuk contoh khusus ini, kami memilih struktur kolom berikut:

Warna latar belakang

Buka pengaturan bagian dan tambahkan warna latar belakang putih.

• Warna Latar Belakang: #ffffff

Perekat

Kami memastikan bahwa tidak ada celah di antara kolom bagian dengan mengubah pengaturan ukuran.

• Samakan Tinggi Kolom: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%
• Lebar bagian dalam: 100%
• Lebar Maks Bagian Dalam: 100%

Jarak

Kami juga menghapus semua padding atas dan bawah default dari baris dan kolom.

• Padding Atas: 0px
• Padding Bawah: 0px
• Kolom 1 Padding Atas: 0px
• Kolom 1 Padding Bawah: 0px
• Kolom 2 Padding Atas: 0px
• Kolom 2 Padding Bawah: 0px
• Kolom 3 Padding Atas: 0px
• Kolom 3 Padding Bawah: 0px

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke kolom bagian pertama menggunakan struktur kolom berikut:

Jarak

Tanpa menambahkan modul apa pun, buka pengaturan baris dan hapus semua padding atas dan bawah default.

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

Tambahkan Modul Teks ke Kolom

Tambahkan Paragraf & Konten H1

Saatnya mulai menambahkan modul! Tambahkan Modul Teks baru dengan beberapa paragraf dan konten H1 pilihan Anda.

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks.

• Font Teks: Buka Sans
• Ukuran Teks: 0.9vw (Desktop), 1.6vw (Tablet), 2.2vw (Telepon)

Pengaturan Teks H1

Ubah juga pengaturan teks H1.

• Font Judul: Buka Sans
• Berat Huruf Judul: Semi Tebal
• Gaya Font Judul: Huruf Besar
• Warna Teks Judul: #000000
• Ukuran Teks Judul: 4vw
• Tinggi Garis Pos: 1.1em

Jarak

Tambahkan beberapa nilai padding khusus juga.

• Padding Atas: 10.8vw
• Padding Kiri: 4vw
• Padding Kanan: 4vw

Tambahkan Baris #2

Struktur Kolom

Baris kedua yang kita butuhkan di kolom bagian pertama menggunakan struktur kolom berikut:

Jarak

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah nilai padding.

• Padding Atas: 3vw
• Padding Kiri: 4vw
• Padding Kanan: 4vw

Tambahkan Modul Teks #1 ke Kolom 1

Tambahkan Konten H3

Setelah Anda selesai dengan pengaturan baris, Anda dapat melanjutkan dan menambahkan Modul Teks baru ke kolom pertama. Masukkan beberapa konten H3 pilihan Anda.

Pengaturan Teks H3

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

• Judul 3 Font: Buka Sans
• Judul 3 Berat Font: Semi Tebal
• Judul 3 Gaya Font: Huruf Besar
• Judul 3 Warna Teks: #000000
• Judul 3 Ukuran Teks: 1.5vw (Desktop), 2vw (Tablet), 2.5vw (Telepon)

Jarak

Lanjutkan dengan menambahkan beberapa margin atas pada ponsel.

• Margin Atas: 2vw (Hanya Telepon)

Tambahkan Modul Pembagi ke Kolom 1

Visibilitas

Modul kedua yang kita butuhkan di kolom pertama adalah Modul Pembagi. Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Garis

Ubah warna garis selanjutnya.

• Warna Garis: #000000

Jarak

Tambahkan beberapa nilai margin khusus untuk membuat ruang di sekitar pembagi.

• Margin Atas: 2vw
• Margin Bawah: 2vw
• Margin Kanan: 2vw

Tambahkan Modul Teks #2 ke Kolom 1

Tambah isi

Modul berikutnya dan terakhir yang kita butuhkan di kolom ini adalah Modul Teks lainnya. Masukkan beberapa konten paragraf pilihan Anda.

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks yang sesuai:

• Font Teks: Buka Sans
• Ukuran Teks: 0.6vw (Desktop), 1.1vw (Tablet), 2vw (Telepon)
• Tinggi Baris Teks: 2em

Jarak

Tambahkan beberapa bantalan bawah dan kanan juga.

• Margin Bawah: 5vw (Hanya Telepon)
• Margin Kanan: 2vw

Klon Semua Modul di Kolom 1 Dua Kali & Tempatkan Duplikat di Kolom Tersisa

Setelah Anda menyelesaikan semua modul di kolom 1, Anda dapat melanjutkan dan mengkloning masing-masing modul dua kali. Tempatkan duplikat di dua kolom baris yang tersisa.

Ubah Konten

Pastikan Anda mengubah semua konten di Modul Teks.

Tambahkan Baris #3

Struktur Kolom

Baris berikutnya dan terakhir yang kita butuhkan di kolom bagian pertama menggunakan struktur kolom berikut:

Jarak

Buka pengaturan baris dan ubah nilai spasi.

• Margin Atas: 2vw
• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Modul Teks ke Kolom 1

Tambah isi

Lanjutkan dengan menambahkan Modul Teks ke kolom pertama dengan beberapa salinan CTA pilihan Anda.

Tambahkan Tautan

Tambahkan tautan ke seluruh modul juga.

Warna latar belakang

Kami juga mengubah warna latar belakang Modul Teks.

• Warna Latar Belakang: #000000

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks yang sesuai:

• Font Teks: Buka Sans
• Berat Font Teks: Sangat Tebal
• Gaya Font Teks: Huruf Besar
• Perataan Teks: Tengah
• Warna Teks: #ffffff
• Ukuran Teks: 1vw (Desktop), 1.7vw (Tablet), 2.5vw (Telepon)

Jarak

Dan buat ruang di sekitar modul menggunakan beberapa nilai margin dan padding khusus.

• Margin Atas: 4vw (Desktop), 11vw (Tablet), 0vw (Telepon)
• Padding Atas: 4vw
• Padding Bawah: 4vw

Modul Teks Klon & Tempatkan Duplikat di Kolom 2

Setelah Anda menyelesaikan Modul Teks di kolom 1, Anda dapat mengkloningnya dan menempatkan duplikatnya di kolom kedua.

Ubah Konten

Pastikan Anda mengubah konten dan tautannya.

Ubah Warna Latar Belakang

Begitu juga dengan warna backgroundnya.

• Warna Latar Belakang: #e5e5e5

Ubah Warna Teks

Kemudian, pindah ke tab desain dan ubah warna teks.

• Warna Teks: #000000

Ubah Spasi

Last but not least, pastikan pengaturan spasi hanya berisi nilai-nilai berikut:

• Padding Atas: 4vw
• Padding Bawah: 4vw

Tambahkan Modul Gambar ke Kolom Bagian 2

Unggah Gambar

Ke kolom bagian berikutnya! Di sini, modul pertama yang kita perlukan adalah Modul Gambar. Unggah gambar pilihan Anda atau gunakan yang dapat Anda temukan di folder zip yang dibagikan di awal posting ini.

Perekat

Buka pengaturan ukuran dan pastikan opsi 'Paksa Lebar Penuh' diaktifkan. Ini akan memastikan gambar akan mempertahankan ukurannya di semua ukuran layar.

• Paksa Lebar Penuh: Ya

Filter

Ubah pengaturan filter berikutnya.

• Saturasi: 0%
• Kecerahan: 50%

Tambahkan Modul Teks ke Kolom Bagian 2

Tambahkan Paragraf & Konten H3

Modul kedua yang kita butuhkan di kolom ini adalah Modul Teks. Masukkan beberapa paragraf dan konten H3 pilihan Anda.

Warna latar belakang

Tambahkan warna latar belakang ke modul.

• Warna Latar Belakang: #000000

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks yang sesuai:

• Font Teks: Buka Sans
• Warna Teks: #ffffff
• Ukuran Teks: 0.9vw (Desktop), 1.6vw (Tablet), 2.2vw (Telepon)

Pengaturan Teks H3

Ubah juga pengaturan teks H3.

• Judul 3 Font: Buka Sans
• Judul 3 Berat Font: Semi Tebal
• Judul 3 Gaya Font: Huruf Besar
• Judul 3 Warna Teks: #ffffff
• Judul 3 Ukuran Teks: 1.5vw (Desktop), 2.5vw (Tablet), 3vw (Telepon)

Jarak

Dan tambahkan beberapa nilai padding khusus dalam pengaturan spasi.

• Padding Atas: 3vw
• Padding Bawah: 3vw
• Padding Kiri: 2vw
• Padding Kanan: 2vw

Klon Kedua Modul & Tempatkan Duplikat di Bagian Kolom 3 (Urutan Terbalik)

Setelah Anda menyelesaikan kedua modul, Anda dapat melanjutkan dan mengkloningnya. Tempatkan duplikat di kolom bagian yang tersisa dalam urutan terbalik.

Ubah Modul Teks

Ubah Warna Latar Belakang

Buka Modul Teks duplikat di kolom bagian ketiga dan ubah warna latar belakang.

• Warna Latar Belakang: #ffffff

Ubah Warna Teks

Ubah warna teks selanjutnya.

• Warna Teks: #000000

Ubah Warna Teks H3

Seiring dengan warna teks H3.

• Judul 3 Warna Teks: #000000

Ubah Modul Gambar

Ganti gambar

Unggah gambar yang berbeda ke Modul Gambar duplikat berikutnya.

Ubah Filter

Dan ubah pengaturan filter.

• Saturasi: 0%
• Kecerahan: 147%

Tambahkan Modul Pembagi ke Bagian Kolom 2

Posisi

Kami juga menambahkan beberapa pembagi yang diubah untuk menambahkan detail pada desain kami. Tempatkan Modul Pembagi pertama di sini:

Visibilitas

Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Garis

Tambahkan warna garis berikutnya.

• Warna Garis: #ffffff

Ubah Putar

Dan ubah pembagi horizontal menjadi pembagi vertikal dengan memodifikasi nilai putar transformasi kiri.

• Kiri: 270 derajat

Ubah Terjemahan

Reposisi Modul Pembagi menggunakan unit lebar viewport dalam pengaturan translasi transformasi.

• Kanan: -19vw (Desktop)
• Bawah: -11vw (Desktop), -24vw (Tablet)

Visibilitas

Dan sembunyikan seluruh modul di ponsel.

Tambahkan Modul Pembagi ke Kolom Bagian 3

Posisi

Modul Pembagi berikutnya dan terakhir perlu ditambahkan di sini:

Visibilitas

Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Garis

Pindah ke tab desain dan ubah warna garis.

• Warna Garis: #000000

Ubah Putar

Ubah pembagi horizontal menjadi pembagi vertikal berikutnya.

• Kiri: 270 derajat

Ubah Terjemahan

Dan reposisi pembagi menggunakan pengaturan transform translate.

• Kanan: 2vw
• Bawah: -11vw (Desktop), -24vw (Tablet)

Visibilitas

Untuk memastikan pembagi muncul di atas Modul Gambar di bawahnya, kita akan meningkatkan Indeks Z dalam pengaturan visibilitas. Kami juga akan menyembunyikan seluruh modul di telepon.

• Indeks Z: 2

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 membuat bagian pahlawan multi-kolom yang indah dan unik hanya dengan opsi bawaan Divi. Ini adalah teknik hebat yang dapat digunakan untuk berbagai jenis situs web. 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.