Tingkatkan Halaman Blog Divi Anda dengan Latar Belakang yang Dirancang untuk Tata Letak Kotak

Membuat tata letak kotak untuk blog Anda adalah cara yang bagus untuk mengatur posting Anda. Divi membuat ini sangat mudah dengan Modul Blog. Hanya dalam beberapa detik Anda dapat menerapkan tata letak kisi blog yang berfungsi ke halaman Anda. Dan Anda bahkan dapat memanfaatkan banyak pengaturan desain untuk menyesuaikan tampilan grid blog Anda dengan banyak cara. Tapi hari ini, saya membawa hal-hal ke tingkat lain.

Dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat membuat beberapa layer latar belakang untuk membingkai grid blog tiga kolom Anda dengan desain yang indah dan simetris. Semoga Anda dapat menggunakan teknik desain ini untuk membuat halaman blog yang dijamin mengesankan.

Mari kita mulai.

Berlangganan Saluran Youtube Kami

Sneak Peak dari Desain Tata Letak Grid

Berikut ini adalah sneak peek desainnya.

Mulai

Yang Anda butuhkan hanyalah Divi untuk tutorial ini. Setelah Anda menginstal dan mengaktifkan Tema Divi, buat halaman baru dan beri Anda judul halaman. Kemudian gunakan Visual Builder. Pilih “Choose a Premade Layout” lalu unggah Therapist Blog Page Layout ke halaman Anda dan publikasikan.

Pastikan Anda memiliki setidaknya 6 posting blog dengan konten dan gambar unggulan. Jika tidak, postingan blog tidak akan muncul di halaman.

Sekarang Anda siap untuk mulai mengedit.

Tambahkan Layer Latar Belakang Pertama ke Bagian

Desain kustom akan ditambahkan ke bagian kedua dari tata letak yang memegang modul blog. Untuk membuat layer latar belakang pertama kami, kami akan mengatur pengaturan bagian sebagai berikut:

Warna Latar Belakang: #5873dd
Padding Kustom (desktop): Atas 4vw, Bawah 4vw, Kiri 7vw
Padding Kustom (tablet): Kiri 0vw

Padding kiri 7vw kustom pada dasarnya mengimbangi konten bagian (baris) untuk tampilan yang unik. Jika Anda ingin semuanya bagus dan terpusat untuk desain Anda, Anda dapat mengabaikannya.

Tambahkan Layer Latar Belakang Kedua dan Ketiga ke Baris

Lapisan latar belakang kedua dan ketiga akan dibuat dengan menambahkan warna latar belakang ke seluruh baris dan kemudian gradien latar belakang ke kolom di dalam baris.

Buka pengaturan baris dan perbarui yang berikut:

Warna Latar Belakang: rgba(255,255,255,0.3)
Kolom 1 Warna Kiri Latar Belakang: rgba(255.255.255,0.0)
Kolom 1 Warna Kanan Latar Belakang: rgba(255,255,255,0.3)
Arah Gradien Kolom: 90deg
Posisi Awal Kolom: Posisi Awal Kolom: 33,3%
Posisi Akhir Kolom: 0%

Perhatikan bahwa saya menggunakan warna putih dengan opacity 30% untuk membuat tingkat warna overlay putih yang konsisten yang memungkinkan latar belakang bagian biru terlihat. Karena setiap warna tumpang tindih, pengguna melihat versi latar belakang bagian biru yang 30% lebih terang. Dengan cara ini jika Anda ingin mengubah skema warna tata letak, yang harus Anda lakukan hanyalah mengubah warna latar belakang bagian.

Mengatur posisi awal gradien kolom ke 33,3% memastikan bahwa gradien akan membagi tepat antara kolom pertama dan kedua dari grid blog saya. Tapi ini tidak akan terlihat benar pada awalnya karena kita masih perlu memberikan lebar kustom 100% antara lain.

Lebar Kustom: 100%
Lebar Talang: 4
Padding Kustom: 4% Atas, 4% Bawah

Padding kustom mengekspos lapisan secara vertikal untuk menambah desain keseluruhan.

Simpan Pengaturan.

Menambahkan Layer Latar Belakang Keempat ke Modul Blog Kami

Di sinilah semuanya jatuh ke tempatnya. Lapisan keempat dan terakhir akan menjadi gradien latar belakang yang ditambahkan ke modul blog kita. Kemudian dengan spasi yang tepat ditambahkan, modul blog akan sejajar sempurna dengan lapisan latar belakang kita. Saya juga akan menambahkan beberapa penyesuaian gaya ke kartu blog untuk menambahkan beberapa sentuhan akhir.

Buka pengaturan modul blog dan perbarui yang berikut:

Warna Latar Belakang Ubin Kisi: rgba(255,255,255,0.7)

Untuk menambahkan gradien latar belakang, Anda dapat pergi ke pengaturan baris dan menyalin gradien latar belakang kolom 1 dan kemudian kembali ke pengaturan blog dan menempelkannya menggunakan opsi klik kanan.

Kemudian perbarui yang berikut ini:

Posisi Awal: 66,6%

Margin Kustom: 4% Atas, 4% Bawah
Padding Kustom: 4% Atas, 4% Bawah, 4% Kiri, 4% Kanan

Seperti yang Anda lihat, nilai panjang 4% digunakan untuk memberikan jarak yang sama pada desain kami. Dan ada lebih dari nilai 4% ini daripada yang terlihat. Jika Anda ingat, kami mengatur baris kami untuk memiliki lebar talang khusus 4. Di Divi, jika Anda menambahkan modul blog dengan tata letak kisi ke baris dengan lebar talang 4, kolom kisi blog Anda akan dipisahkan secara horizontal sebesar 8% dari margin. Jadi, menambahkan 4% padding kiri dan kanan ke modul akan menciptakan jarak yang tepat yang kita butuhkan.

Pada titik ini, kita selesai dengan desain latar belakang. Lihat apa yang kita miliki sejauh ini.

Sekarang yang perlu kita lakukan adalah menambahkan beberapa sentuhan akhir pada modul blog.

Sentuhan Akhir

Di bawah tab desain Pengaturan Modul Blog, perbarui yang berikut ini:

Warna Teks Tubuh: rgba(0,0,0,0.8)
Warna Teks Meta: rgba(0,0,0,0.5)
Gaya Font Pagination: Garis Bawah
Warna Garis Bawah Pagination: rgba (166.221.217.0.39)
Warna Teks Paginasi: #ffffff
Ukuran Teks Pagination: 3vw(desktop), 40px(tablet), 30px(smartphone)

Jika Anda ingin memberi desain Anda sedikit lebih banyak tekstur, Anda dapat menambahkan latar belakang pembagi ke bagian Anda.

Pembagi Atas: Lihat Tangkapan Layar
Warna Pembagi: rgba (88.115.221.0.5)
Tinggi Pembagi: 32vw
Pembagi Horizontal Ulangi: 0,3X

Pembagi Bawah: Lihat Tangkapan Layar
Warna Pembagi: rgba (88.115.221.0.5)
Tinggi Pembagi: 43vw
Pembagi Horizontal Ulangi: 0,3X

Sekarang lihat hasil akhirnya…

Desain responsif

Lapisan yang membingkai kolom skala kisi dengan sempurna di semua ukuran browser desktop.

Meskipun lapisan latar belakang tidak akan menyesuaikan untuk dua kolom pada tablet dan satu kolom pada ponsel cerdas, hasilnya masih sangat simetris dan memberikan desain kisi-kisi halus yang berfungsi dengan baik.

Berikut tampilannya di ponsel…

Pikiran Akhir

Teknik background layered ini sebenarnya merupakan cara untuk menciptakan kesan memiliki background tiga kolom dimana sebenarnya hanya ada satu kolom (karena modul blog berada dalam satu kolom). Tentu ini mungkin dilakukan dalam CSS khusus di tingkat modul blog, tetapi saya pikir akan lebih membantu untuk memberikan solusi kreatif menggunakan Divi Builder. Dan variasi desain dapat digunakan sebagai latar konten lain juga.

Saya mencoba menjelaskan alasan di balik beberapa gaya yang digunakan dalam tutorial ini, tetapi jika Anda memiliki pertanyaan, saya siap. Dan, bagi Anda yang berharap untuk membumbui tata letak grid blog Anda, semoga posting ini setidaknya memberi Anda beberapa tip desain untuk melakukan hal itu.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!