WordPress'te Fareyle Üzerine Gelindiğinde Görüntüleri Soluklaştırma (Basit ve Kolay)

Web sitenizin görsellerine biraz kıvılcım katmak istediğiniz oldu mu? Dikkat dağıtıcı olmadan sitenizi daha etkileşimli hissettiren küçük, profesyonel bir dokunuştan bahsediyoruz.

WPBeginner olarak, fareyle üzerine gelindiğinde basit bir solma efektinin mükemmel bir çözüm olduğunu bulduk. Görsel içeriğinizle etkileşim kurmaları için ziyaretçileri nazikçe teşvik eden ince bir animasyondur.

Bu küçük değişiklik, sitenizin genel hissinde büyük bir fark yaratabilir ve kurulumu şaşırtıcı derecede kolaydır. Bunu yapmak için kodlama uzmanı olmanıza gerek yok.

Bu kılavuzda, WordPress'te fareyle üzerine gelindiğinde görüntü solma efektini tam olarak nasıl ekleyeceğinizi göstereceğiz.

WordPress'te Fareyle Üzerine Gelindiğinde Görüntüleri Neden Soluklaştırmalı?

Animasyonlar, web sitenizi daha ilginç hale getirmenin kolay bir yoludur ve hatta ziyaretçinin dikkatini web sitesi logonuz veya bir eyleme çağrı gibi sayfanızın en önemli içeriğine çekebilir.

WordPress'te CSS animasyonları kullanmanın birçok farklı yolu vardır, ancak görüntülere fareyle üzerine gelme efekti eklemek özellikle etkilidir. Solma animasyonu, ziyaretçiler üzerine geldiklerinde görüntülerin yavaşça görüneceği veya kaybolacağı anlamına gelir.

Bu, insanların görsellerinizle etkileşim kurmasını teşvik eder ve hatta sayfaya bir hikaye anlatma öğesi ekleyebilir. Örneğin, ziyaretçi sayfada gezinirken farklı görseller kaybolup belirebilir.

Diğer bazı animasyonların aksine, fare üzerine gelindiğinde kaybolan görsel efekti zariftir, bu nedenle ziyaretçinin okuma deneyimini veya yaptığınız görsel optimizasyonunu olumsuz etkilemez.

Bunu söyledikten sonra, WordPress'te fare üzerine gelindiğinde görsellerinize bir kaybolma efekti eklemeyi size 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 Fare Üzerine Gelindiğinde Kaybolma Efekti Ekleme
• Yöntem 2: Tekil Sayfalara Kaybolma Animasyonları Ekleme
• Yöntem 3: Öne Çıkan Görsellere Kaybolma Animasyonları Ekleme
• Sıkça Sorulan Sorular (SSS)
• Görsel Efektleri ve Yönetimi İçin Ek Kaynaklar

Yöntem 1: Tüm WordPress Görsellerine Fare Üzerine Gelindiğinde Kaybolma Efekti Ekleme

Tüm görsellerinize kaybolma efekti eklemenin en kolay yolu, ücretsiz WPCode eklentisini kullanmaktır. WordPress için en güçlü ve kullanıcı dostu kod parçacığı eklentisidir ve tema dosyalarınızı düzenlemek zorunda kalmadan özel kod eklemenize olanak tanır.

Bu çok daha güvenlidir çünkü eklenti, yaygın WordPress hatalarına neden olabilecek hataları önlemeye yardımcı olur. Tüm özelliklerinin ayrıntılı bilgisi için, eksiksiz WPCode incelememizi okuyabilirsiniz.

Uzman İpucu: WPBeginner olarak, web siteleri portföyümüzdeki tüm özel kod parçacıklarını yönetmek için WPCode kullanıyoruz. Bu, bir temanın functions.php dosyasını doğrudan düzenlemeden işlevsellik eklememiz ve güvenli bir şekilde ince ayarlar yapmamız için güvenilir bir yoldur.

Yapmanız gereken ilk şey, ücretsiz WPCode eklentisini yüklemek ve etkinleştirmektir. Daha fazla ayrıntı için, WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.

Etkinleştirdikten sonra Kod Parçacıkları » Parçacık Ekle'ye gidin.

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

Fare imlecini ‘Özel Kodunuzu Ekleyin’ üzerine getirin ve göründüğünde ‘+ Özel Parçacık Ekle’ye tıklayın.

WordPress'e özel CSS eklemek için, ekranda görünen seçenekler listesinden kod türü olarak ‘CSS Parçacığı’nı seçmeniz gerekir.

Ardından, bir sonraki sayfada özel kod parçacığı için bir başlık girin.

Bu, kod parçacığını WordPress kontrol panelinde tanımlamanıza yardımcı olacak herhangi bir şey olabilir.

Kod düzenleyicisinde aşağıdaki kod parçası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ı fareyi üzerine getirdiğinde her görüntüyü 2 saniye boyunca soluklaştıracaktır. Görüntünün daha yavaş solmasını sağlamak için '2s ease' yerine daha yüksek bir sayı girin. Görüntünün daha hızlı solmasını istiyorsanız, '1s ease' veya daha küçük bir değer kullanın.

Ayrıca opacity:0.6 satırını değiştirerek 'opaklığı' artırabilir veya azaltabilirsiniz.

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 kaldığınızda, 'Ekleme' bölümüne gidin. WPCode, kodunuzu her gönderiden sonra, yalnızca ön uçta veya yalnızca yönetici gibi farklı konumlara ekleyebilir.

Tüm resimlerinize solma efekti eklemek için, henüz seçili değilse 'Otomatik Ekle'ye tıklayın. Ardından, 'Konum' açılır menüsünü açın ve 'Site Geneli Üstbilgisi'ni seçin.

Ardından, ekranın üst kısmına kaydırıp 'Etkin Değil' geçişine tıklayarak 'Etkin' hale getirmeye hazırsınız.

Son olarak, CSS parçasını canlı hale getirmek için ‘Parçayı Kaydet’e tıklayın.

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

Yöntem 2: Tekil Sayfalara Kaybolma Animasyonları Ekleme

Her tek resim için solma efekti kullanmak, özellikle web sitenizde bir fotoğraf galeriniz, bir stok fotoğraf mağazanız veya çok sayıda resim içeren başka herhangi bir siteniz varsa, 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 şu ki, WPCode özel kısa kodlar oluşturmanıza olanak tanır. Bu kısa kodu herhangi bir sayfaya yerleştirebilirsiniz ve WordPress yalnızca o sayfada solma efektlerini 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 sefer ‘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, yukarıda açıklanan aynı işlemi izleyerek kod parçacığını 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 o bloğa yapıştırın.

Kısa kodu nasıl yerleştireceğiniz hakkında daha fazla bilgi için lütfen WordPress'te kısa kod ekleme kılavuzumuza bakın.

İşlem tamamlandıktan sonra, kısa kodu canlı hale getirmek için ‘Güncelle’ veya ‘Yayınla’ düğmesine tıklayın. Ardından, solma efektini görmek için o sayfayı, gönderiyi veya widget'a hazır alanı ziyaret edebilirsiniz.

Yöntem 3: Öne Çıkan Görsellere Görüntü Solma Animasyonları Ekleme

Başka bir seçenek de öne çıkan görsellere veya gönderi küçük resimlerine solma animasyonları eklemektir. Bunlar gönderinin ana görselleridir.

Öne çıkan görselleri fareyle üzerine gelindiğinde soluklaştırarak, WordPress blogunuzdaki veya web sitenizdeki her görüntüyü canlandırmadan sitenizi daha göz alıcı ve ilgi çekici hale getirebilirsiniz.

Gönderi küçük resimlerinize bir solma animasyonu eklemek için, yukarıda açıklanan aynı işlemi izleyerek yeni bir özel kod parçacığı oluşturun.

Ancak bu sefer, 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, ‘Otomatik Ekleme’ kutusuna gidin ve ‘Otomatik Ekle’yi seçin.

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

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

Artık, solma animasyonunu görmek için herhangi bir öne çıkan görselin üzerine fareyle gelebilirsiniz.

Daha fazla resim fareyle üzerine gelme efekti eklemek isterseniz, WordPress'te resim üzerine gelme efektlerinin nasıl ekleneceği hakkındaki rehberimize göz atın.

Sıkça Sorulan Sorular (SSS)

WordPress'te resim üzerine gelme efektleri ekleme hakkında en sık aldığımız sorulardan bazılarına burada yanıtlar bulabilirsiniz.

Bir solma efekti eklemek web sitemi yavaşlatır mı?

Hayır, bu CSS tabanlı solma efekti web sitenizi fark edilir derecede yavaşlatmamalıdır. Kod, basit CSS geçişlerini kullanır; bunlar çok hafiftir ve modern web tarayıcıları tarafından optimize edilmiştir.

Bu yöntem, bu kadar basit bir efekt için JavaScript veya büyük animasyon kütüphaneleri kullanmaktan çok daha verimlidir.

Belirli, tek bir resme solma efektini nasıl uygularım?

Tek bir resmi hedeflemek için ona özel bir CSS sınıfı atayabilirsiniz. Öncelikle, düzenleyicide resim bloğunu seçin ve sağdaki blok ayarlarında 'Gelişmiş' panelini bulun.

'Ek CSS sınıf(lar)ı' alanına custom-fade-image gibi benzersiz bir ad ekleyin. Ardından, WPCode kod parçacığınızı bu sınıfı özel olarak hedefleyecek şekilde değiştirin, örneğin:
img.custom-fade-image:hover { ... }.

Fare üzerine gelince resim solma efekti mobil cihazlarda çalışır mı?

'Fare üzerine gelme' veya 'hover' eylemi, fare imleci olan masaüstü kullanıcılarına özgüdür. Bu efekt, resimlerin üzerine gelmek için bir imleç olmadığından akıllı telefonlar veya tabletler gibi dokunmatik cihazlarda tetiklenmez.

Ancak, kod mobil cihazlarda herhangi bir soruna neden olmaz. Resimleriniz basitçe solma animasyonu olmadan normal şekilde görüntülenecektir.

Solma dışında başka animasyon efektleri kullanabilir miyim?

Evet, kesinlikle. Solma, CSS ile elde edebileceğiniz birçok olasılıktan sadece biridir.

Yakınlaştırma, kaydırma, gri tonlama gibi efektler oluşturabilir veya kaplamalar uygulayabilirsiniz. Daha fazla fikir ve kod örneği için, WordPress'te resim üzerine gelme efektleri nasıl eklenir hakkındaki ayrıntılı kılavuzumuza bakın.

Görsel Efektleri ve Yönetimi İçin Ek Kaynaklar

Basit bir solma harika bir başlangıçtır, ancak resimlerinizi daha ilgi çekici hale getirmenin birçok başka yolu vardır. Daha gelişmiş seçenekleri keşfetmek isterseniz, resim efektleri ve yönetimi hakkındaki diğer kılavuzlarımızdan bazıları şunlardır:

• WordPress'te Instagram Benzeri Fotoğraf Filtreleri Nasıl Eklenir (Adım Adım)
• WordPress'te Önce ve Sonra Fotoğrafı Nasıl Gösterilir (Kaydırma Efektiyle)
• WordPress Resimlerinde Sağ Tıklamayı Engelleme Nasıl Eklenir
• WordPress'te Etkileşimli Görseller Nasıl Oluşturulur
• WordPress'te Etkileşimli 360 Derece Görüntüleri Kolayca Ekleme

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

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.