Loncat ke Konten Utama

Bagaimana menambahkan CSS animasi WordPress

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 901.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

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.

tambahkan animasi CSS di WordPress - animateit-button

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.

Animasi-editor

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

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.

tambahkan animasi CSS ke WordPress - animateon

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.

bernyawa-shortcode

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

konten-shortcode

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

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

Temukan juga beberapa plugin WordPress premium  

Anda dapat menggunakan plugin WordPress lainnya untuk memberikan tampilan modern dan mengoptimalkan cengkeraman blog atau situs web Anda.

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

1. ChimpMate Pro

Chimpmate adalah plugin WordPress Pop-up premium MailChimp, yang akan membantu Anda mengubah pembaca Anda menjadi pelanggan. Itu dirancang untuk meningkatkan daftar email Anda tanpa mengganggu pengunjung, dengan pop-up yang mengganggu.ChimpMate Pro

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 beberapa tema WordPress, dukungan multibahasa terima kasih ke plugin WPML, etidak banyak lagi.

DownloadDemo | Hébergement Web

2. WooCommerce Cardstream Payment Gateway

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

Gerbang Pembayaran Cardstream WooCommerce

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

DownloadDemo | Hébergement Web

3. Sumber data

DataSource adalah plugin WordPress premium yang berfokus pada penyajian data Anda secara visual di halaman mana pun di situs web Anda. Ini memungkinkan Anda untuk menyajikan data dari CSV, XML, Excel, Google Spreadsheets, database MySQL atau jenis posting khusus sebagai tabel yang dapat diurutkan dan difilter, bagan yang berbeda, peta dan banyak lagi.Sumber Data plugin wordpress memasukkan tabel grafik bentuk website blog

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.

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

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.

...

Artikel ini berisi 1 komentar

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
12 saham
saham8
menciak2
Register2