Web Sitenize Ekleyebileceğiniz 9 WordPress Resim Filtresi

Görüntü filtreleri, fotoğraflarınıza profesyonel görünümlü bir parlaklık eklemek için şu anda çok popüler bir yöntemdir. Instagram veya Snapchat kullanıyorsanız, gördüğünüz hemen hemen her görüntünün bir tür filtreden geçirilmiş olma ihtimali vardır. Bununla birlikte, görüntü filtreleri bir hileden çok daha fazlası olabilir – web sitenizdeki görselleri geliştirmenin hızlı ve kolay bir yolunu sağlayabilirler.

WordPress, kutudan çıktığı gibi pek çok resim düzenleme özelliğiyle birlikte gelmez. Ancak bu, platformdaki avantajlarından yararlanamayacağınız anlamına gelmez. Bu makalede, neden WordPress görüntü filtreleri eklemek istediğinizden bahsedeceğiz, ardından bunu bir eklenti veya Basamaklı Stil Sayfaları (CSS) kullanarak nasıl yapacağınızı keşfedeceğiz. Hadi hadi bakalım!

WordPress'e Neden Görüntü Filtreleri Eklemeyi Düşünmelisiniz?

Bunlarla hiç karşılaşmadıysanız, belirli bir görünüm elde etmek için görüntü filtrelerini 'ön ayar' olarak düşünün. Bazı insanlar onları sadece bir sosyal medya hilesi olarak görse de, aslında grafikleri kişiselleştirmenin güçlü bir yolu. Ayrıca, platform, görüntüleri yeniden boyutlandırmanın ve kırpmanın ötesinde ince ayar yapmanıza izin vermediğinden, WordPress kullanıcıları için inanılmaz derecede faydalıdır.

WordPress görüntü filtreleriyle yapabileceğiniz bazı şeyleri sıralayalım:

• Resimleri stilinize uyacak şekilde özelleştirin. Örneğin, WordPress portföyü olan bir fotoğrafçı olduğunuzu düşünün. Üçüncü taraf araçlarla uğraşmak zorunda kalmadan tutarlı bir görünüm oluşturmak için resimlerinizi özelleştirmek için resim filtrelerini kullanabilirsiniz.
• Medyanızı markalayın. Birçok web sitesi, içerikleri için belirli türde görseller kullanır. Örneğin, blogumuzdaki öne çıkan görsellerin çoğunun vektör tabanlı olduğunu fark etmiş olabilirsiniz. Kendi stilinizi oluşturmak ve öne çıkmak için filtreleri kullanabilirsiniz.
• Stok görsellerini geliştirin. Çok fazla boş vakti olan bir fotoğrafçı değilseniz, bir noktada muhtemelen web sitenizde stok görseller kullanmaya başlayacaksınız. Çoğu durumda, diğer siteler de aynı resimleri kullanır. Filtreleri kullanarak kendinizi farklı kılabilirsiniz.

WordPress'te görüntü özelleştirme konusunda daha fazla seçenek istiyorsanız, filtreler önemli bir ilk adımdır. Bununla birlikte, herhangi bir bağımsız yazılıma olan ihtiyacı tamamen ortadan kaldırarak, gösterge tablonuza temel bir görüntü düzenleyici de ekleyebilirsiniz.

Eklentileri Kullanarak Web Sitenize WordPress Resim Filtreleri Nasıl Eklenir

Görüntü filtrelerinin ne kadar popüler olduğu düşünüldüğünde, bu alanda az sayıda WordPress eklentisi olması şaşırtıcıdır. Aslında, biraz araştırmadan sonra, size rahatlıkla önerebileceğimiz tek bir seçenek bulduk – Nihai Görüntü Filtreleri:

Bunun birinci sınıf bir eklenti olduğunu unutmayın, ancak resimlerinize filtre eklemek için neredeyse kusursuz bir deneyim sunar. Eklenti, sitenizdeki herhangi bir resme ekleyebileceğiniz 40'tan fazla benzersiz filtre içerir. Ayrıca, her filtrenin gücünü özelleştirebilirsiniz (yani, görüntülerinizin ne kadar etkileneceğini kontrol edebilirsiniz) ve önyükleme yapmak için Divi ile sorunsuz çalışır.

Ana Özellikler:

• WordPress medya galerinize 40'tan fazla görüntü filtresi ekleyin.
• Özelleştirilmiş resimlerinizi yeni ekler olarak kaydedin.
• Filtreler arasında sorunsuz geçiş yapın.

Eklentiyi kurduktan sonra başka bir yapılandırmaya da gerek yoktur. WordPress Medya Kitaplığınızdaki herhangi bir resme tıklayın, ardından sağdaki menüde mevcut filtreler listesine ulaşana kadar aşağı kaydırın. Her biri bir efekt önizlemesi küçük resmi içerir, ancak büyük bir monitörde çalışmadığınız sürece, efekti uygulama ve değişiklikleri görüntüleme konusunda daha fazla mesafe elde edebilirsiniz. Ne olursa olsun, sadece bir filtre seçin, gücünü değiştirin ve sonuçlardan memnunsanız güncellenmiş görüntüyü kaydedin:

Ayrıca WordPress düzenleyici içinden resimlerinize filtreler ekleyebilirsiniz. Medya Ekle düğmesine tıklayın, istediğiniz görüntüyü seçin ve yukarıdaki işlemi tekrarlayın:

Düzenlemeye zaten bir yazı eklediğiniz bir resim deneyin eğer eklentinin filtreleri erişemez – Yine unutmayın. Önce onu kaldırmanız, filtreyi medya kitaplığınızdan eklemeniz ve yeni görüntüyü yerine yerleştirmeniz gerekir. Bu küçük hıçkırık dışında, süreç daha kolay olamazdı.

Web Sitelerinize Ekleyebileceğiniz 9 WordPress Resim Filtresi (CSS Kullanarak)

Herhangi bir ek eklenti kurmamayı tercih ederseniz – özellikle bir fiyatı olan – benzer bir filtrelenmiş görünüm elde etmek için alternatif olarak bazı CSS efektlerini kullanabilirsiniz. Geçmişte, WordPress web sitenizin CSS'sini özelleştirmenin birkaç yolundan bahsetmiştik. Divi kullanıcılarının WordPress panonuzdaki Divi > Tema Seçenekleri sekmesine gitmesi ve sayfanın altındaki Özel CSS alanını araması gerekir :

Burada, her bölümde bulacağınız CSS kodunu (kullanmak istediğiniz filtreler için) yapıştırabilir, değişikliklerinizi kaydedebilir ve hazırsınız.

1. Opaklık

Bu ilk örnek için, resimlerinizden birine bir opaklık filtresi ekleyeceğiz. Bunu, resimlerinizi şeffaf hale getirmenin bir yolu olarak düşünün. Bunu genellikle bir görüntünün ne kadar belirgin olduğunu azaltmak (örneğin, arka planın bir parçasıysa) veya diğer görüntülerle üst üste bindirmek için kullanırsınız. Özel CSS alanına eklemek isteyeceğiniz CSS pasajı:

.filter-opacity
{
filter: opacity(.7);
-webkit-filter: opacity(.7);
}

Burada filter-opacity adında yeni bir CSS sınıfı oluşturduğumuzu fark edeceksiniz. İçeride, .7 gücünde (sıfır ile bir arasında herhangi bir değere değiştirilebilen) bir opaklık filtresi uyguladık ve hem filtre özelliğini hem de 'WebKit' filtresini kullanıyoruz. Bu, CSS oluşturma motoru olarak WebKit'i kullanan tarayıcıların (macOS'taki Safari gibi) talimatları da tanımasıdır.

Şimdi yeni filtremizi test etmek için Divi sayfalarımızdan birini açacağız ve ekip üyemizden birinin vesikalık görüntülerini özelleştireceğiz. İşte orijinal görüntü:

Filtreyi uygulamak için Divi Builder'ı kullanarak sayfayı açın ve ilgili Görüntü modülünü bulun. Ardından Modül Ayarları düğmesine tıklayın:

Girdikten sonra Gelişmiş sekmesine gidin ve CSS Sınıfı alanını arayın, ardından yeni sınıfınızın adını yazın. Bu durumda, filtre opaklığı :

Filtrenizin sınıflarını istediğiniz gibi adlandırabilirsiniz. Karışıklığı önlemek için onları kolayca hatırlayacağınız bir şey yapmaya çalışın. Değişikliklerinizi kaydettikten sonra, uyguladığınız filtrenin etkilerini görebileceksiniz. Bu işlemin eklemek istediğiniz diğer CSS filtreleri için benzer olacağını unutmayın. Resimlerinize filtre eklemek için, özelleştirmek istediğiniz resimlere istediğiniz sınıfı eklemeniz yeterlidir.

2. Sepya

Sepya filtreleri, resimlerinize 'eski zaman' görünümü eklemek için mükemmel bir yol sunar, ancak aşırıya kaçarsa geçiş görünümü haline geldiğinden seçici olarak uygulamanız gerekir. Bu, resimlerinize kırmızımsı-kahverengi bir pus uygulayarak soluk fotoğraflar gibi görünmelerini sağlar. Filtreyi web sitenize eklemek için ihtiyacınız olan kod:

.filter-sepia
{
filter: sepia(100%);
-webkit-filter: sepia(100%);
}

Bu örnekte, filtreyi bir yüzde kullanarak uygulamaya karar verdik. Bunu veya ondalık sayıları (veya her ikisini) kullanabilirsiniz, ancak karışıklığı önlemek için birine veya diğerine bağlı kalmanızı öneririz. Bu durumda, bir numara, gücü %100 olan bir filtreye eşittir.

3. Doygunluk

Bir görüntüyü doyurmak, donuk renkleri canlandırmak için mükemmel bir yoldur ve bu filtre, görüntünüzdeki tüm renklerin yoğunluğunu artırır. Yukarıdaki örnekte, artık eskisinden çok daha fazla ortaya çıkan sarıları alın. Özel CSS alanınıza eklemeniz gereken kod:

.filter-saturate
{
filter: saturate(1);
-webkit-filter: saturate(1);
}

Bu durumda, örneğimizi aşırı doyurmak için bir değeri ile gittik, ancak (elbette) sayıları istediğiniz gibi ayarlayabilirsiniz.

4. Ters Çevir

Ş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ğrafçılıkta sıkça gördüğünüz bir filtre değil, aynı zamanda bazı ziyaretçilere görsel erişilebilirlik sunmanın pratik bir yolunu sunuyor. İşte kopyalamanız gereken kod parçacığı:

.filter-invert
{
filter: invert(.8);
-webkit-filter: invert(.8);
}

Bu durumda bir değeri, tamamen ters çevrilmiş bir görüntü ile sonuçlanacaktır. Bu, kurulumu zor bir filtredir, bu nedenle sizi memnun eden bir güç bulana kadar değeri ayarlamanız gerekebilir.

5. Ton-Döndür

Ton döndürme filtresi başka bir joker karakter seçeneğidir. Daha önce bir resim düzenleme aracı kullandıysanız, renk çarklarına aşina olabilirsiniz. Mevcut tüm renkleri bir tekerlek içinde görüntüleyerek çalışırlar ve daha sonra istediğiniz renkleri ve tonları seçmek için kullanabilirsiniz. Bu filtre bu öncül üzerinde çalışır, ancak görsel bir temsili yoktur. Nasıl çalıştığı hakkında daha iyi bir fikriniz olması için kodu görelim:

.filter-rotate
{
filter: hue-rotate( deg );
}

Sen 360deg kadar tüm yol 0deg giden herhangi bir sayı ile deg değerini değiştirebilir. Hangi rengi seçtiğinizi gösteren bir grafik olmadan, sonuçların biraz etkileyici veya ıska olabileceğini kabul edeceğiz. Resimlerinizin renklerini rastgele ayarlamak istiyorsanız kullanması eğlenceli bir filtredir, ancak tam olarak istediğiniz tonları elde etmek için bazı ayarlamalar gerektirebilir.

6. Gri Tonlamalı

Şimdi daha geleneksel bir şey için – gri tonlama filtresi resimlerinizi alır ve renkleri gri tonlarıyla değiştirir. Fotoğraflarınızı eski zamanların siyah beyaz resimlerine dönüştürmenin hızlı bir yolu olarak düşünün. İşte ihtiyacınız olacak kod:

.filter-greyscale
{
filter: grayscale(1);
-webkit-filter: grayscale(1);
}

Bir değeri ayarlamak, diğer tüm renkleri resimlerinizden kaldıracak, daha küçük sayılar ise sadece onları azaltacaktır. Düşük doygunluk değeriyle benzer bir etki elde edebileceğinizi de fark edeceksiniz. Hangisini seçerseniz seçin, tamamen kişisel tercihinize bağlıdır.

7. Kontrast

Kontrast filtresi, muhtemelen en aşina olduğunuz filtre olacaktır. Esasen beyazları daha beyaz ve siyahları daha koyu hale getirerek solmuş renkleri canlandırabilmenizi sağlar. İşte WordPress'te kullanmanız gereken CSS:

.filter-contrast
{
filter: contrast(1);
-webkit-filter: contrast(1);
}

Her zaman olduğu gibi, filtrenin gücü oraya yazdığınız değere bağlıdır, bu yüzden onu beğeninize göre ayarlamaktan çekinmeyin.

8. Parlaklık

Parlaklık filtresi çok basittir. Kodda girdiğiniz değere bağlı olarak bir görüntüyü açmanızı veya koyulaştırmanızı sağlar. İşte temel CSS pasajı:

.filter-brightness
{
filter: brightness(1.5);
-webkit-filter: brightness(.5);
}

Bu durumda, birin üzerindeki herhangi bir değer görüntünüzün parlaklığını artıracak ve birin altındaki sayılar onu karartacaktır – bu yüzden bunu aklınızda bulundurun.

9. Bulanıklaştırma

Son olarak, bulanıklık filtresine sahibiz. Bu aynı zamanda çoğu görüntü düzenleme uygulamasında bulunan popüler bir uygulamadır. Bu, resimlerinize 'odak dışı' bir görünüm uygular ve hassas bilgileri gizlemek için bir tutam olarak kullanılabilir. İşte uygulamak için ihtiyacınız olan CSS:

.filter-blur
{
filter: blur(5px);
-webkit-filter: blur(5px);
}

Aslında farklı türde bulanıklaştırma efektleri mevcuttur ve CSS'de yerleşik olan, tüm görüntüyü yumuşak bir kaplama ile odaktan çıkaran bir 'Gauss' bulanıklığıdır.

Divi Kullanıcısıysanız Daha da Kolay

Yakın zamanda Divi'deki tüm görüntüler, modüller, satırlar ve bölümler için renk filtreleri, efektler ve karışım modları ekleyen büyük bir tasarım özelliği güncellemesi yayınladık. Divi kullanıcıları için yukarıdaki her şeyi (ve çok daha fazlasını) kesinlikle sıfır kodla yapabilirsiniz.

Çözüm

Instagram gibi sitelerde kullanımları göz önüne alındığında, görüntü filtrelerinin ilk beklediğinizden çok daha fazla kullanımı olabilir. Örneğin, WordPress'e yüklediğiniz görselleri özelleştirmek veya stok grafikleri farklılaştırmak için filtreler kullanabilirsiniz. Her iki durumda da Divi, web sitenizdeki tüm resimler, modüller, satırlar ve bölümler için renk filtrelerini, efektleri ve karışım modlarını kullanmayı kolaylaştırır.

Divi olmayan kullanıcılar, WordPress'e birden fazla görüntü filtresi eklemek için her zaman bir eklenti kullanabilir. Nihai Görüntü Filtreleri çok az sayıda iyi seçenekten biri olmasına rağmen, standartlarımızı karşılayan pek fazla yoktur. Öte yandan, CSS kullanmak, filtreleriniz ve nasıl göründükleri üzerinde çok daha fazla kontrol sahibi olmanızı sağlar. Yeni WordPress görüntü filtrelerini ayarlamak biraz çalışma gerektirir, ancak Divi'yi kullanmak bunu kolaylaştırır.

Web sitenize WordPress resim filtrelerini nasıl ekleyeceğiniz hakkında sorularınız mı var? Aşağıdaki yorumlar bölümünde onlar hakkında konuşalım!

Diana Hlevnajk / Shutterstock.com'dan makale küçük resmi