Apa itu Efek Parallax? Mengapa dan Bagaimana Cara Menggunakannya di Situs WordPress Anda

Apa itu Efek Parallax? Mengapa dan Bagaimana Cara Menggunakannya di Situs WordPress Anda

Efek Parallax adalah fitur desain yang sangat populer yang biasa digunakan di situs web WordPress. Efek khusus ini telah muncul di dunia game selama bertahun-tahun, tetapi baru-baru ini beralih ke desain web. Dan sejauh ini tren utama ini tampaknya tidak terjadi di mana-mana, jika ada yang lebih banyak digunakan daripada sebelumnya. Jadi apa efek paralaks dan mengapa Anda harus mempertimbangkan menggunakannya di situs WordPress Anda?


Pada artikel ini, kami akan mempertimbangkan apa efek paralaks dan manfaat yang dapat diberikannya ke situs dan bisnis Anda. Kami kemudian akan membahas cara menambahkan efek paralaks dengan cepat dan mudah ke situs web WordPress, halaman, atau postingan apa pun, dengan plugin gratis Parallax Scroll.

Apa Efek Parallax?

Dua puluh tujuh belas

Efek paralaks melibatkan halaman web latar belakang bergerak pada tingkat yang lebih lambat dari latar depan. Ini menciptakan ilusi kedalaman ke halaman, memberikan konten efek 3D ketika pemirsa gulir ke bawah.

Mayoritas tema WordPress premium kini hadir dengan efek paralaks bawaan di beranda mereka. Bahkan tema default WordPress gratis Twenty Seventeen hadir dengan fitur paralaks. Sebagian besar pembuat halaman juga memasukkan alat efek paralaks, memungkinkan Anda untuk menambahkan efek ke halaman atau posting di situs web Anda. Dan tentu saja, ada banyak plugin WordPress yang dapat Anda instal untuk menambahkan elemen efek paralaks ke situs web Anda.

Apa Manfaat Menggunakan Efek Parallax?

Ada sejumlah manfaat menggunakan efek paralaks di situs web WordPress Anda. Yang pertama, dan yang paling jelas, adalah aspek visual dari efek paralaks. Efek paralaks adalah secara estetika menyenangkan, memberikan tampilan dan nuansa segar, gaya, dan modern kepada situs web Anda. Ini efek wow dapat membuat konten Anda benar-benar muncul, dan menciptakan pengalaman browser yang menarik dan menarik.

Alasan utama lain untuk menggunakan efek paralaks di situs Anda adalah untuk membantu putus halaman, khususnya beranda, menjadi potongan yang bisa dibaca. Gunakan efek ini untuk menekankan berbagai bagian dan jenis konten yang ingin Anda tampilkan. Ini dapat membantu mempromosikan berbagai aspek situs web Anda, menerangi informasi penting, dan mendorong pengguna untuk menavigasi situs Anda dan mengakses konten dengan cara yang Anda pilih..

Efek paralaks dapat digunakan pada halaman atau posting mana pun dari suatu situs web, tetapi khususnya dapat dilihat pada halaman muka, halaman pendaratan, atau situs satu halaman. Paralaks visual yang memukau menciptakan, dan efek positifnya pada pengalaman pengguna, dapat mengakibatkan pengunjung tinggal lebih lama di situs Anda, dan membantu meningkatkan tingkat konversi situs Anda terhadap tujuannya.

Parallax di Ponsel

Meskipun paralaks sangat bagus untuk menambah daya tarik visual, paralaks tidak selalu berfungsi dengan baik pada perangkat seluler. Karena ponsel dan tablet biasanya menggunakan navigasi gesek (bukan gulir seperti desktop) efek paralaks mungkin tidak ditampilkan dengan benar. Tentu saja, ini akan tergantung pada metode dan animasi yang Anda gunakan untuk bagian paralaks Anda sendiri, namun untuk kegunaan yang baik Anda mungkin ingin mempertimbangkan menonaktifkan paralaks pada perangkat.

Pilih Tema dengan Efek Parallax

Total

Bagi Anda yang memulai proyek baru, Anda harus memilih tema premium yang menyertakan fitur efek paralaks. Dan jika Anda ingin menggunakan efek paralaks pada berbagai halaman situs web Anda, bukan hanya beranda, maka Anda mungkin ingin mempertimbangkan tema multiguna yang dilengkapi dengan pembuat halaman tingkat lanjut. Tema seperti Divi dari Tema Elegan, Parallax oleh Themify, dan Total tema kami sendiri, semua termasuk pembuat halaman yang menyediakan alat efek paralaks.

Tambahkan Parallax Sliders dengan Plugin Slider Revolution WordPress

Parallax Slider Revolution

Jika Anda menginginkan slider berfitur dengan efek paralaks, pilihan utama kami adalah plugin Slider Revolution. Plugin premium ini mencakup ratusan opsi dan fitur bawaan untuk font, layer, efek slider, layout, dan tentu saja paralaks.

Aktifkan Slall Revolution Parallax

Pertama instal plugin, kemudian impor template slider atau mulai membangun slider Anda sendiri dari awal (Anda dapat membaca panduan Slider Revolution lengkap kami untuk lebih jelasnya).

Pengaturan Parallax Slider Revolution

Selanjutnya, edit slide Latar Belakang Utama untuk menambahkan Sumber gambar latar belakang dan pilih Parallax / 3D tab untuk menetapkan level paralaks. Kemudian saat Anda menambahkan lapisan, pilih Parallax / 3D opsi lapisan untuk kedalaman paralaks untuk menambahkan gerakan ke teks, gambar, tombol dan lapisan lainnya. Itu mudah!

Setelah selesai, simpan bilah geser Anda dan gunakan kode pendek untuk memasukkannya ke dalam pos atau laman apa pun. Atau jika Anda menggunakan pembuat halaman seperti Visual Composer, Anda dapat menggunakan elemen Slider Revolution pembangun halaman untuk memilih dan memasukkan slider dengan cepat.

Tambahkan Bagian Parallax dengan Plugin Parallax Scroll WordPress

Gulir Parallax

Jika Anda sudah memiliki tema, dan itu tidak termasuk opsi efek paralaks bawaan, maka Anda harus mempertimbangkan untuk menggunakan plugin WordPress untuk melakukan pekerjaan itu.. Gulir Parallax adalah opsi gratis populer yang akan memungkinkan Anda untuk menambahkan gambar latar belakang paralaks bergulir ke berbagai elemen pada halaman atau posting situs web Anda. Tambahkan latar belakang gulir ke elemen tunggal, teks header, atau bagian lengkap yang mengandung konten apa saja, semua dengan menggunakan kode pendek sederhana.

Jadi sekarang mari kita lihat cara menginstal dan mulai menggunakan Parallax Scroll …

Menginstal Parallax Scroll

Untuk menginstal Parallax Scroll, login ke dashboard WordPress Anda sebagai admin, dan pilih Plugin> Tambah Baru dari menu.

Tambahkan Plugin baru

Cari Gulir Parallax, lalu pilih Instal Sekarang> Aktifkan.

Parallax Scroll Activate

Anda sekarang akan menemukan tab Parallax Scroll telah ditambahkan ke menu WordPress Anda.

Menambahkan Bagian Parallax Scroll

Untuk memulai dengan Parallax Scroll, Anda harus terlebih dahulu membuat bagian paralaks baru. Untuk melakukannya, pilih Gulir Parallax> Tambah Baru dari menu WordPress Anda.

Parallax Scroll Add New

Di sini Anda sekarang dapat membuat bagian paralaks baru Anda …

Tambahkan Parallax Baru

Mengatur Gambar Latar Parallax Bergulir

Pertama, Anda perlu mengatur gambar untuk latar belakang paralaks bergulir Anda. Untuk melakukannya, klik Setel Gambar Unggulan dan tambahkan gambar ke bagian Featured Image.

Gambar Unggulan

Pikirkan baik-baik tentang gambar yang Anda gunakan untuk setiap bagian latar belakang. Pastikan mereka relevan dengan situs Anda dan sinkronkan dengan branding Anda. Jika Anda akan menampilkan tajuk atau konten lebih lanjut di atas gambar latar belakang ini, pertimbangkan untuk menggunakan warna blok atau pola yang halus alih-alih foto atau grafik yang menarik perhatian. Ini dapat membantu memastikan bahwa gambar Anda berfungsi dan mempromosikan konten Anda, alih-alih mengalihkan perhatiannya.

Jika Anda memilih untuk menggunakan foto, gambar harus berkualitas tinggi. Gambar yang indah dan menarik dapat membantu memberikan tampilan unik dan profesional pada situs Anda. Visual ini akan menciptakan kesan kuat pada audiens Anda, yang pada gilirannya akan mendorong orang untuk mengingat dan kembali ke situs Anda. Ada berbagai macam situs web stok tempat Anda dapat mengunduh gambar berkualitas tinggi. Lihat koleksi situs web stok foto gratis dan premium kami di mana Anda akan dengan cepat menemukan foto-foto memukau untuk latar belakang paralaks Anda.

Membuat Teks Header Atas Latar Belakang Parallax

Tambahkan tajuk

Jika Anda ingin membuat teks header dengan latar belakang paralaks, Anda harus memasukkan judul posting selanjutnya. Judul ini kemudian akan muncul sebagai judul header Anda di atas gambar latar belakang paralaks yang Anda pilih.

Anda mungkin tidak ingin header di bagian paralaks Anda. Jika demikian, Anda harus tetap memberikan judul posting kepada setiap paralaks, sehingga setiap bagian yang Anda buat mudah diidentifikasi. Anda kemudian harus memilih untuk menyembunyikan judul di Opsi Gulir Parallax (dibahas lebih lanjut dalam artikel ini), jadi tajuk tidak ditampilkan di sisi depan situs Anda.

Tampilkan Konten Apa pun dengan Latar Belakang Bergulir Parallax

Anda mungkin ingin bagian paralaks menampilkan konten lain di atas gambar latar belakang. Ini dapat mencakup apa pun yang diperlukan untuk situs Anda, dari teks dan gambar hingga kode pendek. Putuskan apa yang ingin Anda tampilkan dan kemudian masukkan konten ini ke dalam kotak pos.

Menyesuaikan Pengaturan Gulir Parallax

Setelah puas dengan kontennya, Anda perlu menyesuaikan pengaturan bagian paralaks agar sesuai dengan halaman Anda.

Opsi Gulir Parallax

Gulir ke bawah ke Opsi Gulir Parallax. Di bawah Gaya, Anda dapat mengubah tinggi paralaks dan ukuran gambar serta memilih Lebar Penuh untuk memaksa tema Anda untuk menampilkan gambar latar belakang di seluruh lebar layar jika belum.

Anda juga dapat mengubah posisi header dan horisontal pada latar belakang paralaks. Dan jika Anda ingin menyembunyikan judul posting, Anda dapat melakukannya di sini dengan mengetik display: tidak ada; di Gaya Tajuk.

Pengaturan Parallax akan memungkinkan Anda menyesuaikan bagaimana perilaku paralaks Anda. Ini termasuk mengubah kecepatan latar belakang paralaks. Cobalah kecepatan yang berbeda untuk melihat apa yang berfungsi untuk situs web dan audiens Anda.

Ada juga a Pengaturan Seluler opsi, yang memungkinkan Anda untuk menonaktifkan gambar latar belakang paralaks dan / atau konten di ponsel, jika Anda merasa bagian paralaks tidak berfungsi dengan baik pada perangkat seluler.

Setelah Anda menyesuaikan pengaturan dan selesai membuat bagian paralaks Anda, klik Terbitkan.

Memasukkan Bagian Parallax ke dalam Posting atau Halaman

Selanjutnya, Anda perlu memasukkan bagian paralaks ke dalam posting atau halaman di situs web Anda. Pilih Parallax Scroll dari menu WordPress Anda.

Parallax Scroll Shortcode

Dalam tabel yang disajikan sekarang Anda akan melihat kode pendek untuk bagian paralaks yang baru saja Anda buat. Salin kode lalu buka halaman atau posting yang sesuai. Rekatkan kode ke konten halaman di posisi yang sesuai.

Masukkan Shortcode

Pratinjau perubahan dan jika Anda senang dengan bagian paralaks baru Anda, klik Terbitkan. Anda sekarang dapat membuat bagian lebih lanjut memberi halaman atau memposting efek paralaks penuh. Dan jika Anda perlu melakukan perubahan, cukup buka kembali halaman bagian paralaks dan buat perubahan yang diperlukan.

Pikiran terakhir

Jika tema Anda tidak memiliki fitur efek paralaks bawaan, atau jika Anda ingin menambahkan efek ke lebih dari sekadar beranda, maka Parallax Scroll akan memungkinkan Anda membuat bagian paralaks dengan cepat untuk ditambahkan ke halaman atau posting Anda..

Seperti yang Anda lihat, menambahkan efek paralaks ke situs web Anda bisa sangat bermanfaat. Tidak hanya dapat sangat meningkatkan visual dari situs web Anda, itu akan membantu menarik audiens Anda, memungkinkan mereka dengan mudah menavigasi situs Anda dan mengakses konten, dan meningkatkan waktu yang mereka habiskan di situs Anda. Pengalaman pengguna yang ditingkatkan ini pada akhirnya akan membantu situs Anda mengkonversi terhadap tujuannya, apakah itu untuk meningkatkan pengunjung yang kembali, mengumpulkan prospek, atau menjual produk atau layanan.

Apakah Anda akan menambahkan efek paralaks ke beranda, laman landas, pos, atau tempat lain? Silakan bagikan pemikiran Anda dalam komentar di bawah ini …

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map