En çok ihtiyaç duyduğunuzda güvenilir WordPress eğitimleri.
WordPress Başlangıç Rehberi
WPB Kupası
25 Milyon+
Eklentilerimizi kullanan web siteleri
16+
Yıllık WordPress deneyimi
3000+
Uzmanlardan WordPress eğitimleri

WordPress'e Görüntü Üzerine Gelme Efektleri Nasıl Eklenir (Adım Adım)

Web siteniz için mükemmel görselleri seçmenin ne kadar çaba gerektirdiğini biliyoruz. Ancak bazen en iyi fotoğraflar bile biraz durağan hissedilebilir ve ziyaretçinin tam dikkatini çekemeyebilir.

Basit bir üzerine gelme animasyonu eklemek, sitenizin daha profesyonel ve ilgi çekici hissetmesini sağlayan küçük bir ayrıntı olabilir. Birçoğu bunun özel kod gerektirdiğine inanıyor, ancak projelerimizde hiç kodlama yapmadan bunu yapmanın birkaç kolay yolunu bulduk.

Bu makalede, WordPress'te güzel resim fareyle üzerine gelme efektleri eklemek için beş basit, adım adım yöntemi size adım adım anlatacağız. Basit solmalardan etkileşimli flipbox'lara kadar her şeyi kapsayacağız.

WordPress'e resim üzerine gelme efektleri nasıl eklenir (adım adım)

WordPress'te Resim Fareyle Üzerine Gelme Efektleri Neden Kullanılır?

Resim üzerine gelme efektleri, resimlerinize yakınlaştırma, solma, açılır pencereler ve daha fazlası gibi kısa animasyonlar eklemenize olanak tanır. Bu, bir sayfada çok sayıda resim olsa bile resimlerinizi daha ilginç ve ilgi çekici hale getirecektir.

Ziyaretçinin dikkatini en önemli içeriğe çekmek için kaydırma efektlerini de kullanabilirsiniz. Örneğin, web sitenizin logosunu veya harekete geçirici mesajı vurgulamak için CSS animasyonlarını kullanabilirsiniz.

WordPress sitenize farklı resim fareyle üzerine gelme efektleri eklemenin başlangıç dostu 5 yoluna dalalım. Kullanmak istediğiniz efekte doğrudan atlamak için aşağıdaki hızlı bağlantıları kullanın:

Seçenek 1: WordPress'te Flipbox Efektleri Ekleme (Hızlı ve Kolay)

WordPress'e kaydırma efektleri eklemenin en kolay yolu flipbox'ları kullanmaktır. Bir flipbox, üzerine fareyle gelindiğinde dönen basit bir kutudur. Bu, fareyle üzerine gelindiğinde farklı bir resim, metin veya harekete geçirici mesaj göstermenizi sağlar.

Eğer bir fotoğrafçıysanız, flipbox'un bir tarafında bir fotoğraf ve diğer tarafında kamera modeli veya çözünürlüğü hakkında bilgi gösterebilirsiniz.

Eğer dijital sanat veya grafik satıyorsanız, ziyaretçilerin o fotoğrafı satın almak için tıklayabilecekleri bir düğme bile ekleyebilirsiniz.

Bir WordPress web sitesinde flipbox animasyon örneği

Flipbox – Awesomes Flip Boxes Image Overlay adlı eklentiyi kullanarak flipbox oluşturmanın en kolay yolu budur. Bu ücretsiz eklenti, resim, metin ve harekete geçirici mesaj düğmelerinin bir karışımını içeren çeşitli farklı flipbox stilleriyle birlikte gelir.

Yapmanız gereken ilk şey Flipbox eklentisini kurmak ve etkinleştirmektir. Daha fazla ayrıntı için, WordPress eklentisi nasıl kurulur hakkındaki adım adım kılavuzumuza bakın.

Eklenti yüklendikten ve etkinleştirildikten sonra, Çevirme Kutusu » Yeni Oluştur'a giderek ilk çevirme kutunuzu oluşturabilirsiniz.

Çevirme kutusu görüntü üzerine gelme stili nasıl seçilir

Bu, kullanabileceğiniz tüm farklı şablonları gösterir.

Bir tasarım seçmek için, 'Stil Oluştur' düğmesine tıklayın.

Bir flipbox stili nasıl seçilir

Görünen açılır pencerede, flipbox tasarımı için bir ad yazın. Bu yalnızca referansınız içindir, bu yüzden istediğiniz herhangi bir şeyi kullanabilirsiniz.

Ayrıca 1., 2. veya 3. düğmesine tıklayarak kullanmak istediğiniz düzeni seçebilirsiniz.

Bir çevirmeli kutu animasyon stili seçme

Bir flipbox stili seçtikten sonra yazı tiplerini, dolguyu ve kenar boşluklarını değiştirebilirsiniz.

Ardından çevirme kutusunun her iki tarafına metin, resim ve simgeler ekleyebilirsiniz.

Flipbox resim fareyle üzerine gelme efektini özelleştirme

Flipbox'ın görünümünden memnun kaldığınızda, 'Yeni Flip Kutuları Ekle' bölümündeki '+' işaretine tıklayarak daha fazla kutu eklemek isteyebilirsiniz.

Bu, aynı stile sahip birden fazla flipbox oluşturmanıza ve ardından bunları sütunlara ve satırlara ayırmanıza olanak tanır.

Resimlere bir çevirme kutusu efekti ekleme

Örneğin, her fiyatlandırma planı için bir flipbox oluşturabilirsiniz.

Alışveriş yapanlar, maliyeti görmek için bir plana fareyle yaklaşabilirler.

WordPress'te bir flipbox resim kaydırma efektinin örneği

Üzerine gelme animasyonlarından memnun kaldığınızda, eklentinin otomatik olarak sağladığı bir kısa kod kullanarak bunu herhangi bir sayfaya, gönderiye veya widget'a hazır alana ekleyebilirsiniz.

Adım adım talimatlar için, flipbox kaplamaları ve fareyle üzerine gelme efektleri oluşturma kılavuzumuza bakın.

Seçenek 2: Resim Yakınlaştırma ve Büyütme Efektleri Ekleme (Çevrimiçi Mağazalar İçin En İyisi)

Yakınlaştırma efektleri, kullanıcıların normalde görünür olmayan ayrıntıları görmelerini sağlar. Bir e-ticaret mağazanız veya çevrimiçi bir pazar yeriniz varsa, bu, alışveriş yapanların bir ürünü daha ayrıntılı olarak incelemelerine olanak tanır, bu da daha fazla satış yapmanızı sağlayabilir.

Bir WordPress web sitesinde yakınlaştırma efekti örneği

Yakınlaştırma efektleri de sitenize daha fazla etkileşim ve ilgi katabilir.

Örneğin, ziyaretçileri resimlerinizdeki küçük ayrıntıları fark etmeye zorlayan basit bulmacalar ve oyunlar oluşturabilirsiniz. Bu, onları sitenizde daha uzun süre tutabilir, bu da sayfa görüntülemelerinizi artıracak ve hemen çıkma oranını azaltacaktır.

Yapbozlar ve oyunlar oluşturmak için görüntü üzerine gelme efektlerini kullanma

WordPress'e resim yakınlaştırma ve büyütme efektleri eklemek için en iyi WordPress eklentisi WP Image Zoom'dur.

Bu kaydırma efekti eklentisi, yakınlaştırma efektinin tüm WordPress web sitenizde nasıl görüneceğini ve davranacağını özelleştirmenize olanak tanır. Ardından herhangi bir resim için yakınlaştırmayı etkinleştirebilirsiniz.

Bu kılavuzda ücretsiz sürümü kullanacağız, ancak daha fazla özelleştirme seçeneği istiyorsanız, WP Image Zoom Pro'ya göz atmak isteyebilirsiniz. Daha fazla ayrıntı için WP Image Zoom incelememize bakın.

Öncelikle, WP Image Zoom eklentisini kurmanız ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.

Etkinleştirdikten sonra, WordPress yönetici kenar çubuğundan WP Image Zoom » Zoom Settings sayfasına gitmeniz gerekir. Zaten seçili değilse, ‘Zoom Settings’e tıklayın.

WordPress'te bir yakınlaştırma resmi fareyle üzerine gelme efektini özelleştirme

Başlamak için birkaç farklı lens şekli arasından seçim yapabilirsiniz.

İmleç türünü seçebilir, animasyon efekti ayarlayabilir, fareyle üzerine gelindiğinde veya fare tıklamasıyla yakınlaştırmayı etkinleştirebilir ve bir yakınlaştırma düzeyi tanımlayabilirsiniz.

Yakınlaştırmanın nasıl ayarlandığından memnun kaldığınızda, efekti herhangi bir görüntüye ekleyebilirsiniz. Gutenberg blok düzenleyicisinde, yakınlaştırma efekti eklemek istediğiniz görüntüyü seçmek için tıklayın. Veya, önce WordPress'e bir görüntü yükleyin.

Sağdaki menüde, 'Yakınlaştırma ile' düğmesini seçin.

Bir WordPress görüntüsüne yakınlaştırma efekti ekleme

Eğer WooCommerce kullanıyorsanız, eklentinin ayarlarında tüm ürün resimlerinizde yakınlaştırmayı etkinleştirebilirsiniz. Bu, her ürünü tek tek güncellemek zorunda kalmadan tüm çevrimiçi mağazanızda yakınlaştırmayı etkinleştirmek istediğinizde idealdir.

'Genel Ayarlar' sekmesinde, 'Yakınlaştırmayı etkinleştir...' kutusunu işaretleyin; müşteriler herhangi bir ürün resmini büyütebilecektir.

WooCommerce ürün resimleri için yakınlaştırmayı etkinleştirme

Daha fazla ayrıntı için, WordPress'te resimler için büyütme efekti ekleme kılavuzumuza bakın.

Seçenek 3: WordPress'te Fareyle Üzerine Gelindiğinde Resimleri Soldurma (Performans İçin En İyisi)

Başka bir seçenek de, ziyaretçi üzerine geldiğinde resimlerinizin yavaşça görünmesini veya kaybolmasını sağlayan basit bir solma animasyonudur. Bu, kullanıcının sayfada gezinirken resimleri vurgulamak için harika bir yoldur.

Bu efekti ziyaretçiyi içeriğinizde yönlendirmek veya bir gönderiye hikaye anlatımı öğesi eklemek için kullanabilirsiniz.

WordPress'e soluklaşan bir animasyon ekleme

Bazı karmaşık animasyonların aksine, solma efekti çok incedir. Okuma deneyimini olumsuz etkilemez veya görüntü optimizasyonu çabalarınızı engellemez.

Bu, onu çok sayıda yüksek çözünürlüklü fotoğrafın bulunduğu sayfalar için mükemmel bir seçim haline getirir.

Bu efekti eklemenin en kolay yolu, ücretsiz WPCode eklentisini kullanmaktır. Bu eklenti, tema dosyalarınızı doğrudan düzenlemek zorunda kalmadan özel CSS eklemenize olanak tanır, bu da çok daha güvenlidir.

WPBeginner olarak, sitemizi güçlendiren tüm özel kod parçacıklarını yönetmek için WPCode kullanıyoruz. Herhangi bir özel kod eklemek için önerdiğimiz güvenilir bir araçtır. Daha fazla ayrıntı için, tam WPCode incelememizi okuyabilirsiniz.

Bu efekt için WPCode'u kullanma konusundaki eksiksiz talimatlar için, WordPress'te fareyle üzerine gelindiğinde resimleri soluklaştırma kılavuzumuza bakın.

Seçenek 4: WordPress'e Birden Fazla Görüntü Üzerine Gelme Efekti Ekleme (En Özelleştirilebilir)

Web sitenizde birden fazla farklı resim kaydırma efekti kullanmak isteyebilirsiniz. Örneğin, çok sayıda resim galeriniz varsa, bu fotoğrafları farklı ve ilginç yollarla canlandırmak isteyebilirsiniz.

WordPress'e birden fazla efekt eklemenin en iyi yolu, Image Hover Effects Ultimate eklentisini kullanmaktır. Bu ücretsiz eklenti, ihtiyaçlarınıza uyacak şekilde özelleştirebileceğiniz geniş bir efekt yelpazesini destekler.

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 dair adım adım kılavuzumuza bakın.

Etkinleştirdikten sonra, WordPress kontrol panelinden 'Görüntü Üzerine Gelme'yi seçin. Artık kullanabileceğiniz tüm farklı türdeki üzerine gelme efektlerini göreceksiniz.

WordPress'e Görüntü Üzerine Gelme Efektleri Nasıl Eklenir

Bu kılavuz için, bir resmin üzerine animasyonlu metin ekleyen 'Başlık Efektleri'ni seçeceğiz.

İstediğiniz herhangi bir türde üzerine gelme efekti oluşturabilirsiniz, ancak göreceğiniz seçenekler farklılık gösterebilir.

WordPress'te resim üzerine gelme efekti ekleme

‘Altyazı Efektleri’ne tıkladıktan sonra kullanabileceğiniz tüm farklı stilleri göreceksiniz.

Animasyonun nasıl görüneceğinin önizlemesini görmek için bir stilin üzerine gelin.

Bir başlık resmi fareyle üzerine gelme efekti stili seçme

Beğendiğiniz bir stil bulduğunuzda, ‘Stil Oluştur’ düğmesine tıklayın.

Bu, kullanmak istediğiniz tam düzeni seçebileceğiniz bir açılır pencere açar. Sadece devam edin ve 1., 2. veya 3. üzerine tıklayın.

WordPress'te bir resim kaydırma efekti için stil şablonu seçme

Bu işlem bittikten sonra, ‘Ad’ alanına bir başlık yazın. Bu yalnızca sizin referansınız içindir, bu nedenle animasyonlu görüntüyü WordPress kontrol panelinizde tanımlamanıza yardımcı olacak herhangi bir şeyi kullanabilirsiniz.

Ardından, ‘Kaydet’e tıklayın.

Özel bir resim efekti kaydetme

Bu sizi, efektin üzerine gelme efektini özelleştirebileceğiniz bir ekrana götürecektir. Buna, içeriğin genişliğini ve yüksekliğini değiştirmek, dolguyu artırmak ve bir kutu gölgesi eklemek dahildir.

Değişiklikler yaptıkça canlı önizleme otomatik olarak güncellenir, böylece en iyi görüneni görmek için farklı ayarları deneyebilirsiniz.

Fareyle üzerine gelme efektini önizleme

Bazı fareyle üzerine gelme efektleri için efekt yönünü değiştirebilirsiniz.

Örneğin, aşağıdaki görüntüde, ‘panjur’ efektinin yönünü sağa gidecek şekilde değiştiriyoruz.

Bir WordPress web sitesinde fareyle üzerine gelme efektini özelleştirme

‘Efekt Süresi’ kaydırıcısını sürükleyerek efekti daha hızlı veya daha yavaş hale de getirebilirsiniz. Daha yüksek bir sayı kullanırsanız, efekt daha uzun sürer. Sayıyı küçültürseniz, efekt daha hızlı ve daha kısa olur.

Aklınızda belirli bir sayı varsa, ‘Efekt Süresi’ kaydırıcısının yanındaki kutuya yazabilirsiniz.

Bir resmin üzerine gelme efektini özelleştirme

Efektin nasıl ayarlandığından memnun kaldığınızda, içerik ekleme zamanı gelmiş demektir.

Bunu yapmak için, ‘Önizleme’ bölümünün üzerine gelin ve göründüğünde ‘Düzenle’ düğmesine tıklayın.

Bir resim kaydırma efektine içerik ekleme

Bu, bir başlık ve kısa bir açıklama yazabileceğiniz bir açılır pencere açar.

Bu, bir ziyaretçi görüntünün üzerine geldiğinde görünecek içeriktir.

WordPress'te başlık ve kısa açıklama nasıl eklenir

Bundan sonra, varsayılan resmi kendi resminizle değiştirebilirsiniz.

Yer tutucu fotoğrafın üzerine gelin ve göründüğünde ‘Resim Seç’e tıklayın.

Bir animasyon efektine resim ekleme

Artık WordPress medya kütüphanesinden bir resim seçebilir veya bilgisayarınızdan yeni bir dosya yükleyebilirsiniz.

Bazen, insanları WordPress blogunuzun veya web sitenizin diğer alanlarına göndermek için fareyle üzerine gelme efektlerini kullanabilirsiniz. Örneğin, çevrimiçi bir butik işletiyorsanız, resimde gösterilen ürüne bir bağlantı ekleyebilirsiniz.

Bunu, kısa açıklamanın altında görünecek bir CTA düğmesi ekleyerek yapabilirsiniz.

WordPress'e bir harekete geçirici mesaj düğmesi ekleme

Başlamak için URL'yi 'Bağlantı' alanına ekleyin.

Ardından, Düğme Metni alanına yazarak mesajınızı ekleyin.

Bir WordPress görseline harekete geçirici mesaj (CTA) ekleme

Girdiğiniz bilgilerden memnun kaldığınızda, 'Gönder' düğmesine tıklayın.

Şimdi biraz metin eklediniz, 'Tipografi' sekmesine tıklamak iyi bir fikirdir.

Web sitenizde veya blogunuzda tipografiyi özelleştirme

Burada, yazı tipi boyutunu değiştirebilir, metin gölgesi ekleyebilir, kenar boşluklarını büyütebilir veya küçültebilir ve çok daha fazlasını yapabilirsiniz.

Bir CTA düğmesi kullanıyorsanız, ‘Düğme Ayarları’ bölümünü genişletmek için tıkladığınızdan emin olun.

WordPress'te bir harekete geçirici mesaj (CTA) düğmesini özelleştirme

Burada, düğmenin varsayılan ve 'üzerine gelme' durumunda nasıl görüneceğini değiştirebilirsiniz; bu, ziyaretçi üzerine geldiğinde nasıl göründüğüdür. Düğmenin hizalamasını da değiştirebilirsiniz.

Bu ayarların çoğu anlaşılırdır, bu nedenle ne tür farklı efektler oluşturabileceğinizi görmek için gözden geçirmeye değer.

Önizlemenin görünümünden memnun kaldığınızda, değişikliklerinizi kaydetmek için ‘Kaydet’e tıklayın.

Animasyonlu kaydırma efektinizi kaydetme

Animasyonlu resimlerden oluşan bir satır veya sütun oluşturmak ister misiniz?

Örneğin, ürününüzün en iyi özelliklerini tanıtmak için resim fareyle üzerine gelme efektlerini kullanabilirsiniz. Aşağıdaki resimde, ziyaretçi farklı bir özellik hakkında bilgi edinmek için her resmin üzerine gelebilir.

Görüntü üzerine gelme efektlerinin bir örneği

Bu animasyonlu resimlerden oluşan tam bir satır veya galeri oluşturmak mı istiyorsunuz? Sorun değil. Bir tane daha eklemek için, yalnızca 'Yeni Resim Üzerine Gelme Ekle' bölümüne geri kaydırın.

Buradan '+' düğmesine tıklayın.

WordPress'te bir resim üzerine gelme efekti nasıl eklenir

Bu, yukarıda açıklanan aynı işlemi izleyerek yeni bir resim üzerine gelme efekti oluşturabileceğiniz bir açılır pencere açar.

Efektin nasıl yapılandırıldığından memnun kaldığınızda, değişikliklerinizi kaydetmek için 'Gönder' düğmesine tıklayın.

WordPress'e Ek Görüntü Üzerine Gelme Efektleri Ekleme

Daha fazla kaydırma efekti oluşturmak için yukarıda açıklanan aynı işlemi tekrarlamanız yeterlidir.

Efektlerin nasıl ayarlandığından memnun kaldığınızda, 'Kısa Kod' kutusuna gidin. Bu kodu kopyalayıp yapıştırarak bu kaydırma efektini herhangi bir sayfaya veya gönderiye ekleyebilirsiniz.

Kısa kod kullanarak bir resim kaydırma efekti ekleyin

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.

Seçenek 5: Görsel CSS Düzenleyici Kullanarak Görüntü Üzerine Gelme Açılır Efektleri Ekleme

Yukarıdaki eklentilerin çoğu, flipbox'lar gibi gelişmiş animasyonlu resimler oluşturmanıza ve ardından bunları kısa kod kullanarak bir sayfaya yerleştirmenize olanak tanır. Ancak bazen, zaten sayfada bulunan bir resme fareyle üzerine gelme efekti eklemek isteyebilirsiniz.

Bu durumda, bir WordPress özel CSS eklentisi kullanabilirsiniz. Bu, kodlama yapmadan görsellerinizde görsel değişiklikler yapmanıza olanak tanır ve ayrıca WordPress kontrol panelinde kaydırma efektlerini ayrı ayrı oluşturmak zorunda kalmazsınız.

Burada, CSS Hero kullanmanızı öneririz. Bu eklenti, görsel bir düzenleyici kullanarak WordPress sitenizdeki hemen hemen her CSS stilini düzenlemenize olanak tanır. Ayrıca, tek bir düğmeye tıklayarak resimlere uygulayabileceğiniz yerleşik fareyle üzerine gelme efektleriyle birlikte gelir.

CSS Hero ile yapılmış resim fareyle üzerine gelme efekti

Yapmanız gereken ilk şey CSS Hero eklentisini kurmak ve etkinleştirmektir. Bir eklentiyi kurma hakkında 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üğmesine tıklamanız gerekecektir.

CSS Hero WordPress eklentisi nasıl etkinleştirilir

Bu sizi, hesabınıza giriş yapabileceğiniz ve bir lisans anahtarı alabileceğiniz CSS Hero web sitesine götürecektir. Ekrandaki talimatları izlemeniz yeterlidir ve birkaç tıklamayla sitenize geri yönlendirilirsiniz.

Bundan sonra, animasyonunu istediğiniz resmi içeren sayfayı veya gönderiyi açın. Ardından, WordPress yönetici çubuğundaki 'CSS Hero'ya tıklayın.

CSS Hero'yu WordPress'te açma

Bu, o sayfayı veya gönderiyi CSS Hero düzenleyicisinde açacaktır.

Buradayken, herhangi bir içeriğe tıklamak, o içeriği özelleştirmek için kullanabileceğiniz tüm ayarları içeren bir panel açacaktır. Bunu söyledikten sonra, herhangi bir görüntüyü seçmek için tıklamanız yeterlidir.

Sol menüden 'Kod Parçacıkları' sekmesini seçin.

CSS Hero'da Snippet menüsünü açma

Ardından, ‘Fareyle Üzerine Gelme Efektleri’ne tıklayın. Şimdi farklı CSS efektlerinin tümünü göreceksiniz.

Bir efekti önizlemek için sol taraftaki menüdeki mavi düğmesinin üzerine gelin.

Kullanmak istediğiniz bir efekt bulduğunuzda, sadece 'Uygula'ya tıklayın.

CSS Hero'da bir resim fareyle üzerine gelme efekti uygulama

Önemli: Varsayılan olarak, CSS Hero bu fareyle üzerine gelme efektini sayfadaki her görüntüye uygular. Bu, tutarlı bir stil oluşturmak için harikadır, ancak yalnızca tek, belirli bir görüntüyü canlandırmak istiyorsanız, bu kılavuzdaki diğer eklenti yöntemlerinden biri daha uygun olabilir.

Bu değişikliği canlı hale getirmek için ‘Kaydet ve Yayınla’ düğmesine tıklayın.

CSS Hero'da değişiklikleri kaydetme

Resim Üzerine Gelme Efektleri Hakkında Sıkça Sorulan Sorular

Binlerce WordPress kullanıcısına yardım ettikten sonra, bir web sitesine etkileşimli öğeler ekleme hakkında sorulabilecek hemen hemen her soruyu duyduk. İşte resim fareyle üzerine gelme efektleri hakkında en sık aldığımız sorulardan bazıları.

Resim üzerine gelme efektleri mobil cihazlarda çalışır mı?

Kaydırma efektleri fare imleçleri için tasarlanmıştır, bu nedenle akıllı telefonlar ve tabletler gibi dokunmatik cihazlarda çalışmazlar. Mobil cihazlarda, resim genellikle herhangi bir animasyon olmadan varsayılan durumunu görüntüler.

Bazı eklentiler, ilk dokunuşta bir animasyonu tetiklemek gibi yedekleme seçenekleri sunar. Bu nedenle, resimlerinizin mobil ziyaretçilere nasıl görüneceğini tam olarak görmek için sayfalarınızı bir akıllı telefon veya tablette kontrol etmenizi her zaman öneririz.

Bu, kullandıkları cihaz ne olursa olsun herkes için harika bir deneyim sağlar! 👍

Resim üzerine gelme efektleri eklemek web sitemi yavaşlatır mı?

Çoğu modern kaydırma efekti, çok hafif ve verimli olan CSS kullanılarak oluşturulur. Kaliteli bir eklenti kullanıldığında, bu efektlerin web sitenizin hızı veya performansı üzerinde fark edilir bir etkisi olmamalıdır.

Bir eklenti olmadan resim kaydırma efektleri ekleyebilir miyim?

Evet, kendi özel CSS kodunuzu yazarak görüntü kaydırma efektleri eklemek mümkündür. Ancak bu yöntem teknik bilgi gerektirir ve tema dosyalarınızı düzenlemeyi içerir, bu da yeni başlayanlar için riskli olabilir.

Bir eklenti kullanmak çoğu kullanıcı için en güvenli ve en kolay yöntemdir, çünkü tüm kodu sizin için halleder.

WordPress'te Resimleri Kullanma ve Yönetme Yollarını Daha Fazla Öğrenin

Görüntü üzerine gelme efektleri, web sitenize daha fazla görsel ilgi katmanın tek yolu değildir. WordPress'te görüntüleri kullanma hakkında okuyabileceğiniz diğer öğreticiler şunlardır:

Bu makalenin WordPress'te resim üzerine gelme efektlerinin nasıl ekleneceğini öğrenmenize yardımcı olduğunu umuyoruz. Ayrıca en iyi WordPress kaydırıcı eklentileri ve ücretsiz kamu malı resim kaynakları listemizi de görmek 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.

Açıklama: İçeriğimiz okuyucu desteklidir. Bu, bazı bağlantılarımıza tıklamanız durumunda komisyon kazanabileceğimiz anlamına gelir. WPBeginner'ın nasıl finanse edildiğini, neden önemli olduğunu ve bize nasıl destek olabileceğinizi görün. İşte editöryal sürecimiz.

Nihai WordPress Araç Seti

Araç Kitimize ÜCRETSİZ erişim kazanın - her profesyonelin sahip olması gereken WordPress ile ilgili ürün ve kaynaklardan oluşan bir koleksiyon!

Okuyucu Etkileşimleri

6 CommentsLeave a Reply

  1. Seçenek 3 (solma efektleri) fotoğrafçılık müşterilerim için harika oldu. Onlara istedikleri o hoş, ince etkileşimi veriyor ve siteyi hiç yavaşlatmıyor.
    Deneyimlerimden ekleyeceğim bir şey var: fareyle üzerine gelme efektlerini abartmayın! Bunları stratejik olarak kullandığınızda en iyi sonucu verdiğini gördüm. Örneğin, yakın zamanda bir e-ticaret sitesi için yalnızca ürün kategorisi küçük resimlerine ince yakınlaştırma efektleri ekledim. Sonuç? Siteyi sorunsuz çalıştırırken daha iyi tıklama oranları.

  2. Görüntü Yakınlaştırma yöntemini gerçekten seviyorum ve bunu WooCommerce'deki ürünler için her zaman kullanmak istemiştim. Birçok çevrimiçi mağazada kullanıldığını gördüm ve kullanıcı dikkatini çekmek için harika bir yol olduğunu ve görüntüyü tıklayıp büyütmekten çok daha iyi bir yöntem olduğunu düşünüyorum. Mükemmel ekibiniz sayesinde bunu nasıl başaracağıma dair nihayet bir rehberim var.

  3. Bu eklentilerde neden her zaman çok fazla hareket var. Fotoğrafın üzerine geldiğimde sadece basit, güzel bir tipografi düğmesinin görünmesini istiyorum. Çevirme, döndürme, hiçbir şey yok. Temiz ve kolay

    • If you have not done so already we would recommend checking with the support for the plugins to either offer that as a feature request or see if they have a workaround that you could use for your site :)

      Yönetici

    • Bunun için, çevirme kutusu efektine bakmak isteyeceksiniz ve animasyon süresini 0 olarak ayarlayabilirsiniz.

      Yönetici

Cevap Bırakın

Yorum bırakmayı seçtiğiniz için teşekkürler. Lütfen tüm yorumların yorum politikamıza göre denetlendiğini ve e-posta adresinizin YAYINLANMAYACAĞINI unutmayın. Lütfen isim alanında anahtar kelime KULLANMAYIN. Kişisel ve anlamlı bir sohbet edelim.