WordPress’te CSS Animasyonları Nasıl Kolayca Eklenir?

Yıllar boyunca WordPress web sitelerini daha etkileşimli hale getirmenin farklı yollarını denedik. Ziyaretçilerinizin dikkatini çekmek istiyorsanız, animasyonlar oldukça etkili olabilir.

Bir ziyaretçinin dikkatini çekmek ve bir sayfanın en önemli içeriğini vurgulamak için animasyonlar kullanabilirsiniz. Bu, müşterileri harekete geçirici mesaj düğmelerinize ve bağlantılarınıza tıklamaya da teşvik edebilir.

Neyse ki, kod yazmayı bilmeseniz bile WordPress’te animasyonlar ayarlamak da kolaydır.

Bu eğitimde, WordPress’te CSS animasyonlarını nasıl kolayca ekleyebileceğinizi göstereceğiz.

WordPress’e Neden CSS Animasyonları Eklemelisiniz?

Ziyaretçinin dikkatini sayfanın farklı bölümlerine çekmek için CSS animasyonlarını kullanabilirsiniz. Örneğin, bir online mağazanız varsa, animasyonlar bir ürünün en önemli özelliklerini veya en büyük satış noktalarını vurgulayabilir. Bu, kullanıcı deneyimini iyileştirebilir ve satışları artırabilir.

Animasyonlar ayrıca CTA ‘larınızın öne çıkmasını sağlayarak e-posta bülteninize daha fazla kişinin abone olmasını sağlamak gibi belirli bir hedefe ulaşmanıza yardımcı olabilir.

WordPress temanızın veya alt temanızın stil sayfasına CSS animasyonları ekleyebilirsiniz. Ancak bu çok fazla zaman ve çaba gerektirir ve bir hata yaparsanız web sitenizin tasarımını ve hatta işlevini bozabilir.

Bununla birlikte, WordPress sitenize CSS animasyonlarını nasıl kolayca ekleyebileceğinizi görelim. Doğrudan belirli bir yönteme atlamayı tercih ediyorsanız, aşağıdaki bağlantıları kullanabilirsiniz:

Yöntem 1: Herhangi Bir WordPress Bloğunu Kolayca Canlandırma (Hızlı ve Kolay)

Basit bir CSS animasyonu eklemenin en kolay yolu Blocks Animation kullanmaktır.

Bu ücretsiz animasyon eklentisi, tek bir satır CSS yazmanıza gerek kalmadan herhangi bir bloğa giriş animasyonu eklemenizi sağlar. Ayrıca metin ve sayılara ekleyebileceğiniz bir yazma animasyonu ve ticker tarzı bir efekti vardır.

Öncelikle, ücretsiz Blocks Animation eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Yardıma ihtiyacınız varsa, lütfen bir WordPress eklentisinin nasıl kurulacağına ilişkin başlangıç kılavuzumuza bakın.

Etkinleştirmenin ardından, WordPress blok düzenleyicisinde herhangi bir sayfayı veya yazıyı açın. Ardından, canlandırmak istediğiniz bloğa tıklayın ve sağ taraftaki menüden ‘Blok’ sekmesini seçin.

Bu menüde yeni bir ‘Animasyonlar’ bölümü olduğunu göreceksiniz.

‘Animasyonlar’ bölümünü genişletmek için tıklamanız yeterlidir; üç farklı seçenek göreceksiniz: Animasyonlar, Sayma Animasyonları ve Yazma Animasyonları.

‘Animasyonlar’ sayfa yüklendiğinde bir kez oynayan kısa efektlerdir. WordPress blogunuza bu tür bir giriş animasyonu eklemek için ‘Animasyon’un yanındaki açılır menüye tıklamanız yeterlidir.

Bu, kullanmak istediğiniz animasyonu seçebileceğiniz bir menü açar.

WordPress editörü animasyonun bir önizlemesini gösterecektir, böylece hangisinin en iyi göründüğünü görmek için farklı seçenekleri deneyebilirsiniz.

Varsayılan olarak, giriş animasyonu sayfa yüklenir yüklenmez oynatılır, ancak isterseniz bir gecikme ekleyebilirsiniz. Aynı sayfada birden fazla animasyon kullanıyorsanız, bunaltıcı olmamaları için bunları kademelendirmek için gecikmeler bile kullanabilirsiniz.

Sadece ‘Gecikme’ açılır menüsünü açın ve listeden bir zaman seçin.

Ayrıca ‘Hız’ açılır menüsünü kullanarak animasyonu daha hızlı veya daha yavaş hale getirebilirsiniz.

Farklı ayarları denerken, ‘Animasyonu Yeniden Oynat’ seçeneğine tıklayarak animasyonu istediğiniz noktada önizleyebilirsiniz.

Eklentide ayrıca ‘Sayma Animasyonları’ ve ‘Yazma Animasyonları’ bulunmaktadır.

Yazma Animasyonları metni canlandırmanızı sağlarken, Sayma Animasyonları sayılara ticker tarzı bir efekt ekler. Bu animasyonlar, metin veya sayıları destekleyen herhangi bir Gutenberg bloğuyla çalışır; böylece bunları düğmeleri, resim başlıklarını, başlıkları ve daha fazlasını canlandırmak için kullanabilirsiniz.

Bu efektlerden birini eklemek için, canlandırmak istediğiniz metni veya sayıları vurgulayarak başlayın. Ardından, küçük araç çubuğundaki aşağı oka tıklayın.

Şimdi açılır menüden ‘Sayma Animasyonları’ veya ‘Yazma Animasyonları’nı seçebilirsiniz.

Bu seçenekler gri renkteyse, doğru içeriği vurguladığınızdan emin olun. Örneğin, yalnızca metni vurguladıysanız ‘Animasyonu Say’ seçeneğini belirleyemezsiniz.

Animasyonu ekledikten sonra, hızı değiştirmek ve isteğe bağlı bir gecikme eklemek için küçük açılır penceredeki açılır menüleri kullanabilirsiniz.

Örneğin, aşağıdaki görüntüde bir saniyelik bir gecikme kullanıyoruz.

CSS animasyonunu canlı hale getirmeye hazır olduğunuzda, animasyonları sitenize uygulamak için ‘Yayınla’ veya ‘Güncelle’ düğmesine tıklayın. Şimdi, WordPress web sitenizi ziyaret ederseniz, animasyonu canlı olarak göreceksiniz.

Yöntem 2: Özel Sayfalara CSS Animasyonları Ekleme (Önerilen)

Yerleşik WordPress bloklarına basit animasyonlar eklemek istiyorsanız, Blocks Animation iyi bir seçimdir. Ancak, ziyaretçinin dikkatini gerçekten çekmek, insanları web sitenizde tutmak ve daha fazla dönüşüm elde etmek istiyorsanız, SeedProd‘u kullanmanızı öneririz.

SeedProd, basit bir sürükle ve bırak editörü kullanarak güzel açılış sayfaları, satış sayfaları, ana sayfa ve daha fazlasını oluşturmanıza olanak tanıyan en iyi sayfa oluşturucu eklentisidir.

Ayrıca, dönen ve vurgulanan animasyonlu başlıklar oluşturmak için kullanabileceğiniz bir ‘Animasyonlu Başlık’ bloğu ile birlikte gelir.

Adına rağmen, Hareketli Başlık bloğunu eylem çağrısı, alt başlık veya vurgulamak istediğiniz başka bir metin dahil olmak üzere herhangi bir metni canlandırmak için kullanabilirsiniz.

SeedProd ayrıca resimler, metinler, düğmeler, videolar ve daha fazlası dahil olmak üzere herhangi bir bloğa ekleyebileceğiniz 40’tan fazla giriş animasyonu ile birlikte gelir.

Hatta sadece birkaç tıklama ile tüm bölümleri ve sütunları canlandırabilirsiniz. Bu sayede dakikalar içinde ilgi çekici animasyonlu sayfalar oluşturabilirsiniz.

Daha fazla dönüşüm ve satış elde etmek için animasyonlar kullanıyorsanız, SeedProd WooCommerce ile entegre olur. Ayrıca web sitenizi tanıtmak için kullanıyor olabileceğiniz en iyi e-posta pazarlama hizmetlerinin çoğunu da destekler.

SeedProd Sayfa Oluşturucu Nasıl Kurulur

Yapmanız gereken ilk şey SeedProd‘u kurmak ve etkinleştirmektir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Etkinleştirmenin ardından lisans anahtarınızı girmeniz gerekir.

Bu bilgiyi SeedProd web sitesindeki hesabınızda bulabilirsiniz. Lisans anahtarını ekledikten sonra ‘Anahtarı Doğrula’ya tıklamanız yeterlidir.

Özel Sayfa Tasarımı Oluşturma

Başlamak için SeedProd ” Açılış Sayfaları ‘na gidin ve ‘Yeni Açılış Sayfası Ekle’ye tıklayın.

Bir sonraki ekranda bir şablon seçmeniz istenecektir.

SeedProd, 404 sayfa şablonları ve özel WooCommerce ‘teşekkür’ sayfaları gibi farklı kategorilerde düzenlenmiş 350’den fazla güzel şablonla birlikte gelir.

Bu kılavuzda, animasyonlu metin ve giriş animasyonları içeren bir satış sayfasının nasıl oluşturulacağını göstereceğiz, ancak ne tür bir sayfa oluşturursanız oluşturun adımlar benzer olacaktır.

Bu kategorideki farklı şablonları görmek için herhangi bir sekmeye tıklamanız yeterlidir.

Kullanmak istediğiniz bir şablon bulduğunuzda, farenizi üzerine getirin ve ardından onay işareti simgesine tıklayın.

Biz tüm görsellerimizde ‘Zen Satış Sayfası’ şablonunu kullanıyoruz, ancak siz herhangi bir şablonu kullanabilirsiniz.

Ardından, sayfaya bir başlık vermeniz gerekir.

SeedProd otomatik olarak sayfa başlığına dayalı bir URL oluşturacaktır, ancak bunu istediğiniz herhangi bir şeyle değiştirebilirsiniz. Örneğin, bir URL’ye alakalı anahtar kelimeler eklemek genellikle WordPress SEO ‘nuzu geliştirebilir ve sayfanın alakalı arama sonuçlarında görünmesine yardımcı olabilir.

Daha fazla bilgi edinmek için lütfen WordPress blogunuz için anahtar kelime araştırmasının nasıl yapılacağına ilişkin kılavuzumuza bakın.

Başlık ve URL’den memnun olduğunuzda, ‘Kaydet ve Sayfayı Düzenlemeye Başla’ seçeneğine tıklayın.

Bu, SeedProd sürükle ve bırak sayfa düzenleyicisini yükleyecektir.

Sağ tarafta, sayfa tasarımının canlı bir önizlemesini ve sol tarafta bazı ayarları göreceksiniz.

SeedProd, sosyal paylaşım düğmeleri, videolar, iletişim formları ve daha fazlasını eklemenize olanak tanıyan bloklar da dahil olmak üzere tasarımınıza ekleyebileceğiniz çok sayıda blokla birlikte gelir.

Daha fazla bilgi için lütfen WordPress’te özel bir sayfanın nasıl oluşturulacağına ilişkin kılavuzumuza bakın.

WordPress’e Animasyonlu Metin Ekleme

Sayfaya animasyonlu metin eklemek için Animasyonlu Başlık bloğunu bulun ve sayfa tasarımınıza sürükleyin.

Başlığınızı canlandırmanın iki yolu vardır. İlk olarak, ‘Vurgulu’ stili metninize daire veya altı çizili zikzak gibi bir şekil animasyonu ekler.

Bu animasyonu, başlığın içindeki belirli bir kelimeye veya ifadeye dikkat çekmek için kullanabilirsiniz. Bu, en önemli içeriği vurgulayarak başlığınızın okunmasını ve anlaşılmasını kolaylaştırabilir. Ayrıca bir eylem çağrısına dikkat çekmek için de harika bir yoldur.

Vurgulanmış stilde ayrıca birkaç üstü çizili şekil vardır.

Üstü çizili yazıları ilginç ve göz alıcı efektler oluşturmak için kullanabilir veya tasarımınıza biraz eğlence katabilirsiniz.

Vurgulanmış bir animasyon oluşturmak için ‘Stil’ açılır menüsünü açın ve ‘Vurgulanmış’ı seçin.

Ardından, ‘Şekil’ açılır menüsünü açın ve bir şekil seçin. Bir şekle tıkladığınızda, SeedProd bu animasyonun bir önizlemesini gösterecektir, böylece en çok hangisini beğendiğinizi görmek için farklı şekiller deneyebilirsiniz.

SeedProd ayrıca metne geçiş efekti ekleyen bir ‘Dönen’ animasyon stiline sahiptir.

Animasyonlu metin genellikle bir sayfa yüklendiğinde ziyaretçilerin ilk baktığı şeydir, bu nedenle en önemli metin parçasını vurgulamanın harika bir yoludur.

Bir geçiş animasyonu oluşturmak için ‘Stil’ açılır menüsünü açın ve ‘Dönen’ seçeneğine tıklayın.

Daha sonra ‘Animasyon’ açılır menüsünü açabilir ve solma, yakınlaştırma veya yuvarlama gibi kullanmak istediğiniz geçiş türünü seçebilirsiniz. Yine, SeedProd animasyonu sayfa düzenleyicisi içinde oynatacaktır, böylece hangisini tercih ettiğinizi görmek için farklı efektler deneyebilirsiniz.

İster ‘Vurgulu’ ister ‘Dönen’ bir animasyon oluşturuyor olun, animasyonlu metinden önce ve sonra metin ekleyebilirsiniz.

‘Başlıktan Önce’ ve ‘Başlıktan Sonra’ alanlarına yazmanız yeterlidir. ‘Metin’ alanına, canlandırmak istediğiniz kelimeyi veya ifadeyi ekleyin.

Başlığın tamamını canlandırmak istiyorsanız, ‘Başlıktan Önce’ ve ‘Başlıktan Sonra’ alanlarını boş bırakmanız yeterlidir.

Varsayılan olarak, SeedProd animasyonu bir döngüde oynatır, bu da bazı ziyaretçilerin can sıkıcı bulabileceği bir durumdur.

Animasyonu yalnızca bir kez oynatmak için ‘Sonsuz Döngü’ anahtarını devre dışı bırakmak üzere tıklayın.

Varsayılan olarak, animasyon 8000 milisaniyelik bir gecikmeden sonra 1200 milisaniye boyunca oynatılacaktır.

Farklı değerler kullanmak için ‘Süre’ ve ‘Gecikme’ alanlarına yazın. Örneğin, daha kısa bir süre kullanarak animasyonu daha hızlı hale getirebilirsiniz.

Metni biçimlendirmek de isteyebilirsiniz. Örneğin, yazı tipi boyutunu ve hizalamasını değiştirebilirsiniz.

Animasyonlu başlığın nasıl göründüğünden memnun olduğunuzda, devam edin ve değişikliklerinizi kaydetmek için ‘Kaydet’ düğmesine tıklayın.

WordPress’e Giriş Animasyonları Ekleme

Giriş animasyonları sayfa ilk yüklendiğinde oynatılır, bu nedenle ziyaretçinin dikkatini çekmek için harika bir yoldur.

Bunları, ziyaretçilerin ilk bakması gereken içeriği vurgulamak için de kullanabilirsiniz. Örneğin, çevrimiçi bir pazar yeriniz varsa, ürünün kahraman resmini veya Kara Cuma indiriminizin reklamını yapan banner’ı canlandırabilirsiniz.

SeedProd düzenleyicisinin içinde, canlandırmak istediğiniz içeriğe tıklamanız ve ardından sol taraftaki menüden ‘Gelişmiş’ sekmesini seçmeniz yeterlidir.

Daha sonra devam edebilir ve ‘Animasyon Efektleri’ bölümünü genişletmek için tıklayabilirsiniz.

Bundan sonra, ‘Giriş Animasyonu’ açılır menüsünden bir animasyon seçmeniz yeterlidir.

Artık herhangi bir bloğa, bölüme veya sütuna yukarıda açıklanan aynı işlemi izleyerek giriş animasyonları ekleyebilirsiniz.

CSS Animasyonlarınızı WordPress’te Yayınlayın

Sayfanın kurulumundan memnun olduğunuzda, ‘Kaydet’ düğmesindeki açılır menüye tıklayın ve ‘Yayınla’yı seçin.

CSS animasyonlarını canlı olarak görmek için artık bu sayfayı ziyaret edebilirsiniz.

Umarız bu makale WordPress’te CSS animasyonlarının nasıl ekleneceğini öğrenmenize yardımcı olmuştur. WordPress’te animasyonlu arka plan ekleme veya her web sitesinin ihtiyaç duyduğu temel WordPress tasarım öğeleri hakkındaki kılavuzumuza da 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.