Cara Mendesain Tata Letak “Showcase” Lima Kolom yang Responsif dengan Divi

Merancang tata letak lima kolom dengan ruang yang cukup untuk konten Anda bisa jadi menantang. Belum lagi tantangan yang lebih besar untuk memastikan skalanya bagus di semua ukuran browser. Dalam tutorial ini, saya akan menunjukkan cara memaksimalkan ruang yang dibutuhkan untuk memuat konten di dalam tata letak lima kolom tanpa mengorbankan desain pada ukuran layar yang lebih kecil (seperti tablet dan smartphone). Desain ini sangat ideal untuk menampilkan produk, layanan, dan proyek. Saya bahkan akan memberikan beberapa fitur desain bonus untuk sedikit inspirasi.

Mari kita mulai.

Sneak Peek

Teknik Responsif Digunakan

Gunakan Lebar Baris Kustom dan Lebar Talang

Kunci untuk membuat tata letak lima kolom responsif adalah yang pertama memberi kolom Anda cukup ruang untuk menampung konten. Dalam desain untuk tutorial ini, saya akan memberikan baris yang menahan lima kolom dengan lebar khusus hingga 89%. Kemudian saya akan membuat lebih banyak ruang dengan mengatur lebar talang ke 1, yang pada dasarnya menghilangkan margin apa pun di antara kolom. Untuk desain ini, penting untuk menggunakan lebar khusus 89% daripada mengatur baris ke lebar penuh karena Anda dapat mengatur lebar talang ke 1 dan tetap menjaga margin di setiap sisi baris Anda. Anda akan melihat apa yang saya maksud.

Gunakan satuan panjang vw untuk spasi dan teks heading

Kunci lain untuk menjaga segala sesuatunya tetap responsif pada tata letak lima kolom adalah dengan memberi ruang pada konten Anda menggunakan satuan panjang vw. Dan penting untuk konsisten menggunakan vw di semua jarak Anda. Ini akan memastikan untuk menjaga penskalaan hal-hal secara konsisten pada semua ukuran browser tanpa membuat elemen pecah atau melompat-lompat saat Anda menyesuaikan lebar jendela Anda. Menggunakan satuan panjang vw untuk teks heading juga akan menjadi kunci agar teks tidak pecah menjadi baris baru di jendela browser yang lebih kecil. Namun, untuk teks heading, kita perlu menetapkan unit px untuk tablet dan smartphone untuk mengakomodasi teks yang terlalu banyak menyusut.

Bagian 1: Memulai

Yang Anda butuhkan untuk tutorial ini adalah Tema Divi. Kami akan menggunakan Visual Builder bersama dengan Tata Letak Halaman Beranda Perusahaan Arsitektur.

Jadi untuk memulai, buat halaman baru, beri judul halaman Anda, dan gunakan Visual Builder. Pilih opsi “Choose a Premade Layout”. Dalam popup muat dari perpustakaan, pilih paket tata letak Desain Interior dan kemudian muat Tata Letak Halaman Beranda Perusahaan Arsitektur ke halaman Anda.

Bagian 2: Membuat Bagian Judul

Sebagai permulaan, duplikat bagian kedua yang berisi tiga uraian.

Kami membutuhkan dua bagian untuk desain ini karena bagian atas akan melayani dua tujuan. Pertama, itu akan memegang judul bagian kami di bawah ini. Dan kedua, ini akan memungkinkan kita untuk menambahkan desain unik menggunakan pembagi bagian.

Ayo lanjutkan.

Di bagian asli (bukan duplikat), hapus tiga uraian dan ubah struktur kolom baris menjadi satu kolom.

Kemudian gulir ke bawah ke bagian bawah tata letak ke bagian terakhir dan salin modul teks di kolom kiri.

Kemudian tempelkan di dalam satu baris kolom yang baru saja Anda buat dan hapus semua konten teks di bawah heading h2 sehingga hanya "Let's Build Something" yang tersisa.

Bagian 3: Menyesuaikan Blurb untuk Tata Letak Lima Kolom

Sekarang saatnya untuk mengunjungi bagian yang kami duplikat dengan tiga uraian asli kami di dalam baris 3 kolom. Pertama, mari kita ubah struktur baris menjadi tata letak lima kolom.

Buka pengaturan blurb modul blurb di kolom pertama dan kemudian hapus gambar yang digunakan sebagai ikon.

Kemudian duplikat modul blurb di kolom pertama. Kami akan menggunakan dua uraian per kolom untuk desain ini karena kami membutuhkan uraian atas untuk menahan gambar latar belakang kami.

Buka pengaturan untuk uraian atas di kolom pertama dan hapus teks isi di kotak konten.

Tambahkan gambar latar belakang dan gradien ke modul Blurb teratas

Kemudian berikan uraian yang sama gambar latar belakang dan tambahkan gradien untuk melapisi gambar sebagai berikut:

Tambahkan Gambar Latar Belakang
Warna Kiri Gradien Latar Belakang: rgba(255,255,255,0)
Warna Kanan Gradien Latar Belakang: rgba(18,18,18,0.65)
Posisi Awal: 50%
Tempatkan Gradien Di Atas Gambar Latar: YA

Gradien diperlukan untuk membantu teks judul kita menjadi lebih mudah dibaca dengan gambar latar yang lebih terang.

Gunakan Unit VW untuk teks Judul dan spasi

Kemudian perbarui pengaturan tab desain sebagai berikut:

Judul teks Ukuran: 2.7vw (desktop), 46px (tablet), 36px (smartphone)
Spasi Huruf Judul: -3px
Margin Kustom: kiri 1,5vw, kanan 1,5vw
Padding Kustom: Atas 35vw, Bawah 2vw, Kiri 1vw, Kanan 1vw

Simpan Pengaturan.

Padding atas kustom 35vw adalah yang menciptakan desain gambar vertikal panjang yang unik. Teks judul diberi nilai 2.7vw untuk menjaga penskalaan teks secara konsisten pada lebar browser yang berbeda. Sisa jarak akan lebih masuk akal setelah kita menambahkan lebih banyak jarak ke baris kita nanti.

Menyesuaikan uraian bawah

Kemudian buka pengaturan modul uraian kedua di bawahnya di kolom pertama dan hapus teks Judul. Kemudian perbarui yang berikut ini:

Perataan Teks Tubuh: Kiri
Warna Teks Tubuh: #666666
Padding Kustom: Atas 2vw, Bawah 2vw, Kiri 2vw, Kanan 2vw

Sekarang kita memiliki dua uraian yang dirancang di kolom pertama kita. Salin keduanya dan tempel di setiap kolom yang tersisa. Anda harus terlebih dahulu menghapus modul uraian asli di kolom 2 dan 3 terlebih dahulu. Sekarang desain Anda akan terlihat seperti ini.

Bagian 4: Menyesuaikan Pengaturan Bagian

Sekarang mari perbarui pengaturan bagian kita untuk memiliki latar belakang putih dan bayangan kotak di bagian bawah yang akan membuat ruang untuk baris kita tumpang tindih.

Warna Latar Belakang: #ffffff
Padding Kustom: Atas default, Bawah 5vw, Kiri default, Kanan default
Bayangan Kotak: lihat tangkapan layar
Posisi Vertikal Bayangan Kotak: -200px
Kekuatan Buram Bayangan Kotak: 0px
Warna Bayangan: #121212

Bagian 5: Menyesuaikan Pengaturan Baris

Sekarang mari kembali ke baris kita dan perbarui pengaturan sebagai berikut:

Gambar Latar Belakang: #ffffff
Penjajaran Baris: Pusat
Lebar Kustom: 89%
Lebar Talang: 1
Margin Kustom: -10vw
Padding Kustom: Atas 3vw, Bawah 3vw, Kiri 1,5vw, Kanan 1,5vw
Bayangan Kotak: lihat tangkapan layar
Kekuatan Buram Bayangan Kotak: 80px

Seperti disebutkan sebelumnya dalam tutorial, lebar kustom dan lebar talang sangat penting untuk membuat ruang konten yang kita butuhkan untuk tata letak lima kolom.

Pada titik ini, struktur dasar desain selesai. Berikut adalah tampilan desain sejauh ini.

Bagian 6: Menambahkan Sentuhan Terakhir

Sekarang kita dapat menambahkan beberapa tweak desain lagi untuk menyelesaikannya.

Mengejutkan Blurb

Pertama, mari kita atur ketinggian gambar latar belakang uraian dengan mengurangi beberapa padding. Buka pengaturan modul uraian atas di baris kedua dan perbarui padding sebagai berikut:

Padding Kustom: 28vw Atas

Dan untuk blurb atas di kolom ketiga, beri ubah padding atas menjadi 30vw.

Tambahkan Pembagi Bagian untuk menambahkan tekstur ke Baris Lima kolom Anda

Salah satu teknik desain yang keren adalah menambahkan pembagi bagian atas ke bagian langsung di atas bagian dengan lima kolom kami. Latar belakang pembagi akan muncul di latar belakang baris lima kolom meskipun tumpang tindih dengan bagian di atas. Untuk melakukan ini, pergi ke bagian yang berisi judul "Ayo Membangun Sesuatu" dan berikan pembagi sebagai berikut:

Karena warna pembagi adalah warna yang sama dengan latar belakang bagian dengan opacity 15%, pembagi tidak terlihat di bagian atas, tetapi menjadi terlihat di bagian bawah dan di baris yang tumpang tindih. Dan karena kami memberi baris bayangan kotak, ini menciptakan desain yang unik.

Saya melanjutkan dan memperbarui beberapa gambar latar belakang untuk mendapatkan ide yang lebih baik tentang seperti apa desainnya dengan gambar yang berbeda.

Berikut adalah desain akhir.

Salah satu hal hebat tentang tata letak lima kolom adalah Anda mendapatkan tata letak dua kolom yang bagus di tablet.

Dan inilah tampilannya di smartphone.

Pikiran Akhir

Saya suka menjelajahi kekuatan Divi untuk membuat tata letak yang responsif. Tantangan tata letak lima kolom adalah bahwa sebenarnya tidak ada banyak ruang untuk konten kecuali Anda menggunakan teknik yang tepat untuk mengatur ruang konten Anda dengan tepat untuk menskalakan dengan baik pada semua ukuran browser. Saya harap desain ini bermanfaat untuk memperkenalkan beberapa kemungkinan penggunaan tata letak lima kolom untuk proyek Anda berikutnya.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!