Farklı kesme noktalarında Divi Galerisi modülündeki sütun sayısını değiştirin
Divi Galeri modülü, duyarlı bir kutu düzeninde güzel bir resim galerisi yapmanızı sağlar. Galeri duyarlı olarak kabul edilir, çünkü görüntünüzün boyutunu canlı ve farklı tarayıcı genişliğine göre ızgaradaki sütun sayısını ayarlayacaktır. Varsayılan olarak, galeri modülünün ızgaradaki sütun sayısını ayarlayan üç kırık noktaya (belirli bir tarayıcı genişliğinde kuvvet değiştiği nokta) vardır. Bu, resim galerinizi masaüstündeki dört sütun halinde görüntüler ve daha sonra tabletteki üç sütuna, küçük bir tablette (ve büyük cep telefonu) iki sütuna ve cep telefonundaki bir sütuna bölünür.
Bu varsayılan ayar genellikle çoğu durumda çalışır, ancak bazen belirli bir tarayıcı genişliğinde görüntülenen sütun sayısı üzerinde daha fazla kontrol gerektirebilirsiniz. Bu nedenle, bu öğreticide, sadece masaüstleri için değil, aynı zamanda üç ek kesme noktası tarayıcısı için Divi Galeri modülünde görüntülenen sütun sayısını nasıl tamamlayacağınızı göstereceğim. Aşağıdaki gizlice göz atma, bu öğreticide yapacağımız bir bakış. Farklı tarayıcı genişliğindeki görüntü galerileri için farklı sütun sayısına dikkat edin.
Bu öğretici için YouTube kanalımıza abone olun, Divi temasını yüklemeniz ve etkinleştirmeniz gerekir. Ayrıca bir resim galerisi oluşturmak için kullanılmak için medya kitaplığınıza eklenen 12 görüntüye de ihtiyacınız var. Kutu düzenini kullanan Divi Galerisi modülü için, LightBox ekranında görüntüyü çoğu masaüstünde iyi karşılayacak şekilde açmayı planlıyorsanız, görüntü boyutunuz 800px civarında 1500 piksel olmalıdır. Divi Galerisi modülü için özel bir Penspasian uygulamak, yeni bir sayfayı bir başlangıç olarak hazırlar, yeni bir sayfa oluşturur, sayfa başlığınızı verin ve Divi Builder’ı uygulayın. “Uyan” 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. Divi Builder’ın hareket ettirilmesi ile resim galerisini yapın, devam edin ve bir sütun satırı ile yeni bir düzenli bölüm oluşturun ve Divi Galerisi modülünü satıra ekleyin.
Divi, Galeri Modülünü Izgara Ekranındaki Medya Galerinizden birkaç resimle dolduracaktır: Galeri modülünü ayarlarken, galeriye 12 resim eklemek için Gray Plus simgesini tıklayın. Ardından Divi Galeri Modülü ayarlarını aşağıdaki gibi güncelleyin: Resim Numarası: 12 Başlık ve Açıklama Göster: Sayma Göster: Hayır Yeni sütun yapımızın çalışması için oluk genişliği olmadan tam geniş bir galeri yapmak için satır ayarlarını ayarlayın, yapmamız gereken en önemli şey galerideki resimlerimiz arasındaki varsayılan alanı/marjı ortadan kaldırmaktır. Bunu yapmak için yapmamız gereken, oluk genişliğini 1 olarak ayarlamaktır. Ayrıca, bir seçenek olarak, görüntü galerisinin tarayıcının tam genişliğine ulaşmasını sağlamak için tam genişlik yapabilirsiniz. Bunu yapmak için, satır ayarlarını açın ve aşağıdakileri güncelleyin: Bu satırı tam genişlik yapın: evet talang genişliği: 1 Galerideki görüntüler arasındaki mesafeyi eklemek istiyorsanız, bu yöntemi kullanmanızı öneririm çünkü oluk genişliğini 1 olarak tutmamız gerekir. Galeri, daha önce belirtildiği gibi tarayıcının farklı genişliğine nasıl tepki verir, varsayılan olarak, divi Galeri modülü, resim galerinizi masaüstünde dört sütun halinde görüntüleyecek ve daha sonra tablette üç sütuna, küçük bir tablette (ve büyük cep telefonu) iki sütuna ve cep telefonundaki bir sütuna bölünecektir.
Ancak, birkaç özel CSS görüntüsünü kullanarak belirli bir kesme noktasındaki özel sütun sayısını ekleyecek şekilde değiştireceğiz. Galeride görüntülenen sütun sayısını değiştirmek istiyorsanız, tüm tarayıcı boyutları için belirli sayıda sütun ayarlayın, böylece sütun sayısı tüm tarayıcı boyutlarında aynı kalır, bunu yapmanın basit bir yolu vardır. Bu, galerinizi yalnızca bir sütun, iki sütun veya üç sütunda görüntülemek istiyorsanız yararlı olabilir. Bu şekilde masaüstünde çok büyük bir görüntüye ve sütun numarasını aynı tutarken cep telefonunda daha küçük görüntülere sahip olabilirsiniz. Dört sütuna veya daha fazlasına sahip olmak çalışmayabilir, çünkü görüntü mobil ekran için çok küçük olacaktı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 ekleyin: Genişlik:%33.33! Önemli; Marj: 0! Önemli;
Temiz: Yok! Önemli;
Şimdi galeriniz tüm tarayıcı boyutlarında üç sütunun yapısını koruyacaktır.
Tüm tarayıcı boyutları için 2 sütun düzeni istiyorsanız, tek yapmanız gereken genişlik özelliği değerini%50 olarak değiştirmek. 1 sütun düzeni istiyorsanız, genişliği%100’e güncellemeniz yeterlidir. İşte burada. Ancak, belirli bir durdurma noktasında sütun sayısı üzerinde daha fazla kontrol almak istiyorsanız, okumaya devam edin. Belirli kesme noktası için sütun sayısını değiştirmek, tarayıcı belirli bir geçici durağa ulaştığında görüntülenen sütun sayısı üzerinde tam kontrol almak istiyorsanız, belirli tarayıcı genişliğini hedefleyen medya sorgularıyla birkaç CSS görüntüsü kullanabiliriz.
CSS sınıfını Divi Galeri modülüne ekleyin Özel CSS eklemeden önce, CSS’imizdeki belirli sınıflara başvurabilmemiz için önce Galeri modülümüzü özel bir CSS sınıfı için vermemiz gerekir. Bu, CSS’mizin yalnızca bu özel 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ındaki aşağıdaki CSS sınıfını ekleyin: CSS Sınıfı: Coljangan Genişliği Bu makalenin önceki bölümünde Galeri öğesine eklenen özel CSS’yi silmeyi unuttum. Bundan sonra ayarlarınızı kaydedin. Bir CSS sınıfınızla sayfa ayarlarına CSS Custom ekleyin, CSS Custom eklemeye hazırsınız. Sayfanın altındaki sayfa ayarlarındaki dişli simgesini tıklayarak sayfa ayarlarını açın (veya klavye kısayolunu “O” kullanabilirsiniz). Ardından Gelişmiş sekmesinin altına aşağıdaki özel CSS ekleyin. /** masaüstü **/ @Media (min-width: 981px) {
.col-width .et_pb_gallery_item { Genişlik:%16.66! Önemli; /*Altı sütun*/
Temiz: Yok! Önemli;
}
}
/** Tablet **/
@Media (Max-Width: 980px) {
.col-width .et_pb_gallery_item {
Genişlik:%25! Önemli; /*Dört sütun*/
Temiz: Yok! Önemli;
}
}
/** Küçük tablet ve büyük telefon **/
@Media (Max-Width: 767px) {
.col-width .et_pb_gallery_item {
Genişlik:%33.33! Önemli; /*Üç sütun*/
Temiz: Yok! Önemli;
}
}
/** Telefon **/
@Media (Max-Width: 479px) {
.col-width .et_pb_gallery_item {
Genişlik:%50! Önemli; /*İki sütun*/
Temiz: Yok! Önemli;
}
}
Bu CSS, özel sütun sayısını belirli bir kesme noktasına aşağıdaki gibi ekleyecektir: Masaüstü: 6 Tablet Sütun: 4 Küçük Tablet Sütun ve Büyük Telefonlar: 3 Telefon Sütunları: 2 Sütun CSS’yi Anlayın ve Ayarla CSS’ye bakın, bunun kırıldığını göreceksiniz Dört medya sorgusuna ayrıldı. Üst medya sorguları, stili masaüstü tarayıcıya (minimum genişliğe sahip tarayıcı) ekler. İkinci medya sorgusu, tarayıcıya bir tabletin boyutu vb. Bu, her galeri öğesinin boyutunu gösterir ve bu da galeri için sütunun genişliğini de düzenler.
Örneğin, masaüstü için en iyi medya sorguları, galeri öğesinin genişliğini%16,66 olarak ayarlar.
Bu, kabın (veya satır) toplam genişliğinin altısına eşdeğerdir. Bu nedenle, galeri masaüstünde altı sütun düzeni gösterecektir.
Masaüstü için sütun sayısını ayarlamak için, tek yapmanız gereken geniş özelliği farklı değerlerle değiştirmek. İşte deneyebileceğiniz geniş bir yüzde listesi. 12 Sütun: 8.33% 10 Sütun:% 10 8 Sütun: 12.5% 6 Sütun: 16.66% 5 Sütun: 20% Sütun: 25% 3 sütun: 33.33% 2 sütun: 50% 1 sütun:% 100 nihai sonuç Farklı bir tarayıcı genişliğinde nihai sonuç aşağıdadır. Masaüstü (6 sütun) Tablet (4 sütun) Küçük tabletler ve büyük cep telefonları (3 sütun)
Telefon (2 sütun)
