Bu güzel CSS animasyonlarını popüler web sitelerinde gördünüz mü? Kayan, dağılan içerik, zıplayan görüntüler vb. Gibi animasyon efektleri. ? WordPress'e CSS animasyonları da eklemek istiyor musunuz?

Bu yazıda, herhangi bir kod yazmadan WordPress'e CSS animasyonlarını nasıl kolayca ekleyebileceğinizi göstereceğiz.

Ne zaman ve neden CSS animasyonları kullanmalıyım?

CSS animasyonları, kullanıcının dikkatini sayfanın farklı bölümlerine çekmenize olanak tanır. Bunları, ürün özelliklerini veya bir harekete geçirici mesaj düğmesini canlandırmak için kullanabilirsiniz. Çoğu web sitesi, kullanıcı sayfayı aşağı kaydırdığında CSS animasyonları kullanır. Sayfaya biraz kişilik katar ve en önemli unsurları vurgular.

CSS animasyonları ayrıca flash veya video kullanmaktan daha hızlıdır. Hızlı bir şekilde yüklenirler ve çoğu modern web tarayıcısı tarafından desteklenirler. CSS animasyonlarını WordPress temanıza veya stil sayfanıza manuel olarak ekleyebilirsiniz. çocuk teması. Ancak, yeni başlayanların çoğu tema dosyalarını düzenlemek veya CSS öğrenmek istemiyor.

Bununla birlikte, bu eğitimde WordPress web sitenize nasıl kolayca CSS animasyonları ekleyebileceğinizi göreceğiz.

Ama daha önce, eğer WordPress keşfi hiç kurmadıysanız Bir WordPress blog 7 adımlarını nasıl yüklenir et Nasıl bulmak yüklemek ve blogunuzda bir WordPress tema etkinleştirmek için 

O zaman neden burada olduğumuza dönelim.

CSS animasyonları nasıl kurulur

Bu eğitim için bir eklenti kullanacağız. Kullanarak CSS animasyonları oluşturmanıza olanak sağlar WYSIWYG görsel düzenleyici. Yapmanız gereken ilk şey eklentiyi kurmak ve etkinleştirmek. Bunu canlandırın!. Eklenti konfigürasyon olmadan çalışır ve kontrol paneli yoktur.

keşfedin WordPress bir eklenti yüklemeniz nasıl eğer hiç yapmadıysan.

Yeni bir gönderi oluşturun, görsel düzenleyici araç çubuğunda yeni bir düğme göreceksiniz.

WordPress'e CSS animasyonları ekleyin - animateit-buton

Düğmeye tıkladığınızda, CSS animasyonlarınızı tasarlayabileceğiniz yeni bir pencere açılacaktır. Eklenti, tümü seçilebilecek birçok CSS animasyonunu destekler.

Animasyon-editör

Öncelikle animasyon stilini seçmeniz gerekiyor. Bundan sonra, animasyon öncesi bekleme süresini ve animasyonun süresini seçmeniz gerekir. Son olarak, animasyonun ne zaman başlayacağını belirtebilirsiniz.

Ayrıca keşfederek daha da ileri gidin Blogunuza etkileyici animasyonlar nasıl eklenir

Eklenti üç seçenek sunar. Animasyonu tıklandığında, üzerine gelindiğinde veya kaydırma sırasında çalıştırabilirsiniz.

WordPress'e CSS animasyonları ekleyin - animateon

Ayarlardan memnun kaldığınızda, "butonuna tıklayabilirsiniz Bu canlandıran Animasyonun önizlemesini görmek için.

Ardından butonuna tıklayın Ekle Yazınıza veya sayfanıza animasyon eklemek için. Eklentinin görsel düzenleyicide kukla içeriğe sahip bir kısa kod ekleyeceğini fark edeceksiniz.

animasyon-shortcode

Kısa kodun içindeki sahte içeriği kaldırmanız ve kendi içeriğiniz, resimleriniz veya canlandırmak istediğiniz başka herhangi bir şeyle değiştirmeniz gerekir.

Çok keşfetmek WordPress web sitenize etkileşimli haritalar nasıl eklenir?

İçerik-shortcode

Artık tek yapmanız gereken içeriğinizi yayınlamak ve önizlemektir.

Ayrıca bazı premium WordPress eklentilerini keşfedin  

diğer kullanabilirsiniz WordPress eklentileri modern bir görünüm vermek ve blogunuzun veya web sitenizin kullanımını optimize etmek için.

Size, bu konuda yardımcı olacak bazı premium WordPress eklentileri sunuyoruz.

1. ChimpMate Pro

Şempanze WordPress Plugin Okuyucularınızı abonelere dönüştürmenize yardımcı olacak MailChimp'in premium Pop-up'ı. Can sıkıcı açılır pencerelerle ziyaretçileri rahatsız etmeden e-posta listenizi büyütmek için tasarlanmıştır.ChimpMate Pro

Tamamen özelleştirilebilir ve pop-up'ların ne zaman ve nerede gösterileceğini öğreneceksiniz. Diğer özellikleri: destek çeşitli tarayıcılardan ve pçoklu planlama seçenekleri, tamamen özelleştirilebilir bir düzenduyarlı müşteri desteği, iile mükemmel entegrasyon WooCommerce, bir excellente önbellek yönetimimükemmel entegrasyon birçok kişiyle WordPress temalarısayesinde çok dilli destek WPML eklentisine, eartık değil.

Indirgösteri | Web hosting

2. WooCommerce Cardstream Ödeme Ağ Geçidi

CardStream, tek bağımsız ödeme ağ geçidi sağlayıcısıdır. Bu WordPress Plugin premium, Cardstream aracılığıyla doğrudan WooCommerce çevrimiçi mağazanızda ödeme kabul etmenizi sağlar.

WooCommerce Cardstream Ödeme Ağ Geçidi

Ayrıca, Cardstream tarafından barındırılan çözümü kullanarak ödemeleri kabul etme olanağı da sunar.

Indirgösteri | Web hosting

3. Veri Kaynağı

DataSource bir WordPress Plugin premium, web sitenizin herhangi bir sayfasında verilerinizin görsel sunumuna odaklandı. CSV dosyalarından, XML'den, Excel'den, Google E-Tablolardan, MySQL veritabanlarından veya özel yazı türlerinden verileri sıralanabilir ve filtrelenebilir tablo, farklı grafikler, haritalar ve daha fazlası olarak sunmanıza olanak tanır.Veri Kaynağı wordpress eklentileri grafik tabloları ekleyin web sitesi blog formu

Özellikleri arasında diğerlerinin yanı sıra:sezgisel arayüz, tverilerinizin modeline göre ableaux, tsıralanabilir, filtrelenebilir ve duyarlı ablesupport Google Haritalar ve çok dilli, birduyarlı müşteri desteği, bir mkullanım kılavuzu, bir ihızlı kurulum, et daha

Indir gösteri | Web hosting

Önerilen Kaynaklar

Web sitenizi oluşturmanıza ve yönetmenize yardımcı olacak diğer önerilen kaynaklar hakkında bilgi edinin.

Sonuç

Buraya ! Bu eğitim için bu kadar, CSS animasyonlarını WordPress'e nasıl entegre edeceğinizi öğrenmenize yardımcı olacağını umuyoruz. Çekinme En sevdiğiniz sosyal ağlarda arkadaşlarınızla paylaşın

Bununla birlikte, ayrıca bize danışabilirsiniz kaynakların bulunduğuİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma.

Öneriniz veya yorumunuz varsa, bunları bölümümüzde bırakın. Yorumlar.

...