Bagaimana Cara Menambahkan Animasi Gulir di Situs WordPress?

Efek dan animasi membantu menghidupkan situs web. Mereka tidak hanya membuatnya tampak memukau tetapi juga meningkatkan pengalaman pengguna, yang merupakan salah satu sinyal peringkat mesin pencari Google yang paling penting.

Anda mungkin berpikir itu luar biasa tetapi di luar kemampuan Anda untuk berkreasi. Namun faktanya, ini tidak hanya memungkinkan tetapi Anda dapat membuat animasi gulir untuk situs WordPress Anda hanya dengan beberapa klik.

Di blog ini, kami akan membantu Anda mempelajari Cara menambahkan Animasi Scroll di WordPress semudah mungkin.

Jadi pantau terus dan baca postingannya sampai akhir.

Namun sebelum itu mari kita pahami apa saja manfaat Menambahkan Animasi Scroll di WordPress.

Manfaat Menambahkan Animasi Scroll di WordPress

Jika Anda masih bertanya-tanya mengapa Anda harus menambahkan animasi gulir di WordPress, simak kelebihan atau manfaat yang disebutkan di bawah ini:

1. Peningkatan Keterlibatan Pengguna

Animasi gulir menarik perhatian dan membuat pengunjung tetap terlibat saat mereka menjelajahi situs Anda. Elemen dinamis seperti teks memudar atau gambar bergerak menciptakan pengalaman interaktif, mendorong pengguna untuk menggulir lebih jauh dan menghabiskan lebih banyak waktu di halaman Anda.

2. Peningkatan Pengalaman Pengguna (UX)

Animasi dapat memandu pengguna menelusuri konten dengan cara yang halus dan intuitif. Dengan mengungkapkan informasi secara bertahap atau menyorot bagian-bagian penting, efek gulir membuat navigasi lebih mudah dan menyenangkan, sehingga meningkatkan kepuasan pengguna secara keseluruhan.

3. Peningkatan Daya Tarik Visual

Menambahkan animasi gulir memberi situs web Anda tampilan modern dan profesional. Transisi dan animasi yang halus dapat membuat desain Anda lebih dinamis, membantu situs Anda menonjol dari pesaing.

4. Peluang Bercerita

Animasi gulir memungkinkan penceritaan yang kreatif. Anda dapat menyajikan informasi dalam urutan yang logis dan menarik secara visual, yang membantu mengomunikasikan pesan Anda secara lebih efektif dan membuat pengunjung tetap terlibat dengan konten Anda.

5. Interaksi Ramah Seluler

Animasi gulir meningkatkan interaksi seluler, menjadikannya lebih lancar dan menarik. Pengguna seluler, khususnya, mendapat manfaat dari elemen desain intuitif yang merespons gerakan mereka, sehingga meningkatkan pengalaman seluler.

6. Manfaat SEO

Karena animasi dapat berkontribusi pada keterlibatan pengguna yang lebih baik dan waktu yang lebih lama dihabiskan di situs, animasi secara tidak langsung mendukung upaya SEO. Rasio pentalan yang lebih rendah dan interaksi pengguna yang lebih tinggi dapat memberi sinyal kepada mesin telusur bahwa situs Anda menawarkan konten yang berharga, sehingga membantu meningkatkan peringkat Anda.

7. Pencitraan Merek Profesional

Animasi gulir mencerminkan tingkat profesionalisme yang lebih tinggi, selaras dengan tren desain web modern. Bila digunakan secara strategis, mereka dapat memperkuat identitas merek Anda dan membuat situs web Anda lebih mudah diingat.

8. Panduan Halus bagi Pengguna

Animasi gulir dapat menyorot ajakan bertindak (CTA), mengarahkan perhatian ke bagian penting, atau memandu pengguna melalui jalur tertentu di situs Anda. Bantuan navigasi halus ini dapat membantu meningkatkan konversi.

Sekarang mari kita lihat bagaimana Anda bisa melakukannya.

Tambahkan Animasi Gulir di WordPress menggunakan Plugin WordPress

Salah satu cara termudah untuk menambahkan animasi gulir di WordPress adalah dengan menggunakan plugin bernama Scrollsequence .

Meskipun ada plugin WordPress lain yang tersedia selain Scrollsequence, menurut kami plugin ini paling stabil dan kaya fitur.

Oleh karena itu, untuk blog ini, kami memilihnya untuk menunjukkan kepada Anda cara menambahkan animasi gulir di WordPress.

Berikut metode langkah demi langkah untuk Anda ikuti:

Langkah 1: Instal Plugin dan Aktifkan

• Buka Dasbor Admin WordPress Anda:
  Pertama, masuk ke situs WordPress Anda > Cari “Scrollsequence” di Bagian Plugin > instal Versi Gratis > Aktifkan Plugin Setelah Instalasi.

Langkah 2: Akses Menu Urutan Gulir

• Temukan Opsi Urutan Gulir Baru:
  Setelah Anda mengaktifkan plugin, lihat kembali bagian kiri dashboard. Anda akan melihat opsi baru berlabel Scrollsequence .
• Klik Menu Ini:
  Klik Urutan Gulir . Ini akan membawa Anda ke area baru tempat Anda dapat mengatur dan menyesuaikan animasi Anda. Anda juga akan menemukan tutorial bermanfaat yang menjelaskan cara menggunakannya.

Langkah 3: Siapkan Animasi Anda

• Memahami Cara Kerja Scrollsequence:
  Scrollsequence membuat animasi menggunakan serangkaian gambar diam, seperti flipbook, agar terlihat seperti video saat pengguna menggulir halaman ke bawah.
• Ubah Video Anda menjadi Gambar:
  Untuk membuat animasi, pertama-tama Anda memerlukan video pendek (berdurasi sekitar 5-10 detik). Gunakan alat gratis seperti Ezgif untuk mengonversi video ini menjadi bingkai gambar terpisah (format JPEG). Ini berarti Anda akan mendapatkan beberapa gambar dari video Anda, yang akan digunakan Scrollsequence untuk membuat animasi.

Langkah 4: Buat Animasi Gulir Baru

• Mulai Urutan Gulir Baru:
  Di menu Scrollsequence, cari tombol yang bertuliskan Add New Scrollsequence dan klik di atasnya.
• Tambahkan Adegan:
  Klik Tambahkan Adegan . Menu tarik-turun akan muncul, di mana Anda dapat memilih urutan gambar yang ingin Anda gunakan untuk animasi Anda.

• Unggah Gambar Anda:
  Sekarang, unggah gambar yang Anda dapatkan dari video Anda. Ini mungkin memerlukan sedikit waktu, tergantung seberapa cepat internet Anda.

Langkah 5: Sesuaikan Animasi

• Sesuaikan Pengaturan Animasi:
  Setelah semua gambar Anda diunggah, Anda dapat mengubah beberapa pengaturan. Anda dapat memilih kapan animasi dimulai dan diakhiri saat menggulir.
• Pilih Jenis Animasi:
  Putuskan apakah Anda ingin animasi tetap di satu tempat (lengket) atau bergerak saat pengguna menggulir halaman ke bawah (statis).

Langkah 6: Pratinjau dan Simpan

• Periksa Animasi Anda:
  Sebelum menyelesaikan semuanya, klik tombol pratinjau untuk melihat tampilan animasi Anda.
• Publikasikan Animasi Anda:
  Jika Anda menyukai apa yang Anda lihat, klik tombol Publikasikan untuk membuat animasi Anda ditayangkan di situs Anda.

Langkah 7: Gunakan Animasi di Situs Web Anda

• Dapatkan Kode Pendek:
  Setelah dipublikasikan, kembali ke menu Scrollsequence . Anda akan menemukan kode pendek (kode khusus) untuk animasi baru Anda.

• Tempel Kode Pendek:
  Salin kode pendek ini dan tempel ke halaman atau postingan mana pun yang Anda inginkan untuk menampilkan animasi. Anda dapat menambahkan animasi sebanyak yang Anda inginkan di halaman yang sama

Sekarang situs WordPress Anda memiliki animasi gulir yang menyenangkan dan interaktif!

Tambahkan Animasi Gulir di WordPress menggunakan Elementor

Pada metode di atas, kami menggunakan video, bukan gambar, namun pada metode Elementor ini, kami akan mengambil pendekatan yang berbeda.

Gambar akan berpindah dari satu sisi layar ke sisi lainnya saat pengguna menggulir halaman ke bawah. Inilah cara Anda melakukannya menggunakan gambar diam alih-alih video dengan Elementor.

Langkah 1: Buat Halaman Baru

• Mulailah dengan membuat halaman baru di situs WordPress Anda.

Langkah 2: Edit dengan Elementor

• Klik Edit dengan Elementor . Elementor adalah pembuat halaman yang membantu Anda mendesain halaman dengan mudah.

Langkah 3: Sisipkan Gambar

• Setelah berada di editor Elementor, cari opsi untuk menyisipkan gambar ke halaman.
• Tip: Animasi berfungsi paling baik dengan gambar transparan. Anda dapat menggunakan file PNG (yang mendukung transparansi) atau file SVG (yang juga merupakan format vektor).

Langkah 4: Atur Ukuran Gambar

• Sesuaikan ukuran gambar Anda. Pastikan ukurannya cukup besar sehingga orang dapat melihat pergerakannya saat menggulir. Misalnya, Anda bisa mengaturnya ke ukuran Medium , yaitu sekitar 300 x 300 piksel .

Langkah 5: Pilih Gambar

• Klik pada gambar yang baru saja Anda tambahkan untuk memilihnya.

Langkah 6: Akses Pengaturan Lanjutan

• Cari tab Advanced di pengaturan di sisi kiri editor Elementor.

Langkah 7: Aktifkan Efek Gerakan

• Gulir ke bawah untuk menemukan Efek Gerakan .
• Aktifkan Efek Bergulir . Ini akan memungkinkan Anda menambahkan gerakan pada gambar Anda.

Langkah 8: Atur Arah Gulir Horizontal

• Karena Anda ingin gambar Anda berpindah melintasi halaman, cari opsi berlabel Horizontal Scroll .
• Ubah pengaturan Arah ke Ke Kanan . Artinya gambar akan berpindah dari kiri ke kanan saat pengguna menggulir halaman ke bawah.

Langkah 9: Uji Efeknya

• Gulir ke bawah halaman untuk melihat bagaimana gambar Anda bergerak. Ini adalah contoh sederhana, namun ini menunjukkan betapa mudahnya menciptakan efek yang menarik.

Catatan Tambahan

• Anda juga dapat menggunakan plugin Scrollsequence untuk menambahkan animasi gulir serupa di Elementor.
• Jika Anda memiliki Elementor Pro , ini menyertakan fitur bawaan untuk efek pengguliran lengket, tetapi ini mungkin lebih terbatas dibandingkan opsi lainnya.

Tambahkan Animasi Gulir di WordPress menggunakan Divi

Jika Anda bukan pengguna Elementor tetapi menggunakan Divi, Anda masih dapat membuat efek serupa.

Inilah cara Anda melakukannya.

Misalnya, kami sedang mempertimbangkan situs web sepak bola

Langkah 1: Buat Halaman Baru

Hal pertama yang perlu Anda lakukan adalah membuat Halaman Baru dan memilih Divi Page Builder. Ini akan memungkinkan Anda mendesain halaman Anda menggunakan fitur Divi.

Langkah 2: Pilih Tata Letak (Opsional)

• Sekarang untuk membuat segalanya lebih cepat, pilih tata letak Divi yang telah dibuat sebelumnya. Misalnya, pilih tata letak untuk situs pelatihan tenis .

Langkah 4: Tambahkan Gambar Anda

• Untuk membuat efek gulir, Anda memerlukan gambar. Dalam contoh ini, Anda akan menggunakan gambar Skor.
• Pastikan gambar skor memiliki latar belakang transparan (format PNG berfungsi paling baik). Unggah gambar ini ke halaman Anda.

Langkah 5: Akses Pengaturan Gambar

• Klik pada gambar Skor yang baru saja Anda tambahkan untuk membuka pengaturannya.
• Cari tab Advanced di menu pengaturan.

Langkah 6: Aktifkan Efek Gulir

• Di pengaturan Lanjutan, temukan bagian Efek Gulir .
• Anda akan melihat opsi berbeda untuk efek gulir.

Langkah 7: Pilih Efek Anda

• Pilih efek mana pun yang Anda inginkan.
• Aktifkan juga efek Horizontal Motion untuk membuat gambar Score berpindah dari satu sisi layar ke sisi lainnya saat pengguna menggulir ke bawah.

Langkah 8: Uji Gerakan Gulir Anda

• Setelah mengatur efek, gulir ke bawah halaman untuk melihat bagaimana gambar skor bergerak.

Langkah 9: Simpan Perubahan Anda

• Setelah Anda puas dengan tampilannya, pastikan untuk Menyimpan perubahan Anda.
• Lalu, klik Publikasikan untuk membuat halaman Anda aktif dengan efek gulir baru.

Tambahkan Animasi gulir dasar dan halus di WordPress menggunakan tag Anchor dan CSS

Metode ini tidak menawarkan opsi mewah untuk menambahkan animasi gulir di WordPress, namun dapat membantu Anda menambahkan animasi sederhana ke situs WordPress Anda dengan cara termudah.

Untuk ini, Anda perlu menggunakan tag jangkar, yang umumnya digunakan untuk membantu pengunjung melompat ke konten tertentu di halaman yang sama. Namun masalahnya adalah secara default, animasi gulir terlihat kikuk atau tiba-tiba.

Namun kami dapat membuat gerakan ini mulus, memberikan pembaca kesan seperti animasi gulir, bukan lompatan tiba-tiba.

Inilah cara Anda melakukannya.

Langkah 1 : Siapkan tag jangkar : Pertama-tama Anda harus membuat bagian halaman Anda untuk “melompat ke.” Hal ini dilakukan dengan menambahkan kata (anchor tag) di bidang HTML Anchor, yang bertindak sebagai target tautan.

Langkah 2 : Buat tautan : Tautkan tag jangkar ke beberapa teks atau tombol di halaman. Tautan harus ditulis dengan hashtag diikuti dengan teks jangkar (misalnya, #bagian1).

Langkah 3 : Publikasikan halaman : Saat Anda mempublikasikan halaman, mengklik link akan membawa Anda ke tag jangkar, namun mungkin terasa tiba-tiba.

Langkah 4 : Perbaiki dengan pengguliran halus : Untuk membuat pengguliran lancar, Anda menambahkan sepotong kecil kode CSS (perilaku gulir: halus) ke bagian “CSS tambahan” di WordPress.

html{
scroll-behavior: smooth;
}

Kode ini membuat gerakan menggulir menjadi bertahap dan menyenangkan secara visual, seolah-olah dianimasikan.

Setelah Anda memublikasikan halaman itu lagi, mengeklik tautan akan menghasilkan pengguliran animasi yang mulus ke bawah hingga ke jangkar, bukan lompatan tiba-tiba.

Kesimpulan

Sekarang Anda telah mengetahui bahwa menambahkan animasi gulir ke situs WordPress tidak memerlukan keahlian teknis khusus atau bantuan pengembang. Plugin atau pembuat halaman sederhana sudah cukup untuk membantu Anda membuat halaman yang dinamis dan menarik dalam hitungan menit.

Untuk hasil terbaik, Anda juga dapat menggabungkan metode yang disebutkan di atas untuk mencapai hasil yang lebih baik, menarik dan mempertahankan lebih banyak lalu lintas ke situs web Anda.

Jika Anda memiliki pertanyaan atau ingin membagikan pendapat Anda yang berharga, beri tahu kami di bagian komentar di bawah.

Rahul

Rahul Kumar adalah penggemar web, dan ahli strategi konten yang berspesialisasi dalam WordPress & hosting web. Dengan pengalaman bertahun-tahun dan komitmen untuk selalu mengikuti perkembangan tren industri, dia menciptakan strategi online efektif yang mengarahkan lalu lintas, meningkatkan keterlibatan, dan meningkatkan konversi. Perhatian Rahul terhadap detail dan kemampuannya membuat konten yang menarik menjadikannya aset berharga bagi merek mana pun yang ingin meningkatkan kehadiran online-nya.