WordPress'e Kolayca CSS Animasyonları Nasıl Eklenir

Yıllar boyunca WordPress web sitelerini daha etkileşimli hale getirmek için farklı yollar 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 aynı zamanda müşterileri harekete geçirici mesaj düğmelerinize ve bağlantılarınıza tıklamaya teşvik edebilir.

Neyse ki, kod yazmayı bilmeseniz bile WordPress'te animasyon kurmak da kolaydır.

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

WordPress'e Neden CSS Animasyonları Eklenir?

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

Animasyonlar ayrıca CTA'larınızı öne çıkaracaktır, bu da sizi belirli bir hedefe ulaşmanıza yardımcı olabilir, örneğin daha fazla kişinin e-posta bülteninize abone olmasını sağlamak gibi.

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

Bunu söyledikten sonra, WordPress sitenize CSS animasyonlarını nasıl kolayca ekleyebileceğinizi görelim. Belirli bir yönteme doğrudan atlamayı tercih ederseniz, aşağıdaki bağlantıları kullanabilirsiniz:

Yöntem 1: Herhangi Bir WordPress Bloğunu Kolayca Nasıl Canlandırırsınız? (Hızlı ve Kolay)

Basit bir CSS animasyonu eklemenin en kolay yolu Bloklar Animasyonu kullanmaktır.

Bu ücretsiz animasyon eklentisi, tek bir CSS satırı yazmak zorunda kalmadan herhangi bir bloğa giriş animasyonu eklemenizi sağlar. Ayrıca metin ve sayılara ekleyebileceğiniz bir yazma animasyonu ve bir haber bandı tarzı efekt içerir.

Öncelikle, ücretsiz Bloklar Animasyonu eklentisini yükleyip etkinleştirmeniz gerekecek. Yardıma ihtiyacınız olursa, lütfen WordPress eklentisi nasıl kurulur hakkındaki başlangıç kılavuzumuza bakın.

Etkinleştirdikten sonra, WordPress blok düzenleyicisinde herhangi bir sayfayı veya gönderiyi açın. Ardından, animasyonunu istediğiniz bloğa tıklayın ve sağdaki menüden 'Blok' sekmesini seçin.

Bu menünün yeni bir 'Animasyonlar' bölümü olduğunu göreceksiniz.

Yalnızca 'Animasyonlar' bölümünü genişletmek için tıklayın ve üç farklı seçenek göreceksiniz: Animasyonlar, Sayım Animasyonları ve Yazma Animasyonları.

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

Kullanmak istediğiniz animasyonu seçebileceğiniz bir menü açar.

WordPress düzenleyicisi animasyonun bir önizlemesini gösterecektir, böylece en iyi görüneni görmek için farklı seçenekleri deneyebilirsiniz.

Varsayılan olarak, giriş animasyonu sayfa yüklendiği anda oynayacaktır, ancak isterseniz bir gecikme ekleyebilirsiniz. Aynı sayfada birden fazla animasyon kullanıyorsanız, onları ezici olmamaları için gecikmeleri kullanarak aşamalı olarak da gösterebilirsiniz.

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

'Hız' açılır menüsünü kullanarak animasyonu daha hızlı veya daha yavaş hale de getirebilirsiniz.

Farklı ayarları denerken, ‘Animasyonu Tekrar Oynat’ı tıklayarak animasyonu herhangi bir noktada önizleyebilirsiniz.

Eklentide ayrıca 'Sayı Animasyonları' ve 'Yazı Animasyonları' da bulunuyor.

Yazma Animasyonları metni canlandırmanıza olanak tanırken, Sayım Animasyonları sayılara bir sayaç efekti ekler. Bu animasyonlar, metin veya sayıları destekleyen herhangi bir Gutenberg bloğuyla çalışır, bu nedenle bunları düğmeleri, resim alt yazılarını, başlıkları ve daha fazlasını canlandırmak için kullanabilirsiniz.

Bu efektlerden herhangi 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ğı oku tıklayın.

Artık açılır menüden 'Sayı Animasyonları' veya 'Yazı Animasyonları'nı seçebilirsiniz.

Bu seçenekler soluk görünüyorsa, doğru içeriği vurguladığınızdan emin olun. Örneğin, yalnızca metin vurguladıysanız 'Sayı Animasyonu'nı seçemezsiniz.

Animasyonu ekledikten sonra, küçük açılır penceredeki açılır menüleri kullanarak hızı değiştirebilir ve isteğe bağlı bir gecikme ekleyebilirsiniz.

Örneğin, aşağıdaki resimde bir saniyelik bir gecikme kullanıyoruz.

CSS animasyonunu canlı hale getirmeye hazır olduğunuzda, sitenizde animasyonları 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ı Nasıl Eklenir (Önerilen)

Yerleşik WordPress bloklarına basit animasyonlar eklemek istiyorsanız, Bloklar Animasyonu 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 kullanmanızı öneririz.

SeedProd, basit bir sürükle ve bırak düzenleyici 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 da içerir.

Adına rağmen, harekete geçirici mesaj, alt başlık veya vurgulamak istediğiniz başka herhangi bir metin dahil olmak üzere herhangi bir metni canlandırmak için Animasyonlu Başlık bloğunu kullanabilirsiniz.

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

Birkaç tıklamayla tüm bölümleri ve sütunları bile canlandırabilirsiniz. Bu şekilde, 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 zaten 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 yüklemek ve etkinleştirmektir. Daha fazla ayrıntı için, WordPress eklentisi nasıl kurulur hakkındaki adım adım kılavuzumuza bakın.

Etkinleştirdikten sonra lisans anahtarınızı girmeniz gerekir.

Bu bilgiyi SeedProd web sitesindeki hesabınızda bulabilirsiniz. Lisans anahtarını ekledikten sonra, yalnızca 'Anahtarı Doğrula'ya tıklayın.

Özel Sayfa Tasarımı Oluşturun

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ürler' sayfaları gibi farklı kategorilere ayrılmış 350'den fazla güzel şablonla birlikte gelir.

Bu kılavuz için, animasyonlu metin ve giriş animasyonlarına sahip bir satış sayfası oluşturmayı göstereceğiz, ancak hangi tür sayfa oluşturursanız oluşturun adımlar benzer olacaktır.

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

Kullanmak istediğiniz bir şablon bulduğunuzda, üzerine fareyle gelin ve onay işareti simgesine tıklayın.

Tüm görsellerimizde ‘Zen Satış Sayfası’ şablonunu kullanıyoruz, ancak herhangi bir şablon kullanabilirsiniz.

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

SeedProd, sayfa başlığına göre otomatik olarak bir URL oluşturacaktır, ancak bunu istediğiniz herhangi bir şeyle değiştirebilirsiniz. Örneğin, bir URL'ye ilgili anahtar kelimeler eklemek genellikle WordPress SEO'nuzu iyileştirebilir ve sayfanın ilgili 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ı nasıl yapılır hakkındaki kılavuzumuza bakın.

Başlık ve URL'den memnun kaldığınızda, ‘Sayfayı Kaydet ve Düzenlemeye Başla’ya tıklayın.

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

Sağ tarafta, solda bazı ayarlar bulunan sayfa tasarımının canlı önizlemesini göreceksiniz.

SeedProd, tasarımınıza ekleyebileceğiniz sosyal paylaşım düğmeleri, videolar, iletişim formları ve daha fazlasını eklemenizi sağlayan bloklar dahil birçok blokla birlikte gelir.

Daha fazla bilgi için lütfen WordPress'te özel sayfa oluşturma kılavuzumuza bakın.

WordPress'e Animasyonlu Metin Nasıl Eklenir

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, 'Vurgulanan' stil, metninize bir daire veya altı çizili bir 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 harekete geçirici mesaja dikkat çekmek için de harika bir yoldur.

Vurgulanan stilin ayrıca birkaç üstü çizili şekli de vardır.

İlginç ve dikkat çekici efektler oluşturmak için üstü çizili metinleri kullanabilirsiniz veya tasarımınıza biraz eğlence katabilir.

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 o animasyonun bir önizlemesini gösterecektir, böylece en çok hangisini beğendiğinizi görmek için farklı şekilleri deneyebilirsiniz.

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

Genellikle, animasyonlu metin, bir sayfa yüklendiğinde ziyaretçilerin ilk baktığı şeydir, bu nedenle en önemli metin parçasını vurgulamak için harika bir yoldur.

Bir geçiş animasyonu oluşturmak için ‘Stil’ açılır menüsünü açın ve ‘Döndürme’ye tıklayın.

Ardından ‘Animasyon’ açılır menüsünü açabilir ve kullanmak istediğiniz geçiş türünü, örneğin solma, yakınlaştırma veya döndürme gibi seçebilirsiniz. Yine, SeedProd animasyonu sayfa düzenleyicisinde oynatacaktır, böylece hangisini tercih ettiğinizi görmek için farklı efektleri deneyebilirsiniz.

'Vurgulanan' veya 'Dönen' bir animasyon oluşturuyor olsanız da, animasyonlu metnin önüne ve arkasına metin ekleyebilirsiniz.

Başlık Öncesi ve Başlık Sonrası alanlarına basitçe yazın. 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ırakın.

Varsayılan olarak SeedProd, animasyonu bir döngüde oynatacaktır, bu da bazı ziyaretçiler için can sıkıcı olabilir.

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

Varsayılan olarak, 8000 milisaniye gecikmeden sonra animasyon 1200 milisaniye oynayacaktı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 hızlandırabilirsiniz.

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

Animasyonlu başlığın görünümünden memnun kaldığınızda, değişikliklerinizi kaydetmek için ‘Kaydet’ düğmesine tıklayın.

WordPress'e Giriş Animasyonları Ekleme

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

Ayrıca ziyaretçilerin önce bakması gereken içeriği vurgulamak için de kullanabilirsiniz. Örneğin, çevrimiçi bir pazar yeriniz varsa, ürünün ana resmini veya Kara Cuma indirimini tanıtan banner'ı canlandırabilirsiniz.

SeedProd düzenleyicisinin içinde, canlandırmak istediğiniz içeriğe tıklayın ve ardından sol menüdeki 'Gelişmiş' sekmesini seçin.

Ardından '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çin.

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

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

Sayfanın kurulumundan memnun kaldığınızda, ‘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. Ayrıca WordPress'te animasyonlu arka plan ekleme kılavuzumuza veya her web sitesinin ihtiyaç duyduğu temel WordPress tasarım öğeleri kılavuzumuza da bakmak 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.