Cara Memperluas Modul untuk Membuat Tata Letak Kolom Unik di Divi

Setiap halaman baru yang Anda desain dengan Divi Builder disusun menggunakan sejumlah tata letak kolom yang berbeda. Divi menyertakan tata letak kolom bawaan untuk setiap baris mulai dari satu kolom hingga enam kolom. Namun, terkadang, Anda mungkin merasa perlu menyesuaikan kolom ini untuk tata letak yang lebih unik. Hari ini, saya akan menunjukkan cara kreatif untuk melakukan hal itu.

Dalam tutorial ini, saya akan menunjukkan teknik desain sederhana yang memungkinkan Anda memperluas modul menggunakan margin negatif untuk menempati lebih dari satu kolom. Teknik ini akan memungkinkan Anda untuk merancang beberapa tata letak khusus yang unik yang mungkin tidak Anda anggap mungkin.

Mari kita mulai.

Sneak Peek

Untuk mendapatkan pemahaman yang lebih baik tentang apa yang akan kita bangun, berikut adalah versi desain sebelum dan sesudah menggunakan teknik ini.

Sebelum

Ini adalah desain tata letak tanpa menggunakan margin khusus untuk memperluas modul ke kolom lain.

Setelah

Ini adalah layout setelah memperluas dua modul gambar dan tiga modul teks berlabel angka “01”, “03”, dan “05”.

Perubahannya halus tetapi Anda harus dapat melihat bahwa modul telah diperpanjang untuk menempati kolom yang berdekatan. Dan satu-satunya hal yang diperlukan untuk mencapai ini adalah pengaturan margin sederhana -100%.

Dan hasilnya di tablet lebih seru lagi.

Memahami Konsep

Secara default, setiap modul Divi memiliki lebar 100% yang berarti setiap modul yang Anda tempatkan di kolom akan mencakup lebar penuh kolom tempat modul tersebut berada. Lebar selokan inilah yang digunakan Divi untuk menentukan jumlah ruang di antara setiap kolom. Jadi untuk tutorial ini, penting untuk mengatur lebar Talang Anda ke 1 untuk menghilangkan ruang itu.

Berikut adalah ilustrasi bagaimana setiap modul merentang lebar penuh kolom dalam satu baris dengan lebar talang yang disetel ke 1.

Sekarang, jika Anda menambahkan margin negatif (kiri atau kanan) ke modul, Anda dapat dengan mudah memperluas modul itu untuk menempati lebih dari satu kolom. Ini memungkinkan Anda membuat tata letak kolom khusus untuk halaman Anda yang mungkin belum Anda pertimbangkan.

Dalam ilustrasi ini, Anda dapat melihat bahwa dengan menambahkan margin kiri -100% ke modul di kolom 5, modul akan diperpanjang ke kiri untuk menempati kolom 5 dan kolom 4.

Dan salah satu bonus menggunakan tata letak enam kolom adalah desainnya dipertahankan pada tablet dengan baik.

Juga, karena cara kolom diurutkan dari kiri ke kanan, modul umumnya harus diperpanjang ke kiri sehingga konten tidak akan tersembunyi di balik kolom. Ini terutama benar jika Anda memiliki set warna latar belakang. Jadi jika mengalami masalah konten modul yang disembunyikan di balik kolom, Anda mungkin memperluas modul ke arah yang salah.

Mengapa Menggunakan Tata Letak Enam Kolom?

Ada tiga alasan utama untuk menggunakan tata letak enam kolom untuk teknik desain ini. Alasan pertama adalah ini memberi Anda lebih banyak kolom untuk dikerjakan. Alasan kedua adalah bahwa tata letak enam kolom diubah menjadi tata letak tiga kolom di tablet, yang akan mempertahankan elemen desain dengan sangat baik. Alasan ketiga adalah kolom akan menyimpan pesanannya di ponsel sehingga warna latar belakang kolom akan tetap sama. Ini berguna untuk tata letak kisi.

Desain ini juga berfungsi dengan tata letak kolom 1/2 1/6 1/6 1/6 dan tata letak kolom 1/6 1/6 1/6 1/2 karena keduanya akan mempertahankan tiga kolom pada tablet juga.

Menerapkan Desain

Untuk menunjukkan bagaimana teknik desain ini bekerja, saya akan memandu Anda melalui proses membangun tata letak kotak sederhana untuk menampilkan produk. Kemudian, saya akan menunjukkan cara memperluas modul ke kolom lain untuk membuat desain tata letak kustom.

Menyiapkan Bagian dan Baris Anda

Untuk memulai, buat halaman baru dan terapkan pembuat visual. Kemudian pilih "Bangun dari Awal". Kemudian lanjutkan dan tambahkan tata letak kolom 1/2 1/6 1/6 1/6 ke bagian pertama Anda.

Kemudian perbarui pengaturan baris sebagai berikut:

Warna Latar Belakang: #222831
Lebar Talang: 1
Samakan Tinggi Kolom: YA
Margin Kustom: 0px Atas, 0px Bawah
Padding Kustom: 0px Atas, 0px Bawah

Simpan Pengaturan.

Karena ketiga baris untuk desain ini akan berbagi pengaturan baris ini. Silakan duplikat baris untuk membuat baris kedua. Kemudian ubah baris kedua untuk memiliki tata letak enam kolom.

Untuk membuat baris ketiga, cukup duplikat baris kedua.

Menambahkan Modul ke Baris 1

Di Kolom pertama dari baris pertama atas, tambahkan modul teks dengan pengaturan berikut:

Warna Teks: Cahaya
Ukuran Teks Teks: 16px
Padding Kustom: Atas 2vw, Bawah 2vw, Kiri 2vw, Kanan 2vw

Di kolom kedua baris pertama, tambahkan modul uraian dengan pengaturan berikut:

Judul: [masukkan judul]
Konten: [hapus]
Ikon: [pilih ikon]
Warna Ikon: #eeeeee
Ukuran Font Ikon: 50px
Warna Teks: Cahaya
Orientasi Teks: Tengah
Padding Kustom: Atas 3vw, Bawah 2vw

Simpan Pengaturan

Di kolom ketiga, tambahkan gambar.

Di kolom terakhir, kami ingin membiarkannya kosong sehingga kami dapat memperluas modul gambar untuk mengisi kolom itu juga. Namun kami tidak ingin membiarkannya kosong sama sekali agar kolom tersebut aktif saat menumpuk di ponsel. Jadi, hal paling sederhana untuk dilakukan adalah menambahkan modul pembagi dan memilih untuk tidak menampilkan pembagi. Kemudian kita bisa menyembunyikan pembagi untuk smartphone.

Perbarui pengaturan pembagi sebagai berikut:

Tampilkan Pembagi: TIDAK
Nonaktifkan di: Telepon

Menambahkan Modul ke Baris 2 dan 3

Sekarang mari kita beralih ke Baris 2. Pada kolom pertama salin dan tempel modul uraian yang Anda buat di kolom kedua dari baris pertama. Kemudian ubah ikon dan teks judul menjadi warna hitam.

Kemudian Tambahkan Modul Teks ke kolom kedua dengan yang berikut:

Isi:

<h2>Product</h2>
01

Warna Teks Teks: #ffffff
Ukuran Teks Teks: 50px
Tinggi Baris Teks: 1em
Orientasi Teks: Kanan
Judul 2 Perataan Teks: Kiri
Judul 2 Warna Teks: #ffffff
Pos 2 Tinggi Baris: 3em
Padding Kustom: Atas 2vw, Bawah 2vw, Kiri 2vw, Kanan 2vw

Selanjutnya Salin Modul teks yang baru saja Anda buat dan tempelkan ke kolom 4 dan kolom 6.

Anda juga dapat menempelkan modul teks yang sama di kolom 3, kolom 5, dan kolom 6 dari Baris 3. Setelah itu Anda dapat menggunakan editor inline untuk mengubah nomor masing-masing modul teks sehingga Anda dapat melihat bagaimana modul-modul ini menumpuk seluler di kemudian hari.

Di kolom 2 Baris 3, tambahkan gambar lain.

Setelah itu isi semua kolom kosong di seluruh bagian Anda dengan pembagi dengan menyalin dan menempelkan pembagi yang Anda buat di baris 1.

Berikut adalah tampilan tata letak Anda pada saat ini (kotak kosong mewakili modul pembagi):

Menambahkan Margin Negatif untuk Memperluas Modul ke Kolom Lain

Pada titik ini kita dapat mulai memperluas modul kita menggunakan margin negatif. Proses ini sangat sederhana untuk dilakukan.

Buka pengaturan modul gambar untuk gambar di baris pertama. Karena kita ingin memperluas gambar ke kanan, kita akan menambahkan margin kanan -100%.

Selanjutnya, tambahkan -100% Left Margin ke Text Module di Baris 2, kolom 3.

Sekarang salin gaya modul dan tempelkan ke modul teks di Baris 2, kolom 6 dan juga ke modul teks di Baris 3, kolom 5.

Yang tersisa hanyalah memperpanjang gambar di baris 3, kolom 2. Perbarui modul gambar dengan margin khusus -100% Kiri.

Menambahkan Warna latar belakang ke kolom Anda

Fase terakhir dari desain adalah menambahkan warna latar belakang ke kolom Anda. Untuk baris pertama (atas) tambahkan berikut ini:

Warna Latar Kolom 1: #393e46

Untuk baris kedua, tambahkan berikut ini:

Kolom 1 Warna Latar Belakang: #eeeeee
Warna Latar Belakang Kolom 4: #7971ea
Kolom 5 Warna Latar Belakang: #393e46
Kolom 6 Warna Latar Belakang: #393e46

Dan untuk baris terakhir, tambahkan berikut ini:

Warna Latar Kolom 3: #7971ea
Kolom 6 Warna Latar Belakang: #7971ea

Itu saja untuk desain desktop. Sekarang mari kita pastikan semuanya terlihat bagus di ponsel.

Menyesuaikan Tata Letak untuk Tampilan Smartphone

Saat ini, tata letak saat ini akan terlihat bagus di desktop dan tablet, tetapi margin negatif yang kami tambahkan perlu disesuaikan di ponsel cerdas.

Biasanya, jika saya ingin memperbaiki margin negatif pada smartphone, saya hanya akan mengatur margin kiri menjadi 0% dalam pengaturan modul untuk perangkat smartphone. Namun, masih akan ada penyesuaian yang diperlukan untuk ukuran layar antara lebar 479px dan 767px. Karena itu, cara terbaik untuk memperbaiki margin negatif pada ponsel cerdas adalah melakukannya dengan potongan CSS khusus.

Buka pengaturan halaman dan tambahkan CSS Kustom berikut di bawah Tab Lanjutan:

/** Fixes negative margins on smartphone**/

@media only screen and (max-width: 479px){
.et_pb_module {
    margin-left: 0%!important;
    margin-right: 0%!important;
}
}

Apa yang dilakukan cuplikan CSS ini adalah menyetel margin kanan dan kiri semua modul ke 0% setiap kali ukuran layar sama dengan atau kurang dari lebar 479px. Ini memperbaiki masalah dengan baik!

Sekarang mari kita periksa desain akhir.

Pikiran Akhir

Menggunakan margin negatif untuk memperluas modul dapat menjadi cara yang nyaman untuk mendapatkan desain tata letak yang unik di desktop dan tablet tanpa harus menggunakan sekumpulan CSS untuk mengubah tata letak kolom default Divi. Dan salah satu hal favorit saya tentang teknik desain ini adalah betapa indahnya tampilan tata letak di tablet. Semoga bermanfaat untuk project selanjutnya. Jika ada, selalu membantu untuk mendapatkan pemahaman yang lebih dalam tentang Divi.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!