Revolusi Slider: Panduan Utama

Slider Revolution secara harfiah adalah salah satu plugin WordPress paling populer saat ini. Dengan lebih dari 400 ribu penjualan dan peringkat rata-rata 4,75 plugin ini telah membuktikan keefektifan dan kehebatannya.

Revolution Slider: Apa yang membuat plugin begitu hebat

Slider Revolution dikembangkan oleh Themepunch. Plugin ini adalah pembangun untuk membuat konten yang kaya dan dinamis untuk halaman web. Penekanannya adalah pada "dinamis", karena memungkinkan Anda membuat slide yang mendebarkan dengan menambahkan gerakan ke halaman.

Plugin ini dilengkapi dengan pembuat yang mudah digunakan dan banyak pilihan. Paket pengaturan yang berhasil dengan baik memungkinkan pengguna menyesuaikan setiap detail slider dan memungkinkan bekerja dengan jenis konten yang benar-benar berbeda. Slider dapat dibuat untuk posting terpisah, untuk seluruh halaman dan bagian-bagian kecilnya. Untuk lebih tepatnya dengan plugin Anda dapat membuat:

• penggeser gambar dan komidi putar
• slider posting unggulan
• umpan media sosial
• galeri media
• blok pahlawan dan halaman depan

Alasan Anda harus menggunakan Slider Revolution dengan situs web Anda

Anda tidak bisa salah dengan Slider Revolution. Plugin komprehensif dengan alat yang mudah digunakan adalah solusi sempurna untuk membuat slider yang indah, dan inilah alasannya.

Plugin yang Dibundel

Saat ini hampir setiap tema WordPress hadir dengan plugin Slider Revolution. Biasanya, paket tema menyertakan versi gratis dari plugin. Plugin yang dibundel terbatas pada fitur yang sangat mendasar, tetapi tetap saja, sangat nyaman untuk mendapatkan tema bersama dengan pembuat slider.

Namun, jika Anda ingin mengakses banyak fitur plugin, Anda memiliki opsi untuk membeli plugin independen. Lisensi reguler akan dikenakan biaya $29 dan Anda bisa mendapatkannya di pasar Codecanyon.

Untuk lisensi yang diperpanjang, Anda harus membayar sekitar $150, dan mendapatkan dukungan teknis selama satu tahun hanya dengan $9.

Ya, plugin dapat dikenakan biaya, tetapi Anda masih dapat membuat slider yang bagus bahkan dengan lisensi reguler dari plugin.

Template

Plugin yang luar biasa ini tidak hanya akan membuat Anda terkesan dengan alat dan fiturnya, tetapi juga memiliki koleksi tata letak yang sudah jadi. Koleksi indah template pra-dibuat dan perpustakaan objek media gratis yang dapat Anda gunakan pada slide Anda akan menyederhanakan dan mempercepat pembuatan slide. Anda dapat memilih template untuk proyek apa pun milik Anda dan alih-alih membuat bilah geser dari awal, Anda dapat menghemat waktu dan melanjutkan dengan tata letak yang dibuat sebelumnya.

Cukup impor template yang Anda pilih dan mulai buat segera.

Selain itu, Anda akan mendapatkan akses ke perpustakaan gratis besar dari berbagai objek seperti ikon font, gambar latar belakang, objek PNG transparan, SVG, dan lainnya. Anda dapat menggunakannya dan dengan mudah memasukkannya ke dalam slide Anda.

Editor visual

Slider Revolution dilengkapi dengan editor WYSIWYG yang luar biasa yang membuatnya sangat mudah untuk membuat dan memodifikasi template slider. Banyak pemilik situs web merasa sulit untuk menulis kode yang rumit atau menyewa tim terpisah untuk tugas itu. Berkat editor penggeser, Anda dapat menghemat waktu dan menikmati fitur seret dan lepas untuk membuat slide yang luar biasa.

Plugin slider memungkinkan Anda untuk lebih kreatif dengan slider yang Anda buat dan menampilkannya dengan mudah di situs web Anda. Anda akan memiliki banyak opsi khusus seperti membangun lokasi penggeser khusus, memilih penundaan penggeser, menambahkan transisi, menambahkan lapisan media, dan sebagainya. ini dapat dilakukan dalam waktu singkat menggunakan daftar drop-down. Selain itu, plugin ini memiliki banyak fitur navigasi yang memungkinkan Anda untuk mengubah gaya navigasi dan menambahkan panah, peluru, tab, dan gambar mini.

Performa Kecepatan Tinggi

Slider Revolution dikodekan dengan baik untuk memuat dengan cepat. Semua aspek penggeser dioptimalkan, dan menggunakan opsi debug lanjutan untuk mengatasi masalah apa pun, memuat file inti secara otomatis, dan menskalakan dengan fitur yang digunakan. Ini juga menggunakan pemuatan malas yang cerdas dan dioptimalkan untuk SEO.

Tata Letak Responsif

Salah satu masalah terbesar yang dialami banyak pengembang web adalah bilah geser kurang responsif. Akibatnya, penggeser tersebut tidak berfungsi dengan baik pada perangkat kecil atau tidak ditampilkan sama sekali. Ketanggapan adalah komponen penting dari pengalaman pengguna. Dengan banyaknya lalu lintas yang berasal dari ponsel, akan sangat disayangkan jika slider Anda tidak berkinerja baik di perangkat lain.

Slider Revolution bukan hanya penggeser sederhana. Plugin siap responsif, jadi slide apa pun yang Anda buat, Anda dapat yakin bahwa slide itu akan dioptimalkan untuk perangkat apa pun yang akan digunakan.

Slider Revolution telah memastikan untuk mengatur breakpoint responsif untuk setiap slider, membuat desain apa pun tampak hebat di berbagai perangkat dan layar kecil. Opsi apa pun yang Anda pilih — penggeser tunggal, korsel, atau standar, Anda dapat yakin itu terlihat sempurna di perangkat apa pun.

Menyesuaikan Opsi

Keuntungan lain dari plugin Slider Revolution adalah pilihan penyesuaiannya yang beragam. Anda dapat mengatur penundaan slide, memilih panah navigasi, latar belakang paralaks, menambahkan lapisan media, menyisipkan tombol, mengatur font khusus, menambahkan margin, dan banyak lainnya.

Plugin Slider Revolution memungkinkan Anda untuk menyesuaikan apa pun. Untuk menghemat waktu, Anda dapat menyimpan preset untuk digunakan nanti dalam transisi slide, gaya font, dan animasi layer.

Addons Revolusi Slider

Ingin membuat slider Anda lebih kompleks dan beragam dengan efek transisi, animasi?

Anda baik untuk pergi! Slider mendukung berbagai jenis konten, seperti posting blog dan posting saat ini, memungkinkan Anda untuk menggunakan umpan dari platform sosial seperti Twitter, Facebook, Vimeo, YouTube, dan Instagram. Anda dapat menambahkan tautan, video, gambar, dan teks dalam waktu singkat. Dengan bantuan fitur Variasi, Anda dapat membuat slide yang kaya fitur dan bertabur informasi yang dapat digunakan pengunjung.

Keamanan

Keamanan adalah salah satu aspek terpenting dalam hal situs web. Anda mungkin mendengar bahwa ada kerentanan perang yang dipengaruhi oleh Slider Revolution beberapa tahun yang lalu. Sejak saat itu Themepunch telah meningkatkan perlindungan perangkat lunak dan sekarang menggunakan organisasi pihak ketiga untuk mengaudit masalah plugin secara teratur. Jadi Anda dapat yakin bahwa plugin tersebut sangat aman.

Dukungan teknis

Plugin ini dilengkapi dengan dokumentasi terperinci dan bagian FAQ besar dengan pertanyaan paling populer tentang plugin. Itulah mengapa sangat mudah untuk memulai revolusi slider bahkan jika Anda tidak memiliki pengalaman bekerja dengannya. Ketersediaan tutorial terperinci memudahkan pembuatan slide untuk situs web untuk semua orang.

Sumber Konten

Plugin berhasil menangani pembuatan bilah geser untuk berbagai sumber konten. Baik itu produk WooCommerce atau pos umum, Slider Revolution memiliki alatnya.

Fitur-fitur canggih menjadikan plugin ini pilihan nomor 1 untuk semua orang. Keuntungan utamanya adalah menyajikan kategori solusi all-in-one. Anda tidak memerlukan plugin tambahan, semuanya ada di dalam plugin.

Kami juga harus menyebutkan bahwa itu terjangkau. Lisensi reguler akan dikenakan biaya $26. Mempertimbangkan jumlah fitur yang Anda dapatkan untuk harganya, Slider Revolution adalah plugin slider paling terjangkau di industri ini.

Dalam panduan pamungkas ini, kami akan membahas semuanya mulai dari pemasangan plugin hingga menambahkan slide baru dan menempatkannya di situs web.

Pemasangan plugin dan pengaturan utama

Banyak pengembang tema menyertakan Slider Revolution dalam paket tema.

Jika Anda telah membeli salah satu Tema WordPress premium dari StylemixThemes, Anda tidak perlu menginstal plugin secara manual. Slider Revolution akan diinstal secara otomatis dengan impor demo.

Jika paket tema yang Anda gunakan tidak menyertakan plugin, Anda perlu mengunduh dan menginstalnya secara manual. Untuk mendapatkan salinan Slider Revolution, ikuti tautan ini .

Anda harus membeli plugin. Masuk ke akun Envato Anda dan lakukan pembelian. Setelah itu unduh file — pilih opsi unduh untuk “Hanya file WordPress yang dapat diinstal.”

Sekarang Anda perlu menambahkan plugin baru ke situs Anda. Buka dasbor Anda — Plugin > Tambah Baru . Setelah instalasi selesai, aktifkan plugin.

Selamat, Anda sudah siap dan Anda dapat mulai membuat slider pertama Anda!

Cara memperbarui Revolusi Slider

Themepunch merilis pembaruan reguler dari plugin slider. Untuk memperbaruinya, buka Slider Revolution dari dasbor Anda dan ikuti tab Pembaruan. Pada halaman ini Anda dapat menemukan bagian kecil dengan judul “Plugin Updates”. Di sini ditentukan versi plugin apa yang saat ini diinstal di situs web Anda dan versi yang tersedia untuk pembaruan.

Juga, Anda dapat menggunakan cara standar dan pergi ke Dasbor > Pembaruan dan instal versi baru plugin dari sana.

Revolusi Slider: Memulai

Jika Anda menggunakan penggeser untuk pertama kalinya, mungkin tidak cukup jelas dengan semua terminologi yang digunakan di sana. Ada tiga elemen utama yang bisa membuat Anda bingung. Mereka adalah modul, slide dan lapisan. Masing-masing dari mereka dapat menjadi bagian dari yang lain serta bekerja secara individu.

Misalnya, Anda dapat membuat modul yang dirancang untuk bertindak sebagai penggeser dan itu akan berisi slide. Selain itu, Anda dapat membuat modul seperti menu navigasi atau header, yang sama sekali bukan slider, tetapi akan tetap berisi slide. Alasannya adalah Slider Revolution pada awalnya dibuat sebagai pembuat slider, namun sekarang juga digunakan sebagai editor situs web yang lengkap. Jadi dengan bantuannya, Anda dapat membuat lebih dari sekadar slide sederhana.

Hubungan Antara Modul, Slide & Lapisan

Modul adalah wadah untuk Slide yang merupakan wadah untuk Lapisan.

Modul ada untuk memuat slide. Setiap modul harus memiliki setidaknya satu slide. Saat Anda membuat modul kosong, slide kosong ditambahkan secara otomatis. Anda dapat membuat slide tambahan, atau menambahkan semuanya hanya ke satu slide. Ini sepenuhnya tergantung pada jenis konten yang Anda buat.

Slide adalah wadah untuk lapisan. Setiap slide harus memiliki setidaknya satu lapisan. Saat slide baru dibuat, lapisan latar belakang ditambahkan secara otomatis. Lapisan ini selalu ada, dapat diganti namanya dan dibuat tidak terlihat, tetapi tidak dapat dihapus. Area latar belakang ini dapat diisi dengan lapisan.

Lapisan berisi item visual, audio, atau tata letak dan ditambahkan ke slide. Teks, tombol, gambar, audio, video, grup, dan baris adalah semua jenis lapisan. Setiap lapisan mewakili satu bagian media. Lapisan dapat dianimasikan dengan cara yang memberikan ide terbaik Anda.

Cara menggunakan Slider Revolution: Pengaturan global

Seperti yang telah kami sebutkan, Slider Revolution memiliki banyak pilihan, dan ini tidak berlebihan. Itulah sebabnya, sebelum mulai membuat slider, kami sarankan Anda melihat pengaturan global terlebih dahulu dan mempelajari prinsip-prinsip utama bekerja dengan plugin.

Jika Anda mengklik Slider Revolution dari dasbor Anda, Anda akan dapat membuka layar pengaturan plugin.

Layar pengaturan

Di bagian atas layar Anda dapat menemukan tab dengan opsi berikut:

Modul, Pembaruan, Aktivasi, Berita, Global, FAQ, Dukungan.

Pada tahap ini, kami hanya akan bekerja dengan keduanya: Modul — untuk membuat yang baru, dan Global — untuk melihat pengaturan plugin global.

Pengaturan global

Kita akan mulai dengan Global . Pengaturan global terutama dibagi menjadi beberapa bagian:

• Umum
• Breakpoint Grid Tata Letak Default
• font
• Aneka ragam

Pengaturan ini bertanggung jawab atas opsi kisi responsif default yang berlaku saat membuat bilah geser baru, pemuatan font khusus, pembuatan basis data, dan banyak lagi.

Hanya ada beberapa opsi yang perlu Anda fokuskan. Pertama, adalah daya tanggap, untuk memastikan bilah geser masa depan Anda terlihat bagus di perangkat apa pun. Berikut adalah panduan singkat tentang perangkat dan ukurannya.

Di bagian titik putus kisi tata letak default , Anda dapat mengatur lebar dalam piksel untuk berbagai jenis perangkat: desktop, notebook, tablet, dan seluler.

Selama setiap perangkat memiliki ukurannya sendiri, masukkan lebar yang tepat untuk setiap jenis untuk memastikan tampilan slider yang benar.

• Monitor Desktop standar memiliki lebar 1920px.
• Perangkat notebook, yang mencakup semua laptop, MacBook, dan tablet berorientasi horizontal memiliki lebar sekitar 1600 piksel.
• Tablet berorientasi vertikal memiliki lebar tidak di atas 778px (berdasarkan iPad).
• Dan perangkat seluler. Ini adalah bagian penting, karena saat ini lebih dari separuh lalu lintas internet dihasilkan melalui perangkat seluler dan tidak akan memuaskan jika pengguna tidak dapat melihat bilah geser di situs web Anda dengan benar. Namun, ini bisa membingungkan, dan alasannya adalah karena smartphone modern memiliki ukuran yang sangat berbeda. Kami menyarankan Anda menggunakan nomor tersebut, tidak di atas 500px.

Hal kedua yang mungkin ingin Anda kendalikan adalah akses ke penggeser. Opsi Izin memungkinkan Anda untuk menolak akses ke plugin untuk pengguna lain kecuali untuk admin dan editor.

Sekarang Anda dapat mulai membuat slider! Ada tiga opsi yang bisa Anda gunakan. Anda dapat memulai dari awal dan membuat slider baru, Anda dapat mengekspor file dari template Slider Revolution atau mengimpor slider sampel yang disertakan dengan tema Anda.

Dalam artikel kami, kami akan meninjau opsi pertama dan membuat bilah geser baru dari awal. Ini akan memungkinkan kami menjelajahi lebih banyak kemungkinan plugin.

Membuat penggeser baru

Sekarang ketika kita selesai dengan beberapa pengaturan utama, kita dapat melanjutkan untuk membuat slide baru. Buka pengaturan Slider Revolution dan klik pada New Blank Module.

Anda akan ditawari untuk mengikuti panduan cepat. Klik Start Guide jika Anda ingin mengambil pelajaran singkat. Atau keluar dari panduan untuk melewati langkah ini.

Layar Anda akan dibagi menjadi beberapa area: dari kiri ada bingkai tempat semua konten ditampilkan, dari kanan — itu adalah ruang kerja dengan bagian dan pengaturan.

Pilihan umum

Mari kita mulai dengan Opsi Umum . Klik pada ikon Roda Gigi untuk membuka pengaturan. Pertama-tama, kita perlu memberi nama modul kita. Di bagian Judul , masukkan nama dan duplikat untuk Alias ​​​​dalam huruf kecil dan dengan tanda hubung di antara kata-kata alih-alih spasi.

Alias ​​​​diperlukan untuk menambahkan penggeser ke halaman. Anda juga dapat menggunakan kode pendek yang disediakan dengan menyalinnya dan menempatkannya di halaman atau posting yang ingin Anda tampilkan slider Anda.

Setelah itu, kita dapat menyesuaikan jenis dan tinggi dan lebar area layer desktop. Pengaturan ini terletak di bawah tab Tata Letak.

Untuk jenisnya , Anda memiliki tiga opsi untuk dipilih:

• Slider — beberapa slide animasi yang berputar untuk ditampilkan satu per satu.
• Scene — satu slide yang dapat digunakan sebagai modul konten.
• Korsel — banyak slide dengan beberapa terlihat pada waktu yang sama.

Pengaturan selanjutnya yang perlu kita tentukan adalah ukuran. Ada juga tiga opsi yang tersedia:

Otomatis — ini adalah parameter default yang merentangkan penggeser Anda ke lebar wadah utama seperti yang ditentukan oleh tema WordPress Anda.

Lebar penuh — opsi penggeser lebar penuh membentang dari kiri ke kanan (Anda masih perlu menentukan ketinggiannya)

Layar penuh — untuk penggeser besar yang memenuhi seluruh layar, berapa pun ukuran browser atau perangkat Anda.

Dengan plugin Slider Revolution, Anda dapat menganimasikan setiap bagian halaman di situs web. Harap pertimbangkan, ketika melakukannya, bobot halaman Anda akan meningkat dan dengan demikian, akan membutuhkan lebih banyak waktu untuk memuat halaman Anda. Akibatnya, ini dapat memengaruhi peringkat SEO secara negatif.

Ubah ukuran pengaturan

Pengubahan ukuran klasik atau linier memastikan bahwa penggeser Anda akan memampatkan sesuai setelah mengonfigurasi pengaturan ukuran layar utama Anda (misalnya, penggeser 1000x400px akan memampatkan ke penggeser 500x200px dengan font, gambar, dan elemen penggeser lainnya).

Warisan cerdas memungkinkan pembuatan ukuran perangkat otomatis berdasarkan pengaturan desktop yang Anda pilih, dengan opsi untuk menyesuaikan.

Pengaturan kustom atau manual memungkinkan Anda mengatur ukuran slider menggunakan piksel yang tepat, dengan kemampuan untuk mengatur ukuran slider pada lebar layar yang berbeda — desktop, laptop, tablet, dan ponsel.

Responsivitas slide

Bergerak. Kami belum selesai dengan responsivitas. Ada ukuran area Layer di mana Anda dapat menentukan lebar browser.

Biasanya, opsi diatur secara default ke Ukuran Otomatis, dan hanya parameter desktop yang ditentukan. Anda dapat melakukan hal yang sama untuk opsi lain dengan mengaktifkannya.

Juga, jika Anda mengaktifkan perangkat tertentu, area kerja Anda (wadah geser) akan disesuaikan dengan parameter perangkat yang dipilih, yang berarti Anda dapat mengontrol tampilan penggeser untuk perangkat beton.

Untuk setiap perangkat, akan ada ukuran kisi yang ditentukan dari pengaturan global. Grid adalah area di mana lapisan slider Anda berada. Tidak ada nomor ketat yang harus Anda masukkan. Anda akan mengetahui apa yang paling cocok untuk Anda setelah Anda mencoba dan menjelajahi beberapa opsi.  

Ini baru permulaan, beberapa opsi umum yang akan memudahkan pekerjaan Anda selanjutnya dengan penggeser. Dan setelah Anda selesai dengan bagian ini, Anda dapat beralih ke langkah berikutnya.

Melihat lebih dekat pada opsi

Selain opsi Umum, ada tiga tab lain yang akan sering Anda gunakan untuk berinteraksi. Kami ingin memandu Anda melalui pengaturan utama yang akan Anda gunakan. Pada dasarnya, pembuatan slide mempertimbangkan beberapa komponen yang terlibat dalam proses. Ini adalah opsi umum, pengaturan navigasi, opsi slide, dan lapisan.

Kami tidak bercanda ketika mengatakan bahwa Slider Revolution memiliki banyak pilihan. Ada terlalu banyak elemen untuk dibahas, mari kita uraikan sedikit semuanya dan kemudian tinjau secara lebih rinci elemen yang paling penting.

1. Opsi umum

Kami telah menyentuh beberapa elemen dari Opsi Umum seperti Judul dan Tata Letak. Namun, selain itu, ada hal lain yang perlu Anda sesuaikan.

Secara keseluruhan, opsi Umum memungkinkan Anda mengatur hal berikut:

Judul — untuk memberikan nama penggeser.
Tata letak — pilih jenis penggeser (penggeser, pemandangan, atau korsel) dan ukuran (otomatis, lebar penuh, atau layar penuh). Ini membantu mengedit lebar dan tinggi untuk area lapisan, posisi modul Anda, warna latar belakang atau gambar default, dan banyak lagi.
Konten — mengidentifikasi cara menambahkan konten ke penggeser. Anda dapat memilih dari 9 sumber konten.

• Default — di sini kami menyarankan untuk berkonsentrasi pada satu parameter penting — Durasi Slide (berapa lama setiap slide akan bertahan).
• Umum — bagian ini mencakup pengaturan tayangan slide untuk putar otomatis, berhenti saat mengarahkan kursor, mengulang slide, dan memilih slide pertama yang ditentukan. Di sini Anda juga dapat menyembunyikan atau menonaktifkan penggeser di ponsel atau di bawah lebar piksel yang ditentukan.
• Pada Gulir — yang satu ini memungkinkan pengguna untuk memilih efek gulir seperti paralaks, kedalaman 3D, garis waktu, fade, blur, skala abu-abu dan banyak lagi. Semua efek berjalan dengan pengaturan yang dapat disesuaikan.
• Spinner — atau preloader, dan plugin memiliki 15 opsi spinner untuk dipilih.
• Opsi lanjutan memungkinkan Anda mengaktifkan pemuatan lambat, memilih gambar mundur, atau menyederhanakan penggeser di browser lama.
• CSS/jQuery — di sini Anda dapat menambahkan kode kustom Anda sendiri ke slider. Perhatikan bahwa yang ini lebih baik digunakan oleh para profesional atau pengguna yang akrab dengan konsep pemrograman dan pengkodean.
• As Modal — opsi khusus ini diperlukan jika Anda ingin membuat slider yang muncul sebagai popup atau lightbox dan ini memberi Anda opsi untuk posisi slider, warna sampul, dan kode pendek untuk digunakan saat memasukkan slider modal Anda di halaman.
• Skin — skin menyajikan prasetel yang dapat Anda buat dan tetapkan ke lapisan teks (menentukan warna sorotan, judul, teks konten).

Addons — di sini Anda akan menemukan addons (catatan – addons hanya tersedia jika Anda membeli lisensi slider Anda sendiri).

2. Opsi Navigasi

Jika Anda berencana untuk menyertakan lebih dari satu slide, opsi navigasi akan membantu Anda menambahkan alat navigasi ke penggeser seperti poin, panah, dan tombol.

Semua opsi mencakup pengaturan yang mudah disesuaikan untuk posisi/penyelarasan, ukuran, visibilitas, dan gaya/preset global.

Elemen Navigasi meliputi:

• Kemajuan — bilah kemajuan atau lingkaran yang memvisualisasikan kemajuan slide saat ini.
• Panah — memudahkan pengunjung untuk mengeklik slide Anda.
• Poin — 14 gaya titik navigasi untuk ditambahkan ke slide Anda.
• Tab — sangat berguna untuk penggeser konten yang memerlukan navigasi tab.
• Jempol — diperlukan untuk menampilkan gambar kecil sebagai opsi navigasi. Ada 5 pilihan yang tersedia.
• Ukuran Sebelumnya — menentukan ukuran gambar pratinjau.
• Sentuh — termasuk opsi untuk blok gulir, kecepatan, dan arah.
• Keyboard — Anda dapat mengaktifkan navigasi keyboard (disarankan untuk aksesibilitas).
• Mouse — mengaktifkan kontrol mouse seperti fungsi carousel atau scroll terbalik.
• Nav Editor — bagian ini untuk menyesuaikan panah, poin, tab, atau jempol dengan kode kustom Anda sendiri.

3. Opsi Geser

Bagian pengaturan selanjutnya terkait dengan opsi slide.

• Latar Belakang: Pilih latar belakang untuk slide Anda. Pilih dari transparan, berwarna (Anda dapat menambahkan gradien), gambar, gambar eksternal, atau video (YouTube, Video, atau HTML5).
• Thumbnail: Tentukan thumbnail yang terlihat oleh admin dan thumbnail yang digunakan untuk navigasi.
• Animasi: Pilih animasi transisi untuk slide Anda.
• Filter — 22 filter berbeda untuk ditambahkan ke slide Anda.
• Kemajuan — memungkinkan penyesuaian panjang slide, jeda, dan visibilitas pada slide.
• Terbitkan Aturan — mengontrol apakah slide Anda diterbitkan atau tidak.
• Tag & Tautan — membantu menambahkan kelas khusus, ID, dan data HTML untuk slide Anda serta tautan.
• Parameter — tambahkan hingga 10 parameter khusus untuk digunakan dalam slide dan navigasi Anda.
• Loop Layers — kelola pengaturan loop jika slider Anda hanya memiliki satu slide.
• Pada Gulir — sesuaikan paralaks dan efek gulir Anda per slide.

Menambahkan slide baru

Setelah Anda selesai mengatur slider dan menyesuaikan semua opsi, sekarang saatnya untuk menambahkan slide baru ke proyek. Anda dapat melihat bingkai, yang menampilkan konten slide saat Anda menambahkannya. Sekarang sudah transparan. Anda dapat mengubah opsi latar belakang dan menambahkan gambar atau mengatur warnanya.

Anda dapat mengunggah gambar dari komputer Anda, atau menggunakan sumber eksternal (dengan menambahkan tautan). Juga, Anda dapat mengatur warna sebagai latar belakang, bukan gambar. Hal ini dapat dilakukan dengan cukup mudah.

Cukup pilih opsi Berwarna dari tarik-turun Jenis di panel Sumber, lalu klik tombol Warna BG untuk memilih warna Anda. Jika Anda ingin menggunakan video cukup tambahkan sumbernya.

Menambahkan layer baru ke slide

Di bagian atas layar, Anda akan menemukan opsi +Tambahkan Lapisan . Gunakan untuk menambahkan layer baru ke slide. Ada 8 pilihan yang berbeda.

Namun, opsi yang paling populer adalah gambar dan teks dengan dukungan tombol jika Anda perlu menambahkan beberapa alat navigasi ke penggeser.

Opsi lapisan: cara menggunakan

Fleksibilitas Slider Revolution didasarkan pada ketersediaan beberapa opsi dan kemampuan untuk mengatur setiap detail secara terpisah serta menyesuaikan seluruh proyek slider. Lapisan tidak terkecuali. Setiap kali Anda menambahkan lapisan baru ke slide, Anda dapat mengontrol setiap opsi untuk itu. Dalam contoh menambahkan gambar baru ke slide, kami akan meninjau semua parameter yang memungkinkan Anda untuk mengubah opsi lapisan.

Saat Anda ingin menambahkan layer gambar ke slide Anda, cukup klik Image di dropdown Add Layer . Kemudian unggah gambar yang diinginkan.

Di sebelah bingkai, Anda akan menemukan berbagai Opsi Lapisan (Konten, Gaya, Ukuran & Pos, dll.).

Konten Lapisan menampilkan beberapa informasi dasar tentang lapisan. Anda dapat mengatur pemuatan lambat dan mengubah jenis sumbernya.

Menggunakan opsi Layer Style Anda akan dapat menambahkan latar belakang warna.

Pilihan selanjutnya adalah Spasi . Spasi membantu kita memindahkan layer dari atas ke bawah, dari kiri ke kanan, dari bawah ke atas, dan dari kiri ke kanan. Mereka ditandai dengan huruf 'M'.

Pos dan Ukuran. Atur align serta posisi dan ukuran layer gambar. Perataan vertikal dan horizontal dapat diubah dengan mudah, cukup klik salah satu ikon perataan.

Setelah itu, Anda dapat mengatur posisi dengan Vertical Offset dari opsi Aligned Position. Mainkan dengan parameter X dan Y untuk memindahkan layer Anda pada slide.

Opsi Lanjutan Lapisan

Opsi Gaya Lanjutan memungkinkan Anda untuk Memutar lapisan secara horizontal, vertikal, dan terpusat dan memungkinkan Anda menambahkan bayangan ke lapisan.

Opsi Animasi Lapisan

Animasi adalah pilihan utama dalam Slider Revolution. Ide utama plugin ini adalah untuk menambahkan elemen animasi situs Anda alih-alih visual standar yang statis.

Opsi animasi menambahkan gerakan ke slide Anda, dengan menggunakan tindakan ini Anda dapat menganimasikan slide dan mengatur tampilan dan keluar dari animasi.

Ada dua baris untuk opsi tampil dan keluar: IN dan OUT.

Setiap baris dilengkapi dengan menu dropdown dengan berbagai jenis animasi. Secara default, opsi fade-in diatur untuk semua lapisan. Cobalah beberapa animasi untuk melihat tampilannya di slide Anda dan pilih yang terbaik.

Bagian di bawah ini digunakan untuk Animation Duration, Animation Easing, dan untuk mendefinisikan animasi Start . Durasi menentukan berapa lama waktu yang dibutuhkan untuk animasi selesai, opsi Mulai menentukan durasi waktu setelah animasi akan dimulai setelah slide dimuat. Easing menentukan kecepatan kemajuan animasi.

Garis Waktu Animasi

Jika Anda memiliki beberapa lapisan yang ditambahkan ke slide Anda, Anda mungkin tidak ingin semuanya muncul secara bersamaan. Garis Waktu Animasi Slider Revolution dapat membantu Anda menangani masalah ini. Itu terletak tepat di bawah kerangka kerja kami.

Awal bingkai default untuk setiap lapisan diatur ke 0 milidetik, artinya lapisan akan muncul di layar setelah 0 milidetik dimuat. Durasi kemunculan biasanya diatur ke 3 detik yang berarti bahwa lapisan menjadi terlihat sepenuhnya dalam 3 detik. Untuk mengubah opsi, pilih layer dan edit dengan menentukan nilai yang berbeda.  

Pastikan Anda menetapkan nilai yang berbeda untuk lapisan yang berbeda, sehingga tidak muncul sekaligus dan terlihat berantakan.

Sekarang, mari kita lihat lebih dekat opsi Timeline

1. Tampilan Daftar

Ikon-ikon ini dapat digunakan untuk menyembunyikan atau menampilkan Lapisan dan menyembunyikan atau menampilkan Baris berdasarkan perataan vertikal. Hanya admin situs web yang memiliki akses ke opsi ini.

2. Durasi Garis Waktu
Total durasi Timeline ditentukan dalam Module General Options > Defaults. Juga, itu dapat diatur secara individual di Opsi Slide > Kemajuan.

Dengan menyeret blok di Timeline kiri dan kanan Anda dapat dengan mudah menyesuaikan panjang slide. Pilihan lain yang dapat Anda lakukan adalah mengklik ikon jam dan mengeditnya dalam persentase.

3. Garis Waktu Pratinjau

Untuk Pratinjau garis waktu, Anda perlu mengklik ikon Putar atau cukup seret blok yang tidak digunakan.

4. Ganti Nama Layer

Untuk mengganti nama layer, klik dua kali teks layer di Timeline dan ganti namanya. Juga, Anda dapat mengedit judul layer di bagian tengah atas Editor.

5. Lapisan z-index / Susunan Urutan

Untuk mengatur z-index/suscking order, Anda hanya perlu menyeret layer di timeline.

6. Animasi

Untuk setiap lapisan, ada animasi masuk dan keluar dan animasi Keyframe tambahan. Semua animasi disajikan dalam timeline.

Seret blok animasi untuk menyesuaikan titik awal animasi di Timeline. Dan edit durasi animasi dengan menyeret titik akhir blok

Opsi Lingkaran Lapisan

Tab Loop memungkinkan Anda membuat animasi looping. Anda dapat memilih jenis animasi, menentukan kecepatan loop dan easing, dan mengatur waktu mulai dan berakhir untuk loop.

Ada 8 jenis yang bisa Anda pilih: Custom, Pendulum Loops, Effect Loops, Wave, Wiggles, Rotating, Slide and Hover, dan Pulse. Setiap animasi loop memiliki serangkaian opsinya sendiri.

Pendulum membuat lapisan Anda berayun dari sisi ke sisi. Di antara opsi yang dapat Anda atur adalah tingkat akhir dan awal — ini mengidentifikasi derajat antara mana animasi akan terjadi, dan titik asal X dan Y — parameter ini menentukan titik sumbu dari mana lapisan akan berputar, Anda dapat menentukannya di persentase.

Effect Loops memungkinkan Anda memilih dari beberapa opsi — Grayscale, Blink, Flattern, dan Lithing. Semua efek terlihat berbeda, jadi kami sarankan Anda melihat setiap opsi untuk memilih mana yang terbaik untuk Anda.

Animasi Gelombang membuat lapisan Anda berputar dalam gerakan yang mirip dengan gelombang. Itu berputar di sekitar sumbu di luar lapisan. Anda dapat mengatur Rotasi X dan Y Point untuk menentukan posisi sumbu di sekitar mana lapisan akan berputar, Sudut Mulai untuk mengidentifikasi posisi awal animasi dan Radius untuk orbit rotasi.

Loop Wiggle akan membuat layer Anda bergoyang dari sisi ke sisi – dari atas ke bawah, dari kiri ke kanan, dan sebaliknya. Gunakan dropdown untuk memilih opsi yang Anda suka.

Rotating loop membuat layer Anda berputar di sekitar titik sumbu yang disetel. Lapisan akan berputar dan membuat lingkaran penuh jika Anda memilih item pertama dari dropdown Rotating – item Rotate.

Untuk membuat layer Anda bergerak ke kiri ke kanan, kanan ke kiri, atas ke bawah, secara diagonal, Anda dapat menggunakan animasi Slide and Hover. Anda dapat mengatur posisi awal dan akhir untuk animasi.

Animasi Pulse membuat layer Anda terus memperbesar dan memperkecil. Tentukan Zoom Start dan Zoom End. Nilai default di sini adalah 1 untuk awal dan akhir. Ini berarti bahwa lapisan akan tetap pada 100% dari ukurannya. Dengan kata lain, itu tidak akan bernyawa. Jika Anda memasukkan 0,5 untuk Zoom Start, layer Anda akan mulai dari 50% ukurannya dan memperbesar hingga 100% ukurannya, lalu kembali ke 50%, dst.

Opsi Arahkan Lapisan

Efek hover adalah inti dari UX yang baik. Efek hover biasanya menunjukkan bahwa tindakan diperlukan atau dilakukan, terutama karena metode ini digunakan secara aktif dengan bilah geser. Dengan Revolusi Slider, Anda dapat membuat lapisan, teks, dan gambar berubah saat melayang.

Menambahkan Efek Arahkan ke dalam Revolusi Slider

Pertama, Anda perlu mengaktifkan layer hover. Pilih layer yang ingin Anda tambahkan efeknya, dan, klik pada Hover di bawah Layer Options. Klik Diaktifkan untuk menyalakannya.

Di bagian bawah, Anda akan menemukan semua opsi yang Anda butuhkan untuk mengatur perilaku lapisan Anda saat melayang. Jika Anda membiarkan semua apa adanya, lapisan tidak akan menunjukkan perubahan apa pun.

Arahkan ke Pengaturan

Hal pertama yang dapat Anda atur di sini adalah Kursor. Di menu tarik-turun, Anda dapat menemukan opsi berbeda untuk Kursor. Otomatis dan Default melakukan fungsi yang sama dan tidak akan mencerminkan perbedaan apa pun. Crosshair dan Pointer menentukan bentuk kursor mouse Anda di layar.

Bahkan ada lebih banyak gaya kursor di sini. Beberapa dari mereka sangat tidak biasa, namun, kebanyakan dari mereka menunjukkan tindakan yang dimiliki lapisan saat dipicu. Misalnya, jika Anda menautkan lapisan ke pusat Dukungan, Anda dapat memilih kursor Bantuan.

Acara Penunjuk secara default diatur ke Otomatis. Tidak ada opsi yang digunakan ketika tidak ada konten yang ditautkan. Bagian ini memungkinkan Anda untuk memilih tampilan kursor pada layer hover, mengaktifkan animasi, dan mengaturnya.

Animasi Arahkan

Selanjutnya, ada Animasi Arahkan yang dapat Anda atur tergantung pada preferensi Anda. Ada beberapa hal yang harus Anda ketahui. Pertama, itu tidak terlihat bagus ketika lapisan berubah saat melayang dan transisi terjadi pada suatu saat. Selalu lebih baik ketika transisi terjadi dengan penundaan. . Secara default, penundaan diatur ke 300ms, biarkan seperti itu jika itu cocok untuk Anda, atau ubah nilainya.

Anda juga dapat mengatur easing untuk transisi. Anda memiliki beberapa opsi untuk dipilih.

Saring

Untuk lapisan Anda, Anda dapat menambahkan Filter. Dengan kata lain, Anda dapat mengaburkan kecapi sampai batas tertentu. Opsi dinyatakan dalam piksel. Semakin tinggi nilainya, semakin "tebal" blur.

Gaya

Ada juga bagian Style di mana Anda dapat mengatur warna latar belakang dan menyesuaikan batas, yaitu mengubah warnanya dan memilih gaya batas.

Pada Opsi Lapisan Gulir

Opsi On Scroll memungkinkan slide untuk bergerak pada scroll mouse. There are three options – Parallax , Timeline Scroll Based , and Filter Effect Scroll Based .

Layer Action Options

Actions make your layers interactive. For example, you can make a layer open a link when a user clicks on it.

Click on the Action icon to choose the type of action you need. The first dropdown is where you can choose the type of action that you would like to occur . There are a lot of options here: Link Actions, Slide Actions, Layer Actions, Media Actions, and Fullscreen Actions. Your chance is full depends on you and your goals, whether you want the layer to open the link or to switch the slide.

After you made a choice of what action to add, you need to set this particular option. For example, we are going to add a link. Select the option of Simple Link, and on the new screen, you will be offered to enter some parameters such as the URL itself, selecting the interaction and action type, and more.

Layer Visibility Options

If you want your layer to be visible on all devices , then make sure the switches shown in the image below are all turned ON under the Visibility section . The first one is for desktop, the second one is for laptops and horizontally oriented tablets, the third one is for vertically oriented tablets, and the last one is for mobile phones.

If you don't want your slider to be shown on some devices, simply turn off this option.

Text layer

After we review most of the options that we need for the layer setup, let's move to the other type of layer and try to add some text to our slide.

There are two options to choose from Quick Style heading or content. The main difference between them is pre-styled options.

Let's just point out some primary options you need to set for the text layer. They are the following:

• In the Content section, we add our text, and aligned it.
• In Style changed the font and its size, weight, line-height
• Customized the Size & Pos to change the location of the layer within the slider
• In Animation, we add some effects and speed for our text.

When adding a text layer there will appear a black box. You need to enter your text there. Everything you change will be visible in your work-frame.

Moving on to the Style tab. By default the font style that is applied to the text is Roboto. Choose the font family you prefer from the dropdown. Make sure that you selected the text layer before you start editing it.

Besides choosing a font family, you can also determine the font-size, line-height, font-weight, and letter spacing here as well. All these options adjust the look and feel of the text. So take your time to set it up and play around with these options to find the best combination.

Next, choose the color for your text. You can use the color picker and find the color that suits your page and slide perfectly. After that, you can save the change and see how the slider looks on your page.

If everything is good, you can move to the next step which defines the horizontal and vertical alignment of the text layer. For instance, you would like to have your text layer start 300px from the left edge of the screen, and 100px from the top. According to this, the horizontal alignment will be set to left, and vertical alignment to top. Fill in the X and Y fields respectively and save the changes to check how the text looks.

For customizing options you can use the same options we went through during the image layer setup. You can add animations, define visibility, create actions, etc.

You can also input HTML code into your text layer field. Thanks to this option, you can insert different shortcodes and create your own HTML elements using text layers.

Cara membuat efek paralaks dengan revolusi slider

Parallax adalah salah satu efek paling populer yang membuat situs web lebih mengesankan dan dinamis. Anda mungkin telah melihat banyak situs web dan tema yang terintegrasi dengan efek khusus itu. Dan sekarang kami akan menunjukkan bagaimana Anda dapat membuatnya sendiri menggunakan plugin Slider Revolution.

Apa itu Paralaks?

Efek paralaks dapat didefinisikan sebagai efek di mana elemen di latar belakang dan elemen di latar depan, bergerak dengan kecepatan berbeda dan menciptakan ilusi kedalaman. Biasanya, elemen latar belakang bergerak lebih lambat

Ada berbagai cara bagaimana Anda dapat mencapai efek ini di situs web Anda. Beruntung bagi kami, Slider Revolution memiliki semua fungsi untuk membantu Anda mencapai efek paralaks.

Membuat Paralaks dalam Revolusi Slider

Pertama -tama nyalakan paralaks . Buka Opsi Umum Modul > Pada Gulir > Fitur Berbasis Gulir > Paralaks dan alihkan sakelar Diaktifkan Paralaks ke Aktif .

Ada banyak variasi nilai kedalaman yang ditawarkan plugin. Pilih salah satu yang terbaik untuk Anda. Anda juga dapat memasukkan nilai Anda sendiri.

Menambahkan Paralaks ke Gambar Latar Belakang

Untuk menambahkan efek paralaks ke gambar latar belakang Anda, buka Slide Options > On Scroll > Parallax & 3D Settings , dan pilih kedalaman yang diinginkan dari dropdown.

Ada aturan ketat saat memilih kedalaman. Lebih baik jika Anda mencoba nilai yang berbeda dan melihat mana yang bekerja lebih baik dengan slider Anda. Kedalaman yang berbeda secara langsung mempengaruhi dan menciptakan efek yang berbeda. Itu sebabnya kami sarankan Anda mencobanya untuk melihat hasilnya.

Menambahkan Paralaks ke Lapisan

Dalam Revolusi Slider, efek paralaks dapat ditambahkan tidak hanya ke gambar latar belakang tetapi juga ke lapisan individu. Apa yang hebat dari efek ini adalah memberi pengguna ilusi jika mereka mengontrol bagian-bagian penggeser pada halaman hanya dengan menggerakkan mouse mereka. Ini terlihat sangat bagus di situs web dan terlebih lagi, sangat mudah diatur.

Pilih layer Anda, buka tab Layer Options > On Scroll > Parallax & 3D , dan pilih level kedalaman yang diinginkan.

Hasilnya, Anda akan mendapatkan lapisan dengan paralaks yang aktif pada gerakan mouse.

Apakah itu gambar latar belakang atau lapisan individu, menambahkan efek paralaks Slider Revolution sangat mudah. Meskipun, tidak setiap slider membutuhkan paralaks. Gunakan sebagian besar untuk slider sederhana, karena yang dinamis dengan banyak animasi mungkin akan bekerja lebih baik tanpa efek ini.

Menambahkan Layer Tombol

Dengan Slider Revolution, Anda dapat membuat dan mendesain tombol untuk ditambahkan ke slider Anda untuk navigasi. Untuk melakukannya, pertama, kita perlu menambahkan lapisan tombol ke kerangka kerja penggeser.

Ketika Anda menambahkan tombol itu akan muncul dalam bentuk teks, Anda hanya perlu menyesuaikannya. Di sisi kanan layar, Anda dapat menemukan banyak opsi untuk tombol yang telah dirancang sebelumnya. Anda dapat memilih salah satunya untuk tombol Anda.

Selain itu, Anda dapat menggunakan sesuatu yang orisinal karena ada variasi tombol putar, pengalih, dan lainnya. Juga, dimungkinkan untuk menambahkan efek bayangan dan membuat tombol terlihat lebih menarik.

Setelah Anda memilih gaya, Anda dapat mengubah pengaturan lanjutan dan menyesuaikan tampilannya. Semua pengaturan dapat ditemukan di bawah tab Layer Options.

Anda dapat mengubah tampilan awal tombol, mengubah teks, mengubah tampilannya saat melayang, dan mengatur animasi.

Cara membuat Slider Responsif

Pada awalnya, kami telah menyiapkan beberapa parameter untuk membuat slide kami responsif. Itu tidak cukup. Untuk itu, Anda juga perlu memastikan bahwa setiap lapisan di setiap slide Anda beradaptasi dengan mulus ke semua perangkat dan ukuran layar.

Jadi, setelah Anda menambahkan semua slide dan lapisan ke penggeser, saatnya untuk menyempurnakannya untuk semua perangkat lain yang tersedia.

Saat mengedit slide dalam kerangka kerja, Anda terutama mengaturnya agar terlihat bagus di perangkat desktop. Ketika Anda yakin semuanya terlihat sempurna di desktop, Anda dapat mulai bermain-main dengan tata letak untuk perangkat lain.

Sekarang Anda dapat memilih perangkat yang ingin Anda tiru dari dropdown. Nyalakan perangkat yang ingin Anda periksa tampilan penggesernya. Perangkat yang tersedia adalah: Desktop, Notebook, Tablet, Mobile.

Anda dapat memodifikasi semuanya untuk setiap perangkat. Misalnya, untuk lapisan teks, Anda dapat mengatur ukuran font, tinggi garis, berat font, dan warna yang berbeda, semuanya bergantung pada perangkat tempat penggeser Anda ditampilkan. Untuk layer gambar, untuk mengubah ukurannya, Anda perlu menambahkan lebar yang berbeda dan tinggi gambar akan disesuaikan secara otomatis sesuai dengan lebarnya.

Perhatikan batas kotak biru. Ini menentukan tepi perangkat yang sedang Anda gunakan. Jadi, jika salah satu lapisan Anda memanjang di luar batas, pastikan untuk mengubah pengaturan untuk lapisan tersebut.

Terakhir, simpan penggeser Anda, dan lihat tampilannya secara langsung.

Menambahkan Slider ke halaman

Anda telah melakukan pekerjaan dengan baik dan sekarang saatnya untuk melihat bagaimana tampilan slider Anda di halaman. Untuk melakukannya gunakan shortcode Slider Revolution yang Anda buat sebelumnya. Kode pendek ini dapat ditemukan di bawah tab Judul di bagian Opsi Umum.

Atau jika Anda membuka Slider Revolution dari dasbor Anda. Temukan modul saat ini dan pilih opsi Sematkan.

Di jendela pop-up pilih opsi Untuk halaman dan Posting dan salin kode pendek.

Kode pendek akan terlihat seperti [rev_slider alias="title"][/rev_slider] dengan "title" berdasarkan alias yang Anda berikan pada slider.

Menampilkan Slider dengan Elementor

Menggunakan metode kode pendek untuk menampilkan penggeser pada halaman cukup sederhana. Namun, ada cara yang bisa lebih mudah. Semua slider yang Anda buat dengan plugin Slider Revolution dapat dimasukkan ke halaman menggunakan widget Elementor. Pilih halaman tempat Anda ingin menampilkan penggeser dan buka melalui editor Elementor. Kemudian cukup seret dan lepas elemen ke kerangka kerja. Pada panel widget, cari widget Slider Revolution 6 dan tambahkan ke halaman. Saat Anda menyeret widget, Anda harus memilih bilah geser yang ingin Anda gunakan.

Gunakan cara ini sebagai alternatif kode pendek, karena beberapa pemilik situs web merasa lebih mudah bekerja dengan widget pembuat halaman.

Cara Mengekspor Slider

Untuk mengekspor slider, buka Slider Revolution dengan mengklik tab yang relevan dari menu dasbor Anda. Semua bilah geser yang telah Anda impor atau buat akan ditampilkan di sana.

Arahkan mouse ke gambar mini modul yang ingin Anda ekspor. Klik tanda panah kecil di pojok kanan bawah. Di antara semua opsi yang muncul, pilih Ekspor dan klik di atasnya.

Anda akan melihat dialog konfirmasi yang akan memberi tahu Anda bahwa ekspor mungkin memerlukan waktu. Klik 'Ya, Ekspor Slider' dan unduhan akan dimulai. Saat pengunduhan selesai, Anda akan memiliki file .ZIP dari penggeser Anda.

Untuk menyimpulkan

Hampir semua tema yang dikembangkan oleh StylemixThemes menyertakan plugin Slider Revolution dalam paketnya. Kami menyukai perangkat lunak canggih ini yang memberi kami kesempatan untuk membuat situs web lebih menarik, atraktif, dan interaktif.

Kami harap panduan kami membantu untuk lebih memahami proses pembuatan slider dengan plugin yang luar biasa ini. Jika Anda mencari informasi lebih lanjut, silakan ikuti halaman utama Slider Revolution.