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

WordPress’te fareyle üzerine gelindiğinde görüntüleri soldurmak mı istiyorsunuz?

Bir kullanıcı faresini bir görselin üzerine getirdiğinde basit bir fade-in veya fade-out animasyonu sitenizi daha ilgi çekici hale getirebilir. Ayrıca ziyaretçileri içeriğinizle etkileşime girmeye teşvik ederek sitenizde daha uzun süre kalmalarını sağlayabilir.

Bu makalede, WordPress’te fareyle üzerine gelindiğinde soluk görüntü efektinin nasıl ekleneceğini 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 ‘Snippet kullan’ 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

Her bir görsel için soluklaştırma efekti kullanmak, özellikle bir fotoğraf web sitesi, stok fotoğraf mağazası veya çok sayıda görsel içeren başka bir site işletiyorsanız 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

Bir başka seçenek de öne çıkan görsellerinize veya gönderi küçük resimlerinize soluk animasyonlar eklemektir. Bunlar gönderinin birincil görselleridir ve genellikle ana sayfanızdaki, arşiv sayfalarınızdaki ve web sitenizin diğer önemli alanlarındaki başlığın yanında görünürler.

Ö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.

Bonus: SeedProd ile Herhangi Bir Görüntüyü, Metni, Düğmeyi ve Daha Fazlasını Canlandırın

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.

Farklı efektler denemek istiyorsanız, SeedProd ‘da resimlere, metinlere, düğmelere, videolara ve daha fazlasına ekleyebileceğiniz 40’tan fazla animasyon vardır. Sadece birkaç tıklama ile tüm bölümleri ve sütunları bile canlandırabilirsiniz.

SeedProd düzenleyicisinin içinde, canlandırmak istediğiniz içeriğe tıklamanız ve ardından sol taraftaki menüden ‘Gelişmiş’ sekmesini seçmeniz yeterlidir.

Daha sonra devam edebilir ve ‘Animasyon Efektleri’ bölümünü genişletmek için tıklayabilirsiniz.

Bundan sonra, çok çeşitli farklı solma efektleri de dahil olmak üzere ‘Giriş Animasyonu’ açılır menüsünden bir animasyon seçmeniz yeterlidir.

Daha fazla bilgi için lütfen WordPress ile açılış sayfası oluşturma kılavuzumuza bakın.

Umarız bu makale WordPress’te fareyle üzerine gelindiğinde görüntüleri nasıl solduracağınızı öğrenmenize yardımcı olmuştur. Ayrıca en iyi web tasarım yazılımının nasıl seç ileceğine dair rehberimizi ve en iyi WordPress açılır pencere eklentileri uzman seçimlerimizi görmek 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.