Cara Tumpang Tindih Perbatasan Baris Secara Horizontal dengan Divi

Membuat desain halaman yang berinteraksi tidak selalu merupakan tugas yang mudah. Selain berfokus pada pengalaman pengguna, prinsip desain, dan tren desain, Anda juga perlu membuat sesuatu yang sesuai dengan branding perusahaan Anda dan memikat pengunjung Anda pada pandangan pertama.

Jika Anda menelusuri blog kami, Anda akan menemukan banyak cara kreatif untuk mendekati desain web Anda menggunakan opsi bawaan Divi dan Divi yang serbaguna. Hari ini, kami menambahkan pendekatan kreatif lain ke daftar itu. Kami akan menunjukkan cara tumpang tindih batas baris secara kreatif untuk membuat desain yang menakjubkan. Kami memastikan kami memiliki jenis desain yang sama di semua ukuran layar.

Mari kita lakukan!

Berlangganan Saluran Youtube Kami

Pratinjau

Kita akan membuat contoh dari awal, tetapi sebelum kita menyelaminya, mari kita lihat hasil akhirnya pada ukuran layar yang berbeda.

Unduh Font Mightype Gratis

Hal pertama yang perlu Anda lakukan adalah mengunduh font tulisan tangan Mightype gratis dari AF studio. Buka tautan berikut dan aktifkan unduhan gratis melalui email.

Tambahkan Bagian Baru

Jarak

Setelah Anda mengunduh font gratis yang disebutkan di langkah sebelumnya, Anda dapat melanjutkan dan membuat halaman baru. Setelah Anda melakukannya, aktifkan Visual Builder, buka bagian pertama halaman baru Anda dan tambahkan beberapa bantalan khusus:

• Padding Atas: 250px
• Padding Bawah: 250px

Tambahkan Baris Baru

Struktur Kolom

Kita akan membutuhkan total dua baris. Kita akan mulai dengan yang pertama dan mengkloningnya setelah selesai. Tambahkan baris baru ke bagian Anda menggunakan struktur kolom berikut:

Kolom 1 Latar Belakang Gradien

Tanpa menambahkan modul apa pun, buka pengaturan baris Anda dan tambahkan latar belakang gradien kolom 1 berikut:

• Warna 1: #ffffff
• Warna 2: rgba (0,255,233,0.25)
• Tipe Gradien Kolom: Radial
• Arah Radial Kolom: Kiri
• Posisi Awal Kolom: 59%
• Posisi Akhir Kolom: 59%
• Kolom Tempatkan Gradien Di Atas Gambar Latar Belakang: Ya

Pola Latar Belakang Kolom 1

Lanjutkan dengan menyimpan pola berikut ke komputer Anda dan mengunggahnya sebagai gambar latar kolom 1 Anda:

Setelah Anda mengunggah polanya, manfaatkan pengaturan gambar latar belakang berikut:

• Ukuran Gambar Latar Belakang Kolom: Ukuran Sebenarnya
• Gambar Latar Belakang Kolom Ulangi: Spasi

Penjajaran Baris

Aktifkan juga Right Row Alignment.

Perekat

Kami juga menggunakan beberapa pengaturan Ukuran khusus untuk baris ini:

• Gunakan Lebar Kustom: Ya
• Lebar Kustom: 950px

Jarak

Ini adalah nilai Spasi yang perlu Anda tambahkan selanjutnya:

• Margin Bawah: 100px
• Margin Kanan: -30px (Tablet & Ponsel)
• Padding Atas: 0px
• Padding Bawah: 0px

Berbatasan

Last but not least, tambahkan batas ke atas, kiri dan bawah baris Anda:

• Lebar Perbatasan: 14px
• Warna Perbatasan: #000000
• Gaya Batas Kiri: Ganda

Tambahkan Modul Teks Judul

Tambahkan Salinan H2

Sekarang kita dapat mulai menambahkan modul kita! Tambahkan judul Modul Teks dan pastikan salinan Anda adalah H2.

Warna latar belakang

Kami akan menginterupsi batas kiri baris kami dengan menambahkan warna latar belakang putih ke Modul Teks.

Unggah Font Mightype

Temukan font Mightype di komputer Anda berikutnya dan unggah ke perpustakaan font Anda dengan mengklik tombol unggah di daftar font Anda.

Pilih file font Mightype, beri nama font Anda dan unggah ke perpustakaan font Anda.

Pengaturan Teks H2

Setelah Anda menambahkan font baru, lanjutkan dan buat beberapa perubahan lain pada pengaturan teks H2:

• Judul 2 Font: Mightype
• Warna Teks Judul: #000000
• Judul 2 Ukuran Teks: 150px (Desktop), 100px (Tablet), 60px (Telepon)

Jarak

Untuk setiap modul yang ingin Anda tumpang tindih dengan batas baris, Anda harus menambahkan margin negatif. Margin negatif ini hanya akan mempengaruhi modul yang bersangkutan, bukan baris tempat modul tersebut ditempatkan. Margin negatif yang perlu Anda tambahkan bergantung pada jumlah karakter yang digunakan dalam salinan Anda.

• Margin Atas: 200px
• Margin Bawah: 100px
• Margin Kiri: -35%
• Padding Atas: 50px
• Padding Bawah: 50px

Modus Campuran

Dan untuk memastikan warna latar belakang Modul Teks hanya mempengaruhi batas baris, dan bukan latar belakang kolom 1, aktifkan Blend Mode 'Multiply' di pengaturan Filter.

Tambahkan Modul Teks Deskripsi

Warna latar belakang

Tepat di bawah judul Modul Teks, lanjutkan dan tambahkan deskripsi Modul Teks dengan warna latar belakang putih.

Pengaturan Teks

Buka pengaturan teks dan buat beberapa perubahan:

• Ukuran Teks: 22px (Desktop), 18px (Tablet), 15px (Telepon)
• Tinggi Baris Teks: 1.8em
• Orientasi Teks: Tengah

Perekat

Kurangi Ukuran Modul Teks ini menjadi '96%' selanjutnya.

Jarak

Tambahkan beberapa spasi juga:

• Margin Bawah: 200px
• Margin Kiri: -50%
• Padding Atas: 20px
• Padding Bawah: 20px

Modus Campuran

Dan gunakan Blend Mode 'Multiply' di sini juga.

Baris Klon

Kami selesai memodifikasi baris pertama! Mari kita buat hasil yang sama tetapi di sisi lain halaman. Untuk menghemat waktu, kami akan mengkloning baris yang sudah kami miliki dan membuat beberapa perubahan di sepanjang jalan.

Ubah Pengaturan Baris

Kolom 1 Latar Belakang Gradien

Hal pertama yang perlu Anda ubah adalah latar belakang gradien kolom 1:

• Warna 2: rgba(255,187,0,0.33)
• Arah Radial Kolom: Kanan

Penjajaran Baris

Kami ingin baris muncul di sisi lain, itu sebabnya kami akan memilih Left Row Alignment.

Jarak

Kami juga menyesuaikan pengaturan Spasi:

• Margin Kiri: -25% (Tablet & Ponsel)

Berbatasan

Hapus batas kiri yang telah diterapkan ke baris Anda dan terapkan ke sisi kanan sebagai gantinya:

• Lebar Batas Kanan: 14px
• Warna Tepi Kanan: #000000
• Gaya Perbatasan Kanan: Ganda

Ubah Pengaturan Modul Teks Judul

Jarak

Ubah pengaturan Spasi dari Modul Teks judul Anda selanjutnya:

• Margin Kiri: 52% (Desktop & Tablet), 58% (Telepon)
• Margin Kanan: -52% (Desktop & Tablet), 58% (Telepon)

Ubah Pengaturan Teks Deskripsi

Jarak

Last but not least, deskripsi Modul Teks membutuhkan beberapa nilai Spasi lainnya juga:

• Margin Kiri: 50%
• Margin Kanan: -50%

Pratinjau

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

Pikiran Akhir

Batas baris yang tumpang tindih menggunakan opsi bawaan Divi dapat membuat situs web Anda kustomisasi dan personalisasi yang mungkin Anda cari. Dalam posting ini, kami telah menunjukkan kepada Anda bagaimana melakukannya. Kami telah membuat ulang contoh yang indah dari awal. Contoh ini terlihat bagus di semua ukuran layar dan kami hanya menggunakan opsi bawaan Divi! Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!