WordPress üzerine Hover görüntü etkisi nasıl eklenir (adım adım)
WordPress’e yüzen bir görüntü efekti nasıl ekleneceğinizi öğrenmek ister misiniz? Görüntü Hover efektleri sitenizi daha etkileşimli ve çekici hale getirebilir. Bu, daha iyi bir ilk izlenim yaratır ve sitenizde harcanan zamanı artırır. Bu makalede, WordPress’e adım adım nasıl yüzen bir görüntü efekti ekleyeceğinizi göstereceğiz.
Görüntü yönünün etkisi nedir? Görüntü gelmenin etkisi, animasyon, zoom efektleri, pop -up’lar ve daha fazlası gibi statik görüntülerinize etkileşimli öğeler eklemenizi sağlar. Örneğin, fiyatları veya portföyünüze bağlantıları ortaya çıkarmak için tersine çevrilmiş görüntülere sahip olabilirsiniz.
Yüzen görüntüler ayrıca fotoğraflarınızı, galerilerinizi ve mini görüntülerinizi görüntülemenin yaratıcı bir yolunu sunar. Etkileşimli görüntüler ve öğeler, imlecin sitenize birçok açıdan yardımcı olabileceğini gösteriyor:
Ziyaretçilerinizi sitenize harcanan zamanı artırın
Ziyaretçilerinize içerik sunmanın yaratıcı bir yolunu verin
Kullanıcınıza site öğelerinin tıklanabileceğini söyleyin
WordPress üzerinde bir Hover Görüntü Etkisi Oluşturma Nasıl Oluşturulur WordPress sitenize bir görüntü gelme efekti eklemenin en iyi yolu WordPress eklentisini kullanmaktır. Eklentilerle, bir görüntü efekti oluşturmak için CSS düzenleme, biçimlendirme ve eklemek için zaman harcamanıza gerek yoktur. Bu sadece işe yarıyor.
Hover görüntülerinin benzersiz bir görüntü efekti ve animasyonu oluşturmak için kullanabileceğiniz her türlü eklenti vardır. Bu öğreticide, ihtiyacınız olan Hover efektini eklemek için dört farklı yol göstereceğiz.
WordPress üzerindeki Hover Flipbox görüntü efektini ekleyin
Görüntü yakınlaştırma ekleyin ve WordPress üzerindeki efektleri artırın
WordPress’e görüntü animasyon efektleri ekleyin
WordPress1’de açılır pencere efektleri nokta görüntüsü ekleme. WordPress Flip Box üzerindeki Hover Flipbox görüntü efektini ekleyin Fareniz üzerinde yüzdüğünde baş aşağı olan bir kutudur. Metni görüntülemek için bu animasyonu görüntünüze ekleyebilir veya yüzerken resimleri değiştirebilirsiniz.
Görüntünün her iki taraftaki tasarımı ile birlikte görüntünün nasıl tersine çevrildiğini kontrol edebilirsiniz. Fotoğrafçıysanız, bunu işinizi göstermek ve portföyünüzü ayırmak için kullanabilirsiniz. Flipbox görüntü efekti eklemenin en kolay yolu WordPress eklentisidir. Bir eklenti, bu efekti hızlı bir şekilde oluşturmanıza ve ayarlamanıza olanak tanır. Flipbox Eklentisi – Awesomes Flip Boxes görüntü kaplamasını kullanmanızı öneririz. Bu, Flipbox eklentisi ve WordPress için en iyi gıcırdatma görüntüsüdür. Bu eklenti, WordPress resminize özel bir Flipbox efekti eklemenizi sağlar.
Daha önce yapılan düzinelerce farklı animasyon efekt ve şablon ile görünür. Rengi bile kontrol edebilir ve kendi özel CSS’nizi ekleyebilirsiniz. Daha fazla ayrıntı için, WordPress’te nasıl kaplama ve Flipbox’ın nasıl yapıldığına dair kılavuzumuza bakın. 2. Görüntüyü ekleyin ve WordPress Zoom görüntü efekti üzerindeki etkiyi büyütme, kullanıcılarınızın normal boyutlu görüntülerde göremedikleri ayrıntıları görmelerini sağlar. Bu, ürün öğreticileri ve yüksek ayrıntılı seviyelere sahip görüntüler üzerinde iyi bir etkidir. Amazon gibi zoom efektleri eklemek için çevrimiçi mağazanızda da kullanabilirsiniz.
Görüntünüze zoom efektleri eklemenin ve görüntüleri büyütmenin en kolay yolu WordPress eklentilerini kullanmaktır. WP görüntü zoom eklentisini kullanmanızı öneririz. Bu eklenti, görüntünüze yakınlaştırma efektleri eklemenize ve büyütmenize olanak tanır. Bu aynı zamanda zoom lens, zoom seviyesi ve daha fazlasının şeklini seçmenizi sağlayan bir özellik ile donatılmıştır. Daha fazla ayrıntı için, WordPress’teki görüntüler için bir büyütme zoomunun nasıl ekleneceğine dair kılavuzumuza bakın. 3. WordPress üzerine görüntü animasyon efektleri ekleyin WordPress’e ekleyebileceğiniz her türlü ek vagon efekti vardır.
Örneğin, animasyonlu bir resim galeriniz, LightBox görüntüsü, karşılaştırma görüntüsü, metin genişliği ve daha fazlası var.
Bunun gibi bir serip efekti eklemek için, Ultimate Image Hover Effects eklentisini kullanmanızı öneririz. Bu eklenti çok hafiftir, bu nedenle web sitenizin performansını ve yükleme hızını etkilemez. Bu da kullanımı çok kolaydır. Birkaç tıklamayla benzersiz bir görüntü efekti ekleyebilirsiniz. Yapmanız gereken ilk şey, Ultimate Image Hover efektleri eklentisini yüklemek ve etkinleştirmektir. Daha fazla bilgi için, WordPress eklentilerinin nasıl yükleneceğine dair adım adım kılavuzumuza bakın.
Eklentiyi yükledikten ve etkinleştirdikten sonra, WordPress yöneticinizde ‘Image Hover’ı tıklamanız gerekir. Bu, seçebileceğiniz sekiz farklı Hover görüntü efekti getirecektir.
Bu öğretici için ‘altyazı efektleri’ etkisini kullanacağız. Bu, fare imlecindeki resminizin üzerine animasyonlu bir metin ekler. İlk olarak, ‘Metin Efekt’ kutusunu tıklayın. Bu, aralarından seçim yapabileceğiniz farklı bir animasyon menüsü gösterir.
İstediğiniz görüntü efektini bulduktan sonra ‘Stil Oluştur’a tıklayın. Açılır kutuda, Hover efektinizi adlandırın ve düzeni seçin. Seçtiğiniz düzen numarası, sıralanan görüntünün sırasına uygundur. ‘Kaydet’i tıklamayı unutmayın.
Bir sonraki ekranda, Hover efektinizi ayarlamak için çeşitli seçenekleriniz olacaktır. Ancak, varsayılan animasyon seçeneğine izin vereceğiz.
Bir değişiklik yaparsanız, ‘Pratinuki’ kutusunda göründüğünü göreceksiniz. Varsayılan görüntüyü değiştirmek için imleci görüntüye yönlendirin ve ‘Düzenle’ seçeneğini tıklayın.
Bu açılır pencerede, Hover’da görünecek başlık ve açıklamanızı değiştirebilirsiniz. Görüntünüzü yüklemek için ‘Resim’ başlığı altındaki kutuyu tıklayın ve medya kitaplığınızdan bir resim yükleyin veya seçin.
Görüntünüzün kullanıcıyı web sitenizdeki başka bir sayfaya getirmesini istiyorsanız bağlantılar ve düğme metni de ekleyebilirsiniz.
Bittiğinde ‘Gönder’i tıklayın.
Web sitenize resim eklemek için kısa kodu ‘kısa kod’ kutusuna kopyalayın. Ardından, görüntüleri görüntülemek ve kısa kodu yapmak istediğiniz herhangi bir sayfayı, yayınını veya widget’ı açın.
Değişiklikleri depolamak ve görüntünüzün bir kayma etkisi oluşturmak için ‘Yayın’ veya ‘Güncelleme’ ye tıkladığınızdan emin olun. 4. Pop -up efektini ekleyin, yukarıdaki WordPress eklentisindeki görüntüyü işaretleyin, flip kutuları, vurgulu efektler, animasyonlar ve daha fazlası gibi özellikler eklemenize yardımcı olacaktır. Yukarıdaki eklenti tarafından kapsanmayan farklı bir görüntü gelme etkisi eklemek istiyorsanız ne olur?
Bunu yapmanın en iyi yolu CSS Kustom WordPress eklentisidir. Bu, herhangi bir kodu düzenlemeye gerek kalmadan görüntünüzde görsel bir değişiklik yapmanızı sağlar. CSS dosyalarını manuel olarak düzenleyebilir veya WordPress ayarlamaları aracılığıyla CSS ekleyebilirsiniz, ancak eklenti kullanmak en kolay seçenektir. CSS Hero eklentisini kullanmanızı öneririz. Bu eklenti, bir kod satırı yazmadan WordPress sitenizdeki hemen hemen her CSS stilini düzenlemenize olanak tanır. Özellikle görüntüler için tüm tür varsayılan CSS efektleri vardır. Eklentiler yükleme hakkında daha fazla bilgi için, WordPress eklentilerini nasıl yükleyeceğiniz konusundaki kılavuzumuza bakın. Eklenti yüklendikten sonra, ‘Ürün Etkinleştirmeye Devam’ düğmesini tıklamanız gerekir.
Bu, eklenti etkinleştirme işlemi boyunca size rehberlik edecektir. Eklenti etkinleştirildikten sonra görüntünüzü ayarlamaya başlayabilirsiniz. Animasyon yapmak istediğiniz resimleri veya resimleri olan bir sayfa veya yayın açın ve sayfanın üst kısmındaki ‘CSS Kahraman’ı’ tıklayın. Bu, tüm farklı CSS efekt türlerini ekleyebileceğiniz Editör menüsünü açacaktır. Hover efektine görüntü açılır yanı sıra ekleyeceğiz. İlk olarak, düzenlemek istediğiniz görüntüyü tıklamanız gerekir, ardından ‘Örnek’i tıklamanız gerekir. Bundan sonra ‘Hover Effects’i tıklayın.
Bu, farklı bir CSS efekt menüsü getirecektir. Ardından, ‘HVR-POP’ efekti seçin ve ‘Uygula’yı tıklayın. ‘Kaydet ve Yayın’ tıklayın, CSS efekti otomatik olarak görüntünüze uygulanır.
