Baris bersarang vs bagian khusus di Divi 5 (dan mengapa kami mencela mereka)

Divi telah lama menjadi pembangkit tenaga listrik untuk membangun situs web yang indah. Bagian khusus yang diperluas kemampuan tata letak Divi selama bertahun -tahun dengan memungkinkan struktur kolom bersarang yang kompleks yang tidak dapat ditangani oleh bagian reguler. Tetapi pendekatan ini datang dengan kompleksitas dan keterbatasannya, terikat dalam pada kerangka kerja kode pendek Divi.

Sekarang, Divi 5 dilengkapi dengan baris bersarang - fitur asli yang memungkinkan Anda menempatkan baris di dalam kolom di mana saja, dalam bagian reguler. Fitur ini menghilangkan kendala sebelumnya dan menyatukan bangunan tata letak di bawah satu jenis bagian yang fleksibel. Dengan baris bersarang, Anda dapat membangun kompleks yang sama, tata letak asimetris yang diizinkan oleh bagian khusus, tetapi lebih intuitif.

Dalam posting ini, kita akan membahas perpindahan dari bagian khusus dan bagaimana baris bersarang dan sistem tata letak yang didesain ulang Divi 5 memberikan cara yang lebih baik untuk membuat tata letak yang kompleks. Masa depan Divi ada di sini, dan lebih sederhana, lebih fleksibel, dan dibangun untuk kreativitas tanpa batas.

Berlangganan saluran YouTube kami

Divi 5 siap digunakan di situs web baru hari ini.

Retrospektif bagian khusus

Bagian khusus diperkenalkan di Divi (2014) untuk mengatasi keterbatasan bagian reguler. Mereka memungkinkan untuk struktur kolom yang lebih kompleks, termasuk sidebar dan tata letak asimetris, yang tidak mungkin dengan bagian biasa.

Kerangka kerja berbasis kode pendek Divi pada dasarnya kompleksitas tata letak yang terbatas dengan membatasi kedalaman bersarang dan memperkenalkan hambatan kinerja. Tata letak bersarang yang kompleks sulit dibangun dan rentan terhadap masalah, sehingga tidak mungkin sampai bagian khusus.

Namun, mereka memperkenalkan kompleksitas tambahan karena bagian khusus adalah hal mereka sendiri (perhatikan opsi kolom tambahan dan opsi CSS untuk bagian ini). Ini tidak buruk, tetapi mereka benar -benar berperilaku berbeda dari bagian, baris, dan kolom biasa.

Bagian khusus menambahkan bidang tambahan dan bidang kelas CSS/ID yang diperlukan tetapi tidak sesuai dengan opsi pembangun lainnya.

Bagian khusus memungkinkan struktur kolom bersarang semu dengan menekuk aturan kode pendek, menciptakan apa yang tidak mungkin terjadi di bagian reguler.

Bukankah lebih baik jika bagian biasa cukup kuat untuk melakukan apa yang Anda butuhkan?

Baris bersarang dan cara yang lebih baik untuk membangun halaman

Dengan Divi 5, baris bersarang secara resmi memungkinkan menempatkan baris (dan kolom mereka) di dalam baris dan kolom lainnya. Ini berarti Anda dapat membuat tata letak yang sangat bersarang dengan kolom dan baris yang tidak terbatas satu sama lain. Ini menghilangkan kebutuhan untuk bagian khusus.

Fitur baru ini juga menambahkan opsi ukuran ke kolom, yang berarti ada cara yang konsisten untuk ukuran dan gaya semua elemen kontainer.

Cara dengan mudah menciptakan kembali bagian khusus dengan baris bersarang

Paket tata letak penyewaan skuter (khususnya bagian pahlawan beranda) menggunakan bagian khusus untuk memposisikan elemen -elemen kunci. Namun, alih -alih menggunakan bagian khusus dengan pengaturan yang unik, kami akan menggunakan baris bersarang untuk mencapai efek yang sama.

CATATAN: Divi 5 saat ini memiliki bagian khusus, tetapi pada akhirnya akan sudah usang (tetapi mereka masih akan bekerja dan dapat didiupkan pada halaman di mana mereka saat ini ada).

Tambahkan bagian standar ke halaman Anda dan atur warna latar belakang menjadi hitam (jika Anda mengimpor tata letak ke halaman Anda, Anda memiliki gambar lingkaran titik untuk digunakan sebagai gambar latar belakang dengan posisi tengah atas dan ukuran aktual).

Atur lebar bagian dan lebar maks ke 100%.

Pastikan baris di dalam bagian memiliki struktur dua kolom dan split 3/5 + 2/5. Juga, atur lebar baris dan lebar maks menjadi 100%.

Jika Anda ingin menggunakan fitur baru lainnya, tambahkan hanya satu kolom dengan dua grup modul di dalamnya. Anda akan menggunakan opsi ukuran untuk grup alih -alih mengandalkan struktur kolom default Divi.

Kolom kiri akan menampung sisi yang lebih rumit (dalam hal modul), dan kolom kanan akan menampung gambar unggulan besar.

Kami akan menambahkan semua modul kami untuk merasakan tata letak. Itu termasuk heading atau modul teks terlebih dahulu, kemudian baris bersarang (dua kolom dengan lebar yang sama), modul gambar di kolom kiri, dan modul teks dan modul tombol di kolom kanan. Cadangkan ke baris induk, di kolom kanan, tambahkan satu modul gambar.

Kami hanya akan mereplikasi jarak/ukuran di desktop untuk menggambarkan bagaimana kami dapat menciptakan kembali bagian khusus menggunakan baris bersarang. Silakan dan tambahkan konten dan gambar (sekali lagi, gambar tersedia saat mengimpor tata letak ke halaman di situs Anda). Anda juga dapat memodifikasi teks dan gaya warna yang sesuai dengan yang Anda inginkan. Gambar utama di kolom kanan harus diterapkan sebagai gambar latar belakang, dan modul gambar dengan gambar aksen yang akan kita dapatkan nanti.

Untuk kolom kiri baris langsung di bawah bagian, tambahkan ~ 10% padding kiri ke luar angkasa dari sisi kiri (melakukannya dengan cara ini berarti Anda perlu mengubah ukuran hal -hal untuk setiap breakpoint).

Sekarang, buka pengaturan kolom kanan langsung di bawah baris induk. Gunakan gambar latar belakang kolom.

Modul gambar di dalam kolom ini harus memiliki filter> campuran> overlay yang diatur ke sana. Dalam posisi lanjutan>, gambar benar -benar diposisikan dan berlabuh ke kiri bawah.

Dan itu hampir untuk rekreasi bagian khusus (di desktop). Karena kami menggunakan struktur kolom preset (kolom 3/5 + 2/5), Divi memiliki beberapa ukuran dan posisi default di berbagai breakpoint yang perlu ditangani. Anda dapat menghindari ini dengan menggunakan kolom induk tunggal tetapi grup modul untuk menahan konten untuk sisi kiri dan kanan bagian ini.

Tetapi setidaknya pada titik ini, Anda tahu bahwa dimungkinkan untuk bersarang dan menciptakan kembali bagian khusus.

Melangkah ke masa depan yang baru

Divi 5 dekat dengan rilis beta, tetapi kami telah melakukan upaya signifikan untuk merombak sistem desain Divi.

• Flexbox Layouts (segera hadir) : Akan menawarkan lebih banyak kontrol atas penyelarasan dan distribusi ruang dalam baris.
• Baris bersarang : bersarang tanpa akhir dari struktur baris dan kolom untuk menciptakan sedikit kompleksitas dengan sistem baris berbasis float asli.
• Ukuran kolom lanjutan : Menambahkan kontrol ukuran yang hilang untuk lebar dan ketinggian kolom.
• Grup Modul : Memungkinkan pengelompokan modul untuk manajemen dan gaya yang lebih mudah.
• Variabel Desain : Menentukan dan menggunakan kembali variabel global (warna, font, jarak, gambar, teks) di semua elemen dan bidang.
• Warna relatif dengan HSL (segera hadir) : Kontrol warna yang dinamis dan konsisten berdasarkan rona, saturasi, dan cahaya.

Fitur -fitur ini semua adalah bagian dari reinvention Divi dan sangat penting untuk comeback -nya. Kami membuktikan bahwa yayasan yang kami bangun selama dua tahun terakhir sangat berharga. Kami dapat membangun fitur yang tidak mungkin pada D4, dan kami membuat masing -masing dalam hitungan minggu.

Divi 5 siap digunakan di situs web baru hari ini.

Unduh Divi 5Learn Lainnya Tentang Divi 5