WordPress'te Sayı Sayma Animasyonu Nasıl Gösterilir

Muhtemelen web sitenizde paylaşacak etkileyici sayılar vardır, örneğin müşteri sayısı, deneyim yılları, başarılı projeler veya kazanılan ödüller.

Zorluk, ziyaretçilerin bu başarıları fark etmelerini ve önemsemelerini sağlamaktır, böylece onları sağa kaydırıp geçmezler. İşte animasyonlu sayı sayaçlarının parladığı yer burasıdır.

İstatistikleriniz, ziyaretçiler o bölüme ulaştıkça sıfırdan yukarı doğru saydığında, başarınızın küçük bir kutlamasını yaratır. Bu hareket dikkat çeker ve başarılarınızı daha önemli ve güvenilir hissettirir.

WordPress sitelerini daha iyi etkileşim için optimize etme deneyimimiz sayesinde, bu animasyonları eklemenin çoğu insanın düşündüğünden daha kolay olduğunu keşfettik.

Bunları 2 basit yöntem kullanarak tam olarak nasıl ekleyeceğinizi göstereceğiz.

WordPress'e Sayı Sayma Animasyonu Eklemenden Önce… 📊

Nasıl yapılacağına dalmadan önce, bu animasyonlu sayaçların WordPress web sitenizde en iyi nerede çalıştığını kısaca düşünelim:

• Ana sayfa kahraman bölümleri büyük başarıları sergilemek için
• Müşteri memnuniyeti oranlarını vurgulamak için ürün sayfaları
• Şirket kilometre taşlarını görüntülemek için hakkında sayfaları
• Açılış sayfaları sosyal kanıtı vurgulamak için
• Müşteri tabanını veya tasarrufları göstermek için fiyatlandırma bölümleri

Deneyimlerimize göre, stratejik yerleştirmenin animasyonun kendisi kadar önemli olduğunu gördük. Örneğin, OptinMonster, optimize edilmiş aylık ziyaretçi oturumlarını görüntülemek için bir sayı sayacını etkili bir şekilde kullanıyor ve bunu potansiyel müşterilerin karar verdiği yere yerleştiriyor.

WordPress'te bir sayı sayacı eklemek ve özelleştirmek genellikle kod düzenlemeyi gerektirir. Bu, kod yazmayı bilmeyen yeni başlayanlar için zorlayıcı olabilir.

Bununla birlikte, WordPress'te animasyonlu bir sayı sayacını nasıl gösterebileceğimize bakalım. Premium bir web sitesi oluşturucu ve ücretsiz bir eklenti kullanarak 2 basit yöntemi ele alacağız.

Tercih ettiğiniz bölüme atlamak için aşağıdaki bağlantılara tıklayabilirsiniz:

Seçenek 1: Sayı Animasyonlu Bir Açılış Sayfası Oluşturun (Önerilir)

Bir açılış sayfası oluşturuyorsanız ve sayı sayaçlarınızın nasıl görüneceği ve davranacağı üzerinde tam kontrole sahip olmak istiyorsanız, bir sayfa oluşturucu en iyi seçeneğinizdir.

Yıllar boyunca düzinelerce WordPress sayfa oluşturucusunu test ettik ve SeedProd, özellikle sayı sayaçları gibi dinamik öğeler için kapsamlı özelleştirme seçenekleriyle sürekli olarak öne çıkıyor.

Daha fazla bilgi için, derinlemesine SeedProd incelememize göz atabilirsiniz.

Yapmanız gereken ilk şey SeedProd'u kurmak ve etkinleştirmektir. Yardıma ihtiyacınız olursa, lütfen WordPress eklentisi nasıl kurulur hakkındaki kılavuzumuza bakın.

Etkinleştirme sonrasında SeedProd sizden lisans anahtarını girmenizi isteyecektir. Lisans anahtarını hesap alanınızda ve satın alma onay e-postasında bulabilirsiniz.

Ardından, WordPress yönetici panelinizden SeedProd » Açılış Sayfaları bölümüne gitmeniz gerekecek.

SeedProd, profesyonelce tasarlanmış özel açılış sayfaları oluşturmanıza olanak tanır; bunlar arasında yakında gelecek sayfası, bakım modu sayfası, giriş sayfası ve 404 sayfası bulunur.

'Yeni Açılış Sayfası Ekle' düğmesine tıklayın.

Bundan sonra, açılış sayfanız için bir SeedProd şablonu seçebilir ve animasyonlu sayı sayacını gösterebilirsiniz.

Bir şablonun üzerine gelin ve turuncu onay düğmesine tıklayın.

Şimdi bir açılır pencere açılacaktır. Yalnızca bir sayfa adı ve sayfa URL'si girin.

Bundan sonra, 'Kaydet ve Sayfayı Düzenlemeye Başla' düğmesine tıklayın.

Bu, SeedProd sürükle-bırak oluşturucusunu başlatacaktır.

Ardından, farklı bloklar ekleyerek veya sayfadaki mevcut öğelere tıklayarak sayfa şablonunuzu düzenleyebilirsiniz.

Animasyonlu bir sayı sayacı eklemek için, Sayaç bloğunu solunuzdaki menüden sürükleyip şablona bırakmanız yeterlidir.

Bundan sonra, daha fazla özelleştirmek için Sayaç bloğunu seçebilirsiniz.

Örneğin, sayacın başlangıç ve bitiş numaralarını değiştirme, bir sayı öneki ve soneki girme ve başlığı düzenleme seçenekleri vardır.

Ardından, sol taraftaki Sayaç bloğu ayarları altındaki 'Gelişmiş' sekmesine geçebilirsiniz.

Burada, stil, renk şeması, boşluk, yazı tipi ve daha fazlasını Sayaç bloğunuz için değiştirebileceğiniz daha fazla seçenek bulacaksınız.

Ardından, üstteki 'Kaydet' geçiş düğmesine tıklayın.

Artık açılır menüden 'Yayınla'yı seçebilirsiniz.

Animasyonlu sayı sayacını çalışırken görmek için, WordPress blogunuzu ziyaret edin.

Bu, demo sitemizde nasıl göründüğüydü.

Seçenek 2: Bir Eklenti Kullanarak Herhangi Bir Sayfaya Hızlı Sayı Sayacı Animasyonu Ekleme

Bazen, basit bir sayı sayacı eklemek için bir sayfa oluşturucu fazla iş yükü getirebilir. Bu, özellikle sayacı mevcut bir blog yazısına veya sayfasına eklemek istediğinizde geçerlidir.

İşte Counter Number eklentisinin yardımcı olduğu yer burasıdır. Kısa kodlar kullanarak sitenizin herhangi bir yerine sayı animasyonları eklemenizi sağlayan ücretsiz bir çözümdür.

Öncelikle, Counter Number eklentisini kurmanız ve etkinleştirmeniz gerekecektir. Daha fazla ayrıntı için lütfen WordPress eklentisi nasıl kurulur hakkındaki kılavuzumuza bakın.

Etkinleştirdikten sonra, WordPress kontrol panelinizden Sayaç Numaraları » Tüm sayaçlar bölümüne gidebilir ve ‘Yeni Sayaç Ekle’ düğmesine tıklayabilirsiniz.

Bundan sonra, sayaç numaranız için bir başlık girebilirsiniz.

Ücretsiz sürümde yalnızca düz tasarım şablonunu seçebilirsiniz.

Ardından, sayaç numarası ayrıntılarını ekleyebilirsiniz. Sayaç başlığını düzenlemek, bir simge seçmek ve sayaç numarası değerini girmek için seçenekler vardır.

Alttaki 'Yeni Sayaç Kutusu Ekle' düğmesine tıklayarak istediğiniz kadar sayaç numarası ekleyebilirsiniz.

Bunun yanı sıra, sağdaki panelden daha fazla özelleştirme seçeneği elde edersiniz.

Örneğin, eklenti sayaç başlığı rengini, sayı rengini, simge boyutunu, yazı tipi boyutunu, yazı tipi ailesini ve daha fazlasını değiştirmenize olanak tanır.

Değişiklikleri yaptıktan sonra, başa dönün ve sayacınızı yayınlayın.

Ardından, WordPress kontrol panelinizden Sayaç Numaraları » Tüm sayaçlar bölümüne gidebilirsiniz.

Sayaç Kısa Kodunu kopyalayın. Şuna benzer görünecektir:

[COUNTER_NUMBER id=41]

Sonrasında, bu WordPress tasarım öğesini gönderiler ve sayfalar, kenar çubukları gibi web sitenizin herhangi bir yerine yerleştirebilirsiniz.

Yeni bir gönderi veya sayfa ekleyin ya da mevcut birini düzenleyin. İçerik düzenleyicisindeyken, sadece '+' işaretine tıklayın ve bir Kısa Kod bloğu ekleyin.

Ardından, sayaç numarası kısa kodunu bloğa yapıştırabilirsiniz.

Buradan, sayfanızı veya gönderinizi önizleyin ve yayınlayarak animasyonlu sayı sayacını çalışırken görün.

Bonus: Büyüleyici Animasyonlu Bir Arka Plan Ekleme 🌟

Sitenizi ilgi çekici sayı sayaçlarıyla geliştirdikten sonra, görsel çekiciliğini animasyonlu bir arka planla yükseltmenizi öneririz.

Bu öğe sayfanızı daha etkileşimli hale getirir ve izleyicileriniz gelir gelmez dikkatlerini çeker. Ayrıca, içeriğinizi bunaltmadan yüksek kaliteli bir görünüm kazandırır.

Animasyonlu bir arka plan eklemenin basit bir yolu, particle.js kütüphanesini kullanmaktır. Bu hafif JavaScript kütüphanesi, özelleştirilebilir parçacıklarla çarpıcı görsel efektlere olanak tanır.

Ayarlarınızı düzenlemek ve kodu oluşturmak için Vincent Garreau'nun particle.js web sitesini kullanabilirsiniz.

Boyutlarını, renklerini, şekillerini ve hareketlerini ayarlayabilirsiniz ve fare hareketleri veya tıklamalar gibi kullanıcı etkileşimlerine tepki verirler.

WPBeginner olarak SeedProd'un yerleşik parçacık arka plan özelliğini etkileyici bulduk. SeedProd ile parçacık.js'yi sayfalarınıza entegre etmek kolaydır ve kodlama gerektirmez.

Özel stilini seçin ve özel parçacık arka planınızı oluşturmak için SeedProd'da verilen bağlantıya tıklayın.

Bu yöntemi daha derinlemesine incelemek için, WordPress'te animasyonlu arka plan nasıl eklenir hakkındaki ayrıntılı kılavuzumuza göz atın.

Sayı Sayım Animasyonu Ekleme Hakkında Sıkça Sorulan Sorular

WordPress'te sayı sayma animasyonu eklemeden önce okuyucularımızın sıkça sorduğu bazı sorular şunlardır:

WordPress'e nasıl sayaç eklerim?

En kolay yol, SeedProd veya Counter Number gibi bir eklenti kullanmaktır. Bu araçlar, kod yazmadan sayfa oluşturuculara sayı sayaçları eklemenize olanak tanır.

WordPress'e nasıl animasyon eklenir?

SeedProd gibi bir sayfa oluşturucu kullanarak animasyonlar ekleyebilirsiniz. Sayfanızdaki bir öğeyi seçip solma, yakınlaştırma veya kaydırma gibi bir efekt seçmeniz yeterlidir.

WordPress'te geri sayım nasıl yapılır?

SeedProd'daki geri sayım bloğunu kullanarak bir geri sayım yapabilirsiniz. Bu, satış sayfalarında veya yakında çıkacak sayfalarınızda aciliyet yaratmak için harikadır.

CSS'e nasıl sayaç eklenir?

CSS counter-increment özelliğini kullanabilirsiniz, ancak yeni başlayanlar için karmaşıktır. Kodlama yapmadan animasyonlu sayaçlar eklemek için bir WordPress eklentisi kullanmanızı öneririz.

WordPress'e animasyonlu simgeler nasıl eklenir?

Animasyon efektli simgeler eklemek için SeedProd gibi bir sayfa oluşturucu kullanabilirsiniz. Basitçe bir simge seçin ve ayarlar menüsünden bir animasyon stili seçin.

WordPress'te numaralı liste nasıl yapılır?

WordPress düzenleyicisindeki varsayılan Liste bloğunu kullanabilirsiniz. Sadece araç çubuğundan numaralı liste seçeneğini seçin ve öğelerinizi ekleyin.

Umarız bu makale, WordPress'te bir sayı sayma animasyonunun nasıl gösterileceğini öğrenmenize yardımcı olmuştur. Ayrıca, WordPress'te animasyonlu bir arka plan ekleme hakkındaki öğreticimizi ve mükemmel temanızı tasarlamak için en iyi WordPress tema oluşturucuları hakkındaki uzman seçimimizi de görebilirsiniz.

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.