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 harekete geçirici mesajlarınızı (CTAs) öne çıkaracaktır, bu da daha fazla insanın e-posta bülteninize abone olması gibi belirli bir hedefe ulaşmanıza yardımcı olabilir.

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)
• Yöntem 2: Özel Sayfalara CSS Animasyonları Nasıl Eklenir (Önerilen)

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 Blocks Animation 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üklemeniz ve etkinleştirmeniz gerekecektir. Yardıma ihtiyacınız olursa, lütfen WordPress eklentisinin nasıl kurulacağına dair 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.

Simply click to expand the ‘Animations’ section, and you’ll see three different options: Animations, Count Animations, and Typing Animations.

‘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.

Yazım Animasyonları metni canlandırmanıza olanak tanırken, Sayım Animasyonları sayılara bir sayaç tarzı efekt ekler. Bu animasyonlar, metin veya sayıları destekleyen herhangi bir Gutenberg bloğuyla çalışır, böylece 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 yayına almaya 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, animasyonun canlı olduğunu göreceksiniz.

Yöntem 2: Özel Sayfalara CSS Animasyonları Nasıl Eklenir (Önerilen)

WordPress'in yerleşik 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 kullanmanızı öneririz.

SeedProd, basit bir sürükle ve bırak düzenleyicisi 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.

Dönüşüm ve satışları artırmak 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, bir WordPress eklentisinin nasıl kurulacağına dair 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 'Anahtarı Doğrula'ya tıklamanız yeterlidir.

Ö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 comes with over 350 beautiful templates that are organized into different categories, such as 404-page templates and custom WooCommerce ‘thank you’ pages.

Bu kılavuzda, animasyonlu metin ve giriş animasyonlarına sahip bir satış sayfası oluşturmayı göstereceğiz, ancak adımlar oluşturduğunuz sayfa türü ne olursa olsun 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ı yapma 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 birçok blokla birlikte gelir; bunlar arasında sosyal paylaşım düğmeleri, videolar, iletişim formları ve daha fazlasını eklemenizi sağlayan bloklar da bulunur.

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 hizalamayı 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.

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 görüntüsünü veya Black Friday indirimini duyuran 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.

You can now add entrance animations to any block, section, or column simply by following the same process described above.

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ım bu makale, WordPress'te CSS animasyonları eklemeyi öğ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 öğelerine de 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.