R34: CARA MENGGUNAKAN CSS GRID DENGAN MODUL UMPAN DIVI
Minggu lalu saya menunjukkan kepada Anda bagaimana cara menggunakan Grid CSS di Divi untuk menampilkan modul dalam jumlah kolom dan / atau baris dan dalam urutan apa pun, terlepas dari bagaimana Anda mengaturnya di backend.
Metode ini bekerja sangat baik untuk modul item tunggal seperti gambar, uraian dan CTA. Tetapi bagaimana dengan ketika Anda ingin menggunakan modul umpan Divi seperti blog, galeri dan portofolio? Ketika modul-modul ini menarik konten mereka dari posting, perpustakaan media dan proyek-proyek, mereka memerlukan pendekatan yang sedikit berbeda.
Hari ini saya akan menunjukkan kepada Anda bagaimana menggunakan CSS Grid dengan modul feed Divi sehingga Anda dapat menampilkan blog, galeri, dan item portofolio Anda dalam sejumlah kolom dengan CSS yang sangat minim.
Jadi mari kita memasak!
BAHAN
Tema anak aktif. Anda dapat menambahkan CSS ke Opsi Tema Divi tetapi tidak terlalu menyenangkan mengeditnya di sana!
WAKTUNYA MEMASAK
Ini seharusnya hanya memakan waktu sekitar 5 menit per modul.
PERSIAPAN
Untuk persiapan, saya sangat merekomendasikan pertama membaca posting ini tentang cara menggunakan css grid di Divi untuk tinjauan umum tentang cara kerja fitur CSS baru ini. Resep ini akan jauh lebih masuk akal begitu Anda memiliki pemahaman dasar tentang apa itu Grid
SUKA KONTEN GRATIS KAMI? MAKA ANDA AKAN MENYUKAI KLUB EKSKLUSIF KAMI!
Kevi Academy Membership memberi Anda akses eksklusif ke lebih dari 110 sumber daya, termasuk tema anak, tata letak, lembar contekan, tutorial, pelatihan langsung, dan tunjangan anggota. Dan konten baru ditambahkan SETIAP Senin!
METODE
Kami akan mulai dengan modul Blog. Ini mungkin yang paling banyak digunakan dari semua modul umpan dan saya sering melihat pertanyaan tentang mengubah jumlah kolom yang ditampilkan, terutama ketika digunakan pada halaman dengan sidebar.
Secara default modul blog Divi, atur ke kisi, akan menampilkan posting Anda dalam 3 kolom pada halaman fullwidth, dan 2 kolom saat menggunakan bilah sisi. Ini tidak selalu tata letak yang Anda inginkan, kadang-kadang Anda ingin mempertahankan 3 kolom saat menggunakan bilah sisi, atau menampilkan 4 atau 5 kolom saat menggunakan halaman bandwidth penuh.
Mari kita mewujudkannya 
Tambahkan bagian baru ke halaman Anda dengan satu kolom dan tambahkan modul blog .
Buka pengaturan modul blog dan di tab Advanced , berikan modul Kelas CSS dari ds-grid-blog
Selanjutnya, pada tab Desain , pastikan Layout diatur ke Fullwidth .
Kemudian klik pada tab Konten dan atur Nomor Posting ke jumlah kolom yang ingin Anda tampilkan. Saya menggunakan 5 dalam contoh ini.
Sesuaikan pengaturan yang tersisa sesuai keinginan Anda (kategori, meta dll.) Lalu Simpan & Keluar .
Alasan kami memilih bandwidth penuh daripada kisi untuk tata letak blog adalah karena ketika kami memilih kisi, Divi menambahkan kolom, dan kami tidak menginginkannya, kami akan melakukannya sendiri dengan sedikit CSS.
Sekarang mari kita tambahkan CSS untuk membuat tata letak blog fullwidth menjadi kolom.
Baru-baru ini, Tema Elegan menambahkan fungsionalitas Ajax ke modul blog. Dalam melakukan ini mereka membuat 'wadah' baru untuk posting, dan wadah ini adalah apa yang akan kami targetkan untuk membuat kolom kami.
- .ds-grid-blog .et_pb_ajax_pagination_container {
- tampilan : kotak ;
- grid-templat-kolom : repeat ( 5 , 18% ) ;
- grid-kolom-gap : 2. 5% ;
- }
Pertama kita mengatur wadah untuk ditampilkan sebagai kisi, lalu kita mengatur jumlah kolom. Saya menjelaskan tentang properti grid-template-kolom dalam resep saya sebelumnya. Kami menggunakannya lagi di sini untuk mengatur jumlah kolom menjadi 5 dan lebar setiap kolom 18%.
Kami juga memperkenalkan properti baru; grid-kolom-gap. Apa yang dilakukan properti ini adalah menambahkan spasi di antara kolom kami sehingga tidak saling bertabrakan. Jika Anda tidak ingin ada spasi, tinggalkan properti ini. Ini bisa terlihat bagus ketika membuat galeri seperti yang Anda lihat dari demo saya , tetapi ketika menggunakan modul dengan konten teks, Anda mungkin ingin spasi.
Saya pikir hal yang paling berguna tentang properti ini adalah tidak menambahkan spasi sebelum item pertama atau setelah item terakhir. Ini cerdas, dan hanya menambahkan jarak antar kolom.
Begini Cara kerjanya:
Kami memiliki 5 kolom jadi:
100/5 = 20
Itu berarti kita perlu mengatur lebar kolom kita menjadi 20%. Namun, jika kami juga menambahkan spasi, konten kami akan lebih luas dari wadah kami. Jadi diperlukan sedikit matematika, yang kita butuhkan adalah ini:
100 - (jarak kolom x 4) / 5
Jika kita memiliki 5 kolom, itu sama dengan 4 celah kolom (ruang antara setiap kolom), dan kita perlu mengurangi lebar total celah itu sebelum kita mengatur lebar kolom kita.
Jadi berdasarkan 5 kolom dengan celah kolom 2,5%, kami mendapatkan ini:
100 - (2,5 x 4) / 5 = 18
Jadi lebar kolom kami adalah 18%. Ini berarti kita mendapatkan spasi yang bagus, tetapi modul blog kita masih mencakup lebar penuh kontainer.
Dan itu saja. Jika Anda tidak mengaktifkan pagination maka Anda hanya akan mendapatkan tata letak 5 kolom yang bagus. Namun, jika Anda ingin pagination untuk menggunakan fungsionalitas Ajax baru seperti yang saya miliki dalam demo saya, kami membutuhkan satu cuplikan tambahan.
Anda mungkin akan melihat ketika Anda sampai di akhir posting Anda, tautan 'Entri Berikutnya' telah bergerak dan duduk di sebelah posting terakhir Anda dan bukan di kanan bawah modul.
Inilah cara kami memperbaikinya:
- .ds-grid-blog .pagination {
- jelas : keduanya ;
- posisi : absolut ;
- bawah : 0 ;
- kiri : 0 ;
- kanan : 0 ;
- display : blok ;
- }
Kami pada dasarnya hanya mengatur posisi pagination ke 'absolut' sehingga kami dapat memindahkan tautan kembali ke bagian bawah wadah blog.
Jika Anda ingin menggunakan ini pada halaman yang memiliki sidebar, tidak ada lagi yang perlu Anda lakukan. Blog Anda masih akan menampilkan 5 kolom, hanya terbatas di area kiri halaman. Anda dapat melihat contohnya di sini . Itu CSS yang sama persis tapi saya telah mematikan pagination dan mengatur modul blog untuk menampilkan 10 posting sebagai gantinya 5
Selanjutnya, mari kita lihat modul Portofolio.
Buat bagian baru dengan satu kolom dan kemudian tambahkan modul Portofolio .
Buka modul pengaturan dan dalam lanjutan tab menambahkan Kelas CSS dari ds-grid-portofolio
Selanjutnya, pada tab Desain , pastikan Layout diatur ke Fullwidth .
Dan terakhir di tab Konten , atur Nomor Posting ke jumlah kolom yang ingin Anda tampilkan. Saya menggunakan 6 dalam contoh ini. Lalu Simpan & Keluar.
Tentu saja Anda dapat menyesuaikan kategori, meta, dan pengaturan lainnya sesuai keinginan.
Seperti halnya modul Blog, Portofolio sekarang memiliki fungsi Ajax sehingga Anda dapat mengaktifkan pagination dalam pengaturan Konten agar modul Anda ditampilkan dalam 6 kolom tetapi dengan tautan ke proyek sebelumnya dan berikutnya seperti yang telah saya lakukan di sini .
Modul CSS untuk Portofolio kami sangat mirip dengan modul Blog.
- .ds-grid-portfolio .et_pb_ajax_pagination_container {
- tampilan : kotak ;
- grid-template-kolom : repeat ( 6 , 15% ) ;
- grid-kolom-gap : 2% ;
- padding-bottom : 50px ;
- }
- .ds-grid-portfolio .pagination {
- jelas : keduanya ;
- posisi : absolut ;
- bawah : 0 ;
- kiri : 0 ;
- kanan : 0 ;
- display : blok ;
- }
Kami menggunakan wadah Ajax Portofolio untuk mengatur modul kami agar ditampilkan sebagai kisi, memiliki 6 kolom dengan lebar 15% dengan celah kolom 2%
Matematika yang sama berlaku:
100– (2 x 5) / 6 = 15.
Selain itu, kami telah menambahkan padding bawah 50px, ini hanya untuk memindahkan pagination sedikit sehingga kurang sempit.
Deklarasi kedua sama dengan yang kita gunakan untuk modul blog untuk memposisikan tautan pagination kita.
Dan itu untuk modul Portofolio. Mari kita lihat modul Portable Filterable.
Atur dengan cara yang persis sama seperti yang Anda lakukan pada modul Portofolio standar tetapi berikan Kelas CSS pada ds-grid-portfolio-filter
Maka satu-satunya CSS yang Anda butuhkan adalah ini:
- .ds-grid-portfolio-filter .et_pb_portfolio_items {
- tampilan : kotak ;
- grid-template-kolom : repeat ( 6 , 15% ) ;
- grid-kolom-gap : 2% ;
- }
Pagination untuk Portofolio Filterable berbeda dengan Portofolio standar, dan berfungsi dengan baik tanpa penyesuaian. Lihatlah di sini .
Terakhir, modul Galeri.
Saya sering melihat orang-orang bertanya bagaimana mengubah jumlah kolom di galeri mereka dan saya telah menunjukkan cara lain untuk melakukan ini menggunakan properti penghitungan kolom, dan menampilkannya dalam tata letak batu di klub keanggotaan saya di Divi Academy .
Tapi mari kita lakukan ini menggunakan Grid.
Tambahkan bagian baru dengan satu kolom dan kemudian tambahkan modul Galeri .
Buka pengaturan modul dan di tab Advanced , tambahkan Kelas CSS dari ds-grid-gallery
Pada tab Desain pastikan Layout diatur ke Grid (tidak ada opsi bandwidth penuh di sini tapi kami tidak ingin menggunakan slider).
Kemudian di tab Konten atur jumlah gambar yang ingin Anda tampilkan dan klik Perbarui Galeri untuk menambahkan gambar Anda melalui perpustakaan media.
Nilai Nomor Gambar tidak harus sama dengan jumlah kolom yang ingin Anda tampilkan, kecuali tentu saja Anda hanya ingin menampilkan satu baris gambar. Anda dapat mengatur angka apa pun dan Grid hanya akan menambahkan lebih banyak baris sampai menampilkan semua gambar Anda. Anda juga dapat mengaktifkan pagination jika diinginkan.
Ada satu penyesuaian opsional akhir. Jika Anda ingin galeri gutterless seperti demo saya, kemudian membuka R ow pengaturan dan pastikan Membuat Row ini Fullwidth dan Gunakan Custom Talang Lebar ditetapkan untuk Ya dan Talang Lebar diatur ke 1 . Lalu Simpan & Keluar .
Seperti halnya modul kami yang lain, CSS-nya sangat minim:
- .ds-grid-gallery .et_pb_gallery_items {
- tampilan : kotak ;
- grid-template-kolom : ulangi ( 8 , 12. 5% ) ;
- }
- .ds-grid-gallery .et_pb_gallery_item {
- lebar : 100% ! penting ;
- margin : 0 ! penting ;
- }
Kami mengatur wadah untuk ditampilkan sebagai kisi dan kemudian menambahkan kolom kami. Untuk galeri saya telah menggunakan 8 kolom dengan lebar 12,5% (100/8).
Karena saya ingin galeri tanpa saluran, saya belum menambahkan properti kotak-kolom-celah, tetapi Anda dapat menambahkan ini jika Anda ingin spasi dan menggunakan perhitungan yang disebutkan sebelumnya untuk mengatur lebar celah dan menyesuaikan lebar kolom sesuai.
Deklarasi kedua memastikan gambar galeri kami menjangkau seluruh lebar kolomnya. Saya telah menghapus margin pada item galeri di sini sehingga tidak ada ruang di antara baris, tetapi jika Anda tidak merancang galeri tanpa talang, Anda ingin mengubahnya untuk menambahkan margin bawah ke gambar Anda.
Dan itu saja untuk Galeri!
Bagaimana dengan daya tanggap?
Ini sedikit berbeda dengan modul feed. Karena mereka membutuhkan nilai untuk memberi tahu mereka berapa banyak item untuk ditampilkan per halaman kami memiliki dua opsi:
Jika Anda senang baris ditumpuk di layar yang lebih kecil, jadi misalnya modul blog yang menampilkan 6 posting dalam satu baris di desktop, akan menampilkan 2 baris dari 3 posting di tablet, maka Anda hanya perlu menambahkan kueri media.
Namun, jika Anda ingin membatasi jumlah posting yang ditampilkan pada 3 di tablet, jadi hanya satu baris yang ditampilkan, Anda akan ingin menduplikasi modul Anda, memberikannya Kelas CSS baru, menyesuaikan jumlah posting untuk ditampilkan, dan kemudian atur masing-masing modul tersebut untuk ditampilkan atau disembunyikan. Anda kemudian ingin membuat deklarasi CSS baru dengan Kelas CSS baru dan mengatur jumlah kolom dan lebar kolom untuk ukuran perangkat tersebut.
Untuk mempermudah, kami akan menampilkan jumlah item yang sama di tablet dan seluler, hanya di lebih banyak baris.
Beralih di bawah ini memiliki semua CSS yang Anda butuhkan untuk contoh saya, dipecah menjadi bagian-bagian terpisah untuk setiap jenis modul.
KUERI MEDIA
Yang kami lakukan di sini adalah mendefinisikan kembali kolom dan celah kolom di berbagai breakpoints. Anda dapat mengubah breakpoints dan bahkan menambahkan lebih banyak, misalnya untuk laptop kecil (sekitar 1280px).
Satu-satunya pernyataan tambahan dalam kueri media adalah untuk modul Galeri. Kita perlu mengganti tata letak 3 kolom yang Divi berlaku untuk tablet karena ini akan mengatur gambar kita untuk ditampilkan pada 1/3 dari lebar kolom, jadi kami hanya memastikan mereka tetap pada lebar 100% dengan menambahkan:
- .et_pb_gutters1 .ds-grid-gallery .et_pb_grid_item: nth-child (n) {
- lebar : 100% ! penting ;
- }
Dan itu dia!
Seperti yang saya jelaskan dalam resep minggu lalu, IE & Edge tidak mendukung sepenuhnya CSS Grid, jadi Anda juga ingin melihat bagian ini untuk apa yang harus dilakukan sebagai cadangan.
Jika Anda merasa ini membantu, silakan tinggalkan komentar dan berlangganan buletin saya untuk semua konten terkait Divi terbaru saya.
Michelle X
EmoticonEmoticon