Panduan Lengkap Cara Menggunakan Slider Revolution Lengkap dengan Gambar

Panduan Lengkap Cara Menggunakan Slider Revolution Lengkap dengan Gambar

Slider Revolution adalah slider premium yang biasa digunakan sebagai plugin WordPress, plugin jQuery dan plugin Joomla. Plugin ini mendapatkan popularitas yang luar biasa di komunitas WordPress karena menyediakan beragam fitur keren dan kemudahan dalam penggunaannya.

Dalam postingan ini kami akan membahas fitur utama dari Plugin WordPress Revolution Slider, dan kami akan buktikan betapa mudahnya membuat slider dari awal hingga menjadi slider profesional dan keren.

Ada banyak fitur yang dapat dibangun di Revolution Slider untuk membuat slider dengan mudah. Berikut adalah beberapa yang kami rekomendasikan:

Responsive Layout

Plugin Revolution Slider menyediakan beberapa pilihan layout slider untuk mempermudah Anda. Anda bisa memilih jenis slider yang Anda inginkan: slider standar, hero scene (single slide) atau slider carousel. Kemudian pilih layout: otomatis, lebar penuh atau layar penuh.

Opsi layout otomatis memungkinkan Anda mengatur ukuran slider menggunakan resolusi yang tepat, dengan opsi tambahan untuk mengatur ukuran slider pada berbagai perangkat (desktop, laptop, tablet, dan telepon).

Opsi layout yang paling kami sering digunakan adalah opsi layar penuh. Dengan opsi ini Anda dapat membuat slider yang benar-benar menyesuaikan ukuran layar Anda, tidak peduli ukuran browser atau perangkat Anda (Anda bahkan dapat menggunakan opsi ini untuk menambahkan slider layar penuh dengan video). Biasa juga disebut sebagai slider responsive.

Multiple Content Sources

Ingin membuat slider untuk pos artikel Anda? Atau untuk produk WooCommerce Anda? Bisa kok, Anda bisa memilih dari 11 sumber konten berbeda saat membuat slider. Slider Revolution mendukung konten berdasarkan posting blog, posting tertentu, posting / halaman saat ini (Anda juga bisa menambahkan slider untuk posting blog atau item portofolio), Flickr, Instagram, WooCommerce, Twitter, Facebook , YouTube, Vimeo, atau slider default (unggah gambar / video Anda sendiri).

Pilihan Mudah

Slider Revolution memudahkan Anda untuk membuat slider kustom dengan menambahkan berbagaimacam opsi. Pilih slide delay, arrow navigasi, font kustom, tambahkan background paralax, lokasi slider (mengatur margin),  layer media, menambah tombol,  animasi transisi slide dan banyak lagi.

Anda dapat menyesuaikan sesuai dengan kebutuhan Anda, Anda juga dapat menyimpan setiingan Anda sendiri untuk menggunakan kembali style font, transisi slide dan animasi layer yang Anda sukai.

Dukungan Media

Tambahkan teks, tautan, gambar, dan video hanya dengan beberapa klik. Hal ini akan memberikan Anda kemampuan untuk membuat slide yang dapat diidentifikasi oleh pembaca dan klien Anda. Selain itu, setiap jenis media ini dapat ditambahkan dengan animasi, waktu, dan style unik yang telah Anda tetapkan dengan menggunakan Slider Revolution.

Anda bisa mendapatkan potongan harga hosting hingga 40% + 10% di Niagahoster dengan menggunakan kode promo Niagahoster a-GETDISC10 berlaku untuk segala jenis hosting.

Pemasangan Slider Revolution

Pertama Anda harus memiliki Plugin WordPress Revolution Slider. Ada beberapa metode berbeda untuk menginstal plugin sesuai dengan kondisi Anda, apakah Anda membeli plugin  sendiri atau apakah itu sudah paket dari tema premium Anda.

1. Instalasi Slider Revolution

 

Jika Anda membeli salinan Slider Revolution Anda sendiri dari log CodeCanyon ke akun Envato Anda dan masuk ke halaman unduhan Anda (Anda bisa mendapatkan halaman ini dengan melayang di nama pengguna Anda). Kemudian cari salinan Slider Revolution Anda dan pilih opsi unduhan untuk “Installable WordPress file only.”

Selanjutnya, masuk ke situs WordPress Anda dan arahkan ke Plugins> Tambah Baru dan klik tombol "Upload Plugin" di kiri atas layar Anda.

Dari sini, gunakan tombol "Pilih File" untuk memilih file plugin yang baru saja Anda unduh dari CodeCanyon, dan klik tombol "Pasang Sekarang". Setelah itu aktifkan plugin dan Anda siap untuk mulai membangun slider!

Catatan: Anda juga dapat menginstal plugin Anda melalui FTP dengan masuk ke server Anda menggunakan ftp dan mengupload plugin yang sudah diekstrak (unzip) ke folder server Anda yang terletak di wp-content / plugins.

2. Instalasi Slider Revolution dari Premium Theme

Banyak tema premium yang sudah menyertakan plugin berbayar untuk menarik pelanggannya. Jika anda ingin memasang plugin Slider Revolution yang disediakan dari tema, Anda tidak perlu khawatir karena sebagian besar pengembang telah mempermudah proses instalasi bahkan untuk orang awam sekalipun dapat melakukannya.

Misalnya, jika Anda menggunakan tema Total WordPress, Anda dapat melihat notifikasi untuk melakukan instalasi Slider Revolution (dan plugin lain yang disertakan dengan tema). Cukup klik tautan untuk mulai menginstal dan kemudian aktifkan plugin.

"Total Theme" juga menyediakan opsi demo import untuk menginstal sesuai dengan desain sample yang telah dibuat oleh pengembang. Jika Slider Revolution digunakan untuk membuat demo yang Anda impor, Anda akan diminta untuk menginstal plugin seperti yang terlihat di atas.

Kemudian pastikan pilihan untuk "Impor Sliders" telah dicentang, dan template secara otomatis akan mengimpor setiap slider dari demo. Mudah Bukan?

Tutorial Menggunakan Slider Revolution

Setelah menginstal plugin, Anda harus membuka halaman slider revolution dengan melakukan klik pada Menu Slider Revolution yang terdapat di pilihan navigasi sebelah kiri untuk dibawa ke halaman manajemen slider Slider Revolution.

Dari sini Anda dapat membuat atau mengedit slider, mengaktifkan lisensi Anda jika Anda membeli salinan plugin Anda sendiri (jika slider disertakan dengan tema Anda, Anda dapat mengabaikan bagian ini) dan melihat apakah salinan plugin Anda sudah diperbarui.

Pengaturan Global Revolution Slider

Sebelum memulai membuat, kami sarankan untuk mengunjungi opsi Pengaturan Global (yang merupakan submenu di bawah Slider Revolution).

Ada banyak opsi di sini untuk menetapkan grid responsif default (default), URL pemuatan teks kustom, membuat data dasar untuk plugin dan banyak hal lagi. Namun ada dua opsi yang kami rekomendasikan untuk Anda.

Opsi pertama yang harus Anda ketahui adalah opsi lihat Izin Plugin yang dapat Anda gunakan untuk mengatur akses plugin. Ini adalah cara mudah untuk mengetahui Anda, perancang web Anda atau admin lain adalah satu-satunya orang yang membuat slider di situs Anda (sangat membantu jika Anda memiliki penulis tamu di blog Anda).

Opsi kedua yang mungkin ingin Anda lakukan adalah opsi nonaktifkan adalah opsi untuk menonaktifkan Pemberitahuan. Jika Anda menggunakan Slider Revolution yang disertakan dengan tema premium, Anda mungkin akan melihat pemberitahuan "upgrade". Anda bisa menggunakan opsi ini untuk menyembunyikan pemberitahuan jika Anda merasa ini sangat mengganggu. Kemudian simpan perubahan Anda.

Sekarang Anda dapat mulai membangun slider! Anda memiliki tiga opsi - mulai dari awal, ambil file ekspor gratis dari "contoh penggunaan" Slider Revolution atau impor contoh slider yang disertakan dari tema Anda.

Import a Sample Slider

Jika Anda memilih untuk mengimpor slider dari contoh demo Revolution Slider, download dulu file slider dari situs mereka, lalu arahkan kembali ke WordPress Anda, klik pada opsi Impor Slider. Dari sini, telusuri file yang Anda download tadi dan klik Unggah. Tunggu hingga proses selesai, setelah menambahkan demo slider dan semua pengaturannya maka Anda dapat menggunakannya sebagai dasar untuk slider baru.

Buat Slider Baru

Jika Anda membuat penggeser dari awal, klik pada opsi Penggeser Baru. Sekarang mulai dari atas

Pilih sumber konten: pilih bagaimana Anda ingin menambahkan konten ke slider Anda. Ada 11 sumber konten untuk dipilih, tetapi untuk sebagian besar Anda akan ingin memilih opsi default.

Tambahkan judul slider & shortcode: Pilih nama untuk slider Anda yang akan membantu Anda mengingat apa yang ada di dalamnya atau halaman apa yang Anda gunakan. Ini juga tempat Anda akan menemukan kode pendek yang mudah untuk slider Anda untuk memasukkannya ke dalam posting dan halaman.

Pilih jenis slider: Pilih jenis slider, dan pilih preset untuk memuat preset yang termasuk dalam plugin.

Pilih layout slide: Pilih layout dan ukuran slider Anda (dalam piksel). Anda dapat mengatur ukuran khusus berdasarkan ukuran layar, meskipun layar penuh akan mengisi seluruh layar browser Anda. Terlepas dari opsi mana yang Anda pilih, Anda harus menambahkan lebar & tinggi slider yang akan menentukan ukuran penampung layout Anda.

Selanjutnya kembali ke bagian atas layar Anda untuk mulai mengedit slider Anda.

Pengaturan Slider

Di sebelah kanan Anda akan melihat banyak opsi slider. Berikut adalah penjelasannya:

Pengaturan Umum: Atur pilihan pertunjukan slide, atur durasi slide default Anda (lamanya waktu slide ditampilkan untuk), edit transisi / animasi dan latar belakang default, aktifkan bilah kemajuan (dan edit posisi dan gaya), edit pengaturan slide pertama, aktifkan slide berikutnya fokus dan nonaktifkan blur.

Tata Letak & Visual: Edit bayangan, overlay, latar belakang slider utama, aktifkan pemintal loader, nonaktifkan slider Anda di ponsel (atau di bawah lebar tertentu) dan pilih posisi slider di halaman.

Navigasi: Sesuaikan pilihan dan pengaturan untuk panah sider, bullet, tab dan thumbnail. Juga aktifkan navigasi sentuh, gesek, navigasi keyboard, dan gulir mouse.

Parallax & 3D: Aktifkan parallax dan / atau dukungan 3D plus sunting sensitivitas mouse dan level kedalaman paralaks.

Performa dan SEO: Aktifkan pemuatan yang malas dan monitor kinerja slider.

Penanganan Masalah: Aktifkan fallback dan pecahkan masalah kesalahan bilah geser apa pun.

Google Fonts: Muat khusus keluarga Google Fonts khusus untuk slider Anda (tambahkan font mana yang Anda inginkan atau perlu menambahkan layer teks yang cocok dengan sisa situs web Anda ke slide Anda).

Impor / Ekspor / Ganti: Impor template khusus, ekspor slider Anda saat ini untuk digunakan kembali di situs web lain dan gunakan opsi untuk mengganti url di slider Anda.

Fungsi API: Mengedit metode dan acara api (sebaiknya Anda mengabaikan tab ini kecuali Anda pengembang lanjutan).

Setelah selesai membuat pilihan, klik tombol hijau di bagian atas layar untuk menyimpan perubahan Anda. Setelah itu klik pada gambar pensil biru untuk mulai mengedit slide!

Add or Edit Slides

Sekarang Anda bisa mulai menambahkan slide Anda. Ada dua atau tiga opsi slide bergantung pada apakah Anda memulai dari awal atau menggunakan panel geser contoh: Lapisan Statis / Global, slide yang sudah dibuat, dan Tambahkan Slide.

Lapisan Statis / Global akan dilihat sebagai hamparan di atas semua salindia yang Anda buat. Ini adalah cara yang bagus untuk menambahkan logo atau tanda air, sertakan tombol "Beli Sekarang" untuk produk Anda atau bahkan tautan untuk berlangganan nawala Anda.

Pilih slide yang keluar untuk melakukan perubahan pada slide yang sebelumnya Anda buat atau impor sebagai bagian dari panel geser sampel. Ini adalah salah satu cara termudah untuk memulai dengan Slider Revolution jika Anda baru menggunakan plugin ini, karena slider contoh mereka menunjukkan cara menggunakan berbagai fitur plugin dengan baik untuk membuat slider yang mengesankan. Klik Tambah Slide untuk mulai membuat slide dari awal.

Pertama, gunakan opsi Background Utama untuk memilih latar belakang slide Anda: gambar, URL eksternal, transparan (catatan - jika Anda mengatur latar belakang slider utama dalam pengaturan slider umum maka akan terlihat), warna solid atau video. 

Kemudian gunakan opsi untuk pengaturan sumber media, filter, tingkat paralaks (%), dan Ken Burns (efek animasi panning dan zooming) jika Anda ingin menyesuaikan slide Anda lebih lanjut.

Selanjutnya pindah ke Pengaturan Umum. Ini adalah tempat Anda dapat menyetel slide jika Anda tidak ingin slider Anda beranimasi segera setelah memuat, mengedit opsi perulangan slide atau menambahkan tanggal kedaluwarsa (lebih baik jika Anda membuat penggeser untuk tema liburan atau promosi). Fitur keren lain yang ada pada tab ini adalah kemampuan untuk mengatur Status Slide Anda untuk tidak dipublikasikan, dengan cara ini Anda dapat mengedit 
slide dan melihat pratinjau di bagian belakang situs web Anda tanpa slide baru yang dapat dilihat oleh pengunjung situs web Anda.

Jika Anda menggunakan navigasi thumbnail untuk slider Anda, tab Thumbnail menawarkan opsi untuk memilih gambar dan dimensi slide kustom. Tetapi jika Anda memilih untuk tidak menggunakan style navigasi ini, Anda dapat melewati tab ini.

Setelah selesai, Anda dapat beralih ke tab Slide Animation untuk menyesuaikan animasi transisi slider Anda. Ada lebih dari 80+ animasi untuk memilih dari opsi plus untuk rotasi, durasi dan pelonggaran.

Revolution Slider juga menawarkan opsi untuk pengaturan Tautan & SEO, Info Slide (parameter dan deskripsi khusus) dan Penghapusan Navigasi untuk menambahkan panah navigasi khusus, bullet atau thumbnail khusus untuk slide Anda.

Sekarang adalah waktu yang tepat untuk mengklik tombol hijau di bagian atas layar untuk menyimpan pengaturan Anda sebelum menambahkan layer dan style ke slide Anda.

Tambahkan Slide Layers

Saat menambahkan atau mengedit slide, Slider Revolution dikemas dengan berbagai pilihan menarik. Anda dapat memilih dari 8 opsi Tambahkan Layer yang berbeda:

• Teks / layer HTML digunakan untuk menambahkan judul, deskripsi, atau bahkan tautan. Tambahkan apa pun yang ingin Anda katakan pada slide Anda.
• Gambar sangat bagus untuk memasukkan logo Anda, menambahkan kedalaman pada slide parallax, menyisipkan sebelum / setelah set, dan banyak lagi.
• Layer Audio & Video cukup lurus ke depan. Pilih media yang ingin Anda sisipkan dan pilih file dari pustaka media Anda atau masukkan tautan (YouTube, SoundCloud, dll.). Kemudian tambahkan pengaturan untuk mengaktifkan perulangan, putar otomatis, slide berikutnya pada akhir, volume dasar, segmen awal / akhir dan preloading. Ini adalah cara mudah untuk menambahkan testimonial nyata ke slider Anda, video intro atau tutorial.
• Layer Button Option mencakup 21 ukuran dan radius perbatasan kombo yang dapat Anda edit warna, latar belakang, warna batas, ikon, font, hover state dan teks. Selain itu ada sejumlah pra-set yang membantu untuk tautan sosial ikon gulir mouse animasi, menu hamburger atau bahkan play / pause.
• Shapes dapat digunakan untuk menambahkan efek (seperti pulsing atau memancarkan warna di belakang tombol), untuk menentukan bagian dari lapisan teks (gunakan bentuk untuk menyorot hanya satu kata atau frasa) atau untuk menambah minat visual. Pilih latar belakang Anda, warna batas / ukuran, bentuk batas radius (0 untuk persegi, 100 untuk lingkaran), ukuran bentuk dalam piksel dan padding.
• Layer object dapat digunakan untuk memasukkan png, jpg, svg, atau ikon dari pustaka sumber daya gratis di ThemePunch.
• Impor untuk menyalin lapisan atau geser dari bilah geser lain di pustaka Anda. Cepat dan sederhana!

Klik tombol "Tambahkan Layer" untuk memulai, lalu gunakan opsi untuk benar-benar menyesuaikan atau memberi lapisan.

Layer Options

Jika Anda melihat ke atas pada bagian pratinjau slider utama Anda akan melihat bilah putih dengan banyak pilihan yang dapat Anda gunakan untuk mengedit dan menyesuaikan layer Anda saat Anda menambahkannya.

Gunakan opsi Style untuk mengedit font, warna, dan lokasi lapisan Anda. Ini mencakup semua hal mulai dari font Google khusus, ukuran font, tinggi garis, warna teks, latar belakang lapisan, padding / margin, perspektif, hover, toggle, dan lainnya.

Tab Animasi sama seperti yang Anda harapkan - itu memegang opsi untuk menambahkan dan menyesuaikan animasi entri dan keluar untuk lapisan Anda. Pilih template animasi preset, tambahkan pelonggaran dan edit durasi animasi.

Loop Setting sangat sederhana: Anda bisa membiarkan settingannya dinonaktifkan sehingga layer Anda cukup memuat dengan animasi yang sudah Anda pilih, atau mengaktifkan perulangan dengan memilih jenis. Pilih dari bandul, rotate, sideloop, pulse dan wave untuk memberi layer Anda animasi yang konstan dan berputar.

Mobile Setting ditemukan di bawah Visibilitas. Dari sini Anda dapat menentukan apakah lapisan harus terlihat pada perangkat tertentu, tersembunyi di bawah lebar yang ditetapkan atau hanya muncul di hover.

Behavior mencakup beberapa matikan membantu untuk menyesuaikan pengaturan lapisan Anda. Yang pertama adalah pengaturan untuk mengaktifkan respon otomatis dan respons elemen anak. Secara default, lapisan slide akan menyusut ketika jendela browser menyusut, nonaktifkan pengaturan ini untuk mempertahankan ukuran lapisan. Anda juga dapat mengedit perataan layer Anda dan offset responsif dari sini.

Gunakan tab Actions untuk menambahkan pengaturan lapisan kustom pada klik, masukkan mouse atau cuti mouse. Tindakan termasuk menggulir, beralih, pemutaran media, jeda, masuk ke layar penuh, tidak bersuara, dan lainnya.

Untuk pengguna tingkat lanjut atau pengembang, bagian Atribut dapat digunakan untuk menambahkan ID, kelas, dan pembungkus Anda sendiri untuk ditargetkan dengan kode khusus.

Dan terakhir, Paralaks / 3D menawarkan slider dengan desain 3D. Jika Anda melakukan scrool kebawah, gambar dengan efek parallax akan bergerak dengan efek 3D. Semakin tinggi persentasenya, semakin banyak layer Anda akan bergerak.

Layer Frame Times

Di bawah pratinjau slider Anda, Anda akan melihat waktu tayangan frame. Dari sini, Anda dapat mengedit penundaan ketika layer Anda akan beranimasi pada slide Anda. Anda juga dapat melihat waktu visual yang menunjukkan waktu layer dibandingkan dengan panjang waktu keseluruhan slide. Bagian yang diblok adalah waktu animasi layer Anda berjalan, dan bilah berwarna yang lebih terang adalah lama waktu layer Anda akan tayang.

Untuk mengedit durasi keseluruhan slide, cukup klik dan seret tag biru di kanan atas tabel.
Setelah menambahkan beberapa lapisan, Anda juga dapat menggunakan bagian ini untuk mengatur ulang layer Anda dengan mengedit nomor posisi, waktu masuk, atau dengan menyeret dan menaruh layer ke dalam urutan. Anda juga dapat menggunakan bagian ini untuk memutar slide dan melihat waktu saat melakukan pengeditan.

Simpan Slide Anda

Langkah paling penting adalah menyimpan slide Anda! Pastikan Anda Menyimpan atau Memperbarui slide Anda setelah melakukan perubahan apa pun. 

Jika Anda keluar dari slide pada saat melakukan perubahan (meskipun itu ke slide lain), Anda mungkin kehilangan semua perubahan yang telah Anda buat sebelum di save. Jadi pastikan untuk menyimpannya ya!

Setelah menyimpan, Anda dapat melanjutkan dan bekerja pada slide atau slider lain.

Menggunakan Slider Anda

Untuk menambahkan slider revolution yang telah Anda buat ke pos atau halaman apa pun, gunakan shortcode Slider Revolution yang Anda buat sebelumnya. 

Kode pendek ini dapat ditemukan dengan mengklik pada item menu Slider Revolution di dashboard Anda. Kode pendek akan terlihat seperti [alias rev_slider] berdasarkan alias yang Anda berikan slider saat pertama kali membuatnya. 

Cukup tempelkan kode pendek ke posting atau konten halaman Anda. Atau jika tema Anda mendukung slider tambahan, Anda dapat menambahkan shortcode di sana. Beberapa tema WordPress bahkan menyertakan modul khusus untuk slider.

Sebagai contoh, Tema WordPress "Total" sudah menyediakan plugin Slider Revolution dan plugin builder page built-in, Anda dapat menambahkan slider ke posting atau halaman apa pun hanya dengan memasukkan modul Slider Revolution yang berada di halaman edit page. Yang harus Anda lakukan adalah menambahkan modul slider revolution di row yang telah disediakan, pilih slider dengan dropdown (ini akan menampilkan daftar semua slider yang sudah Anda buat), lalu seret & letakkan slider ke tempatnya. Mudah kan?

Wrapping Up

Slider Revolution adalah salah satu plugin slider premium yang paling mudah digunakan, mereka menyediakan sejumlah template gratis (tersedia juga template premium jika Anda membeli lisensi Anda sendiri), visual editor yang mudah digunakan, dan banyak fitur bawaan yang membuat Anda tidak perlu mengtutak atik CSS untuk mengatur tampilan slide Anda (button, font, warna, dan lainnya sudah tersedia). 

Slider Revolution merupakan plugin yang sangat kami rekomendasikan untuk dipakai di website Anda. Tidak ada plugin yang bekerja lebih baik dibandingkan Slider Revolution.

Semoga panduan kami dapat membantu Anda. Untuk mempelajari lebih lanjut (atau mengambil Demo Slider) kunjungi halaman Slider Revolution ThemePunch. Mereka akan menunjukkan contoh-contoh demo slider yang elegan dan tautan ke demo langsung di mana Anda dapat 
melihat apa yang dapat dilakukan oleh Slider Revolution.

(resolusiweb.com) - https://resolusiweb.com/post/panduan-lengkap-cara-menggunakan-slider-revolution