Mengubah Jumlah Kolom di Modul Galeri Divi pada Breakpoint yang Berbeda

Modul Galeri Divi memungkinkan Anda membuat galeri gambar yang indah dalam tata letak kotak yang responsif. Galeri dianggap responsif karena akan menskalakan ukuran gambar Anda dan menyesuaikan jumlah kolom dalam kisi sesuai dengan lebar browser yang berbeda.

Secara default, modul galeri memiliki tiga titik putus (titik di mana gaya berubah pada lebar browser tertentu) yang menyesuaikan jumlah kolom dalam kisi. Ini akan menampilkan galeri gambar Anda dalam empat kolom di desktop dan kemudian dipecah menjadi tiga kolom di tablet, dua kolom di tablet kecil (dan ponsel besar), dan satu kolom di ponsel.

Pengaturan default ini biasanya akan berfungsi untuk sebagian besar kasus, tetapi terkadang Anda mungkin memerlukan kontrol lebih besar atas jumlah kolom yang ditampilkan pada lebar browser tertentu. Itu sebabnya dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana menyelesaikan jumlah kolom yang ditampilkan di Modul Galeri Divi tidak hanya untuk desktop, tetapi juga untuk tiga breakpoint browser tambahan.

Sneak Peek

Berikut adalah sneak peek dari apa yang akan kita buat dalam tutorial ini. Perhatikan jumlah kolom yang berbeda untuk galeri gambar pada lebar browser yang berbeda.

Mempersiapkan Elemen Desain Anda

Berlangganan Saluran Youtube Kami

Untuk tutorial ini, Anda perlu menginstal dan mengaktifkan tema Divi. Anda juga memerlukan 12 gambar yang ditambahkan ke perpustakaan media Anda untuk digunakan membangun galeri gambar. Untuk modul galeri Divi yang menggunakan tata letak kotak, ukuran gambar Anda harus sekitar 1500px kali 800px jika Anda berencana untuk membuka gambar di tampilan lightbox sehingga memenuhi layar dengan baik di sebagian besar desktop.

Menerapkan Penspasian Kustom untuk Modul Galeri Divi

Menyiapkan Halaman Baru

Sebagai permulaan, buat halaman baru, beri judul halaman Anda, dan terapkan Divi Builder. Pilih opsi "Bangun dari Awal" dan kemudian publikasikan halaman Anda. Kemudian klik untuk membangun di ujung depan.

Membuat Galeri Gambar

Dengan Divi Builder dikerahkan, lanjutkan dan buat bagian reguler baru dengan baris satu kolom dan tambahkan Modul Galeri Divi ke baris.

Divi akan mengisi modul galeri dengan beberapa gambar dari galeri media Anda dalam tampilan grid seperti berikut:

Dalam pengaturan modul galeri, klik ikon plus abu-abu untuk menambahkan 12 gambar ke galeri.

Kemudian perbarui pengaturan Modul Galeri Divi sebagai berikut:

Nomor Gambar: 12
Tampilkan Judul dan Keterangan: TIDAK
Tampilkan Pagination: TIDAK

Sesuaikan Pengaturan Baris untuk Membuat Galeri Lebar Penuh tanpa Lebar Talang

Agar struktur kolom baru kita berfungsi, hal utama yang perlu kita lakukan adalah menghilangkan spasi/margin default yang ada di antara gambar-gambar kita di galeri. Untuk melakukan ini, yang perlu kita lakukan adalah mengatur lebar talang ke 1. Juga, sebagai opsi, Anda dapat membuat baris dengan lebar penuh untuk membuat galeri gambar menjangkau lebar penuh browser. Untuk melakukannya, buka pengaturan baris dan perbarui yang berikut ini:

Jadikan Baris Ini Lebar Penuh: YA
Lebar Talang: 1

Jika Anda ingin menambahkan jarak antar gambar di galeri, saya sarankan menggunakan metode ini karena kita perlu menjaga lebar talang tetap ke 1.

Bagaimana Galeri Merespons Lebar Peramban yang Berbeda secara Default

Seperti disebutkan sebelumnya, secara default, modul galeri Divi akan menampilkan galeri gambar Anda dalam empat kolom di desktop dan kemudian dipecah menjadi tiga kolom di tablet, dua kolom di tablet kecil (dan ponsel besar), dan satu kolom di ponsel.

Namun, kami akan mengubahnya untuk menyertakan jumlah kolom khusus pada breakpoint tertentu menggunakan beberapa cuplikan CSS khusus.

Mengatur jumlah kolom tertentu untuk semua ukuran browser

Jika Anda ingin mengubah jumlah kolom yang ditampilkan di galeri sehingga jumlah kolom tetap sama di semua ukuran browser, ada cara sederhana untuk melakukannya. Ini mungkin berguna jika Anda hanya ingin menampilkan galeri Anda dalam satu kolom, dua kolom, atau tiga kolom. Dengan begitu Anda dapat memiliki gambar yang sangat besar di desktop dan gambar yang lebih kecil di ponsel sambil menjaga nomor kolom tetap sama. Memiliki empat kolom atau lebih mungkin tidak akan berfungsi karena gambar akan terlalu kecil untuk tampilan ponsel.

Katakanlah Anda ingin menampilkan tiga kolom pada semua ukuran browser. Untuk melakukan ini, buka pengaturan modul galeri Divi Anda dan tambahkan CSS khusus berikut ke Item Galeri:

width: 33.33% !important;
margin: 0 !important;
clear: none !important;

Sekarang galeri Anda akan mempertahankan struktur tiga kolom pada semua ukuran browser.

Jika Anda menginginkan tata letak 2 kolom untuk semua ukuran browser, yang perlu Anda lakukan hanyalah mengubah nilai properti lebar menjadi 50%.

Jika Anda menginginkan tata letak 1 kolom, cukup perbarui lebarnya menjadi 100%.

Itu dia.

Namun, jika Anda ingin mendapatkan lebih banyak kontrol atas jumlah kolom pada titik henti tertentu, baca terus.

Mengubah Jumlah Kolom untuk Breakpoint Tertentu

Jika Anda ingin mendapatkan kontrol penuh atas jumlah kolom yang ditampilkan saat browser mencapai titik henti sementara tertentu, kita dapat menggunakan beberapa cuplikan CSS dengan kueri media yang menargetkan lebar browser tertentu.

Tambahkan Kelas CSS ke Modul Galeri Divi

Sebelum kita menambahkan CSS khusus, pertama-tama kita perlu memberi modul galeri kita sebuah Kelas CSS khusus sehingga kita dapat mereferensikan kelas tertentu itu di CSS kita. Ini akan memastikan css kami hanya diterapkan ke modul galeri khusus ini. Untuk melakukan ini, buka pengaturan modul galeri dan tambahkan kelas CSS berikut di bawah tab lanjutan:

Kelas CSS: lebar col

Jangan lupa untuk menghapus css khusus yang ditambahkan ke Item Galeri di bagian sebelumnya dari artikel ini jika Anda menambahkannya.

Setelah itu, simpan pengaturan Anda.

Tambahkan CSS Kustom ke Pengaturan Halaman

Dengan Anda memiliki kelas CSS, Anda siap untuk menambahkan CSS Kustom. Buka pengaturan halaman dengan mengklik ikon roda gigi di bilah pengaturan halaman di bagian bawah halaman (atau Anda dapat menggunakan pintasan keyboard “o”).

Kemudian tambahkan CSS Kustom berikut di bawah tab lanjutan.

/** Desktop **/
@media (min-width: 981px){
.col-width .et_pb_gallery_item {
width: 16.66% !important; /*six columns*/
clear: none !important;
}
}

/** Tablet **/
@media (max-width: 980px){
.col-width .et_pb_gallery_item {
width: 25% !important; /*four columns*/
clear: none !important;
}
}

/** Small Tablet and Large Phone **/
@media (max-width: 767px){
.col-width .et_pb_gallery_item {
width: 33.33% !important; /*three columns*/
clear: none !important;
}
}

/** Phone **/
@media (max-width: 479px){
.col-width .et_pb_gallery_item {
width: 50% !important; /*two columns*/
clear: none !important;
}
}

CSS ini akan menambahkan jumlah kolom khusus ke breakpoint tertentu sebagai berikut:

Desktop: 6 kolom
Tablet: 4 kolom
Tablet Kecil dan Telepon Besar: 3 kolom
Telepon: 2 kolom

Memahami dan Menyesuaikan CSS

Melihat CSS, Anda akan melihat bahwa itu dipecah menjadi empat kueri media terpisah. Kueri media teratas menambahkan gaya ke browser desktop (browser dengan lebar minimum 981 piksel). Kueri media kedua menambahkan gaya ke browser seukuran tablet, dan seterusnya.

Dalam setiap kueri media, CSS yang paling penting untuk tidak diambil adalah properti lebar. Ini menunjukkan ukuran setiap item galeri dan yang juga mengatur lebar kolom untuk galeri.

Misalnya, kueri media teratas untuk desktop menyetel lebar item galeri menjadi 16,66%.

Ini setara dengan seperenam dari total lebar wadah (atau barisnya). Oleh karena itu, galeri akan menampilkan tata letak enam kolom di desktop.

Untuk menyesuaikan jumlah kolom untuk desktop, yang perlu Anda lakukan hanyalah mengubah properti lebar ke nilai yang berbeda. Berikut adalah daftar persentase lebar yang dapat Anda coba.

12 kolom: 8,33%
10 kolom: 10%
8 kolom: 12,5%
6 kolom: 16,66%
5 kolom: 20%
4 kolom: 25%
3 kolom: 33,33%
2 kolom: 50%
1 kolom: 100%

Hasil Akhir

Berikut adalah hasil akhir pada lebar browser yang berbeda.

Desktop (6 kolom)

Tablet (4 kolom)

Tablet Kecil dan Ponsel Besar (3 kolom)

Telepon (2 kolom)

Pikiran Akhir

Saya harap tutorial ini bermanfaat bagi Anda yang ingin mendapatkan kontrol lebih besar atas jumlah kolom yang ditampilkan galeri Anda pada perangkat atau breakpoint tertentu. Dengan pengaturan ini, Anda dapat menambahkan sejumlah kolom yang Anda inginkan untuk lebar browser apa pun untuk membuat tampilan galeri dengan mempertimbangkan pengguna.

Breakpoint yang saya gunakan di CSS khusus adalah breakpoint yang sudah digunakan Divi. Jangan ragu untuk melihat posting kami tentang cara menyempurnakan desain Anda dengan kueri media untuk informasi lebih lanjut tentang konsep ini.

Sampai waktu berikutnya, saya berharap untuk mendengar dari Anda di komentar.

Bersulang!