WordPress’te Fareyle Üzerine Gelindiğinde Görüntüler Nasıl Soldurulur (Basit ve Kolay)

Küçük bir şey gibi görünse de, WordPress sitelerimize bazen eklediğimiz şeylerden biri, bir kullanıcı faresini bir görüntünün üzerine getirdiğinde basit bir fade-in veya fade-out animasyonudur. Bu, sitelerimizi daha ilgi çekici ve etkileşimli hale getirmenin ince ama etkili bir yoludur.

Bu küçük görsel ipuçlarının ziyaretçilerin içeriğimizle etkileşiminde büyük bir fark yaratabildiğini gördük. Mesele sadece sitenin daha güzel görünmesini sağlamak değil; bu animasyonlar ziyaretçileri içeriğimizi daha fazla keşfetmeye teşvik edebiliyor.

Bu makalede, WordPress’te fareyle üzerine gelindiğinde bu soluk görüntü efektini nasıl ekleyeceğinizi göstereceğiz.

WordPress’te Fare Üzerine Getirildiğinde Görüntüler Neden Soluklaşır?

Animasyonlar web sitenizi daha ilgi çekici hale getirmenin kolay bir yoludur ve hatta ziyaretçinin dikkatini web sitenizin logosu veya harekete geçirici mesaj gibi sayfanızın en önemli içeriğine çekebilir.

WordPress’te CSS animasyonlarını kullanmanın birçok farklı yolu vardır, ancak görsellere fareyle üzerine gelme efekti eklemek özellikle etkilidir. Solma animasyonu, ziyaretçiler görsellerin üzerine geldiğinde görsellerinizin yavaşça görüneceği veya kaybolacağı anlamına gelir.

Bu, insanları görsellerinizle etkileşime girmeye teşvik eder ve hatta sayfaya bir hikaye anlatma unsuru ekleyebilir. Örneğin, ziyaretçi sayfada hareket ettikçe farklı görseller soluklaşıp kaybolabilir.

Diğer bazı animasyonların aksine, fareyle üzerine gelme efektindeki soluk görüntü hafiftir, bu nedenle ziyaretçinin okuma deneyimini veya yaptığınız herhangi bir görüntü optimizasyonunu olumsuz etkilemez.

Bununla birlikte, WordPress’te fareyle üzerine gelindiğinde görsellerinize nasıl solukluk ekleyeceğinizi gösterelim. Kullanmak istediğiniz yönteme doğrudan atlamak için aşağıdaki hızlı bağlantıları kullanmanız yeterlidir:

Yöntem 1: Tüm WordPress Görsellerine Fareyle Üzerine Gelindiğinde Soluklaşan Görsel Ekleme

Tüm görsellerinize solma efekti eklemenin en kolay yolu WPCode kullanmaktır. Bu ücretsiz eklenti, tema dosyalarınızı düzenlemek zorunda kalmadan WordPress’e kolayca özel kod eklem enizi sağlar.

WPCode ile, yeni başlayanlar bile birçok yaygın WordPress hatasına neden olabilecek hataları ve yazım hatalarını riske atmadan web sitelerinin kodunu düzenleyebilirler.

Yapmanız gereken ilk şey ücretsiz WPCode eklentisini yüklemek ve etkinleştirmektir. Daha fazla ayrıntı için WordPress eklentisi yükleme hakkındaki adım adım kılavuzumuza bakın.

Etkinleştirmenin ardından Kod Parçacıkları ” Parçacık Ekle‘ye gidin.

Burada, sitenize ekleyebileceğiniz tüm hazır WPCode parçacıklarını göreceksiniz. Bunlar arasında yorumları tamamen devre dışı bırakmanıza, WordPress’in genellikle desteklemediği dosya türlerini yüklemenize, ek sayfalarını devre dışı bırakmanıza ve çok daha fazlasına olanak tanıyan bir kod parçacığı bulunmaktadır.

Farenizi ‘Özel Kodunuzu Ekleyin’ seçeneğinin üzerine getirin ve göründüğünde ‘+ Özel Snippet Ekle’ seçeneğine tıklayın.

Başlamak için, özel kod parçacığı için bir başlık yazın. Bu, parçacığı WordPress kontrol panelinde tanımlamanıza yardımcı olacak herhangi bir şey olabilir.

WordPress’e özel CSS eklemek için ‘Kod Türü’ açılır menüsünü açın ve ‘CSS Snippet’i seçin.

Kod düzenleyicide aşağıdaki kod parçacığını ekleyin:

img:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

Bu kod parçacığı, kullanıcı faresini üzerine getirdiğinde her görüntüyü 2 saniye boyunca soluklaştıracaktır. Resmin daha yavaş solmasını sağlamak için ‘2s ease’ yerine daha yüksek bir sayı yazmanız yeterlidir. Resmin daha hızlı solmasını istiyorsanız, ‘1s ease’ veya daha küçük bir sayı kullanın.

Ayrıca opacity:0.6 satırını değiştirerek ‘ opaklığı ‘ daha yüksek veya daha düşük yapabilirsiniz.

Bu sayılardan herhangi birini değiştirirseniz, solma efektinin her tarayıcıda aynı görünmesi için bunları tüm özelliklerde (webkit, moz, ms ve o) değiştirdiğinizden emin olun.

Kod parçacığından memnun olduğunuzda, ‘Ekleme’ bölümüne ilerleyin. WPCode, kodunuzu her gönderiden sonra, yalnızca ön uç veya yalnızca yönetici gibi farklı konumlara ekleyebilir.

Tüm resimlerinize solma efekti eklemek için, zaten seçili değilse ‘Otomatik Ekle’ye tıklayın. Ardından, ‘Konum’ açılır menüsünü açın ve ‘Site Genelinde Başlık’ı seçin.

Bundan sonra, ekranın üst kısmına kaydırmaya hazırsınız ve ‘Etkin Değil’ geçişine tıklayarak ‘Etkin’ olarak değişmesini sağlayın.

Son olarak, CSS snippet’ini canlı hale getirmek için ‘Snippet’i Kaydet’e tıklayın.

Şimdi, WordPress web sitenizdeki herhangi bir görselin üzerine fareyi getirdiğinizde, solma efektinin çalıştığını göreceksiniz.

Yöntem 2: Tek Tek Sayfalara Görüntü Soldurma Animasyonları Ekleme

Özellikle web sitenizde bir fotoğraf galerisi, bir stok fotoğraf mağazası veya çok sayıda görsel içeren başka bir siteniz varsa, her bir görsel için solma efekti kullanmak dikkat dağıtıcı olabilir.

Bunu göz önünde bulundurarak, solma efektlerini yalnızca belirli bir sayfada veya gönderide kullanmak isteyebilirsiniz.

İyi haber ise WPCode’un özel kısa kodlar oluşturmanıza izin vermesidir. Bu kısa kodu herhangi bir sayfaya yerleştirebilirsiniz ve WordPress solma efektlerini yalnızca o sayfada gösterecektir.

Bunu yapmak için, özel bir kod parçacığı oluşturun ve yukarıda açıklanan aynı işlemi izleyerek solma animasyonu kodunu ekleyin. Ardından, ‘Kod parçacığını kaydet’ düğmesine tıklayın.

Bundan sonra, ‘Ekleme’ bölümüne gidin, ancak bu kez ‘Kısa Kod’u seçin.

Bu, herhangi bir sayfaya, gönderiye veya widget’a hazır alana ekleyebileceğiniz bir kısa kod oluşturur.

Bundan sonra, devam edin ve yukarıda açıklanan aynı süreci izleyerek snippet’i canlı hale getirin.

Artık herhangi bir sayfaya, gönderiye veya widget’a hazır alana gidebilir ve yeni bir ‘Kısa Kod’ bloğu oluşturabilirsiniz. Ardından, WPCode kısa kodunu bu bloğa yapıştırmanız yeterlidir.

Kısa kodun nasıl yerleştirileceği hakkında daha fazla bilgi için lütfen WordPress’te kısa kod ekleme kılavuzumuza bakın.

Bunu yaptıktan sonra, kısa kodu canlı hale getirmek için ‘Güncelle’ veya ‘Yayınla’ düğmesine tıklayın. Daha sonra fareyle üzerine gelindiğinde solma efektini görmek için o sayfayı, sayfayı veya widget’a hazır alanı ziyaret edebilirsiniz.

Yöntem 3: Öne Çıkan Görsellere Görsel Soldurma Animasyonları Ekleme

Başka bir seçenek de öne çıkan görsellerinize veya gönderi küçük resimlerinize soluk animasyonlar eklemektir. Bunlar gönderinin birincil görselleridir.

Öne çıkan görselleri fareyle üzerine gelindiğinde soldurarak, WordPress blogunuzdaki veya web sitenizdeki her bir görseli canlandırmadan sitenizi daha göz alıcı ve ilgi çekici hale getirebilirsiniz.

Gönderi küçük resimlerinize soluk animasyon eklemek için yukarıda açıklanan aynı süreci izleyerek yeni bir özel kod parçacığı oluşturmanız yeterlidir.

Ancak, bu kez aşağıdaki kodu düzenleyiciye ekleyin:

img.wp-post-image:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

Bundan sonra, ‘Ekleme’ kutusuna gidin ve ‘Otomatik Ekle’yi seçin.

Ardından, ‘Konum’ açılır menüsünü açın ve ‘Site Genelinde Üstbilgi’yi seçin.

Bundan sonra, yukarıda açıklanan aynı işlemi kullanarak devam edebilir ve kod parçacığını canlı hale getirebilirsiniz.

Artık fareyi öne çıkan herhangi bir görselin üzerine getirerek solma animasyonunu iş başında görebilirsiniz.

Daha fazla görsel fareyle üzerine gelme efekti eklemek istiyorsanız, WordPress’te görsel fareyle üzerine gelme efektleri ekleme kılavuzumuza bakın.

WordPress Görsellerinize Ekleyebileceğiniz Bonus Efektler

Soluk efektler görüntüleri daha ilginç hale getirmenin eğlenceli bir yoludur, ancak WordPress’te animasyonları kullanmanın daha birçok yolu vardır. Örneğin, bir ziyaretçi bir resmin üzerine geldiğinde metni ortaya çıkarmak için flipbox animasyonlarını veya kullanıcıların bir resmi daha ayrıntılı olarak inceleyebilmesi için yakınlaştırma efektlerini kullanabilirsiniz.

İşte resimlerinize ekleyebileceğiniz diğer ilginç efektler:

• WordPress’te Instagram Benzeri Fotoğraf Filtreleri Nasıl Eklenir (Adım Adım)
• WordPress’te Fotoğraf Öncesi ve Sonrası Nasıl Gösterilir (Slayt Efekti ile)
• WordPress Görsellerine Sağ Tıklama Yok Nasıl Eklenir
• WordPress’te Etkileşimli Görseller Nasıl Oluşturulur?
• WordPress’te Etkileşimli 360 Derece Görüntüler Nasıl Kolayca Eklenir?

Umarız bu makale WordPress’te fareyle üzerine gelindiğinde görsellerin nasıl soluklaştırılacağını öğrenmenize yardımcı olmuştur. WordPress dosyalarını medya kütüphanesi klasörlerinde nasıl düzenleyeceğinize dair rehberimize ve WordPress için en iyi öne çıkan görsel eklentileri ve araçlarına dair uzman seçimlerimize de göz atmak isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.