Cara Melibatkan Pengunjung Situs Web Baru Dengan Tayangan Slide Web – Itulah berapa banyak waktu yang Anda miliki untuk menarik perhatian rata-rata pengguna internet di situs web Anda.
Cara Melibatkan Pengunjung Situs Web Baru Dengan Tayangan Slide Web
mypicpals.com – Anda dapat mengubah konten dan tata letak halaman Anda sebanyak mungkin, tetapi tidak ada jalan lain: Melibatkan pengunjung situs web, terutama pemula, merupakan tantangan nyata bagi bisnis online.
Akses ratusan Tema & Template Situs Web di HubSpot
Namun, tantangan ini sangat bisa dipecahkan berkat banyaknya teknologi desain web yang kami miliki. Di antara semua metode untuk menarik perhatian dengan cepat dan mendorong tindakan, Anda mungkin pernah melihat teknik tayangan slide web . Dan ada kemungkinan bagus itu bisa bekerja di situs Anda juga. Sekarang, ketika Anda mendengar istilah slideshow , pikiran Anda mungkin langsung melompat ke presentasi PowerPoint , dan dari sana, ruang konferensi dan membosankan .
Baca Juga : Software Presentasi Terbaik Untuk Mahasiswa 2023
Jika iya, coba lupakan sejenak tentang PowerPoint. Ternyata, tayangan slide web adalah salah satu metode paling populer dan efektif untuk menyampaikan konten visual kepada pengunjung. Dalam panduan ini, kita akan belajar tentang penggunaan umum tayangan slide web, praktik terbaik untuk menerapkannya, dan cara memulai dengan menempatkannya di situs web Anda.
Tayangan slide situs web, juga dikenal sebagai “penggeser”, adalah fitur halaman web untuk menampilkan banyak gambar dengan cara seperti galeri. Penggeser menampilkan satu gambar pada satu waktu, dan berputar di antara gambar secara otomatis setelah waktu tunggu dan/atau setelah input pengguna, seperti gesekan atau klik tombol.
Secara khusus, bisnis online cenderung menggunakan penggeser di beranda mereka untuk mengomunikasikan misi mereka atau menampilkan CTA untuk produk baru.
Gaya presentasi ini membantu pengalaman menjelajah dalam dua cara utama. Pertama, ini menarik pemirsa dengan menempatkan konten penting di paro atas, tidak perlu menggulir. Konten ini bisa berupa produk atau penawaran baru, pengumuman atau posting blog, atau hal lain yang harus diketahui pengunjung.
Kedua, tayangan slide web dapat menambahkan bakat visual ke halaman Anda. Misalnya, bersepeda melalui gambar yang besar dan bersemangat menciptakan pengalaman yang tak terlupakan dan bahkan dapat membangkitkan emosi positif tertentu pada pembaca yang kemudian diasosiasikan dengan merek Anda. Ini sangat efektif untuk portofolio artis, perusahaan media, dan organisasi lain dengan penekanan kuat pada estetika.
Kapan Menggunakan Slideshow Web
Anda akan menemukan penggeser di seluruh web, tetapi ada beberapa kasus khususnya saat penggeser bekerja dengan sangat baik. Mari kita lakukan ikhtisar singkat tentang penggunaan terbaiknya:
Produk/Penawaran Baru
Tempatkan penggeser di beranda Anda dan isi dengan CTA yang menampilkan hal terbaru yang ditawarkan bisnis Anda, seperti contoh Microsoft di atas. Baru mengenal CTA? Lihat contoh favorit kami .
Informasi Umum
Banyak organisasi menggunakan penggeser untuk mengomunikasikan misi, strategi, atau cerita mereka. Anda akan sering melihat ini di situs untuk agen konsultasi, organisasi nirlaba dan pendidikan, dan proyek khusus tanpa produk fisik untuk ditampilkan.
Pameran Produk
Daripada menelusuri banyak produk, Anda mungkin berfokus pada satu produk atau lini produk. Dengan pendekatan ini, setiap slide dapat menjelaskan aspek, manfaat, atau iterasi yang berbeda dari produk Anda.
Alih-alih menyajikan semuanya sekaligus, penggeser memecah informasi menjadi bagian-bagian konten yang dapat dicerna. Misalnya, lihat desain ramping dari Nike ini, menampilkan 15 tahun lini sepatu kets Dunk.
Portofolio
Perusahaan media, organisasi kreatif, dan pekerja lepas sering menggunakan penggeser untuk menyorot karya terbaru atau terbaik mereka. Anda mungkin menampilkan banyak gambar dari satu proyek, atau beberapa proyek dengan tautan ke halaman khusus mereka di situs Anda.
Artikel Pilihan
Situs berita dan blog dengan pembaruan rutin dapat menambahkan CTA untuk konten terbaru atau terpopuler mereka dalam tayangan slide. Hindari CTA teks biasa di sini — alih-alih, gunakan gambar unggulan untuk setiap kiriman untuk mengarahkan mata pengguna ke konten baru Anda.
Sekarang kita telah melihat apa yang bisa dilakukan oleh slider, selanjutnya mari kita bahas bagaimana menerapkannya. Dan ya, ada cara yang salah untuk membuat slider.
Praktik Terbaik Rangkai Slide Web
- Aktifkan transisi otomatis dan manual.
- Tunjukkan jumlah slide secara visual.
- Optimalkan kinerja halaman.
- Perhatikan efek transisi.
- Jadikan mobile-friendly.
- Buat itu dapat diakses.
Dari sudut pandang kegunaan, slider adalah pedang bermata dua. Karena popularitasnya, tayangan slide sudah tidak asing lagi bagi sebagian besar orang yang membuka halaman Anda, dan mereka seharusnya tidak memiliki masalah untuk memahami tujuan dari fitur tersebut.
Namun, ini juga berarti bahwa penggeser yang dirancang dengan buruk akan membuat pengguna keluar dengan sangat cepat, terutama jika itu adalah hal pertama yang mereka lihat. Untuk alasan ini, penting untuk merencanakan elemen tayangan slide Anda dengan hati-hati dan mengikuti enam praktik terbaik ini:
1. Aktifkan transisi otomatis dan manual.
Seperti yang saya sebutkan, tayangan slide web dapat memutar kontennya secara otomatis berdasarkan waktu, atau secara manual saat pengguna mengklik tombol panah atau menggesek layar.
Kami merekomendasikan penggeser Anda memungkinkan untuk kedua metode. Saat memuat halaman, penggeser bertransisi secara otomatis, memberikan cukup waktu bagi pengguna untuk mengambil setiap gambar. Jika pengguna ingin mengubah slide sendiri, mereka juga dapat melakukannya, yang mungkin menonaktifkan transisi waktunya. Pendekatan ini memberi pengguna kontrol yang lebih baik atas konten yang ingin mereka lihat. Juga, ini adalah cara sebagian besar penggeser web diterapkan, sehingga intuitif bagi pengunjung.
Untuk membantu pengguna, tempatkan tombol panah Anda di kedua sisi elemen (sisi kiri dan kanan, atau atas dan bawah). Tombol-tombol ini dapat terlihat di dalam elemen secara default, atau muncul saat pengguna mengarahkan kursor ke tayangan slide. Pilihan gaya itu terserah Anda.
2. Tunjukkan jumlah slide secara visual.
Merupakan ide bagus untuk memberi sinyal berapa banyak total slide yang ada di slider Anda, sehingga pengguna tahu berapa banyak konten yang tersisa untuk dilihat. Anda dapat melakukan ini dengan thumbnail yang muncul di hover-over, angka (mis., 1/5, 2/5…), atau isyarat visual halus lainnya seperti pada contoh Microsoft di atas.
3. Optimalkan kinerja halaman.
Jika halaman Anda memuat lebih dari beberapa detik, pengunjung akan mulai kehilangan minat. Banyak yang bahkan tidak akan melihat penggeser penuh yang telah Anda kerjakan dengan sangat keras.
Pertama, pikirkan tentang jumlah gambar dalam tayangan slide Anda. Semakin banyak slide, semakin lama waktu buka, jadi sertakan hanya slide yang Anda butuhkan. Simpan sisa konten Anda untuk nanti di halaman. Kemudian, optimalkan gambar penggeser Anda dengan mengurangi ukuran file untuk setiap gambar sebanyak mungkin.
Terakhir, banyak pembuat tayangan slide akan menerapkan pemuatan malas . Hanya slide saat ini yang akan dimuat terlebih dahulu, dan slide tersembunyi tidak akan dimuat hingga diminta untuk ditampilkan. Fitur ini menyebarkan kebutuhan pemuatan sebanyak mungkin, jadi carilah dalam pencarian Anda untuk pembuat slider.
4. Perhatikan efek transisi.
Transisi adalah salah satu detail kecil dari penggeser yang sudah sangat biasa bagi orang-orang, dan apa pun di luar norma bisa jadi tidak menyenangkan.
Anda mungkin tergoda untuk mendukung transisi slide Anda dengan efek larut atau sapuan bintang. Saya mengagumi selera Anda, tetapi cobalah untuk menahan keinginan itu dan pertahankan transisi Anda tetap sederhana. Anda sebaiknya menggunakan efek fade sederhana atau pan horizontal/vertikal. Panggilan ini terserah Anda, tetapi semakin tidak mengganggu dan mengganggu transisi Anda, semakin baik.
5. Jadikan mobile-friendly.
Slider adalah elemen yang sangat dinamis dan berat gambar. Jika modul Anda tidak dirancang untuk bekerja pada layar yang lebih kecil, mungkin akan terlihat seperti gambar yang sangat dinamis dan berantakan.
Karena mereka menghasilkan hampir setengah dari lalu lintas Anda , bantulah pengunjung seluler Anda dan terapkan prinsip desain web responsif ke penggeser Anda (pembuat dan plugin penggeser terkemuka dapat melakukan ini). Atau, pertimbangkan untuk menghapus semua penggeser dari situs seluler Anda untuk mengurangi kekacauan.
6. Buat agar dapat diakses.
Terakhir, semua penggeser Anda harus dapat diakses sebanyak yang Anda bisa. Ini berarti daya tanggap seluler, teks alternatif gambar untuk setiap slide (dan alternatif tekstual untuk tayangan slide itu sendiri jika memungkinkan), mengaktifkan transisi slide manual, dan memicu transisi ini dengan tombol panah selain klik tombol.
Cara Membuat Slideshow untuk Halaman Web
Ingin mencoba slider? Anda punya beberapa pilihan. Mari tinjau apa yang tersedia, mulai dari implementasi yang paling tidak teknis hingga yang paling teknis.
Gunakan pembuat tayangan slide.
Untuk solusi ringan, gunakan perangkat lunak pembuatan tayangan slide web khusus. Dengan alat ini, cukup pilih konten penggeser Anda, sesuaikan pengaturan, dan sematkan elemen penggeser ke halaman Anda. Mulailah dengan alat gratis seperti Bannersnack atau Cincopa dan lihat bagaimana Anda menyukainya, lalu pertimbangkan untuk meningkatkan ke opsi berbayar.
Pembangun situs web populer juga mengaktifkan fungsionalitas penggeser, baik secara asli atau melalui pengaya pihak ketiga. Pastikan alat ini dapat membuat tayangan slide Anda responsif dan dapat diakses oleh pengguna.
Gunakan tema/plugin slider WordPress.
Jika situs web Anda dibangun di CMS WordPress, banyak tema dilengkapi dengan modul penggeser bawaan. Ada juga banyak plugin slider gratis dan premium yang akan menambah fungsionalitas tayangan slide ke situs Anda, di pos atau halaman mana pun. Untuk toko WooCommerce Anda, pertimbangkan plugin penggeser WooCommerce untuk tampilan produk.
Kami menyarankan untuk menambahkan penggeser dengan plugin di atas tema, karena mengubah tema Anda tidak akan menghapus tayangan slide Anda. Konon, tema premium dengan penggeser cukup nyaman dalam hal ini.
Program slider secara manual.
Jika Anda berani, coba koding sendiri plugin penggeser gambar. Agar berfungsi dengan baik, penggeser memerlukan HTML, CSS, dan JavaScript , tiga bahasa besar dalam pengembangan frontend.
Baik W3Schools dan freeCodeCamp menawarkan tutorial untuk membuat penggeser gambar Anda. Atau ikuti panduan kami untuk membuat korsel gambar di Bootstrap CSS . Program penggeser, lalu atur CSS untuk mengatur gaya modul baru Anda agar sesuai dengan bagian lain situs web Anda.
Bonus: Buat Tayangan Slide Video
Sebagai alternatif dari penggeser gambar interaktif yang diprogram secara manual, Anda dapat memilih tayangan slide video yang menampilkan informasi yang sama.
Jika Anda kekurangan waktu atau sumber daya, kami sangat merekomendasikan Pembuat Slideshow gratis dari Canva . Alat ini dirancang agar cepat, intuitif, dan mudah digunakan oleh siapa saja, termasuk mereka yang tidak memiliki potongan desain.
Dengan Canva, Anda dapat dengan mudah membuat tayangan slide dari template bertema untuk ceruk yang berbeda, seperti penjelajah, makanan, dan mode. Isi rangkai slide Anda dengan gambar dan video dari pustaka Anda sendiri dan dari pustaka media stok Canva. Kemudian, sesuaikan tampilan slide Anda dengan ikon, ilustrasi, animasi, dan musik. Terakhir, unduh tayangan slide Anda secara gratis (dan tidak, tidak ada tanda air).