Divi Galeri Modülündeki Sütun Sayısını Farklı Kesme Noktalarında Değiştirme

Divi Galeri Modülü, duyarlı bir ızgara düzeninde güzel resim galerisi oluşturmanıza olanak tanır. Galeri, resimlerinizin boyutunu ölçeklendireceği ve ızgaradaki sütun sayısını farklı tarayıcı genişliklerine göre ayarlayacağı için duyarlı olarak kabul edilir.

Varsayılan olarak galeri modülü, ızgaradaki sütun sayısını ayarlayan üç kesme noktasına (belirli tarayıcı genişliklerinde stilin değiştiği noktalar) sahiptir. Resim galerinizi masaüstünde dört sütunda gösterecek ve ardından tablette üç sütuna, küçük tabletlerde (ve büyük telefonlarda) iki sütuna ve telefonlarda bir sütuna bölünecektir.

Bu varsayılan kurulum genellikle çoğu durumda işe yarar, ancak bazen belirli tarayıcı genişliklerinde görüntülenen sütun sayısı üzerinde daha fazla kontrole ihtiyacınız olabilir. Bu nedenle, bu eğitimde size Divi Galeri Modülünde görüntülenen sütun sayısı üzerinden yalnızca masaüstü için değil, aynı zamanda üç ek tarayıcı kesme noktası için de nasıl tamamlayacağınızı göstereceğim.

Gizlice Bakış

İşte bu eğitimde inşa edeceğimiz şeye bir göz atalım. Farklı tarayıcı genişliklerinde resim galerisi için farklı sayıda sütun olduğuna dikkat edin.

Tasarım Öğelerinizi Hazırlama

Youtube Kanalımıza Abone Olun

Bu eğitim için Divi temasının kurulu ve aktif olması gerekir. Resim galerisini oluşturmak için kullanılmak üzere medya kitaplığınıza eklenen 12 resme de ihtiyacınız olacak. Izgara düzeni kullanan bir Divi galeri modülü için, resimlerinizin çoğu masaüstünde ekranı güzel bir şekilde doldurması için ışık kutusu ekranında açılmasını planlıyorsanız, resimlerinizin boyutu 1500 piksele 800 piksel civarında olmalıdır.

Divi Galeri Modülü için Özel Aralığı Uygulama

Yeni Sayfa Ayarlama

Yeni başlayanlar için yeni bir sayfa oluşturun, sayfanıza bir başlık verin ve Divi Builder'ı dağıtın. “Sıfırdan Oluştur” seçeneğini seçin ve ardından sayfanızı yayınlayın. Ardından ön uçta oluşturmak için tıklayın.

Resim Galerisi Oluşturma

Divi Builder dağıtıldığında, devam edin ve tek sütunlu bir satırla yeni bir normal bölüm oluşturun ve satıra bir Divi Galeri Modülü ekleyin.

Divi, galeri modülünü medya galerinizdeki bazı görüntülerle aşağıdaki gibi bir ızgara ekranında dolduracaktır:

Galeri modülü ayarlarında, galeriye 12 resim eklemek için gri artı simgesine tıklayın.

Ardından Divi Galeri Modülü ayarlarını aşağıdaki gibi güncelleyin:

Görüntü Sayısı: 12
Başlığı ve Altyazıyı Göster: HAYIR
Sayfalandırmayı Göster: HAYIR

Oluk Genişliği Olmadan Tam Genişlik Galerisi Oluşturmak için Satır Ayarlarını Yapın

Yeni sütun yapımızın çalışması için asıl yapmamız gereken galerideki resimlerimiz arasında var olan varsayılan boşluk/marjdan kurtulmak. Bunu yapmak için tek yapmamız gereken oluk genişliğini 1 olarak ayarlamaktır. Ayrıca, bir seçenek olarak, resim galerisini tarayıcının tüm genişliğine yaymak için satırı tam genişlikte yapabilirsiniz. Bunu yapmak için satır ayarlarını açın ve aşağıdakileri güncelleyin:

Bu Satırı Tam Genişlikte Yapın: EVET
Oluk Genişliği: 1

Galerideki resimler arasına boşluk eklemek istiyorsanız, oluk genişliğini 1 olarak tutmamız gerektiğinden bu yöntemi kullanmanızı öneririm.

Galeri Varsayılan Olarak Farklı Tarayıcı genişliklerine Nasıl Yanıt Veriyor?

Daha önce belirtildiği gibi, varsayılan olarak, Divi galeri modülü, resim galerinizi masaüstünde dört sütun halinde görüntüler ve ardından tablette üç sütuna, küçük tabletlerde (ve büyük telefonlarda) iki sütuna ve telefonlarda bir sütuna bölünür.

Ancak, bunu birkaç özel CSS parçacığı kullanarak belirli kesme noktalarında özel sayıda sütun içerecek şekilde değiştireceğiz.

Tüm tarayıcı boyutları için belirli sayıda sütun ayarlama

Galeride görüntülenen sütun sayısını, sütun sayısı tüm tarayıcı boyutlarında aynı kalacak şekilde değiştirmek istiyorsanız, bunu yapmanın basit bir yolu vardır. Bu, galerinizi yalnızca bir sütunda, iki sütunda veya üç sütunda görüntülemek istiyorsanız yararlı olabilir. Bu şekilde, sütun numarasını aynı tutarken masaüstünde gerçekten büyük resimlere ve mobil cihazlarda daha küçük resimlere sahip olabilirsiniz. Resimler telefon ekranları için çok küçük olacağından, dört veya daha fazla sütuna sahip olmak muhtemelen çalışmayacaktır.

Tüm tarayıcı boyutlarında üç sütun görüntülemek istediğinizi varsayalım. Bunu yapmak için Divi galeri modülü ayarlarınızı açın ve Galeri Öğesine aşağıdaki özel CSS'yi ekleyin:

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

Artık galeriniz tüm tarayıcı boyutlarında üç sütun yapısını koruyacaktır.

Tüm tarayıcı boyutları için 2 sütunlu bir düzen istiyorsanız, genişlik özelliği değerini %50 olarak değiştirmeniz yeterlidir.

1 sütun düzeni istiyorsanız, genişliği %100 olarak güncellemeniz yeterlidir.

Bu kadar.

Ancak, belirli kesme noktalarındaki sütun sayısı üzerinde daha fazla kontrol sahibi olmak istiyorsanız okumaya devam edin.

Belirli Kesme Noktaları için Sütun Sayısını Değiştirme

Tarayıcı belirli kesme noktalarına ulaştığında görüntülenen sütun sayısı üzerinde tam kontrol sahibi olmak istiyorsanız, belirli tarayıcı genişliklerini hedefleyen medya sorgularıyla birlikte birkaç CSS parçacığı kullanabiliriz.

Divi Galeri Modülüne CSS Sınıfını ekleyin

Özel CSS'yi eklemeden önce, galeri modülümüze özel bir CSS Sınıfı vermemiz gerekiyor, böylece CSS'mizde bu belirli sınıfa başvurabiliriz. Bu, css'imizin yalnızca bu belirli galeri modülüne uygulanmasını sağlayacaktır. Bunu yapmak için galeri modülü ayarlarını açın ve gelişmiş sekmesinin altına aşağıdaki CSS sınıfını ekleyin:

CSS Sınıfı: col-width

Bu makalenin önceki bölümünde Galeri Öğesine eklenen özel css'i eğer eklediyseniz çıkarmayı unutmayın.

Bundan sonra, ayarlarınızı kaydedin.

Özel CSS'yi Sayfa Ayarlarına ekleyin

CSS sınıfınız hazır olduğunda, Özel CSS'yi eklemeye hazırsınız. Sayfanın altındaki sayfa ayarları çubuğundaki dişli simgesine tıklayarak sayfa ayarlarını açın (veya “o” klavye kısayolunu kullanabilirsiniz).

Ardından, gelişmiş sekmesinin altına aşağıdaki Özel CSS'yi ekleyin.

/** 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;
}
}

Bu CSS, belirli kesme noktalarına aşağıdaki gibi özel sayıda sütun ekleyecektir:

Masaüstü: 6 sütun
Tablet: 4 sütun
Küçük Tablet ve Büyük Telefon: 3 sütun
Telefon: 2 sütun

CSS'yi Anlama ve Ayarlama

CSS'ye baktığınızda, dört ayrı medya sorgusuna bölündüğünü fark edeceksiniz. En iyi medya sorgusu, masaüstü tarayıcılara (minimum 981 piksel genişliğe sahip tarayıcılar) stil ekler. İkinci medya sorgusu, tarayıcılara tablet boyutu civarında stil ekler vb.

Her medya sorgusunda, dikkate alınmaması gereken en önemli CSS, width özelliğidir. Bu, her galeri öğesinin boyutunu belirtir ve galeri için sütun genişliğini de belirler.

Örneğin, masaüstü için en çok kullanılan medya sorgusu, galeri öğesinin genişliğini %16,66 olarak ayarlar.

Bu, kabının (veya sırasının) toplam genişliğinin altıda birine eşittir. Bu nedenle, galeri masaüstünde altı sütunlu bir düzen görüntüler.

Masaüstü için sütun sayısını ayarlamak için yapmanız gereken tek şey genişlik özelliğini farklı bir değere değiştirmek. İşte deneyebileceğiniz genişlik yüzdelerinin bir listesi.

12 sütun: %8.33
10 sütun: %10
8 sütun: %12,5
6 sütun: %16,66
5 sütun: %20
4 sütun: %25
3 sütun: %33,33
2 sütun: %50
1 sütun: %100

Son sonuç

İşte farklı tarayıcı genişliklerinde nihai sonuç.

Masaüstü (6 sütun)

Tablet (4 sütun)

Küçük Tablet ve Büyük Telefon (3 sütun)

Telefon (2 sütun)

Son düşünceler

Umarım bu eğitim, galerinizin belirli cihazlarda veya kesme noktalarında görüntülediği sütun sayısı üzerinde daha fazla kontrol sahibi olmak isteyenler için yardımcı olmuştur. Bu kurulumla, kullanıcıyı göz önünde bulundurarak galeri görünümleri oluşturmak için herhangi bir tarayıcı genişliği için istediğiniz sayıda sütun ekleyebilirsiniz.

Özel CSS'de kullandığım kesme noktaları, Divi'nin zaten kullandığı kesme noktalarıdır. Bu konsept hakkında daha fazla bilgi için medya sorgularıyla tasarımlarınıza nasıl ince ayar yapacağınıza ilişkin yazımıza göz atmaktan çekinmeyin.

Bir dahaki sefere kadar, yorumlarda sizden haber almayı dört gözle bekliyorum.

Şerefe!