WordPress'te Metne Animasyon Nasıl Eklenir?

Süslü metin stilleri, izleyicilerin dikkatini hızla çeker. WordPress web sitesi sahipleri genellikle metne nasıl animasyon ekleneceğini sorar. Kesinlikle, WordPress site metinlerinizi tasarlamak için birkaç yöntem bulacaksınız. Biraz daha fazla kod gerektiren HTML CSS efektlerini manuel olarak ekleyebilirsiniz. Ancak kodlama, sitenize özel animasyon eklemenin harika bir yoludur. Yine, en iyi widget'a sahip bir eklenti nispeten kullanışlı, etkili ve aynı zamanda popülerdir .

Ancak, her iki tekniği de elimizden geldiğince kolay bir şekilde ele almaya çalıştık. Bir WordPress sitesi çalıştırıyorsanız, blogu okumak ve süreçleri anlamak için zaman ayırın. Adımları ve talimatları doğru bir şekilde takip etmek, kendi animasyonunuzu sorunsuz bir şekilde özelleştirmenizi sağlar.

WordPress'te Animasyonlu Metin Efektleri Nasıl Eklenir?

Animasyonlu metin efektleri, WordPress sitenize yetenek ve kişilik eklemek için kullanılabilir. Bu eğitimde size bu efektleri eklemenin yollarını göstereceğiz; ancak bundan önce, hareketli bir metin ve rolü hakkında net bir fikriniz olmalıdır; Hadi öğrenelim!

Animasyonlu Metin Efekti nedir ve nasıl görünür?

Animasyonlu metin efektleri, makalelerinize ve başlıklarınıza biraz eğlence ve heyecan katmanın harika bir yoludur. Süslü bir animasyonlu metin efekti kullanmayı seçtiğinizde, çeşitli efektler oluşturabilirsiniz. Bazı efektler metin rengini veya boyutunu değiştirmek kadar basitken , bazıları yanıp sönen veya yanıp sönen metin gibi ayrıntılı animasyonlardır.

Animasyonlu metin, normal metinden biraz farklıdır. Genellikle bu tür metinler kendi kendine hareket etmez. Bunun yerine, ekranda hareket ediyormuş gibi görünmesini sağlayan bir etkisi vardır. Bu nedenle, süslü metinler, insanların içeriğe, bağlantılara veya e-postaları açma olasılığını artırır.

Animasyonlu Metinlerin Web Sitenizdeki Rolü

WordPress temalarında farklı türde animasyonlu metin efektleri vardır, ancak hepsi aynı temel işlevi paylaşır. Metnin rengini veya stilini değiştirirler ve basitçe bir test stilini değiştirirler. Örneğin, bir "harekete geçirici mesaj" düğmesini kırmızı arka plan ve "Buraya tıklayın!" yazan beyaz metinle değiştirebilirsiniz. tıklandığında.

Animasyonlu başlık veya süslü metinler içeren bir kahraman bölümü şu rolleri oynar:

• Tasarımlarınızı görsel olarak daha ilgi çekici hale getirir.
• Özel teklifleri ve önemli bilgileri vurgulayın.
• Ürün özelliklerinizin fark edilir olmasını sağlar.
• Bir web sitesini daha etkileşimli hale getirir ve işi teşvik eder.

Animasyonlu Metin Efektleri Eklemenin En Kolay Yolları

Bir WordPress Eklentisi Kullanmak

Günümüz piyasası, metin şekillendirme görevlerini kolaylaştırmak için size farklı türden eklentiler sunar. ElementsKit, Elementor sayfa oluşturucu için çok güçlü bir eklenti olduğu kadar eklentidir. ElementsKit ile her şeyi tek bir başlık altında alacaksınız.

Fancy animasyonlu metin, ElementsKit pro tarafından sunulan etkileyici bir widget'tır.

Panonuza giriş yapın -> Herhangi bir Sayfayı veya Gönderiyi seçin -> ElementsKit ile düzenle'ye tıklayın -> ElementsKit Fancy Animation Text widget'ını arayın -> Widget'ı Sürükleyip Bırakın

İçerik Bölümü

Kısma Süslü Metin kısmı denir, aşağıdaki alanları içerir:

Animasyon

• Animasyon Stili – Burada iki seçenek Metin veya SVG'dir, her ikisi de farklı animasyon stilleri oluşturmanıza olanak tanır.
• Animasyon Türü – Animasyon türünüze bağlı olarak burada çeşitli seçenekler elde edeceksiniz.
• Gösterim Süresi (ms) – Seçenek kutusunu kullanarak animasyon süresini milisaniye cinsinden ayarlayabilirsiniz.
• Animasyon Gecikmesini Göster (ms) – Animasyon gecikme süresini buradan ayarlayın. Bir animasyonun daha sonra, hemen başlangıcından itibaren veya anında ve animasyonun ortasında başlayabileceğini belirtir.

İçerik

• Önek Metni – Görüntülemek istediğiniz önek içeriğini buraya yazmanız gerekir. Süslü animasyondan önce yazılacağı anlamına gelir.
• Süslü Listeler – Süslü animasyon için buraya öğeler ekleyin.
• Son Ek Metni – Görüntülemek istediğiniz son ek içeriğini yazın. Yani fantezi animasyondan sonra belirtilecektir.

• Başlık HTML Etiketi – İçeriğin HTML etiketini buradan seçin.
• Bağlantı (İsteğe bağlı) – Kullanıcıların başka bir konuma yönlendirmesini istiyorsanız herhangi bir bağlantı ekleyin.

Stil Bölümü

• Başlık Metni – Başlık hizalamasını, tipografiyi, rengi vb. ayarlamak için bu alanı kullanın.
• Süslü Metin Listeleri – Tipografi, renk ve dolguyu ayarlamak için bu alanı kullanın.
• Süslü İmleç – Bu alanı kullanarak imlece renk, genişlik ve yükseklik ile süslü bir görünüm verebilirsiniz.

Tüm gerekli ifadelerinizi düzenleyip şekillendirdikten sonra güncelle'yi tıklayın ve değişiklikleri ön uçtan görün. Bir örnek –

CSS uygulama

WordPress'te CSS animasyonları oluştururken, aşağıdaki temel ancak önemli şeyleri aklınızda bulundurun :

• Doğru bir animasyon adı ayarlamak – Bu, bir CSS animasyonu tarafından taşındığında bir öğe üzerinde görüntülenecek olan addır. Örneğin, “fadeIn” adlı animasyonlu bir düğmeniz varsa, bu özellik için kullanacağınız değer bu olacaktır.
• Animasyon süresi – Bu, bir animasyonun tamamlanması için gereken saniye sayısıdır. Bir animasyonun süresiz olarak veya başka bir şey olana kadar (sayfa yükleme gibi) sürmesi için bunu hiç veya 0 olarak da ayarlayabilirsiniz.
• Animasyon zamanlama işlevi – Bu, belirli bir süre (milisaniye cinsinden) için ne kadar sürdüğüne bağlı olarak öğenin bir noktadan diğerine nasıl hareket ettiğini kontrol eder. Örneğin, bu özelliği easy-out olarak ayarlarsanız, öğeniz yavaş hareket etmeye başlayacak ve süresinin sonunda hızlanarak başlangıçta yeniden başlayacaktır.
• Animation-delay – Bu, bir animasyon bittikten sonra yeniden başlamadan önce kaç milisaniye eklenmesi gerektiğini belirten bir değerdir (örneğin, 1s).
• Animation-iteration-count – Bu, animasyonu oynatmak için ihtiyacınız olan süredir. CSS özelliğini kullanarak bu yinelemeyi sayabilirsiniz.
• Animations-direction – Bir animasyonun oynatılması gereken sıra veya yöndür. Normal, ters, alternatif ve alternatif-ters olabilir.
• Animation-fill-mode – Bu değerler, bir öğenin nasıl görüntülenmesi gerektiğini belirtir. Bir animasyon uygulandıktan önce ve sonra olabilir.
• @keyframes bilmek – Animasyonun kurs boyunca değişen özelliklerini ve ayrıca bu özelliklerin alması gereken değerleri belirtir. Örneğin:

 @keyframes example { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} }

Genel olarak yüzdeler, animasyonun zamanlamasını belirtmek için kullanılır. Yukarıdaki anahtar kare, öğenin arka plan renginin, animasyon boyunca kırmızıdan sarıya yüzde 25 oranında dönüşeceğini gösteriyor.

Ancak sırasıyla %0 ve %100 yerine from ve to kullanılabilir.

animate.css Dosyası Oluşturma

Çalıştığınız metin düzenleyicide öncelikle gerekli tüm özelliklere sahip ayrı bir dosya oluşturmanız gerekir. Herhangi bir animasyon için anahtar kareleri seçebilirsiniz . Ardından, WordPress sitenizdeki herhangi bir metne uygulamak için bunları belirli CSS sınıflarıyla bir araya getirmelisiniz.

CSS dosyanıza basit bir kod yazarak başlayın. Bir animasyon metni için örnek bir kod şöyle görünebilir:

 ```@keyframes MyAnimation { from { opacity: 0; transform: rotate(20deg); animation-duration: 3s; } to {opacity: 1;} transform: rotate(0deg); } }

Şimdi bu ana kareyi bir CSS sınıfına bağlamak için MyAnimation adında bir metin ayarladık. Yani, yukarıdaki kodun hemen ardından şimdi aşağıdaki kodu dosyaya koymanız gerekiyor.

 .MyAnimation { animation-name: MyAnimation; }

Tüm temel CSS animasyon bilgilerini burada bulabilir ve kodları uygulayabilirsiniz!

İhtiyacınıza göre mümkün olduğunca çok sayıda animasyon oluşturmak için bu prosedürü tekrarlayabilirsiniz. Ardından, dosyayı animate.css olarak kaydedin. Alternatif olarak, Animate.css dosyasını da indirebilirsiniz . Tonlarca popüler animasyon tasarımı için anahtar kareleri ve CSS sınıflarını içeren çok sevilen bir dosyadır. Ayrıca, dosyayı kullanmak, karmaşık animasyonu kodlama zahmetinizi azaltacaktır.

Yukarıdaki kod, ' MyAnimation ' h1 etiketinizin metnini canlandıracaktır. “3s”yi farklı bir değere getirerek animasyonun süresini değiştirebilirsiniz. Onaltılık değerleri değiştirerek renkleri de değiştirebilirsiniz. CSS dosyasını kaydettikten sonra, web sitenizin görünümünde başka değişiklikler yapabilir, CSS dosyasını düzenleyebilirsiniz. CSS dosyasını düzenleyerek yazı tipini, metnin boyutunu ve metnin rengini değiştirebilirsiniz. CSS dosyasını değiştirerek arka plan rengini ve başlığın boyutunu da değiştirebilirsiniz.

animate.css Dosyanızı WordPress Sitesine Yükleme

Dosya işini bitirdikten sonra onu temanızın dizinine yükleyin. Tüm süreci üç adıma ayırdık,

Aşama 1

Dosya Aktarım Protokolünü (FTP) kullanarak siteye gidin -> FTP istemcisini seçin (FileZilla, WinSCP, Cyberduck, vb.) -> Barındırma hesabınızda gerekli kimlik bilgilerini seçin.

Adım 2

Public_html dizininize erişim -> wp-content'e gidin -> Temalar -> Aktif veya alt temanın klasörünü seçin

Aşama 3

Şimdi, css adlı bir alt dizini arayın. Bunu alırsanız, animate.css veya animate.min.css dosyanızı Animate.css dosyasından alt dizine yükleyin.

Ancak, alt dizin klasörünüz yoksa kolayca yeni bir tane oluşturabilirsiniz. Bunun için, dosyayı yükledikten hemen sonra yeni dosyayı oluşturmak için basit bir düzenleme yapın ve bitti.

Animate Stil Sayfasını functions.php Aracılığıyla Çağırın

functions.php dosyasını aktif temanızın klasöründe bulacaksınız. Şimdi, Animate Stil Sayfasını çağırmak için bu kod parçacığını eklemeniz gerekiyor:

 add_action( 'wp_enqueue_scripts', 'wpb_animate_styles' ); function wpb_animate_styles() { wp_enqueue_style( 'animate-css', get_stylesheet_directory_uri() . '/css/animate.css', '3.5.0', 'all'); }

Animate.css'deki animate.min.css dosyasını kullandıysanız bitiş satırına animate.css yerine animate.min.css yazmanız gerektiğini unutmayın. Tüm değişiklikleri kaydettikten sonra WordPress kontrol panelinize gidin.

CSS Sınıflarını Kullanarak Animasyonları Uygulayın

Artık gönderilerde ve sayfalarda farklı animasyon efektleri görmek için animate.css dosyasında istediğiniz herhangi bir sınıfı uygulamak mümkün. Ayrıca Animate.css dosyası, tümünün tam listesine başvurmanıza olanak tanır.

Son olarak, Klasik Editör'de bir gönderi veya sayfa seçin -> Metin düzenleyiciye geçin -> Veya bir Blok Düzenleyici ise, blok araç çubuğundan üç noktalı simgeye tıklayın -> HTML Olarak Düzenle'yi seçin-> Animasyonu ekleyin sınıfını ve animasyonunuz için sınıfı öğe etiketine -> Önizleme

Bunlar, sitenize animasyonlu metin eklemek için iki etkili tekniktir ve sitenizi daha ilgi çekici ve görsel olarak çekici hale getirmeye yardımcı olabilirler. Bu tekniklerden birini kullanarak sayfalarınıza hareket ve ilgi katabilirsiniz.

Ancak, herhangi bir kodlama fikriniz yoksa CSS uygulamak biraz zor olabilir. Bu nedenle, WordPress'te CSS animasyonları oluşturmak için uzman yardımı almanız önerilir. Alternatif olarak, ElementsKit fantezi animasyonlu metin, herhangi bir şık animasyonu hızlı bir şekilde tasarlamanızı destekleyen akıllı bir widget'tır. Widget ile seçtiğiniz metinleri süslü animasyonlara dönüştürebilirsiniz.