WordPress'te Görüntü Vurgulu Efektler Nasıl Eklenir (Adım Adım)

WordPress'te görüntü üzerine gelme efektlerinin nasıl ekleneceğini öğrenmek ister misiniz?

Görüntü üzerine gelme efektleri, sitenizi daha etkileşimli ve ilgi çekici hale getirebilir. Bu, daha iyi bir ilk izlenim yaratır ve sitenizde geçirilen süreyi iyileştirir.

Bu makalede, adım adım WordPress'te görüntü üzerine gelme efektlerinin nasıl ekleneceğini göstereceğiz.

Görüntü Hover Efektleri Nelerdir?

Görüntü üzerine gelme efektleri, statik görüntülerinize animasyonlar, yakınlaştırma efekti, açılır pencere ve daha fazlası gibi etkileşimli öğeler eklemenize olanak tanır.

Örneğin, fiyatlandırmanızı veya portföyünüze bağlantılarınızı ortaya çıkarmak için dönen resimleriniz olabilir.

Görüntü üzerine gelmeler ayrıca fotoğraflarınızı, galerilerinizi ve küçük resimlerinizi görüntülemenin yaratıcı bir yolunu sunar.

Etkileşimli resimler ve fareyle üzerine gelme öğeleri, sitenize birçok yönden yardımcı olabilir:

• Ziyaretçilerinizin sitenizde geçirdiği zamanı iyileştirin
• Ziyaretçilerinize içerik sunmanın yaratıcı yollarını sunar
• Kullanıcılarınıza bir site öğesinin tıklanabilir olduğunu bildirin

WordPress'te Görüntü Vurgulu Efektler Nasıl Oluşturulur

WordPress web sitenize görüntü üzerine gelme efektleri eklemenin en iyi yolu bir WordPress eklentisi kullanmaktır.

Bir eklentiyle, görüntü efektleri oluşturmak için düzenleme, biçimlendirme ve CSS eklemek için zaman harcamanıza gerek kalmaz. Sadece çalışır.

Benzersiz görüntü vurgulama efektleri ve animasyonlar oluşturmak için kullanabileceğiniz her türlü eklenti vardır.

Bu öğreticide, ihtiyacınız olan fareyle üzerine gelme efektlerini eklemenin dört farklı yolunu göstereceğiz.

• WordPress'te Görüntü Vurgulu Flipbox Efektleri Ekleme
• WordPress'te Görüntü Yakınlaştırma ve Büyütme Efektleri Ekleme
• WordPress'te Görüntü Animasyon Efektleri Ekleme
• WordPress'te Görüntü Vurgulu Açılır Pencere Efektleri Ekleme

1. WordPress'te Görüntü Vurgulu Flipbox Efektleri Ekleme

Bir çevirme kutusu, fareniz üzerine geldiğinde çevrilen bir kutudur.

Metni ortaya çıkarmak ve hatta fareyle üzerine gelindiğinde resmi değiştirmek için bu animasyonu resimlerinize ekleyebilirsiniz.

Her iki taraftaki görüntünün tasarımıyla birlikte görüntünün nasıl döndüğünü kontrol edebilirsiniz.

Bir fotoğrafçıysanız, çalışmalarınızı sergilemek ve portföylerinizi ayırmak için bunu kullanabilirsiniz.

Resim çevirme kutusu efektleri eklemenin en kolay yolu bir WordPress eklentisidir. Bir eklenti, bu efektleri hızlı bir şekilde oluşturmanıza ve özelleştirmenize olanak tanır.

Flipbox – Awesomes Flip Boxes Image Overlay eklentisini kullanmanızı öneririz. WordPress için en iyi flipbox ve görüntü üzerine gelme eklentisidir.

Bu eklenti, WordPress resimlerinize özel flipbox efektleri eklemenizi sağlar.

Düzinelerce farklı animasyon efekti ve önceden oluşturulmuş şablonlarla birlikte gelir. Hatta renkleri kontrol edebilir ve kendi özel CSS'nizi ekleyebilirsiniz.

Daha fazla ayrıntı için, WordPress'te flipbox bindirmeleri ve fareyle üzerine gelmelerin nasıl oluşturulacağına ilişkin kılavuzumuza bakın.

2. WordPress'te Görüntü Yakınlaştırma ve Büyütme Efektleri Ekleme

Görüntü yakınlaştırma efektleri, kullanıcılarınızın normal boyutlu bir görüntüde göremeyecekleri ayrıntıları görmelerini sağlar.

Bu, ürün eğitimleri ve yüksek düzeyde ayrıntı içeren resimler için harika bir etkidir.

Amazon gibi yakınlaştırma efekti eklemek için çevrimiçi mağazanızda da kullanabilirsiniz.

Resimlerinize resim yakınlaştırma ve büyütme efektleri eklemenin en kolay yolu bir WordPress eklentisi kullanmaktır.

WP Image Zoom eklentisini kullanmanızı öneririz. Bu eklenti, resimlerinize basitçe yakınlaştırma ve büyütme efektleri eklemenizi sağlar.

Ayrıca zum lensinin şeklini, zum seviyesini ve çok daha fazlasını seçmenizi sağlayan özelliklerle donatılmıştır.

Daha fazla ayrıntı için, WordPress'teki resimler için nasıl büyüteçli yakınlaştırma ekleneceğine ilişkin kılavuzumuza bakın.

3. WordPress'te Görüntü Animasyon Efektleri Ekleme

WordPress'e ekleyebileceğiniz her türlü ek vurgulu efekt vardır.

Örneğin, animasyonlu resim galerileriniz, ışık kutusu resimleriniz, karşılaştırma resimleriniz, metin bindirmeleri ve daha fazlası var.

Bunun gibi vurgulu efektler eklemek için Image Hover Effects Ultimate eklentisini kullanmanızı öneririz.

Bu eklenti çok hafiftir, bu nedenle web sitenizin performansını ve yükleme hızlarını etkilemez. Ayrıca kullanımı çok kolaydır. Birkaç tıklamayla benzersiz görüntü efektleri ekleyebilirsiniz.

Yapmanız gereken ilk şey, Image Hover Effects Ultimate eklentisini kurmak ve etkinleştirmektir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Eklentiyi kurup etkinleştirdikten sonra, WordPress yöneticinizde 'Image Hover'a tıklamanız gerekir. Bu, aralarından seçim yapabileceğiniz sekiz farklı görüntü vurgulu efekti getirecektir.

Bu eğitim için 'Altyazı Efektleri' efektini kullanacağız. Bu, fareyle üzerine gelindiğinde resminizin üzerine animasyonlu metin ekler.

İlk olarak, 'Altyazı Efektleri' kutusuna tıklayın. Bu, aralarından seçim yapabileceğiniz farklı animasyon seçeneklerinden oluşan bir menü getirir.

Beğendiğiniz görüntü efektini bulduktan sonra, 'Stil Oluştur'u tıklayın.

Açılır kutuda, vurgulu efektinizi adlandırın ve düzeni seçin. Seçtiğiniz düzen numarası, sıralı görüntü dizisiyle eşleşir.

'Kaydet'i tıklamayı unutmayın.

Bir sonraki ekranda, fareyle üzerine gelme efektinizi özelleştirmek için çeşitli seçeneklere sahip olacaksınız.

Ancak, varsayılan animasyon seçeneklerini bırakacağız.

Değişiklik yaparsanız, bunların 'Önizleme' kutusunda göründüğünü göreceksiniz.

Varsayılan resmi değiştirmek için resmin üzerine gelin ve 'Düzenle' seçeneğini tıklayın.

Bu açılır pencerede, fareyle üzerine gelindiğinde görünecek olan başlığınızı ve açıklamanızı değiştirebilirsiniz.

Resminizi yüklemek için 'Resim' başlığının altındaki kutuyu tıklayın ve medya kitaplığınızdan bir resim yükleyin veya seçin.

Resminizin kullanıcıları web sitenizdeki başka bir sayfaya götürmesini istiyorsanız bir bağlantı ve düğme metni de ekleyebilirsiniz.

Bitirdiğinizde, 'Gönder'i tıklayın.

Resmi web sitenize eklemek için 'Kısa Kod' kutusundaki kısa kodu kopyalayın.

Ardından, resminizin görünmesini istediğiniz herhangi bir sayfayı, gönderiyi veya widget'ı açın ve kısa kodu yapıştırın.

Değişikliklerinizi kaydetmek ve görsel vurgulu efektinizi canlı hale getirmek için 'Yayınla' veya 'Güncelle'yi tıkladığınızdan emin olun.

4. WordPress'te Görüntü Vurgulu Açılır Pencere Efektleri Ekleme

Yukarıdaki eklentiler, çevirme kutuları, fareyle üzerine gelme efektleri, animasyonlar ve daha fazlası gibi özellikler eklemenize yardımcı olacaktır.

Yukarıdaki eklentilerin kapsamadığı farklı bir resim vurgulu efekti eklemek isterseniz ne olur?

Bunu yapmanın en iyi yolu bir WordPress özel CSS eklentisidir. Bu, herhangi bir kodu düzenlemek zorunda kalmadan resimlerinizde görsel değişiklikler yapmanızı sağlar.

CSS dosyalarınızı manuel olarak düzenleyebilir veya WordPress özelleştirici aracılığıyla CSS ekleyebilirsiniz, ancak bir eklenti kullanmak en kolay seçenektir.

CSS Hero eklentisini kullanmanızı öneririz. Bu eklenti, bir satır kod yazmadan WordPress sitenizdeki hemen hemen her CSS stilini düzenlemenize olanak tanır.

Özellikle resimler için her türlü yerleşik CSS efekti vardır.

Eklenti yüklemeyle ilgili daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin kılavuzumuza bakın.

Eklenti yüklendikten sonra 'Ürün Aktivasyonuna Devam Et' düğmesini tıklamanız gerekir.

Bu, eklenti etkinleştirme sürecinde size rehberlik edecektir.

Eklenti etkinleştirildikten sonra resimlerinizi özelleştirmeye başlayabilirsiniz.

Canlandırmak istediğiniz resim veya resimlerin bulunduğu bir sayfa veya gönderi açın ve sayfanın üst kısmındaki 'CSS Kahramanı'na tıklayın.

Bu, her türlü farklı CSS efektini ekleyebileceğiniz editör menüsünü açacaktır.

Fareyle üzerine gelme efektine bir resim açılır penceresi ekleyeceğiz. Öncelikle düzenlemek istediğiniz görsele tıklamanız ve ardından 'Snippet'ler'e tıklamanız gerekir.

Bundan sonra, 'Hover Effects'i tıklayın.

Bu, farklı CSS efektlerinden oluşan bir menü getirecektir. Ardından, '.hvr-pop' efektini seçin ve 'Uygula'yı tıklayın.

'Kaydet ve Yayınla'yı tıkladığınızda CSS efekti resimlerinize otomatik olarak uygulanacaktır.

Bu makalenin, WordPress'te görüntü üzerine gelme efektlerini nasıl ekleyeceğinizi öğrenmenize yardımcı olacağını umuyoruz. Web için görsellerin nasıl optimize edileceğine ilişkin kılavuzumuza ve görsel SEO'ya yeni başlayanlar için kılavuzumuza da göz atmak isteyebilirsiniz.

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