Web sitenize ekleyebileceğiniz 9 WordPress görüntü filtreleri
Mevcut görüntü filtresi, fotoğrafınıza profesyonel görünen bir meslek eklemek için çok popüler bir yöntemdir. Instagram veya Snapchat kullanırsanız, gördüğünüz hemen hemen her görüntünün bir tür filtre geçmesi muhtemeldir. Ancak, görüntü filtreleri sadece hile yapmaktan daha fazlası olabilir – filtreler, web sitenizdeki görselleri geliştirmek için hızlı ve kolay yollar sağlayabilir. WordPress, kutunun dışındaki birçok resim düzenleme özelliği ile donatılmamıştır. Ancak bu, platformdaki faydalarından yararlanamayacağınız anlamına gelmez. Bu makalede, neden WordPress görüntü filtreleri eklemek istediğinizi konuşacağız, ardından eklentiler veya basamaklı stil sayfaları (CSS) kullanarak nasıl yapılacağını keşfedeceğiz. Haydi Yapalım şunu!
WordPress’e neden bir resim filtresi eklemeyi düşünmelisiniz?
Hiç bulamadıysanız, belirli bir görünüm elde etmek için görüntü filtresini ‘ön ayar’ olarak düşünün. Bazı insanlar bunu sadece bir sosyal medya hile olarak görse de, aslında grafikleri ayarlamanın güçlü bir yoludur. Buna ek olarak, WordPress kullanıcıları için çok kullanışlıdır, çünkü platform, boyutları değiştirmekten ve bunları kesmekten daha fazla değiştirmenize izin vermez. WordPress görüntü filtreleriyle yapabileceğiniz birkaç şeyi açıklayalım:
Görüntüyü stilinize uyacak şekilde ayarlayın. Örneğin, bir WordPress portföyüne sahip bir fotoğrafçıyı hayal edin. Üçüncü taraf araçlarıyla uğraşmak zorunda kalmadan tutarlı bir görünüm oluşturmak için görüntünüzü ayarlamak için bir resim filtresi kullanabilirsiniz.
Medya markanız. Birçok web sitesi içerikleri için belirli resim türlerini kullanır. Örneğin, blog tabanlı bloglarımızdaki üstün resimlerin çoğuna dikkat etmiş olabilirsiniz. Kendi stilinizi oluşturmak ve aynı zamanda öne çıkmak için bir filtre kullanabilirsiniz. Stok görüntülerini artırın. Çok fazla boş zamana sahip bir fotoğrafçı değilseniz, belirli bir noktada, web sitenizde resim stokunu kullanabilirsiniz. Çoğu durumda, diğer siteler de aynı görüntüyü kullanacaktır. Kendinizi filtrelerin kullanımından ayırt edebilirsiniz.
WordPress’te görüntü özelleştirmesi açısından daha fazla seçenek istiyorsanız, filtre önemli bir ilk adımdır. Bununla birlikte, gösterge panelinize temel görüntü editörleri de ekleyebilir, herhangi bir bağımsız yazılım ihtiyacını tamamen ortadan kaldırabilirsiniz.
Bu nişte birkaç WordPress eklentisi olması şaşırtıcı olan, görüntü filtrelerinin ne kadar popüler olduğunu göz önünde bulundurarak eklentileri kullanarak web sitenize WordPress görüntü filtreleri nasıl eklenir. Aslında, birkaç çalışmadan sonra, sizin için rahatça önerdiğimiz sadece bir seçenek bulduk – ana görüntü filtresi:
Bunun birinci sınıf bir eklenti olduğunu unutmayın, ancak görüntünüze filtreler eklemek için neredeyse sorunsuz bir deneyim sunar. Bu eklenti, sitenizdeki herhangi bir görüntüye ekleyebileceğiniz 40’tan fazla benzersiz filtreyi kapsar. Ayrıca, her filtrenin mukavemetini ayarlayabilirsiniz (yani görüntünüzün ne kadar etkilendiğini kontrol edin) ve bu, önyükleme için Divi ile sorunsuz bir şekilde çalışır. Ana özellik:
WordPress Medya Galerinize 40’tan fazla resim filtresi ekleyin.
Özel görüntünüzü yeni bir ek olarak kaydedin.
Filtreler arasında sorunsuz bir şekilde geçin. Eklentiyi yükledikten sonra başka bir yapılandırma gerekmez. WordPress medya kitaplığınızdaki herhangi bir resme tıklayın, ardından sağ menüsünde, kullanılabilir filtre listesine ulaşana kadar aşağı kaydırın. Her biri, büyük bir monitörde çalışsanız bile, efektin bir önizlemesini içerir, efekti uygulamak ve değişiklikleri görmek için daha fazla kilometre alabilirsiniz. Bunun dışında, sadece filtreyi seçin, gücü ayarlayın ve sonuçlardan memnunsanız güncellenen görüntüyü kaydedin:
Ayrıca WordPress düzenleyicisi içinden görüntünüze filtre ekleyebilirsiniz. Medya Ekle düğmesini tıklayın, istediğiniz resmi seçin ve yukarıdaki işlemi tekrarlayın:
Ancak unutmayın – gönderiye eklediğiniz görüntüleri düzenlemeye çalışırsanız eklenti filtresine erişemezsiniz. Önce silmeniz, medya kitaplığınızdan bir filtre eklemeniz ve yerine yeni bir resim yerleştirmeniz gerekir. Küçük hıçkırıkların yanı sıra, süreç daha basit olamaz. 9 Web sitenize ekleyebileceğiniz WordPress görüntü filtreleri (CSS kullanarak), özellikle fiyatları ekleyenler – benzer bir filtre ekranı almak için bazı CSS efektlerini kullanabilirsiniz. Geçmişte, WordPress web sitenizi CSS ayarlamanın birkaç yolundan bahsettik. Divi kullanıcıları, WordPress kontrol panelinizdeki Divi sekmesi> tema seçeneklerine gitmeli ve sayfanın altındaki özel CSS alanlarını aramalıdır: Burada, her bölümde bulacağınız CSS kodunu (kullanmak istediğiniz filtre için) koyabilir, değişikliklerinizi kaydedebilir ve yapmaya hazırsınız. 1. Opazite Bu ilk örnek için, resimlerinizden birine bir opaklık filtresi ekleyeceğiz. Bunu görüntünüzü şeffaf hale getirmenin bir yolu olarak düşünün. Genellikle bunu resmin ne kadar belirgin olduğunu azaltmak için (örneğin, arka planın bir parçasısa) veya başka bir resimle örtmek için kullanırsınız. Özel CSS alanına eklemek istediğiniz aşağıdaki CSS görüntüleri :. { Filtre: Opaklık (.7); -Webkit-Filter: Opaklık (.7);
} Burada filtre-opacity adlı yeni bir CSS sınıfı oluşturduğumuzu göreceksiniz. İçeride, mukavemetle filtre opaklığı uyguladık. 7 (sıfır ile bir arasında herhangi bir değere değiştirilebilir) ve ‘Webkit’ filtre özelliğini ve filtresini kullanıyoruz. Bu, CSS oluşturma makinesi (macOS’ta Safari gibi) olarak WebKit’i kullanan tarayıcılar talimatları da tanıyacaktır.
Şimdi, yeni filtremizi test etmek için divi sayfalarımızdan birini açacağız ve ekip üyelerimizin fotoğraflarından birini ayarlayacağız. İşte orijinal resim:
Filtreyi uygulamak için, Divi Oluşturucu’yu kullanarak sayfayı açın ve uygun görüntü modülünü bulun. Ardından Modül Ayarları düğmesini tıklayın:
Girdikten sonra gelişmiş sekmeyi açın ve CSS sınıfı alanını arayın, ardından yeni sınıf adınızı yazın. Bu durumda, filtre-opasity:
Filtre sınıfı adınızı istediğiniz gibi verebilirsiniz. Karışıklıktan kaçınmayı hatırlamak kolay bir şey yapmaya çalışın. Değişiklikleri kaydettikten sonra, uyguladığınız filtre efektini görebileceksiniz. Bu işlemin eklemek istediğiniz diğer CSS filtreleri için benzer olacağını unutmayın. Görüntünüze bir filtre eklemek için, istediğiniz sınıfı ayarlamak istediğiniz görüntüye ekleyin. Sepya Sepya filtresi, görüntünüze ‘eski’ bir ekran eklemenin en iyi yolunu sunar, ancak seçici olarak uygulanmanız gerekse de, aşırısa normal göründüğü için. Bu, resminizin üzerinde kırmızımsı kahverengi bir sis uygular ve soluk bir fotoğraf gibi görünmesini sağlar. Web sitenize filtre eklemeniz gereken aşağıdaki kod:. { Filtre: Sepya (%100);
-Webkit filtresi: sepya (%100);
} Bu örnekte, bir yüzde kullanarak bir filtre uygulamaya karar verdik. Karışıklıktan kaçınmak için bir veya diğerini kullanmaya devam etmenizi öneririz. Bu durumda, bir numara%100 gücüne sahip bir filtre ile aynıdır.3. Doymuş
Görüntünün donuk renkleri açmanın en iyi yoludur ve bu filtre görüntünüzdeki tüm renklerin yoğunluğunu arttırır. Yukarıdaki örnekte sarı alın, şimdi normalden daha fazla görünür. Özel CSS alanınıza eklemeniz gereken aşağıdaki kod:.
{
Filtre: doygun (1);
-Webkit-filter: doygun (1); } Bu durumda, örneğimizi çok doymuş hale getirmek için birinin değerini kullanırız, ancak (elbette) sayıları istediğiniz gibi ayarlayabilirsiniz. 4. Aç
Şimdi biraz farklı bir şey için – bu filtre görüntünüzün tüm renklerini tersine çevirir. Örneğin, siyah beyaz olur, vb. Bu, fotoğrafta sık sık gördüğünüz bir filtre değil, aynı zamanda bazı ziyaretçilere görsel erişilebilirlik sunmanın pratik bir yolu olarak da işlev görür. Kopyalamanız gereken koddan aşağıdaki alıntı: Filtre-Invert
{
Filtre: ters (.8);
-Webkit-Filter: Invert (.8); } Birinin değeri, bu durumda, tamamen tersine çevrilmiş görüntüler üretecektir. Bu, hazırlanacak karmaşık bir filtredir, bu nedenle sizi memnun eden gücü bulana kadar değeri değiştirmeniz gerekebilir. 5. Hue
Hue-Rotate filtresi başka bir joker karakter seçeneğidir. Daha önce bir görüntü düzenleme aracı kullandıysanız, renk tekerleklerine aşina olabilirsiniz. Tekerleklerde mevcut olan tüm renkleri göstererek çalışırlar, daha sonra istediğiniz renkleri ve desenleri seçmek için kullanabilirsiniz. Bu filtre bu öncülde, ancak görsel temsil olmadan çalışır. Nasıl çalıştığı hakkında daha iyi bir fikriniz olabilmeniz için koda bakalım:.
{
Filtre: Hue-Rotat (DEG);
} DEG değerini 0deg ila 360deg arasında değişen herhangi bir sayı ile değiştirebilirsiniz. Size hangi rengi seçtiğinize dair bir gösterge veren bir grafik olmadan, sonuçların biraz vurulabileceğini veya özlenebileceğini itiraf ediyoruz. Bu, görüntünüzün rengini randomize etmek istiyorsanız kullanmak için eğlenceli bir filtredir, ancak istediğiniz rengi elde etmek için bazı ayarlamalar gerektirebilir. 6. Gri Ölçek
Şimdi daha geleneksel bir şey için – gri ölçekli filtreler – gri resminizi çekin ve rengi gri bir tonda değiştirin. Fotoğraflarınızı siyah beyaz fotoğraflara dönüştürmenin hızlı bir yolu olarak düşünün. İşte ihtiyacınız olan kod:. Filtre-Greyscale { Filtre: gri tonlama (1);
-Webkit-Filter: Grayscale (1);
} Birinin değerini ayarlamak, görüntünüzün diğer tüm renklerini silerken, daha küçük sayılar sadece onu azaltacaktır. Ayrıca düşük doygunluk değerleri ile benzer etkiler elde edebileceğinizi de göreceksiniz. Ne seçerseniz seçin tamamen kişisel tercihlere bağlıdır. 7. Kontrast
Kontrast filtreleri en çok bildiğiniz filtreler olacaktır. Bu temelde daha beyaz ve daha koyu siyah hale getiriyor ve solma rengini açmanıza izin veriyor. Bu, WordPress’te kullanmanız gereken CSS’dir:. {
Filtre: kontrast (1);
-Webkit-filter: kontrast (1);
} Her zamanki gibi, filtrenin gücü oraya yazdığınız değere bağlıdır, bu nedenle isteklerinize göre değiştirmekten çekinmeyin. 8. Parlaklık
Parlaklık filtresi çok kolaydır. Bu, koda girdiğiniz değere bağlı olarak görüntüyü aydınlatmanıza veya karartmanıza olanak tanır. Aşağıdaki alıntı CSS Basic :. Filtre parlaklığı {
Filtre: Parlaklık (1.5);
-Webkit-Filter: Parlaklık (.5);
} Bu durumda, birinin üzerindeki herhangi bir değer, görüntünüzün parlaklığını artıracaktır ve altındaki sayılar onu koyulaştıracaktır – bu yüzden unutmayın. 9. Bulanıklık
Son olarak, bir bulanıklık filtremiz var.Bu aynı zamanda çoğu görüntü düzenleme uygulamasında mevcut olan en popülerlerden biridir.Bu, görüntünüze ‘odaklanmamış’ ekranı uygular ve acil bir durumda hassas bilgileri belirlemek için kullanılabilir.Bu, uygulamanız gereken CSS’dir: Filtre: Bulanıklık (5 piksel);
-Webkit-filter: bulanık (5px);
} Aslında çeşitli bulanıklık etkileri vardır ve CSS’de olan, tüm görüntüleri yumuşak bindirmeye odaklanmayan bulanık ‘Gaussian’.Divi kullanıcısıysanız daha da kolay
