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” konusuna dalmadan önce, bu animasyonlu sayaçların WordPress web sitenizde en iyi nerede çalıştığını kısaca düşünelim:

• Önemli başarıları sergilemek için ana sayfada kahraman bölümleri
• 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ı
• Sosyal kanıtı vurgulamak için açılış sayfaları
• 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 bulduk. Örneğin, OptinMonster, aylık ziyaretçi oturumlarını optimize edilmiş olarak görüntülemek için bir sayı sayacını etkili bir şekilde kullanır ve bunu potansiyel müşterilerin karar verdikleri yere yerleştirir.

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: Sayfa Oluşturucu ile Sayı Sayma Animasyonlu Bir Açılış Sayfası Oluşturun
• Seçenek 2: Bir Eklenti Kullanarak Herhangi Bir Sayfaya Hızlı Sayı Sayacı Animasyonu Ekleme
• Bonus: Büyüleyici Animasyonlu Bir Arka Plan Ekleme 🌟

Seçenek 1: Sayfa Oluşturucu ile Sayı Sayma Animasyonlu Bir Açılış Sayfası Oluşturun

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 onlarca WordPress sayfa oluşturucu denedik ve SeedProd, özellikle sayı sayacı gibi dinamik öğeler için kapsamlı özelleştirme seçenekleriyle sürekli olarak öne çıkıyor.

Daha fazla bilgi için, derinlemesine SeedProd incelemize 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 rehberimize 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, hazırlanıyor sayfası, bakım modu sayfası, giriş sayfası ve 404 sayfası dahil olmak üzere profesyonelce tasarlanmış özel açılış sayfaları oluşturmanıza olanak tanır.

'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ı 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, Sayaç bloğunuz için stil, renk şeması, boşluk, yazı tipi ve daha fazlasını değiştirmek için 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 ihtiyacınız olan tek şey basit bir sayı sayacı olduğunda bir sayfa oluşturucu fazla gelebilir. İşte Sayı Sayacı eklentisinin devreye girdiği yer burasıdır. Basit kısa kodlar kullanarak sitenizin herhangi bir yerine sayı animasyonları eklemenizi sağlayan, tek bir işi iyi yapan ücretsiz, hafif bir çözümdür.

İlk olarak, Counter Number eklentisini yükleyip etkinleştirmeniz gerekecektir. Daha fazla ayrıntı için, lütfen bir WordPress eklentisinin nasıl kurulacağına ilişkin 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]

Ardından, 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.

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 sayfalarınıza particle.js entegre etmek kolaydır ve kodlama gerektirmez.

Temanıza mükemmel uyum sağlamak için çeşitli animasyon stilleri sunar ve özel parçacık efektleri oluşturabilirsiniz. Bu yöntemi daha derinlemesine incelemek için, WordPress'te animasyonlu bir arka planın nasıl ekleneceğine dair ayrıntılı kılavuzumuza göz atın.

Bu makalenin WordPress'te bir sayı sayma animasyonunun nasıl gösterileceğini öğrenmenize yardımcı olduğunu umuyoruz. Ayrıca WordPress'te animasyonlu bir arka planın nasıl ekleneceğine dair eğitimimize ve mükemmel temanızı tasarlamak için en iyi WordPress tema oluşturucuları hakkındaki uzman seçimimize de bakabilirsiniz.

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.