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

Bu gönderi, 5 Etkileyici Divi Galeri Düzeni ve Nasıl Oluşturulur başlıklı mini serimizin 5'inci bölümüdür. Galeri modülünün beş benzersiz örneğinin tümü ve bunların nasıl elde edileceğine ilişkin öğreticiler için bizi izlemeye devam edin!

---

Galeriler günümüzde web tasarımında en önemli araçlardan biridir. İster çalışmanızı sergilemek isteyen bir tasarımcı, ister fotoğraflarınızı sergilemek isteyen bir fotoğrafçı veya önemli bir portföy isteyen bir işletme olun, çevrimiçi galerilere duyulan ihtiyaç durmadan devam eder. Divi Galeri Modülü ile web sitemizin ziyaretçilerini çekecek harika, göz alıcı galeriler oluşturabiliriz.

Bu Divi mini dizisinde, 5 Etkileyici Divi Galeri Düzenini ve bunların nasıl oluşturulacağını ele alacağız. Bu örneklerden bazıları oldukça basit olacak ve sadece Divi modülü ayarlarında bazı ayarlamalar gerektirecektir. Diğerleri biraz daha gelişmiş olacak ve biraz CSS ve diğer özelleştirmeler gerektirecek.

Umuyorum ki, ister Divi ve web tasarımında acemi olun, ister deneyimli bir Divi uzmanı olun, bu fikirleri uygulayabileceksiniz ve Divi galerilerinizi bir sonraki seviyeye taşımak için ilham alacaksınız!

Bugünün Öncesi ve Sonrası: Divi Galeri Modülü

Başlamadan önce, varsayılan Divi Galeri Modülüne ve bu eğitimin sonunda onu neye dönüştüreceğimize bir göz atalım.

Divi Galeri Modülüne resim eklediğinizde ve başka hiçbir şey yapmadığınızda, elde edeceğiniz şey şudur.

Varsayılan olarak, modül fotoğraflar arasında bir miktar dolguya sahiptir, görüntü etiketini görüntüler ve 4 sütun halinde hizalanır. Fareyle üzerine gelme simgesi, ana tema rengini içeri çeker ve şeffaf beyaz bir kaplamaya sahip olur. Alışılmışın dışında bir şey için fena değil ama galerilerimizi “Pop” yapmanın bazı yollarını keşfedelim.

Bugünkü eğitimimizin sonunda, aşağıda gördüğünüz gibi tam genişlikte hoş bir galeri elde edeceğiz.

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

Youtube Kanalımıza Abone Olun

Tam Genişlikli Galeri Modülü için Konsept ve İlham

Tam genişlikli galeri çevrimiçi olarak oldukça yaygın, ancak Divi kullanan bazı kişilerin galeri modülünde birkaç basit değişiklik yapıp aynı etkiyi elde edebileceklerini bilmeyebilecekleri aklıma geldi.

Tasarım Öğelerinizi Hazırlama

Aşağıdaki öğreticiye dalmadan önce, kendinizi ve tasarım öğelerinizi başarılı bir tasarım uygulamasına hazırlamak için aşağıdakileri yapmak isteyeceksiniz.

1) Resimlerinizi web için optimize edin

Çevrimiçi bir galeri oluşturduğunuzda, ilk yapmanız gereken en önemli şey, yüklemeden önce resimlerinizin (tasarımlar veya fotoğraflar) mümkün olan en küçük dosya boyutunda olduğundan emin olmaktır. Bu, sayfanızın yüklenme süresine yardımcı olacak ve web sitenizin büyük dosyalar tarafından tıkanmasına yardımcı olacaktır. Görüntüleri bir kameradan bilgisayarınıza indirdiğinizde, bunlar genellikle ÇOK büyük dosya boyutlarındadır ve aynısı birçok tasarım dosyası için de geçerlidir. Özellikle galeriniz 20 veya daha fazla resim içeriyorsa, resimlerinizi web için optimize etmek çok önemlidir.

Ben genellikle Adobe Bridge veya Adobe Photoshop kullanıyorum ancak görüntülerinizi bir web sitesine yüklemeden önce optimize etmenize yardımcı olacak çok sayıda program var. Resimlerinizi yeniden boyutlandırmanıza ve optimize etmenize yardımcı olacak https://www.jpeg.io/ ve https://compressor.io/ gibi bazı ücretsiz çevrimiçi araçlar da vardır.

Resim boyutu: Yaklaşık 1200 piksel genişliğindeki resimlerin iyi bir görüntüleme boyutu olduğunu buldum ve dikey resimler için yüksekliği yaklaşık 1000 pikseli geçmemenizi tavsiye ederim.

2) Dosyalarınızı etiketleyin

Galeri oluştururken iyi bir uygulama, görüntü dosyalarınızı uzun kamera dosya uzantıları olmayacak şekilde etiketlemektir. Bu, yalnızca dosya yönetiminize yardımcı olmakla kalmaz (ve fotoğraflar arasında gezinirken akıl sağlığınıza da yardımcı olur), aynı zamanda SEO için de iyidir. İnsanlar işletmeleri ve hizmetleri aradığında, iyi etiketlenmiş görseller genellikle ilk açılanlar olacaktır. Bu, size veya müşterilerinizin sitesine trafik çekmenize yardımcı olabilir.

3) Görsellerinizin telifsiz olduğundan emin olun

Galerilerinizdeki ve tasarım öğelerinizdeki resimlerin telif hakkı içermediğinden emin olun. Çevrimiçi görüntü davaları şaka değildir, bu nedenle, kullanmaya rızanız olmadıkça, görüntülediğiniz çalışma veya görüntülerin KENDİ OLDUĞUNDAN emin olun. Bu eğitimler için https://unsplash.com adresinden telifsiz görseller kullanıyorum.

Divi'de Tam Genişlikli Galeri Modülü Tasarımını Uygulama

Bu tasarım için Divi Galeri Modülünü kullanacağız ve şu 3 alanda ayarlamalar yapacağız:

– Genel Ayarlar
– Gelişmiş Tasarım Ayarları
– Özel CSS Ayarları

Başlamak için, tek satır ve tek galeri modülü ile tek bir bölüm oluşturun.

Satır Ayarları

Yapmamız gereken ilk şey, satır modülünü "tam genişliğe" ayarlamak ve olukları, resimler dolgu olmadan yan yana gelecek şekilde ayarlamaktır.

Genel Ayarlar:

Bu Satırı Tam Genişlikte Yapın: EVET
Özel Oluk Genişliğini Kullan: EVET
Oluk Genişliği: 0
Özel Dolguyu Mobil Cihazda Tutun: EVET

Kaydet çık

Galeri Modül Ayarları

Artık Galeri modülünün kendisine geçebilir ve tam genişlikli tasarımımızı elde etmek için gerekli değişiklikleri yapabiliriz.

Genel Ayarlar:

Galeri Resimleri: Resimler galeriye eklendi
Düzen: Izgara
Görüntü Sayısı: 12
Başlığı ve Altyazıyı Göster: HAYIR
Sayfalandırmayı Göster: HAYIR

Gelişmiş Tasarım Ayarları:

Yakınlaştırma Simgesi Rengi: #ffffff
Vurgulu Yer Paylaşımı Rengi: rgba(28,28,28,0.81)
Vurgulu Simge Seçici: Artı işaretli büyüteç simgesi

Resmi kaydırdığınızda göreceğiniz şey budur. Kullanıcıya bu resme "daha yakından bakma" fikrini vermek için büyüteç simgesini kullanmayı seçtim. Tasarımınızda istediğiniz herhangi bir simgeyi deneyebilirsiniz. Ayrıca varsayılan tasarımı tersine çeviriyorum ve daha koyu bir arka plan kaplaması üzerinde beyaz bir simgeyle gidiyorum.

Kaydet çık

Divi Tema Seçeneklerinde Özel CSS

Bir resmi açtığınızda, resmin sol alt köşesinde resim başlığının görüntülendiğini fark edeceksiniz. 10 kişiden 9'u, müşteriler bunu kaldırmamı istiyor. Bu yüzden şimdi bu standart uygulamayı yapıyorum. Bu etkiyi bu mini dizideki tüm galerilere ekleyeceğim.

Etiketi kaldırmak için Divi > Tema Seçenekleri'ne giderek Divi Tema Seçenekleri paneline gidin ve Özel CSS'ye ilerleyin ve şu kodu girin:

.mfp-title {
display: none;
}

Bu, kullanıcı bir resim açtığında dosya adını kaldıracaktır.

İşte buyur! Tam genişlikte bir galeri oluşturarak galerinizi standart görünümden ayırmanın hızlı ama etkili bir yolu. En iyi yanı – bu görünümü, ekstra kod veya CSS olmadan sadece bazı standart Divi modül ayarlarını değiştirerek elde edebildik!

Yarın: Özel Dolgulu Döşemeli Bir Galeri Oluşturmak için Divi Galeri Modülünü Kullanma!

Yarın tekrar kontrol edin, örneğin 2 – burada sadece dolguyu ayarlayarak dar karo stili galeriyi nasıl oluşturacağımızı keşfedeceğiz! Müşterilerimin çoğu bu görünüme bayılıyor ve bunu nasıl gerçekleştireceğinizi size göstermekten heyecan duyuyorum!

Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!