Ketika membuat gallery foto di DIVI, kita hanya akan mendapatkan settingan standar. Tidak ada settingan untuk mengubah jumlah kolom dari gallery tersebut. Yang kita dapatkan hanyalah 4 kolom untuk tampilan desktop, 3 Kolom untuk tampilan Tablet, dan 1 kolom untuk tampilan ponsel.
Jadi bagaimana bila kita menghendaki kolom yang lebih banyak atau lebih sedikit dari yang tersedia? Berikut tutorial untuk mengubah setting kolom gallery foto di DIVI.
1.Tambahkan modul Gallery foto dan pilih beberapa foto, misal pilih 10 foto.
2.Setting Di pengaturan Modul galeri:
- Tambahkan angka 10 di form Jumlah gambar.
- Elemen tampilkan judul dan keterangan pilih NO (non aktif).
- Pilih menu Lanjutan, isi Kelas CSS= col-width
- Pilih menu desain, klik Sempadan > Lebar Garis Tepi=2, dan Warna Garis Tepi= Putih atau abu.
- Klik simpan perubahan.
3.Klik Pengaturan Baris (area berwarna hijau)
- Klik menu Desain > Pengaturan Ukuran > Menggunakan Custom Selokan Lebar = YA dan Jarak Antarkolom=1
- Klik tombol simpan perubahan
4.Masukkan kode berikut di form CSS Kustom yang berada di dashboard WordPress > DIVI > Opsi Tema.
/** Desktop */
@media (min-width: 981px){ .col-width .et_pb_gallery_item { width: 20% !important; /*5 Kolom*/
clear: none !important;
}
}
/** Tablet */ @media (max-width: 980px){ .col-width .et_pb_gallery_item { width: 33.33% !important; /*3 Kolom*/
clear: none !important;
}
}
/** Small Tablet and Large Phone */ @media (max-width: 767px){ .col-width .et_pb_gallery_item { width: 33.33% !important; /*3 Kolom*/
clear: none !important;
}
}
/** Phone */ @media (max-width: 479px){ .col-width .et_pb_gallery_item { width: 50% !important; /*2 Kolom*/
clear: none !important;
}
}
Anda dapat mengubah jumlah kolom dengan cara mengubah nilai widthnya.
Untuk mengubah jumlah kolom adalah dengan membagi 100% dengan jumlah yang dikehendaki. Misal untuk 5 kolom, nilai widthnya adalah 100%:5= 20%.
Tampilannya akan seperti ini.
Tampilan desktop
Tampilan tablet
Tampilan Ponsel
