Divi Galeri Modülü ile Tam Genişlikte Bir Resim Galerisi Nasıl Oluşturulur

Tam Genişlikli Resim Galerileri bir web sitesinde her zaman harika görünür. Tam genişlikte bir galeri, tarayıcı penceresinin tüm genişliğini kapsar. Bu ekstra alan, görüntülerin kullanıcı deneyimi için harika olan daha büyük bir boyutta kalmasını sağlar. Izgara düzeni, görüntüleri tüm tarayıcı genişliklerinde güzelce ayarlanacak sütunlar halinde organize eden estetik bir tasarım sağlar.

Bu derste size Divi Galeri Modülü ile Tam Genişlikli Resim Galerisi oluşturmayı göstereceğim. Divi'de bunu yapmanın ne kadar kolay olduğuna şaşırabilirsiniz. Ayrıca, mobil cihazlarda tam genişlikli galeriniz üzerinde size daha fazla kontrol sağlamak için özel boşlukları kullanmanın birkaç yolundan bahsedeceğim.

Başlayalım.

Öncesi ve Sonrası

İşte 12 resimli varsayılan Divi Galeri Modülü.

İşte kolayca oluşturabileceğiniz tam genişlikte bir örnek resim galerisi.

Tasarım Öğelerinizi Hazırlama

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.

Bu eğitim için, Divi Builder'da ücretsiz olarak sunulan Restoran Galeri Sayfası hazır düzenindeki görüntüleri kullanacağım. Tüm görselleri bu yazının altından indirebilirsiniz.

Tam Genişlik Divi Galeri Modülünü Uygulama

Youtube Kanalımıza Abone Olun

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:

Divi 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

Resim Galerisi için Tam Genişlik Düzeni Oluşturma

Resim galerisi için tam genişlikte mizanpaj oluşturmak için şimdilik galeri ayarlarımızı kaydedelim ve satır ayarlarını açalım. Tasarım sekmesi altında aşağıdakileri güncelleyin:

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

Bu, tam genişlikte bir resim galerisini çalışır duruma getirmenin en kolay yoludur. Oluk genişliğini "1" olarak ayarlamakla birlikte "Bu Satırı Tam Genişlik Yap" seçeneğinin seçilmesi, galerinin bölümün tüm genişliğini (tüm tarayıcı boyutlarında) kapsamasını sağlar ve resimler arasındaki boşluğu kaldırır.

Ve galeri, mobil cihazlarda da sayfanın tüm genişliğine yayılmaya devam edecek.

Görüntü Vurgulu Bindirme Seçeneklerini Özelleştirme

Tam genişlikte resim galerinizin tasarımını tamamlamak için Divi Galeri Modülü ayarlarında yerleşik olarak bulunan resim üzerine gelme bindirme seçeneklerini özelleştirmenize yardımcı olur. Yakınlaştırma simgesini, simge rengini ve kaplama rengini değiştirebilirsiniz. Bunu yapmak için Galeri ayarlarını açın ve aşağıdakileri güncelleyin:

Yakınlaştırma Simgesi Rengi: #ffffff
Vurgulu Yer Paylaşımı Rengi: #333d48
Hover Simgesi: ekran görüntüsüne bakın

Şimdi son tasarımı kontrol edelim.

Daha Fazla Tam Genişlikli Resim Galerisi Aralığı Seçenekleri

Cilt Payı Genişlik Aralığı ile Tam Genişlik Düzeni Oluşturma

Divi Galeri Modülü'ndeki resimleriniz arasındaki boşluğu özelleştirmenin en kolay yolu, üst satırın oluk genişliğini ayarlamaktır. Oluk genişliği, sütunlar arasındaki boşluğu ifade eder. Herhangi bir Divi Row öğesiyle, oluk genişliği için isteğe bağlı değerler 1 ile 4 arasında değişir.

1, sütunlar arasındaki sıfır kenar boşluğunu temsil eder.
2, sütunlar arasında %3'lük bir sağ kenar boşluğunu temsil eder.
3, sütunlar arasında %5.5'lik bir sağ kenar boşluğunu temsil eder.
4, sütunlar arasında %8'lik bir sağ kenar boşluğunu temsil eder.

Divi Galeri Modülünü kullandığımız için oluk genişliği galeri öğeleri arasındaki boşluğu da ifade eder. Bu nedenle, satıra oluk genişliği eklemek, Galeri Modülündeki galeri öğelerinin/görüntülerinin aralığını ayarlayacaktır.

Mobil Cihazda Aralık Üzerinde Daha Fazla Kontrol İçin Özel Genişliği Kullanma

“Bu Satırı Tam Genişlik Yap” seçeneği EVET olarak ayarlanmışsa ve Cilt payı genişliği 2 veya daha fazlaysa (1 dışında herhangi bir şey), Divi, ek dış boşluk sağlamak için satırın genişliğini otomatik olarak ayarlayacaktır. Bu gereklidir çünkü oluk genişliği satırın kendisine değil, yalnızca sütunlar/galeri öğeleri arasındaki boşluk için geçerlidir. Ancak bu, mobil cihazlarda istediğinizden daha fazla kenar boşluğu aralığı ekleyebilir. Örneğin, 2 Oluk Genişliği ile "Bu Satırı Tam Genişlik Yap" seçeneği etkinse, sıranızın gerçek genişliği mobilde %89 olacaktır (%100 değil). Dolayısıyla, satırın mobil cihazlarda %100'e yayılmasını istiyorsanız, bunun yerine Özel Genişlik seçeneğini kullanabilirsiniz. Satıra %100 özel genişlik verildiğinde, Cilt Payı Genişliği değerinden bağımsız olarak satırın genişliği %100 olarak kalacaktır. Artık, satır dolgusunu kullanarak satırın dış boşluğunu kolayca ekleyebilirsiniz. Bu size masaüstü, tablet ve akıllı telefondaki dış boşluk üzerinde daha fazla kontrol sağlayacaktır.

İşte bunun nasıl işe yarayacağına dair bir örnek. Satır ayarlarını açın ve aşağıdakileri güncelleyin:

Özel Genişlik: %100
Oluk Genişliği: 2

Galerinin sağında veya solunda boşluk olmadığına dikkat edin.

Şimdi satıra aşağıdaki özel dolguyu ekleyin:

Özel Dolgu (masaüstü): %5 üst, %5 alt, %5 sol, %5 sağ
Özel Dolgu (akıllı telefon) %5 üst, %5 alt, %0 sol, %0 sağ

Masaüstündeki (ve tabletteki) %5 dolgu, galeri öğeleri arasındaki boşlukla eşleştirmemiz gereken dış boşluğu sağlayacaktır.

Akıllı telefon için sağ ve sol özel dolguyu çıkararak, görüntüler tarayıcının tüm genişliğine yayılacak ve görüntülere daha fazla görünürlük kazandırılacaktır.

Cilt Payı Genişliği Olmadan Galeri Öğelerine Özel Aralık Ekleme

Divi Galeri Modülünüzün aralığı üzerinde daha da fazla kontrol sahibi olmak istiyorsanız, Cilt Genişliği kullanmak yerine galeri öğeleri arasına kendi özel aralığınızı ekleyebilirsiniz. Bunu yapmak için, oluk genişliğini 1 olarak ayarlamanız ve ardından Divi galeri modülü ayarlarında galeri öğeleriniz arasına boşluk eklemeniz gerekir. Daha fazla bilgi için, Özel Aralıklı Bir Resim Galerisi Oluşturmak için Divi Galeri Modülünü Kullanma hakkındaki tam eğiticiye göz atın.

Divi Galeri Modülü Hakkında Daha Fazla Bilgi Edinin

Divi Galeri Modülünüzü özelleştirmenin daha fazla yolu için aşağıdaki eğitimlere göz atın:

• Divi Galeri Modülü Resimleriniz için 6 Eşsiz Bordür Tasarımı
• Divi Galeri Modülündeki Sütun Sayısını Farklı Kesme Noktalarında Değiştirme
• Özel Aralıklı Bir Resim Galerisi Oluşturmak için Divi Galeri Modülünü Kullanma
• Divi'nin Galeri Modülü ile Siyah Beyazdan Renge Değişen Bir Resim Galerisi Nasıl Oluşturulur

Son düşünceler

Umarım bu eğitim, bir sonraki projenizde tam genişlikte güzel resim galerileri oluşturmak için Divi Galeri Modülünü nasıl kullanacağınızı anlamanıza yardımcı olur. Resim galerilerinizi daha da öne çıkarmak için Divi'nin tüm yerleşik tasarım seçeneklerini ve fareyle üzerine gelme efektlerini keşfetmeyi unutmayın.

Aşağıdaki yorumlarda sizden haber bekliyorum.

Şerefe!