Pernahkah Anda melihat animasi CSS yang indah ini di situs web populer? Efek animasi seperti konten yang bergeser, menghilang, gambarnya memantul, dll…. ? Apakah Anda juga ingin menambahkan animasi CSS ke WordPress?

Pada artikel ini, kami akan menunjukkan kepada Anda cara menambahkan animasi CSS ke WordPress dengan mudah tanpa menulis kode apa pun.

Kapan dan mengapa Anda harus menggunakan animasi CSS?

Animasi CSS memungkinkan Anda untuk menarik perhatian pengguna ke berbagai bagian halaman. Anda dapat menggunakannya untuk menghidupkan fitur produk atau tombol ajakan bertindak. Banyak situs web menggunakan animasi CSS saat pengguna menggulir ke bawah halaman. Ini menambahkan beberapa kepribadian ke halaman dan menekankan elemen yang paling penting.

Animasi CSS juga lebih cepat daripada menggunakan flash atau video. Mereka memuat dengan cepat dan didukung oleh sebagian besar browser web modern. Anda dapat menambahkan animasi CSS secara manual ke tema WordPress atau ke lembar gaya Anda. tema anak. Namun, sebagian besar pemula tidak ingin mengedit file tema mereka atau belajar CSS.

Yang mengatakan, dalam tutorial ini, kita akan melihat bagaimana Anda dapat dengan mudah menambahkan animasi CSS ke situs web WordPress Anda.

Tetapi sebelumnya, jika Anda belum pernah menginstal WordPress temukan Bagaimana menginstal sebuah blog WordPress langkah 7 et Bagaimana menemukan, menginstal dan mengaktifkan tema WordPress di blog Anda 

Lalu kembali ke mengapa kita ada di sini.

Cara mengatur animasi CSS

Kami akan menggunakan plugin untuk tutorial ini. Ini memungkinkan Anda untuk membuat animasi menggunakan CSS Editor visual WYSIWYG. Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin Bernyawa itu!. Plugin bekerja tanpa konfigurasi dan tidak ada panel kontrol.

Temukan Cara menginstal plugin di WordPress jika Anda belum pernah melakukannya.

Cukup buat posting baru, dan Anda akan melihat tombol baru di toolbar editor visual.

Dengan mengklik tombol tersebut, Anda akan melihat jendela baru muncul di mana Anda dapat mendesain animasi CSS Anda. Plugin ini mendukung banyak animasi CSS yang semuanya dapat dipilih.

Pertama, Anda perlu memilih gaya animasi. Setelah itu, Anda perlu memilih waktu tunggu sebelum animasi dan durasi animasi. Terakhir, Anda dapat menentukan kapan animasi akan dimulai.

Juga melangkah lebih jauh dengan menemukan Bagaimana menambahkan animasi mengesankan untuk blog Anda

Plugin ini menawarkan tiga pilihan. Anda dapat menjalankan animasi dengan mengklik, mengarahkan kursor, atau saat menggulir.

Setelah Anda puas dengan pengaturannya, Anda dapat mengklik tombol " Ini menjiwai Untuk melihat pratinjau animasi.

Kemudian klik pada tombol Menyisipkan untuk menambahkan animasi ke posting atau halaman Anda. Anda akan melihat bahwa plugin akan menambahkan kode pendek dengan konten dummy pada editor visual.

Anda perlu menghapus konten tiruan di dalam kode pendek, dan menggantinya dengan konten Anda sendiri, gambar, atau apa pun yang ingin Anda animasikan.

Temukan juga Bagaimana cara menambahkan peta interaktif ke situs web WordPress Anda

Yang harus Anda lakukan sekarang adalah mempublikasikan konten Anda dan mempratinjaunya.

Temukan juga beberapa plugin WordPress premium  

Anda dapat menggunakan yang lain plugin WordPress untuk memberikan tampilan yang modern dan untuk mengoptimalkan penanganan blog atau website Anda.

Kami menawarkan kepada Anda beberapa plugin WordPress premium yang akan membantu Anda melakukannya.

1. ChimpMate Pro

Simpanse adalah WordPress Plugin Pop-up premium MailChimp, yang akan membantu Anda mengubah pembaca menjadi pelanggan. Itu dirancang untuk menumbuhkan daftar email Anda tanpa mengganggu pengunjung dengan pop-up yang mengganggu.

Ini sepenuhnya dapat disesuaikan dan Anda akan menguasai kapan dan di mana menampilkan pop-up. Fitur lainnya adalah: dukungan beberapa browser dan memiliki halbeberapa opsi penjadwalan, tata letak yang sepenuhnya dapat disesuaikan, aupport pelanggan yang responsif, iintegrasi sempurna dengan WooCommerce, sebuahxcellente manajemen cache, integrasi sempurna dengan banyak Tema WordPress, dukungan multibahasa berkat ke plugin WPML, etidak banyak lagi.

Download | Demo | Hébergement Web

2. WooCommerce Cardstream Payment Gateway

CardStream adalah satu-satunya penyedia gateway pembayaran independen. Ini WordPress Plugin premium memungkinkan Anda menerima pembayaran langsung di toko online WooCommerce Anda melalui Cardstream.

Ini juga memberi Anda kemampuan untuk menerima pembayaran menggunakan solusi yang di-host Cardstream.

Download | Demo | Hébergement Web

3. Sumber data

DataSource adalah WordPress Plugin premium berfokus pada presentasi visual data Anda di halaman mana pun di situs web Anda. Hal ini memungkinkan Anda untuk menyajikan data dari file CSV, XML, Excel, Google Spreadsheets, database MySQL atau jenis posting khusus sebagai tabel yang dapat diurutkan dan disaring, berbagai grafik, peta, dan banyak lagi.

Di antara fitur-fiturnya, Anda akan menemukan antara lain: iantarmuka yang intuitif, tdapat didasarkan pada model data Anda, tsortable, filterable, dan responsifdukungan dari Google Maps dan multibahasa, adukungan pelanggan responsif, satu mpanduan pengguna, sebuah iinstalasi cepat, et lebih banyak

Download | Demo | Hébergement Web

Sumber Daya yang Direkomendasikan

Cari tahu tentang sumber daya lain yang direkomendasikan untuk membantu Anda membangun dan mengelola situs web Anda.

• Cara kompres dan mengubah ukuran gambar pada WordPress
• Cara menambahkan widget ke header blog WordPress Anda
• Bagaimana cara menambahkan peta interaktif ke situs web WordPress Anda
• Cara memperbaiki kesalahan 413 di WordPress

Kesimpulan

Sini! Itu saja untuk tutorial ini, kami harap ini membantu Anda mempelajari cara mengintegrasikan animasi CSS di WordPress. Jangan sungkan berbagi dengan teman-teman Anda di jejaring sosial favorit Anda. 

Namun, Anda juga akan dapat berkonsultasi dengan kami ressources, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress.

Jika Anda memiliki saran atau komentar, tinggalkan di bagian kami komentar.

...