Divi Galerisi Modülü ile Renk Galerisi’ne Gray Talizi Oluşturun
Bu, 5 etkileyici Divi Galeri Düzenleri ve Nasıl Yapılır Başlıklı Mini Serimizdeki son gönderi. Bir sonraki divi öğretici mini dizileri için önümüzdeki hafta geri döndüğünüzden emin olun!
Bu son örnek için, müvekkilimin gibi etkilerini sizinle paylaşmak istiyorum ve bunu başarmak için biraz yaratıcılık ve deneme yanılma gerektiren bir etki. Bir web tasarımında veya divi’de yeniyseniz, böyle bir etki korkutucu görünebilir, ancak bu moda renge gri ölçek ekranına nasıl ulaşılacağı hakkında adım adım bir adım atacağım.
Bölünelim! Bugün ve sonra bugün: Divi Galeri Modülü Her zamanki gibi, Divi Galerisi modülümüzden önce ve sonra Qucik ile başlayalım. Aşağıdaki iki resim, bir görüntü ekledikten ve hiçbir şey yapmadıktan sonra modül ekranıdır. Varsayılan Galeri Modülü İmleç ve Üstü
Bugün öğreticimizin sonunda, kullanıcı imleci her bir görüntüye yönlendirdiğinde renkle çiçek açan gri ölçek galerisine ulaşacağız. Örnek 5 – Gri tonlamalı renk
Grayscale’e YouTube kanallarımız için bir Divi Galerisi modülüyle renk galerisine ve küçük CSS hilelerimin çoğu gibi Grayscale to Color Galerisi modülüne ilham alın, bu ekranı önce müşterinin siyah beyaz bir görüntü yapıp yapamayacağımı sorduktan sonra yaptım. Daha sonra kullanıcılar kaydırdığında renge dönüştü. Başlangıçta bu ekranı rastgele görüntüler ve grafik davetiyeleri için kullandım, ancak son zamanlarda merak ediyorum, bu etki Divi Galerisi’nde kullanılabilir mi? Cevap evet! CSS ve Divi ile neredeyse her şey olabilir
Tasarım öğelerinizi hazırlayın Eğer takip ettiyseniz, bu mini dizilerdeki tüm öğreticilerimin çoğunun, boyutu 1000 piksel yüksekliğe sahip 1200 piksel olarak değiştirilen on iki kraliyetsiz görüntü gerektirdiğini bilirsiniz. Ayrıca herkesin görüntülerinin sıkıştırılmasıyla dosya boyutlarını yönetmesini de tavsiye ettim. Bu iki şeyi burada nasıl yapacağınızı öğrenebilirsiniz. Bu örnek için Divi’de özel bir dolgu modülü tasarımı ile karo galerisini uygularken, Divi Galerisi modülünü kullanacağız ve bu 3 alanda ayarlamalar yapacağız:- Genel Ayarlar- Gelişmiş Tasarım Ayarları- CRSS Özel Ayarları
Ayarları değiştireceğiz. Başlamak için, bir satır ve tek bir galeri modülü ile bir parça yapın. Satır Modülünü ayarlama Bu örnekte, Örnek 2’de yaptığımız özel dolgu/kiremitin görünümünü çoğaltacağız, böylece yapmamız gereken ilk şey oluğu, görüntünün birbirine ek olarak sıralanması için ayarlamaktır. Genel Ayarlar: Özel Talang genişliğini kullanın: Evet Talang Genişliği: 1 Hücreselde Özel Dolgu Kaydet: Evet Kaydet ve Çıkış
Örnek 5 Talang Ayarları Genel Ayarlar Galeri Modülü Ayarlar:
Galeri Resmi: Galeri Düzenine Görüntü Ekle: Resim Numarası Kutusu: 12 Başlık ve Açıklama Göster: Sayma Göster: Hayır
Örnek 5 Genel Ayarlar Gelişmiş Genel Ayarlar: Geniş Yönün Rengi: RGBA (255.255.255.0) Burada endişelenmemiz gereken tek ayar 0’a 0’a indirmek için ikonun üzerine çıkacağız. Gri ölçekten değişecek görüntü renklendirilir, bu yüzden hiç renk kaplaması istemiyoruz. Bunu kodla yapabilirsiniz, ancak bunu yapmanın kolay yolu, gerçekten şeffaf olacak şekilde ayarlamaktır
Galeri modülü ayarlarınızdaki özel CSS sekmesine doğrudan özel CSS ve aşağıdaki dolgu ve CSS sınıflarını ekleyin. Galeri Malları: Dolgu: 3px Burada her resim arasında olacak dolgu ekledik.
Ped ekleyin.
Tamam-bu gri ölçekli bir CSS! Ama endişelenme, çok 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 “Gri Ölçek” olarak etiketledim. Sınıf eklendikten sonra, CSS’ye sınıfla etiketlenmiş olan her şey altında işlev gördüğümüzü söyleyeceğiz. Şimdi “gri ölçekli” sınıfına sahip her galeri gri ölçeğin renge etkisini gösterecektir. CSS sınıfı ekle
Şimdi kaydedin ve dışarıda, WordPress admin> divi> divi tema seçeneklerine giderek DIVI teması seçeneğini açın ve aşağıda görüldüğü gibi özel CSS bölümüne gidin. Burası gerçek CSS efekti ekleyeceğiz. .grayscale .et_pb_gallery_image { -Webkit-Filter: Grayscale (%100);
Filtre: gri tonlama (%100);
Opaklık: .8;
}
Bu, görüntü üzerinde gri ölçekli bir etki uygular ve ayrıca opaklığı%80’e düşürür. Sıklıkla böyle efektler üzerindeki opaklığı azaltırım, böylece kaydırdığınızda resim biraz daha görünür. Her galerinin kodu çağırmadan önce, önünde yaptığımız “.grayscale” sınıfı olduğunu unutmayın. Bu, efekti uygulamadan önce gri ölçekli bir sınıfla her şeyi anlatıyor … gri tonlama .et_pb_gallery_image: hover {
-Webkit-Filter: Grayscale (%0);
Filtre: gri tonlama (%0);
Opaklık: 1;
}
Bu kod, statü üzerindeki vurguyu kontrol eder. Opaklığın 1’e (% 100) ayarlandığını ve gri ölçeğin yüzdesinin% 0 olduğunu göreceksiniz, bu da kaydırdığınızda görüntünün rengi görüntüleneceği anlamına geliyor. .et_overlay: Önceden {
Görüntü yok;
}
Son olarak, bu kod simgeyi siler. Resim siyah ve beyazdan renge değiştiğinde bu örneğin bir simge gerektirmediğini hissediyorum. Temel olarak simgeye burada görüntülenmemesini söylüyoruz. Aşağıdakiler eklendiğinde kod ekranıdır:
5 CSS sınıfı örneği
CSS kodunu Divi Tema seçeneğindeki (veya çocuğunuzun teması) özel CSS bölümüne ekledikten sonra değişiklikleri kaydedin!
Son tasarımınız, Divi Galeri Modülü ile renk efektleri için gri ölçek İşte buyur!Çok kötü değil, değil mi?Galeri modülüne CSS sınıfı ekleyerek ve birkaç iyi kod satırı kullanarak, web sitenizi veya müşteri kullanıcılarını kesinlikle mutlu edecek şık bir galerimiz var!Daha sonra ne planladığımızı takip ettiğiniz ve gördüğünüz için teşekkür ederiz!Umarım bu mini diziler “5 etkileyici Divi Galeri Düzenleri ve Nasıl Yapılır” size ilham vermiş ve Divi ile olağanüstü bir web sitesi galerisi oluşturmanıza yardımcı olacak bazı iyi fikirler verecektir!Gökyüzünün bu şeylerle bir sınır olduğunu unutmayın, bu yüzden bu fikirleri almak ve kendiniz yapmaktan çekinmeyin. Oh, ve bir sonraki mini dizileri başlatmak için önümüzdeki Pazartesi geri dönmeyi unutmayın!Büyük duyuruları, yararlı ipuçlarını veya divi freebie’yi asla kaçırmayacak şekilde e -posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun!
