Divi Galeri Modülü ile Gri Tonlamalıdan Renkliye Galeri Oluşturma

Bu, 5 Etkileyici Divi Galeri Düzeni ve Nasıl Oluşturulur başlıklı mini serimizin son gönderisidir . Divi öğreticilerinin bir sonraki bakanlığı için önümüzdeki hafta tekrar gelmeyi unutmayın!

---

Bu son örnek için, sizinle danışanlarımın sevdiği ve elde edilmesi biraz yaratıcılık ve deneme yanılma gerektiren bir etkiyi paylaşmak istedim. Web tasarımında veya Divi'de yeniyseniz, bunun gibi bir efekt göz korkutucu görünebilir, ancak aşağıda bu modaya uygun gri tonlamalıdan renkli görünüme nasıl ulaşılacağı konusunda adım adım talimatlar vereceğim.

Hadi dalalım!

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

Her zamanki gibi Divi Galeri Modülümüzün öncesi ve sonrası ile başlayalım. Aşağıdaki iki resim, resimlerinizi ekledikten ve başka bir şey yapmadıktan sonra modülün nasıl göründüğüdür.

Bugünkü eğitimimizin sonunda, kullanıcılar imleçlerini her görüntünün üzerine getirdiğinde renklenen bu şık gri tonlamalı galeriye ulaşacağız.

Divi Galeri Modülü ile Gri Tonlamalıdan Renkliye Galeri Oluşturma

Youtube Kanalımıza Abone Olun

Gri Tonlamadan Renk Galerisi Modülüne Konsept ve İlham

Küçük CSS hilelerimin çoğunda olduğu gibi, bu görünümü ilk önce bir müşteri görüntüleri siyah beyaz yapıp yapamayacağımı sorduktan sonra, kullanıcı üzerlerine kaydırdığında renkli olarak değiştirdim. Bu görünümü başlangıçta rastgele görüntüler ve harekete geçirici mesaj grafikleri için kullandım ancak son zamanlarda merak ettim, bu efekt Divi galerisinde kullanılabilir mi? Cevap, EVET! CSS ve Divi ile hemen hemen her şey mümkün

Tasarım Öğelerinizi Hazırlama

Takip ediyorsanız, bu mini dizideki derslerimin çoğu olmasa da çoğunun, 1200 piksel genişliğe ve 1000 piksel yüksekliğe yeniden boyutlandırılmış on iki telif ücretsiz görüntü gerektirdiğini biliyorsunuzdur. Ayrıca herkesin dosya boyutlarını resimlerini de sıkıştırarak yönetmesini tavsiye ediyorum. Her ikisini de nasıl yapacağınızı buradan öğrenebilirsiniz.

Divi'de Özel Dolgu Modülü Tasarımı ile Döşenmiş Galeriyi Uygulama

Bu örnek 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 Modülü Ayarları

Bu örnekte, örnek 2'de yaptığımız özel dolgu/döşeme görünümünü çoğaltacağız, bu nedenle yapmamız gereken ilk şey olukları, görüntülerin yan yana sıkı bir şekilde hizalanması için ayarlamaktır.

Genel Ayarlar:

Özel Oluk Genişliğini Kullan: EVET
Oluk Genişliği: 1
Özel Dolguyu Mobil Cihazda Tutun: EVET

Kaydet çık

Galeri Modül Ayarları

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ş Genel Ayarlar:

Vurgulu Yerleşim Rengi: rgba(255,255,255,0)

Fareyle üzerine gelme simgesini kapatacağız, bu nedenle burada endişelenmemiz gereken tek ayar kaplama rengini 0'a düşürmektir. Bu örnekte, görüntülerin gri tonlamalıdan renkliye geçmesini istiyoruz, bu yüzden bunu yapmıyoruz. herhangi bir kaplama rengi olmasını istiyorum. Bunu kodla yapabilirsiniz, ancak bunu yapmanın kolay bir yolu, onu tamamen şeffaf hale getirmektir.

Özel CSS

Galeri modülü ayarlarınızın özel CSS sekmesine gidin ve aşağıdaki dolgu değerini ve CSS Sınıfını ekleyin.

Galeri Öğesi:

padding: 3px

Burada, her görüntünün arasına oturacak dolguyu ekledik.

Tamam – işte gri tonlamalı CSS geliyor! Ama endişelenme, o kadar da kötü değil.

İlk adım, aşağıda gösterildiği gibi Özel CSS paneline bir sınıf eklemektir. Bu öğretici uğruna, onu "gri tonlamalı" olarak etiketledim. Sınıf eklendikten sonra, oluşturduğumuz CSS'ye o sınıfla etiketlenmiş her şeyin altında çalışmasını söyleyeceğiz. Artık "gri tonlama" sınıfına sahip her galeri, gri tonlamadan renge efektini gösterecek.

Kaydet çık

Şimdi, WordPress yönetici> Divi> Divi Tema Seçenek giderek Divi Tema Seçenekleri sından ve aşağıda görüldüğü gibi Özel CSS bölümüne gidin. İşte burada gerçek CSS efektini ekleyeceğiz.

.grayscale .et_pb_gallery_image {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%); 
    opacity: .8;
}

Bu, gri tonlama efektini görüntüye uygular ve aynı zamanda opaklığı %80'e düşürür. Sık sık bunun gibi efektlerde opaklığı azaltırım, bu yüzden kaydırdığınızda görüntü biraz daha açılır. Her galeri kodu çağırmadan önce, oluşturduğumuz “.grayscale” sınıfının ondan önce olduğuna dikkat edin. Bu, bu efektleri uygulamadan önce gri tonlamalı sınıfla ilgili her şeyi anlatır.

.grayscale .et_pb_gallery_image:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%); 
    opacity: 1;
}

Bu kod, fareyle üzerine gelme durumunu kontrol eder. Opaklığın 1 (%100) olarak ayarlandığını ve gri tonlama yüzdesinin %0 olduğunu göreceksiniz; bu, üzerinde kaydırdığınızda görüntü renginin gösterileceği anlamına gelir.

.et_overlay:before {
    display: none; 
}

Son olarak, bu kod simgeyi kaldırıyor. Görüntü siyah beyazdan renkliye geçtiğinde bu örneğin bir simgeye ihtiyacı olmadığını hissettim. Esasen simgeye burada görüntülenmemesini söylüyoruz.

Kod eklendiğinde şöyle görünecek:

Değişiklikleri Kaydet

Divi tema seçeneklerindeki (veya alt temanızdaki) Özel CSS bölümüne CSS kodunu ekledikten sonra, bitirdiniz!

İşte buyur! O kadar da kötü değil, değil mi? Galeri modülüne bir CSS sınıfı ekleyerek ve birkaç şık kod satırı kullanarak, web sitenizin kullanıcılarını veya müşterilerinizi mutlu edecek şık bir galerimiz var!

Takip ettiğiniz için teşekkür ederiz ve Sonraki Planlarımıza Bakın!

Umarım bu mini dizi “5 Etkileyici Divi Galeri Düzeni ve Nasıl Oluşturulur” size ilham vermiştir ve Divi ile harika web sitesi galerileri oluşturmanıza yardımcı olacak bazı iyi fikirler verecektir! Unutmayın, bu şeylerle ilgili sınır gökyüzüdür, bu yüzden bu fikirleri almaktan ve kendinize ait kılmaktan çekinmeyin.

Oh, ve bir sonraki mini dizimizin başlangıcı için önümüzdeki Pazartesi tekrar gelmeyi unutmayın!

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!