Tata Letak yang Dapat Digunakan Kembali untuk Membuat Desain Bingkai Unik dengan Divi

Membangun desain bingkai unik untuk baris Anda dengan Divi dapat menjadi cara yang berguna (dan menyenangkan) untuk menampilkan konten halaman Anda secara kreatif. Dengan menggabungkan pembagi bagian Divi dengan struktur baris yang ringkas, Anda dapat menjelajahi kemungkinan desain yang tak terhitung jumlahnya untuk membingkai konten Anda. Anda mungkin telah melihat teknik ini ditampilkan dalam tutorial sebelumnya atau di beberapa tata letak kami yang telah dibuat sebelumnya. Tapi, hari ini, saya pikir saya akan menunjukkan cara mudah untuk mengeksplorasi teknik desain ini sendiri. Dalam tutorial ini, saya akan menunjukkan cara cepat membangun tata letak bagian yang dapat digunakan kembali yang dapat disimpan ke perpustakaan Anda. Kemudian Anda dapat menggunakan tata letak tersebut untuk menjelajahi desain bingkai dan skema warna baru. Tata letak bekerja dengan membingkai baris Anda dengan desain yang unik, sehingga semua struktur kolom dan modul dapat digunakan di dalam baris.

Mari kita mulai.

Membuat Tata Letak Desain Bingkai yang Dapat Digunakan Kembali

Untuk memulai, mari buat bagian baru dengan tata letak satu kolom. Kami tidak perlu menambahkan modul apa pun pada saat ini. Sebagai gantinya, kita akan mendesain baris dan bagian kita terlebih dahulu, sehingga kita dapat mengisi baris kita dengan konten apa pun yang kita inginkan nanti.

Desain Baris

Perbarui pengaturan baris sebagai berikut:

Warna Latar Belakang: #333333
Penjajaran Baris: Pusat
Lebar Kustom: 775px
Lebar Talang: 2
Padding Kustom: 130px Atas, 130px Bawah, 50px Kiri, 50px Kanan
Margin Kustom: 0px Atas, 0px Bawah

Desain Bagian

Perbarui pengaturan bagian sebagai berikut:

Warna Latar Belakang: #ffffff
Gaya Pembagi Atas: lihat tangkapan layar
Warna Pembagi Atas: #ffffff
Gaya Pembagi Bawah: lihat tangkapan layar
Warna Pembagi Bawah: #ffffff

Selanjutnya, Anda akan mengatur padding atas dan bawah ke 0px dan membuat beberapa ruang atas dan bawah menggunakan batas sebagai berikut:

Padding Kustom: 0px Atas, 0px Bawah
Lebar Batas Atas: 5vw
Warna batas atas: #ffffff
Lebar Batas Bawah: 5vw
Warna Batas Bawah: #ffffff

Membuat jarak untuk bagian menggunakan batas atas dan bawah akan memaksimalkan ruang yang tersedia untuk pembagi bagian yang akan tumpang tindih dengan baris. Dengan cara ini Anda dapat memilih ketinggian pembagi untuk desain Anda.

Simpan Tata Letak ke Perpustakaan Anda

Itu saja untuk struktur tata letak dasar desain baris berbingkai Anda. Pada titik ini kami ingin menyimpan bagian ini ke perpustakaan Divi untuk menggunakan tata letak bagian untuk desain masa depan.

Klik ikon Simpan ke Perpustakaan di menu bagian.

Kemudian Masukkan nama untuk tata letak (seperti "Tata Letak Bingkai Baris") dan klik tombol Simpan ke Perpustakaan.

Menyelesaikan Desain Bingkai #1

Sekarang setelah kita memiliki tata letak bagian yang disimpan untuk upaya di masa mendatang, mari tambahkan beberapa konten ke baris kita untuk melengkapi contoh desain pertama.

Mengubah Struktur Kolom

Untuk desain ini, saya pikir menambahkan galeri gambar enam kolom akan bagus. Struktur kolom kecil akan memungkinkan kita untuk membuat sekelompok kecil gambar yang dibingkai dengan baik di dalam baris sempit.

Untuk melakukan ini, pertama-tama ubah struktur baris menjadi tata letak enam kolom.

Menambahkan Konten ke Baris

Kemudian tambahkan tiga modul gambar (dengan gambar) ke setiap kolom. Saya menggunakan gambar dengan lebih banyak orientasi potret (daripada lanskap) dengan berbagai ukuran/dimensi.

Berikut adalah desain akhir.

Tip Desain Bonus

Sebelum kita melanjutkan menjelajahi lebih banyak kemungkinan desain pembingkaian, saya ingin menunjukkan trik mudah untuk memperluas bingkai Anda ke satu sisi halaman. Untuk melakukan ini, buka pengaturan bagian dan tambahkan gradien latar belakang sebagai berikut:

Warna Gradien Latar Belakang Kiri: #333333
Warna Kanan Gradien Latar Belakang: #ffffff
Arah Gradien: 90 derajat
Posisi Awal: 50%
Posisi Akhir: 0%

Lihat desain ini.

Menyesuaikan Tata Letak untuk Berbagai Desain Bingkai dan Konten

Kemungkinan menarik dari tata letak sederhana ini sangat banyak untuk sedikitnya. Dengan menyesuaikan skema warna, gaya pembagi, tata letak kolom, dan konten modul, Anda dapat membuat segala macam desain tata letak yang berbeda. Plus, Anda dapat menggunakan fitur Divi keren seperti "Temukan dan Ganti" untuk membuat perubahan skema warna yang luas dalam beberapa klik.

Berikut adalah proses dasar untuk memperbarui tata letak:

1. Muat Tata Letak Bagian Tersimpan ke halaman
2. Perbarui skema warna bagian menggunakan "Temukan dan Ganti".
3. Ubah Gaya Pembagi
4. Kustomisasi Baris dengan latar belakang dan struktur kolom baru.
5. Tambahkan Modul ke kolom Anda

Dengan proses ini, menjelajahi desain baru seharusnya cukup menyenangkan! Ayo lanjutkan.

Desain Bingkai #2

Untuk desain selanjutnya ini, kita akan menggunakan tata letak bagian tersimpan yang telah kita buat sebelumnya. Untuk melakukan ini, klik untuk menambahkan bagian baru di pembuat visual. Kemudian pilih tab Add From Library dan klik tata letak bagian dari daftar.

Sekarang kita siap untuk menyesuaikan bagian untuk desain baru.

Untuk mengubah skema warna yang digunakan untuk tata letak ini, kita dapat memanggil beberapa kekuatan desain Divi dengan menggunakan fitur Temukan dan Ganti. Buka pengaturan bagian dari bagian yang digandakan dan klik kanan pada warna latar belakang dan pilih "Temukan dan Ganti".

Di modal Temukan & Ganti, perbarui yang berikut ini:

Dalam: Bagian Ini
Ganti Dengan: #443850
Pilih Ganti Semua

Ini akan mengganti warna putih yang digunakan untuk bagian background, border, dan dividers dengan warna baru.

Sekarang perbarui pengaturan bagian dengan gaya pembagi baru:

Kemudian perbarui pengaturan baris dengan warna latar belakang putih, dan bayangan kotak untuk melengkapi desain bingkai baru untuk baris.

Untuk konten, mari kita coba tata letak lima kolom dengan beberapa uraian. Lanjutkan dan perbarui tata letak kolom untuk baris Anda menjadi tata letak lima kolom.

Kemudian tambahkan uraian singkat ke kolom pertama. Keluarkan teks konten default dan biarkan hanya teks Judul. Kemudian ganti gambar blurb dengan ikon bintang. Perbarui pengaturan desain sebagai berikut:

Warna Ikon: #7d8491
Ikon Ukuran font: 80px
Orientasi Teks: Tengah

Gandakan modul uraian dan perbarui pengaturan sebagai berikut:

Warna Ikon: #8cd845
Ukuran Font Ikon: 50px

Sekarang buat duplikat atau salin dan tempel kedua modul itu ke dalam pola di seluruh lima kolom Anda dengan tiga modul di setiap kolom.

Berikut adalah desain akhir.

Desain Bingkai #3

Untuk desain bingkai ketiga, pertama-tama kita perlu memuat tata letak bagian yang disimpan seperti yang kita lakukan sebelumnya untuk desain kedua.

Setelah itu, kita dapat menggunakan find and replace pada bagian background color (seperti yang kita lakukan pada desain sebelumnya) untuk mengganti warna putih yang digunakan untuk section background, divider, dan border dengan warna biru yang bagus. Untuk melakukan ini, buka bagian pengaturan, klik kanan pada warna latar belakang, dan pilih temukan dan ganti. Kemudian perbarui yang berikut ini:

Dalam: Bagian Ini
Ganti Dengan: #1e3888
Pilih Ganti Semua

Kemudian perbarui pembagi bagian dengan gaya pembagi atas dan bawah baru (awan):

Selanjutnya, pergi ke pengaturan baris. Berikan baris latar belakang gradien sebagai berikut:

Warna Kiri Gradien Latar Belakang: default (#2b87da)
Warna Kanan Gradien Latar Belakang: #1E3888 (warna yang sama dengan latar belakang bagian)
Jenis Gradien: Radial (untuk memberikan kesan "seperti awan" pada baris)
Posisi Akhir: 83% (untuk sedikit menyembunyikan tepi baris)

Sekarang, yang perlu kita lakukan adalah menambahkan beberapa konten ke baris berbingkai kita. Mari tambahkan Modul Ajakan Bertindak ke baris dan perbarui pengaturan sebagai berikut:

Tambahkan "#" ke kotak input tautan untuk menampilkan tombol
Gunakan Warna Latar Belakang: TIDAK

Warna Teks Judul: #ffc338
Warna Teks Tombol: #ffc338

Berikut adalah desain akhir.

Bagaimana dengan Ponsel?

Jika Anda bertanya-tanya. Berikut adalah tampilan desain di perangkat seluler.

Pikiran Akhir

Desain bingkai yang dibuat dalam tutorial ini dimaksudkan untuk menonjolkan kemungkinan desain daripada menampilkan potongan desain yang sepenuhnya dipoles. Untuk alasan ini, saya berkonsentrasi pada desain bingkai dan menggunakan contoh konten dasar. Mudah-mudahan, mereka setidaknya akan menginspirasi Anda untuk menjelajahi desain baru dengan bermain dengan pembagi bagian, skema warna, dan konten yang berbeda.

saya berharap untuk mendengar dari Anda di komentar.

Bersulang!