WordPress’te Animasyonlu Arka Plan Nasıl Eklenir (2 Yöntem)

WordPress web siteniz için animasyonlu bir arka plan mı oluşturmak istiyorsunuz?

Animasyonlu bir arka plan web sitenize görsel bir çekicilik katabilir. Sitenizi daha çekici ve akılda kalıcı hale getirerek ziyaretçileriniz üzerinde kalıcı bir izlenim bırakacaktır.

Bu kılavuzda, bir JavaScript animasyon kütüphanesi olan particle.js’yi kullanarak WordPress’e nasıl parçacık arka planı ekleyeceğinizi göstereceğiz.

WordPress’e Neden Animasyonlu Arka Plan Ekleyelim?

Web sitenizin arka planını özelleştirmek önemsiz görünebilir. Ancak aslında ziyaretçilerin markanız hakkındaki ilk izlenimlerini şekillendirebilir ve sitenizdeki deneyimlerini etkileyebilir.

Animasyonlu bir arka plan, web sitenizin görsel çekiciliğini artırarak ziyaretçiler için daha etkileşimli ve göz alıcı hale getirebilir. WordPress sitenizin yüksek kaliteli ve yenilikçi bir tasarım kullandığı izlenimini verir.

Birçok web sitesi de özel bir durumu kutlamak istediklerinde animasyonlu efektler kullanır.

Örneğin, e-ticaret mağazalarının tatil sezonu için şenlikli bir atmosfer yaratmak amacıyla web sayfalarına animasyonlu kar taneleri veya düşen Noel ağaçları eklediğini görebilirsiniz.

Bazı web siteleri de web sitelerinde bir ön yükleyici arka plan animasyonu kullanır.

Bu sayede ziyaretçiler sitenin yüklendiğini hissedebilir ve web sayfası öğelerinin görünmesini sabırla bekleme olasılıkları artar. Daha fazla bilgi için ön yükleyici arka plan animasyonu ekleme hakkındaki makalemizi okuyabilirsiniz.

Bu kılavuzda, particle.js kullanarak nasıl animasyonlu bir arka plan ekleyeceğinizi göstereceğiz. Bunun ne olduğunu öğrenmek istiyorsanız, bir sonraki bölüme devam edin.

Particle.js Nedir?

particle.js, küçük, grafiksel, animasyonlu öğeler olan parçacıklarla çarpıcı görsel efektler oluşturmanızı sağlayan bir JavaScript kütüphanesidir.

Bu parçacıklar boyut, renk, şekil ve harekete göre özelleştirilebilir. Ayrıca web sitenize ekstra bir etkileşim katmanı eklemek için fare hareketleri veya tıklamalar gibi kullanıcı etkileşimlerine de yanıt verirler.

Artık particle.js’nin ne olduğunu bildiğinize göre, WordPress’te animasyonlu bir arka plan eklemek için nasıl kullanabileceğinizi görelim. Yeni başlayanlar için iki yöntem vardır ve aşağıdaki hızlı bağlantılarla bu kılavuzda gezinebilirsiniz:

Yöntem 1: Sayfa Oluşturucu ile Animasyonlu Arka Plan Ekleme (Önerilen)

İlk yöntem, piyasadaki en iyi WordPress sayfa oluşturucu eklentisi olan SeedProd‘u kullanmaktır. Yerleşik ve son derece özelleştirilebilir bir parçacık arka plan özelliği sunar.

Bununla birlikte, halihazırda mevcut olan parçacık animasyonlarından birini seçebilir veya kendiniz özel bir tane ekleyebilirsiniz. Ayrıca parçacık sayısını, animasyon hareketlerini ve gezinme efektlerini tercihlerinize uyacak şekilde değiştirmek de mümkündür.

SeedProd hakkında daha fazla bilgi için derinlemesine SeedProd incelememize göz atabilirsiniz. Özelleştirme seçenekleri, şablon ve blok seçenekleri ve üçüncü taraf entegrasyonları da dahil olmak üzere her şeyi ele aldık.

Bu kılavuzda, SeedProd’un premium sürümünü kullanacağız, çünkü parçacık arka plan özelliği orada mevcut.

SeedProd’u kullanmak için önce eklentiyi yüklemeniz ve etkinleştirmeniz gerekecektir. Bununla ilgili daha fazla ayrıntıyı WordPress eklentisi kurmaya yeni başlayanlar için hazırladığımız rehberde bulabilirsiniz.

Bundan sonra, lisans anahtarınızı kopyalayıp eklentiye yapıştırmanız yeterlidir. WordPress kontrol panelinize gidin, SeedProd ” Ayarlar, adresine gidin ve lisans anahtarını uygun alana girin. Ardından, ‘Anahtarı Doğrula’ya tıklayın.

WordPress’te parçacık arka planı eklemeden önce temanızı özelleştirmek istiyorsanız, SeedProd ile nasıl kolayca özel bir tema oluşturabileceğinize dair kılavuzumuzu takip edebilirsiniz.

Şimdi, parçacık arka planını eklemek istediğiniz sayfa için sürükle ve bırak oluşturucuyu açmanız gerekir. SeedProd ile bir tema oluşturduysanız, WordPress’te sizin için zaten bazı sayfalar eklenmiş olmalıdır.

Ardından, Sayfalar ” Tüm Sayf alar’a gidin ve imlecinizi ana sayfa, hakkında sayfası veya başka bir şey gibi bir sayfanın üzerine getirin. Ardından, ‘SeedProd ile Düzenle’ düğmesini seçin.

Bu seçenek sizin tarafınızda görünmüyorsa endişelenmeyin.

Bunun yerine ‘Düzenle’ düğmesine tıklayın ve blok düzenleyicide ‘SeedProd ile Düzenle’ düğmesine tıklayın.

Şimdi SeedProd’un sayfa oluşturucusunun içinde olmalısınız.

İmlecinizi WordPress’te parçacık arka planını eklemek istediğiniz sayfa bölümünün üzerine getirin ve seçin. Bir bölümün üstünde mor bir kenarlık ve araç çubuğu göründüğünde o bölümü seçtiğinizi anlayacaksınız.

Bir bölüme tıkladığınızda, soldaki Bölüm kenar çubuğu görünmelidir.

Şimdi tek yapmanız gereken ‘Gelişmiş’ sekmesine geçmek ve ‘Parçacık Arka Planını Etkinleştir’ ayarını değiştirmek.

Yapılandırabileceğiniz birkaç Parçacık Arka Planı ayarı vardır.

Birincisi, Çokgen, Uzay, Kar, Kar Taneleri, Noel, Cadılar Bayramı ve Özel olmak üzere mevcut animasyon efektlerinden herhangi birini seçebileceğiniz Stil’dir.

Makalenin ilerleyen bölümlerinde özel bir parçacık arka plan animasyonu ekleme hakkında daha fazla konuşacağız.

Ayrıca animasyonun ne kadar opak görüneceğini kontrol eden Opaklık ve parçacıkların yönelmesi gereken yönü ayarlayan Akış Yönü de vardır.

Belirli parçacık stilleri için renklerini de özelleştirebilirsiniz.

Ancak Noel ve Cadılar Bayramı için parçacıklar resim şeklinde olduğundan renk ayarı yoktur.

Rengin altında ‘Gelişmiş Ayarlar’ bulunur. Bunu etkinleştirmek Parçacık Sayısı, Parçacık Boyutu, Hareket Hızı ve Fareyle Üzerine Gelme Efektini Etkinleştir’i özelleştirmenizi sağlar.

Son özellik ile parçacıklar farenizin yönüne göre hareket edecektir. Web sitesini sayfa oluşturucu alanında görüntülediğinizde veya bölüm içindeki içerik o bölümün tüm alanını kapladığında bunun çalışmayacağını unutmayın.

Yapmanız gereken tek şey bu.

WordPress parçacık arka planınızı özelleştirmeyi tamamladıktan sonra, değişiklikleri yayınlamak için sağ üst köşedeki ‘Kaydet’ düğmesine tıklayabilirsiniz. Parçacık arka planının nasıl göründüğünü görmek için ‘Önizleme’ düğmesini de seçebilirsiniz.

Web Siteniz İçin Özel Parçacık Arka Planı Oluşturma

Mevcut animasyonlu efektler ihtiyaçlarınızı karşılamıyorsa, özel bir tane de oluşturabilirsiniz. Yapmanız gereken, Parçacık Arka Planı ayarlarında ‘Özel’ stili seçmektir.

Bundan sonra, ‘Lütfen buradaki bağlantıyı ziyaret edin ve parçacık için gerekli nitelikleri seçin’ satırındaki bağlantıya tıklayın.

Bu web sitesinde, istediğiniz parçacık tasarımını, etkileşimini ve arka plan rengini özelleştirebilirsiniz.

‘Parçacıklar’ ayarında parçacık sayılarını, rengini, şeklini, boyutunu, opaklığını, parçacıkları birbirine bağlayan çizgileri ve hareketi ayarlayabilirsiniz.

Bunun altında ‘etkileşim’ var.

Burası, parçacıkların üzerine geldiğinizde ve tıkladığınızda nasıl davranacaklarını ayarlayabileceğiniz yerdir.

Son olarak, ‘sayfa arka planı (css)’ var. Burada, parçacık animasyonunun arka plan rengini değiştirebilir ve boyutunu, konumunu ve tekrarını değiştirebilirsiniz.

Gerekirse, özel bir arka plan resmi URL’si de yükleyebilirsiniz.

İşiniz bittiğinde, alttaki ‘Mevcut yapılandırmayı (json) indir’ düğmesine tıklayabilirsiniz.

Bu, bir metin düzenleyici uygulaması kullanarak açmanız gereken parçacık arka planının JSON kod dosyasını indirecektir. Sonraki adımlara devam ederken metin düzenleyici penceresini açık tutun.

Şimdi SeedProd sayfa oluşturucusuna geri dönelim.

Tekrar Gelişmiş ayarlar içindeki Parçacık Arka Planı menüsüne gidin. Ardından, JSON kodunu kopyalayıp uygun metin kutusuna yapıştırın.

Şimdi parçacık arka planınızı önizleme bölümünde görmelisiniz.

Parçacık arka planının ön uçta nasıl göründüğünü görmek için ‘Önizleme’ye ve değişiklikleri sonlandırmak için ‘Kaydet’e tıklayın.

İşte parçacık arka planının nasıl görünebileceğine dair bir örnek:

Yöntem 2: Ücretsiz Bir Eklenti ile Animasyonlu Arka Plan Ekleme

İkinci yöntem SeedProd kullanmaya ücretsiz bir alternatiftir. Bunun için ücretsiz bir animasyon eklentisi olan Particle Background WP eklentisine ihtiyacınız olacak.

Daha önce olduğu gibi, Particle Background WP eklentisini yüklediğinizden ve etkinleştirdiğinizden emin olun. Biraz rehberliğe ihtiyacınız varsa, WordPress eklentisinin nasıl kurulacağına ilişkin kılavuzumuza göz atabilirsiniz.

Eklenti aktif olduktan sonra WordPress kontrol panelinden Particle Background’a gidin. Burada birkaç bölüm göreceksiniz.

Bir tanesi Deploy. Sayfalarınıza veya gönderilerinize daha sonra eklemek isterseniz, bitmiş parçacık arka planı için bir kısa kod içerir.

Arka planı bu sayfalara otomatik olarak eklemek için ‘Ön sayfaya ekle’ ve/veya ‘Blog sayfasına ekle’ kutularını da işaretleyebilirsiniz.

Aşağı kaydırdığınızda İçerik bölümünü göreceksiniz. Burası, parçacık arka planının üzerine biraz metin ekleyebileceğiniz yerdir.

HTML biliyorsanız, metni özelleştirmek için bazı HTML kodları ekleyebilirsiniz. Alternatif olarak, WordPress medya kütüphanesinden resim veya dosya eklemek için ‘Medya Ekle’ seçeneğine tıklayabilirsiniz.

Aşağıda WordPress parçacık arka plan animasyonu için Ayarlar bulunmaktadır. Parçacıkların ne kadar yakın ve uzak olduğunu kontrol eden Parçacık Yoğunluğunu, parçacığın Nokta Rengini ve Arka Plan Rengini ayarlayabilirsiniz. Arka planı şeffaf yapmak da mümkündür.

Bu WordPress eklentisinin bir dezavantajı, parçacık şeklini SeedProd ile yaptığınız gibi ayarlayamamanızdır. Dolayısıyla, bu eklentiyi kullanmak istiyorsanız bunu göz önünde bulundurmanız gerekir.

Ve işiniz bitti!

İşte bu WordPress eklentisini kullanarak parçacık animasyonlu arka planın nasıl göründüğüne dair bir örnek.

Alternatif Seçenek: WordPress Video Arka Planı Ekleme

Web sitenize animasyonlu bir efekt eklemek istiyor ancak size gösterdiğimiz yöntemleri beğenmiyorsanız, bunun yerine bir video arka planı eklemenizi öneririz.

Bir video arka planı, web sitenizde ne tür animasyon efektleri kullanabileceğiniz konusunda size daha fazla seçenek sunar. Ayrıca, videonun otomatik olarak bir döngüde oynatılmasını sağlayabilirsiniz, böylece animasyonlu hissettirir.

Elbette, web sitenize bir videonun tamamını yüklemenizi önermiyoruz. Bu, WordPress’i önemli ölçüde yavaşlatacak ve ziyaretçileri hayal kırıklığına uğratacaktır.

Bunun yerine, bir YouTube videosu yerleştirebilir ve bunu tam ekran animasyonlu arka plan olarak kullanabilirsiniz.

Daha fazla bilgi için WordPress’te tam ekran YouTube video arka planının nasıl ekleneceğine ilişkin kılavuzumuza göz atın.

Animasyonlu Arka Planlar Web Sitelerini Yavaşlatır mı?

Doğru yapılmazsa, animasyonlu arka planlar web sitenizi yavaşlatabilir. Ancak bundan kaçınmanın yolları vardır.

Parçacık arka planları için, parçacıkların sayısı ve ne kadar hızlı hareket ettikleri sayfanızın ne kadar hızlı yüklendiğini etkileyebilir. Daha fazla parçacık ve daha hızlı hareket daha fazla işlem gücüne ihtiyaç duyar, bu da işleri yavaşlatabilir.

Bunu düzeltmek için, web siteniz için en uygun olanı bulmak amacıyla parçacık yoğunluğu ve hız için farklı ayarları deneyebilirsiniz. Bu işlem sırasında, etkileri görmek için WordPress hız testlerini çalıştırabilirsiniz.

Animasyonlu arka planları yalnızca en önemli oldukları sayfalarda kullanmak da iyi bir fikirdir. Her yerde kullanmanıza gerek yok, aksi takdirde sıkıcı olabilirler.

Son olarak, web sitenizi parçacıklı bir arka planla hızlı tutmak için web sitesi hızına yönelik en iyi uygulamaları takip ettiğinizden emin olun. WordPress‘i daha hızlı hale getirme hakkındaki nihai kılavuzumuzda daha fazla bilgi edinebilirsiniz.

Umarız bu makale WordPress’te nasıl animasyonlu parçacık arka planı ekleyebileceğinizi öğrenmenize yardımcı olmuştur. WordPress’te web sitesi tasarımı geri bildirimi alma kılavuzumuza ve en iyi WordPress tema oluşturucuları uzman seçimimize de göz atmak isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.