Web tasarımının araç kutusunda, bir sayfaya veya gönderiye sihirli bir dokunuş katmak için iyi yerleştirilmiş animasyon gibisi yoktur. Nedenini anlamak kolaydır – animasyon metin gibi statik öğeleri hayata geçirebilir. Hareket eden şeylerin bir şekilde gözümüze çarptığı için animasyon, izleyicilerin dikkatini bir şeye çekmenin harika bir yoludur. Zevkle, ölçülü ve doğru bir kompozisyonla yapıldığı sürece, animasyon web siteniz için büyük bir nimet olabilir.
Metin, animasyonun ne kadar yararlı olabileceğinin harika bir örneğidir. Paragraflar bir sayfada belirli bir şekilde görünebilir. Tek tek kelimeler de bunu yapabilir – şık bir yazım efekti yaratarak tüm cümleleri her seferinde bir harf görünecek şekilde bile ayarlayabilirsiniz. Ve bu efektleri HTML ve CSS kullanarak eklemek kesinlikle mümkün olsa da, web sitenize animasyonlu metin eklemeniz için daha kolay bir yol oluşturduk.
Elementor eklentisi için WordPress Eklentilerimiz – altmış özel yapım Elementor eklentisinden oluşan bir paket – tam ihtiyacınız olan şeyi içerir. Eklenti, Animasyonlu Metin widget’ı olarak adlandırılır ve WordPress’te animasyonlu metin eklemek için harika bir küçük araçtır. Aynı şeyi blok düzenleyiciyle yapmak için WordPress Blocks for Gutenberg eklentimizi ve Animasyonlu Metin bloğunu nasıl kullanabileceğinizi de göstereceğiz.
Elementor için WordPress Eklentilerini Kullanarak WordPress’te Animasyonlu Metin Nasıl Eklenir?
Başlamadan önce, WordPress Addons for Elementor eklentisini kullanarak WordPress’te nasıl animasyonlu metin ekleyeceğinizi gösteren bir video oluşturduğumuzu bilmelisiniz. Makale okumaktan çok video izlemeyi seviyorsanız, devam edin ve izleyin – ihtiyacınız olursa her zaman makaleye gelebilirsiniz.
WordPress Addons for Elementor, Elementor için bir widget koleksiyonu olduğundan, eklentiyi yükleyip etkinleştirmeden önce web sitenizde Elementor kurulu ve etkinleştirilmiş olmalıdır. Web sitesi oluşturucunun hem ücretsiz hem de profesyonel ücretli sürümleri vardır. Eklentimiz pro sürümünü gerektirmez. Elementor için WordPress Eklentilerinin tüm avantajlarından yararlanmak için ihtiyacınız olan tek şey düzenli bir ücretsiz kurulumdur.
Elementor için WordPress Eklentileri yüklenip etkinleştirildikten sonra, Elementor öğeleri panelinizde yeni bir dizi öğe ve pencere öğesi göreceksiniz. Animasyonlu metin efektinizi oluşturmaya başlamak için sol taraftaki panelde “animasyonlu metin” araması yaparak widget’ı açın.
Bir sonraki adım, widget’ı sayfadaki bir bölüme sürüklemek olmalıdır. Sayfa tasarımınıza bağlı olarak çok sütunlu bir bölümdeki bir sütuna ekleyebilirsiniz. Kullandığımız bölüm düzeni varsayılan, tek sütunluydu.
İçeriği ve Animasyonu Düzenleme
Widget’ı bir bölüme sürükledikten sonra, Genel seçenekler bölümünde eklentinin İçerik sekmesi açılacaktır. Widget’ın varsayılan metnini değiştirebileceğiniz ve kendinizinkini ekleyebileceğiniz yer burasıdır. Canlandırmak istediğiniz metin ne olursa olsun, tek sözcükler, tümcecikler, cümleler veya tam paragraflar ekleyebilirsiniz.
Örneğimiz için “Animasyon stilinizi seçin” cümlesini kullandık.
Bir sonraki seçenek büyük olanı – Animasyonu Görün. Metnin hangi bölümlerinin (kelimeler, harfler veya tüm metin) animasyonda birlikte hareket edeceğini seçebileceğiniz yer burasıdır. Metnin sayfada görüneceği yönü de seçebilir ve görünüm gecikmesini ayarlayabilirsiniz – ziyaretçi animasyonlu metin bölümüne ulaştıktan ne kadar sonra animasyon başlayacaktır.
Seçtiğimiz seçenekler arasında başlığı harfe göre bölmek, harflerin üstten görünmesi ve animasyonun 200 milisaniye gecikmeyle görünmesi yer alıyordu.
İstenen efekti yaratmak için farklı bölme ve animasyon türlerini birleştirebilirsiniz. Örneğin bir yazma efekti için gidiyorsanız, “harfe göre” ayırma ve “sağdan” bir animasyon ayarlayacaksınız.
Başlık ve animasyon seçeneklerini belirledikten sonra, animasyonlu metni şekillendirmeye geçebilirsiniz.
Animasyon Metnine Stil Verme
Widget’taki stil seçenekleri oldukça basit ve gezinmesi kolay. Yeni başlayanlar için, bazı seçenekler metnin hizalamasını ve başlık etiketini seçmenize izin verir. Bu gösterim için merkez hizalamasını ve H3 başlık etiketini seçtik.
Aşağıdaki birkaç seçenek, metin rengi ve tipografi (yazı tipi ailesi, boyut, ağırlık, stil, metin dönüşümü, dekorasyon ve ayrıca satır yüksekliği ve harf aralığı) ile ilgilidir. Metnin rengini değiştirmedik ama tipografi seçeneklerinde birkaç değişiklik yaptık. Harflerin boyutunu 70 piksel ve ağırlığını 400 piksel olarak değiştirdik.
Metnimizin etrafındaki boşlukları artırmak istemediğimiz için başlık doldurma seçeneklerini değiştirmemeyi seçtik. Böylece, örnek animasyonlu metnimiz yapıldı ve görüntülenmeye hazır. Sonuç olarak oluşturmak yalnızca birkaç dakika sürdü ve sonuçlar harika görünüyordu.
Gutenberg için WordPress Bloklarını Kullanarak Animasyonlu Metin Nasıl Eklenir?
Gutenberg hayranıysanız ve Animasyonlu Metin widget’ına benzer işlevlere sahip bir blok kullanmak istiyorsanız, WordPress Blocks for Gutenberg’i denemelisiniz. Eklenti, bazıları ücretsiz ve bazıları premium olmak üzere 80’den fazla farklı bloğa sahiptir ve blok düzenleyiciyle çalışırken araç kutunuzu genişletmek için harikalar yaratırlar.
Web sitenize animasyonlu metin eklemek için kullanmak istediğiniz WordPress bloğu, uygun şekilde adlandırılmış Animasyonlu Metin bloğudur. Premium bloklardan biridir, dolayısıyla bu bloğu kullanmak istiyorsanız eklentinin premium sürümüne sahip olmalısınız. Fakat bunu hallettiğinizde, sayfalarınıza hızlı ve kolay bir şekilde animasyonlu metin ekleyebileceksiniz.
Size bir Elementor parçacığı kullanarak nasıl oluşturacağınızı zaten gösterdiğimiz aynı örneği oluşturarak ne kadar hızlı bir şekilde göstereceğiz. Böylece devam edip eklentiyi yükleyebilir ve yeni bir sayfa açabilir veya bloğu eklemek istediğiniz yere gönderebilirsiniz.
Eksiksiz bir görsel adım adım öğretici için videoyu da kontrol edebilirsiniz:
İçerik Nasıl Eklenir ve Animasyon Seçilir
Bloğu bir sayfaya eklediğinizde, sağ taraftaki menü size içerik seçeneklerini gösterecektir. Başlığı ayarlayabileceğiniz – canlandırmak istediğiniz metni seçebileceğiniz – ve animasyon için seçenekleri seçebileceğiniz yer burasıdır. Çok basit ve anlaşılır.
Başlık metnini “Animasyon stilinizi seçin” olarak değiştirdik. Başlığı bölmemeyi seçtik. Fakat görünüm animasyonu seçeneği olarak “sağdan” seçtik ve görünme gecikmesini 100ms olarak ayarladık.
İçerik eklemek ve animasyonu seçmek bu kadar. Elbette farklı bir seçim yapmakta özgürsünüz ve başlığı harflere veya kelimelere ve farklı türde görünüm animasyonlarına göre bölmeyi deneyebilirsiniz. İşiniz bittiğinde, blokta biraz ince ayar yapmak için Stil seçeneklerine gidin.
İçerik Nasıl Stillendirilir?
Blokla sahip olduğunuz stil seçenekleri yine basittir. İçeriğinizin hizalamasını, etiketini, rengini, tipografi seçeneklerini ve dolgu seçeneklerini seçebilirsiniz; bu, başlığa bir ara eklemenin ve başlığı iki satırda oluşturmanın bir yolunu arıyorsanız kullanışlı olabilir.
Başlığımız merkezi olarak hizalandı. Tipografi seçenekleri altında yazı boyutunu 70 piksel, ağırlığı 400 olarak ayarlıyoruz.
WordPress Blocks for Gutenberg eklentisini kullanarak WordPress web sitenize animasyonlu metin eklemek için yapmanız gereken tek şey bu.
Konunun Özeti
Web sayfaları oluştururken erişebileceğiniz tasarım seçenekleri söz konusu olduğunda, genellikle daha fazlası daha iyidir. Pek çok seçenek, etkilerini en üst düzeye çıkaracak şekilde dikkatlice düşünüldüğünde ve eklendiğinde en iyi sonucu verdiğinden, bunları kullanmak için aynı şey geçerli değildir.
Metin animasyonu için bu, en iyi yaptığı şeyi yapmasına izin vermek, aksi halde durağan metin parçalarına dikkat çekmek anlamına gelir. İster metnin tüm paragraflarını soldurmak için, ister yazma efektini kullanarak cümleler oluşturmak için kullanıyor olun, WordPress Addons for Elementor ve Animated Text widget’ı, WordPress’e animasyonlu metin eklemek için mükemmel araçlar olacaktır.