Blog Gratisan

Memulai Revolusi Slider: Panduan Komprehensif untuk Pemula

Jika Anda ingin membuat bilah geser atau slider yang indah untuk situs web Anda, Anda tidak bisa salah dengan Slider Revolution. Karena sejumlah besar fitur canggih telah menjadikan plugin ini pilihan Nomor #1  bagi ribuan profesional WordPress. Namun, jika Anda belum pernah menggunakan Slider Revolution sebelumnya, Anda mungkin akan sedikit bingung dengan semua opsi yang ditawarkannya.

Karena sebagian besar Tema WordPress Premium menggunakan Slider Revolution, maka kami telah membuat panduan komprehensif ini untuk membantu Anda memulai. Kami akan membahas semuanya mulai dari pemasangan plugin dan pengaturan dasar hingga menambahkan lapisan ke slide Anda, membuat animasi yang memukau, dan banyak lagi.

Tetapi sebelum kita memulai untuk bekerja, dengan berat hati kita dapat mengatakan bahwa Slider Revolution bukanlah plugin WordPress gratis. Slider Revolution Itu dapat dibeli di CodeCanyon seharga $29. Namun, banyak dari Tema-tema premium WordPress yang ada telah menyematkan Slider Revolution plugin ini sepenuhnya gratis. Jadi, ketika Anda membeli tema dari Premium WordPress yang menyertakan Slider Revolution, Anda juga mendapatkan salinan plugin yang luar biasa ini tanpa biaya tambahan.

Sekarang mari kita mulai dengan Slider Revolution. Dalam tutorial/panduan ini, kita akan membahas topik-topik berikut:

  1. Memasang Slider Revolution
  2. Langkah Pertama dengan Slider Revolution
  3. Membuat dan Menyesuaikan Slider Pertama
  4. Anda Menampilkan Slider Anda di Halaman
  5. Menambahkan Slide dan Bekerja Dengan Layer
  6. Memastikan Layer Anda Sepenuhnya Responsif
  7. Menganimasikan Layer Anda
  8. Membuat Vertikal Slider
  9. Menambahkan Shortcode ke Slide
  10. Menambahkan Tombol ke Slide
  11. Membuat Layer Statis
  12. Menambahkan Transisi Slide
  13. Menambahkan Animasi Keluar
  14. Membuat Efek Paralaks
  15. Membuat Layer Berubah saat Melayang
  16. Menambahkan Bingkai di Sekitar Slide
  17. Menambahkan Navigasi Panah dan Peluru

Pertama, kami akan menunjukkan cara menginstal Slider Revolution pada situs web WordPress.

1. Memasang dan mengaktifkan plugin

Memasang Slider Revolution Bawaan Tema Premium

Jika Anda telah membeli salah satu tema WordPress Premium yang disertai dengan Slider Revolution, di bawah ini adalah langkah-langkah yang diperlukan untuk menginstal dan mengaktifkan versi gratis Slider Revolution yang disertakan dengan tema Anda.

Mulai dengan Arahkan ke Plugin. Di bagian atas halaman Anda akan melihat pemberitahuan dengan semua plugin yang direkomendasikan yang harus Anda instal dengan tema. Salah satu plugin ini adalah Slider Revolution.

Klik Mulai menginstal plugin.

Dalam daftar plugin, centang kotak di sebelah Slider Revolution dan klik Install .

UF1sLwdC kd6Mw ZTwZET4Z3QOFIm8FBjavbT83haNWkio2jtuyk3EhYZbyjHJdFAkoAXTb hTgm94DG30oXgjlEXRicEZ L0JQGxDgGy VdLI7zJB6ZHoxXuSTrMOdKACEKeAtjCtr pwCA9g

Setelah plugin diinstal, Anda akan melihat pemberitahuan yang mengatakan Plugin berhasil diinstal. Saatnya kembali ke penginstal plugin yang diperlukan.

ZqGE1rtGIvZ9lo6o9dongMCIeHQ 1HQlEyJ13azcoGvm7yxvVX9LqnNw1o86C3RRig3TWHiUVBqEaVQTu3LPP1VSzqoKgRMS LYuaqsyvAHoxncj

Sekarang pilih plugin lagi, dan kali ini klik Activate untuk mengaktifkannya.

TVrNMHF6V eLRAZPmcPqcnudy9ogz6i9wNzfPRKhoW4DQ rTKElfCzMebNb3g 35qY9dyK1jLf3TRPfQQZXWwAKYTN28c6 8Mr5hd NEKBjdyPm UZuAV1AzTe2m7EcSNsLIwo82IlCAlTQBaA

Versi gratis plugin Slider Revolution Anda sekarang telah diinstal dan diaktifkan. Setelah Anda me-refresh halaman, Anda akan melihatnya di sidebar panel admin Anda.

eXp 6CjUPVlY6hwphAteYmIxN2BtBcQB6rCBoXWGtSFFwSne mDKFlLrrr86fVmR95XKGkl7qHQ QqRj8mLShT gJ1D

Memasang Slider Revolution versi berbayar

Proses pemasangan Slider Revolution tidak jauh berbeda dengan memasang plugin lainnya. Namun, tidak ada salahnya untuk melalui langkah-langkah spesifik.

ApYB9xBxGmnQMSDGE91v1oLwa2AjB W2JHJs1JO1DDvYozxIfYYCRnZLRGRDSrMB6LVHKR KxzT

Hal pertama yang harus Anda lakukan setelah membeli plugin adalah mengunduh filenya dari CodeCanyon. Kemudian, buka Dashboard WordPress Anda dan arahkan ke Plugins – Add New.

TO0umw31xhZCyq23Jzqz zRkrH0w mswwzmW0HTjplH5n6mjqQGZKZy5ZK3BTwmXoGWwhPyV9tXWMht31 xSuYq9iOTJfZejSAoclQaiCAxl4iZsazSvCXUgqkUBWkbg5tISxFC 1q6 aFugw

Klik tombol Unggah Plugin di dekat bagian atas layar.

Y0nvOxQO4IWmhxf512Gt7JKZgZNqWDPW8pK2WhcY0A77qEiZyLUj4h5oPdjMyAOCuFWz9uug1NAYayzVNnuJniuw M1DtmY3qGi13I50FzD89NFod b0 mt2gHLUEzqaSK3k8kbQHOSMvnu6ag

Temukan file yang Anda unduh dari CodeCanyon dan pilih. Kemudian klik Instal Sekarang.

rwDxpTp8atgp1FE52h1I9jCJBMfdCDKBqmsHxX69QnqTvQdzqQ0Nb7tq2ThwRM y2XGOtAMoCYpu Su0LT8QO767EtBUOTnEqrE6bxbSAlps9PEtr31VraGOZ6jvbxF

Setelah proses instalasi selesai, yang perlu Anda lakukan hanyalah mengaktifkan plugin, dan Anda siap melakukannya! Itu mudah, bukan?

2. Langkah Pertama dengan Slider Revolution

Sekarang setelah Anda menginstal dan mengaktifkan plugin Slider Revolution, Anda siap untuk membuat slider yang menakjubkan. Tetapi sebelum Anda mulai membuat keajaiban Anda sendiri dengan plugin yang luar biasa ini, ada beberapa pengaturan dasar yang mungkin ingin Anda ubah.

Pengaturan Responsif Dasar

Anda mungkin sudah mengetahui pentingnya responsivitas sekarang. Intinya adalah bahwa sebagian besar lalu lintas situs web hari ini berasal dari perangkat seluler. Jadi, Anda ingin memastikan slider Anda terlihat sama bagusnya terlepas dari perangkat yang digunakan untuk melihatnya.

Untuk mengatur opsi responsivitas dasar untuk Slider Revolution, navigasikan ke Slider Revolution > Globals dari dashboard WordPress Anda.

ykxX7b6 wi9J0rdxlSclPaYRrdazWzMgyD3LSg26wWbPDG8imlzY0thP z8H4pRZ27

Anda akan menemukan banyak pengaturan di sini, tetapi kami hanya akan fokus pada yang terkait dengan membuat bilah geser Anda responsif:

Tm8fAbwYyQBcaBu1xo5uvd8iQM2Em

Jika Anda sudah mengetahui semua tentang daya tanggap, jangan ragu untuk melewati bagian berikutnya. Pastikan untuk menyalin nomor dari gambar di atas ke bidangnya masing-masing. Jika tidak, baca terus untuk mengetahui apa arti sebenarnya dari angka-angka itu.

cW yMoZMBLTFLgvypRM0z1RkWYAlqQJUdDesHmekIWazQd02IiBIdlU9Qp4L z h ZqyVX2aRwVRs7Vqa1FZimP

Perangkat dan

Ukurannya Setiap perangkat memiliki ukurannya sendiri, direpresentasikan dalam piksel.standar Desktop memiliki lebar 1920px. Jadi, kami memasukkan nomor itu ke dalam bidang Desktop Grid With untuk memastikan itu adalah lebar maksimum yang kami kerjakan.

Kolom berikutnya adalah untuk Notebook , yang mencakup semua laptop, MacBook, dan tablet yang berorientasi horizontal. Untuk memastikan Anda memiliki semuanya, Anda harus memasukkan lebar maksimum yang Anda harapkan dari pengguna laptop untuk melihat situs Anda. Mari kita asumsikan bahwa itu adalah 1600px.

Sekarang saatnya mengatur lebar untuk Tablet, atau lebih tepatnya, untuk tablet yang berorientasi vertikal. Di sini, kami mengasumsikan bahwa lebar maksimum tidak akan di atas 778px (lebar iPad).

Catatan cepat – jika mau, Anda dapat menggunakan satu lebar untuk tablet yang berorientasi horizontal dan vertikal. Dalam hal ini, angka yang harus Anda masukkan ke dalam Lebar Kotak Tablet adalah 1025. Secara pribadi, saya menemukan bahwa memisahkan lebar untuk kedua kategori ini berfungsi lebih baik. Hal ini karena laptop dan tablet yang berorientasi horizontal memiliki proporsi yang lebih mirip daripada tablet yang berorientasi horizontal dan vertikal.

Last but not least, Anda perlu mengatur lebar untuk Seluler . Ini bisa menjadi rumit karena ponsel datang dalam berbagai ukuran. Memasukkan angka yang terlalu besar atau terlalu kecil dapat menimbulkan berbagai masalah. Saran saya adalah untuk tidak melebihi 500px di sini (saya biasanya menggunakan 480px, yang merupakan pengaturan default). Misalnya, jika Anda memutuskan untuk menggunakan 600 piksel, dan Anda memiliki teks atau gambar yang membentang di seluruh lebar layar, seseorang yang memiliki perangkat seluler dengan layar yang lebih kecil mungkin tidak melihat seluruh halaman. Anda perlu memastikan bahwa informasi Anda dapat dilihat oleh semua pengguna, terutama mereka yang menggunakan perangkat seluler. Menurut statistik, pada tahun 2018, 52,2% dari semua lalu lintas situs web di seluruh dunia dihasilkan melalui ponsel.

Setelah Anda mengisi semua bidang, jangan lupa untuk menyimpan perubahan Anda.

2udNmt

3. Membuat dan Menyesuaikan Slider Pertama Anda

Sekarang setelah kita mengonfigurasi pengaturan responsivitas global, kita siap untuk membuat slider pertama kita. Arahkan ke Slider Revolution tab New Blank Module:

PZv3 Ji FXFCfCc6UVhAQf4ktma5OUEYFTZ8B8QAmEViNt4i iaHy4qSk OkKqxArDpr0TZwxiTFi2srbP2bsE8G y7AXp1TzkS7q5jrb7lNrUg uz2DZrc0s8713OJjsuYp5XrzTMhieJBdNA

Slider Anda

Sekarang setelah Anda berada di kerangka kerja, hal pertama yang harus Anda lakukan adalah memberi nama pada slider Anda. Cari Penamaan Modul di sebelah kanan (di bawah tab Judul). Kami akan memberi nama penggeser pertama kami ‘Revolusi Slider Pertama Saya’ – itulah yang harus Anda masukkan di Judul . Bidang di bawahnya disediakan untuk ‘Slider Alias’. Nama penggeser juga harus dicantumkan di sini, hanya dalam huruf kecil dan dengan tanda hubung di antara kata, bukan spasi. Anda nantinya akan menggunakan Slider Alias ​​​​ini untuk menambahkan slider Anda ke halaman di situs web Anda.

s9D0e99wlmcAVwo0OwIGWw8j9n lBa cvlePd5iiyVrEqX1xB21s7XzuHD Fyu4rBCMWIC1KsOAj J0fpx hxSFzQalbIe7CwZVCaxGfGkkr7SztK7ViivAW gb2pGutfzgYbaRCd ey Qyiuw

Memilih Jenis Slider yang Tepat

Hal berikutnya yang perlu Anda lakukan adalah memilih jenis slider yang ingin Anda buat. Lihatlah gambar di bawah ini.

oB1o4APAv5PkoG9z5Qo8lZ21vxgnKf7npF74a7Zxgf4lV6 yKHQhdQ9elnohq9JKU1ZutnGJX

Ada tiga jenis di bawah Layout tab Slider, Scene dan Carousel.

Slider – Anda harus memilih jenis ini jika Anda memiliki lebih dari satu slide.

Tempat kejadian – Anda harus memilih jenis ini ketika Anda hanya memiliki satu slide. Jika Anda memilih Adegan, peluru dan panah navigasi akan disembunyikan secara otomatis.

Carousel – pilih jenis ini jika Anda ingin menampilkan beberapa slide secara bersamaan. Slide akan diputar secara radial dan dengan efek 3D (menggunakan jarak dan kedalaman bidang).

Saya biasanya bekerja dengan jenis slider pertama dan kedua. Bahkan, saya bahkan tidak ingat apakah saya pernah membutuhkan yang ketiga.

Sekarang setelah Anda memilih jenis slider yang ingin Anda buat, ada beberapa pengaturan lagi yang dapat Anda sesuaikan untuk membuat Slider Revolution lebih mudah digunakan.

Mengatur Ukuran Slider

Opsi kedua di bawah tab Layout memungkinkan Anda memilih ukuran default untuk setiap slider individual. Pertama, Anda perlu memutuskan untuk apa slider Anda akan digunakan. Jika Anda berencana membuat penggeser kecil, atau jika Anda ingin menganimasikan beberapa bagian tertentu dari halaman Anda, Anda mungkin ingin memilih opsi “Otomatis”. Di sisi lain, jika Anda ingin membuat penggeser besar (biasanya ditampilkan di bagian atas halaman), Anda harus memilih “Lebar Penuh” atau “Layar Penuh”, tergantung pada kebutuhan spesifik Anda.

S9tg hRGycX3Nam6C5RY CXBnhwEsisguGdyVeO6L6thiM f1UzcvAjaMLy1jU Yn8UW1KUrHoHoT2ziLN4qP iQaK44UMI YzBfTljZNvDGnfQE1Ksv0eBuuQDn3zl2hkOCvqyOlLWJtYDguw

Berikut adalah rincian dari tiga opsi yang tersedia:

  • Otomatis – penggeser akan mewarisi lebar wadahnya. Ini adalah pilihan yang sempurna jika Anda ingin menganimasikan beberapa bagian halaman yang lebih kecil.
YNjlMcBx6Ni0MY4GSyYXPQ1wTumfqXFXQpGGIeRZPjjPJJiP5xaWnVqkODQwQKuvQFJpp6SQIoyQt11yp6ZfN jayebc5 JepusQWRa fooeoaMKOR0dHY Dj Gk6 jn YiFlTHSY3KKT8O7cQ
  • Lebar Penuh – penggeser akan selalu mengambil lebar penuh layar. Ketinggian penggeser akan secara otomatis menyesuaikan, tergantung pada layar yang dilihatnya.
49M1QCwLkqdJolTPCn 8WM6L4V5A1py25 Xi
  • Layar Penuh – penggeser akan selalu memenuhi seluruh layar, terlepas dari ukuran layar yang dilihatnya.
ldkfgPx85ZFK69I4UVes

Seperti yang Anda lihat, Slider Revolution tidak disediakan hanya untuk bagian atas halaman. Sebaliknya – Anda dapat menggunakannya untuk menganimasikan setiap bagian halaman Anda. Harap perhatikan bobot halaman Anda. Semakin banyak bilah geser yang Anda tambahkan, semakin lambat halaman Anda dimuat. Jadi jangan berlebihan, karena dapat mencerminkan peringkat SEO Anda.

Menyesuaikan Pilihan Responsiveness

Ketika datang ke responsiveness, kita belum selesai. Untuk memastikan slider Anda terlihat sempurna di semua perangkat dan ukuran layar, ada beberapa opsi tambahan yang perlu Anda sesuaikan sebelum Anda mulai menambahkan slide ke Slider Revolution pertama Anda.

Anda akan melihat bahwa ukuran kisi lapisan diatur ke Ukuran Otomatis secara default untuk semua perangkat, kecuali untuk komputer Desktop. Saya sarankan untuk mengubah semua opsi ini dengan mengklik sakelar di sebelah setiap perangkat.

tPkwQ S04XYCvdOjWkc5PdXMmliRxhFQkvgiOyKiqtXKjSGZvzdwym ewSZMa0QixBx9Kl2ewrMtUmINcTG07k3pEzovc6SsMXPpBx3sCzyzOBCCqrSwJJfRcgK9FPiiLpZIUjhJvw 7GZWyqQ

Sekarang, alih-alih ukuran otomatis, Anda akan melihat ukuran kisi dari pengaturan global yang ditampilkan untuk setiap perangkat terpisah. Kisi adalah area di mana lapisan penggeser Anda (teks, tombol, dll.) akan ditampilkan. Bidang pertama menunjukkan lebar kisi (yang sudah Anda tentukan di Pengaturan Global), dan bidang kedua menunjukkan tinggi.

st5Qm59DfQlqd8y2PMAo8sCUEypbfKbOoyXgU9HggHdVqSG1AyJdMQfykA7jUzJtAq1df9yxK6NNfpvODfK RLMGkNZMFrrlZCgmgr34T6UIanTyCRW0 Q2dcvZQbHYgfpP b8SrAawt2gQQqQ

Mari kita asumsikan bahwa Anda bekerja dengan penggeser Layar Penuh. Latar belakang penggeser Anda akan selalu menempati seluruh ruang yang terlihat di layar, apa pun yang Anda masukkan di bidang di atas. Namun, bidang ini akan membatasi ukuran kisi tempat lapisan Anda akan ditampilkan. Mereka memastikan Anda memiliki margin antara tepi layar dan elemen apa pun dari penggeser Anda yang bukan gambar latar belakang yang sebenarnya.

1iiHc mM9 9D4NMRQpWWMlb3bBJ3e1qbdB QS8zbf UjqEZziEmkCxU8pOB5fOoLy rjXVMek5OdJ TgtqMHpz0RdRYXhFyUO1wPMpfXGaD84WPVU8RpYEHwukm Jffs5Q bWcIbFnPZNJS3jA

Seperti yang Anda lihat pada gambar di bawah, saya telah mengatur grid untuk perangkat desktop ke 1920px x 1100px. Karena 1920px adalah lebar penuh desktop, ini berarti bahwa lapisan dalam penggeser saya (gambar, teks, ilustrasi, dll.) dapat berpindah dari ujung ke ujung jika saya menginginkannya. Jika saya memasukkan, misalnya, 1820px untuk lebar saya, saya akan membatasi lapisan saya ke ukuran itu.

Saya harus mencatat bahwa tidak ada definisi ketat untuk apa yang harus Anda masukkan di bidang ini. Anda akan menemukan apa yang terbaik untuk Anda saat Anda menggunakan dan menjelajahi pilihan Anda. Untuk saat ini, silakan salin pengaturan yang saya gunakan.

Sekarang Anda sudah siap, jangan lupa untuk mengklik “Simpan.

tV2zwu 8wVqYCeCCRfqLrMxviXPNWoyA1pvzrBTwIlvG 8CGUuepvfThbUQvsLFw5lNm6lrDogqexauSySZIrjmsW rFhqPQXwqPBNVYaN19Wh2MGA9pa2zb3HsHiJeQl vH A2i22zXCF3 g

Harap pastikan bahwa Anda telah mengisi semua bidang yang diperlukan. Jika tidak, Anda tidak akan dapat mulai mengedit penggeser.

Beberapa Pengaturan yang Lebih Berguna

Sekarang Anda dapat kembali ke Slider Options dari slider Anda di sebelah kanan. Di sini, Anda akan melihat sejumlah ikon yang tersusun rapi berisi beberapa opsi yang lebih berguna. Ada terlalu banyak pengaturan di sini untuk mencakup semuanya, jadi kita hanya akan membahas yang paling nyaman.

8Pcq4C88pmV6ZY9YDrMOvZqnV tHHYfo5bwcUbAIO7PPYYQzli25j1i7RMvqi qRD0378qSLacX8PxXXeloeNxWYZuAr1W

Di bawah Module General Options > Defaults, Anda akan melihat bahwa durasi slide default diatur ke 9000ms. Artinya, setiap slide di slider Anda akan bertahan selama 9 detik sebelum beralih ke slide berikutnya. Saya pribadi berpikir itu terlalu banyak, dan durasi slide tidak boleh lebih dari 4000ms. Jika tidak, pengguna Anda kemungkinan besar hanya akan melihat slide pertama Anda. Maksudku, ayolah, siapa yang akan menunggu 9 detik untuk perubahan slide?

Di bawah Module General Options > Defaults > Spinner, Anda dapat mengubah spinner default (atau Anda dapat mematikannya sepenuhnya). Pemintal akan ditampilkan saat penggeser Anda dimuat.

h90TXwjEHd6HM9gc2SrlJqzbVYSqIZg oZMJV38 f1vAdrQ1TG3OYkBxPiVErjY1dTsBcCh9wsJqSERa CHAZOnw1kqilrNQ8Nda5 fysl0KRE z BjOJ FbgEckiWUNTnoH2gvGqRc3gcDHQ

Di bawah Opsi Umum Modul > Umum > Nonaktifkan Di Seluler, Anda dapat mencegah penggeser ditampilkan di perangkat seluler. Anda juga dapat menonaktifkan efek KenBurn agar tidak ditampilkan di perangkat seluler, (dan dengan demikian sangat meningkatkan kinerja halaman Anda).

B7j0p1j6uiqwFC c3013NTVqF0bmGFFTqE77Ob64Gzz fBl0yD8UW2YdFLv792UezRfPhCa8Qx3EHoRC 8v1KuvGW8mUszz4fX6sQaiurhXweMFOrXecpTatNRHwWZ2VyPlQHEz8Ahi0YZtuJA
IGBMZ1argOfvGaSuigBIeDYKmp5pjkPNG4iU iD37aLUvLJNeO1gIi2KSst3zhfxwx2oR0ET58XhiLWOmgnhOII6IVAKjej78IZamYwv 1xzgyQjSr7Y5ghSQ TDpexJ 30I2pqf3qnAM4iLrQ

Di bawah Opsi Umum Modul > Pada Gulir > Fitur Berbasis Gulir, Anda dapat mengaktifkan efek paralaks dan/atau 3D untuk gambar latar belakang dan lapisan individual Anda. Anda juga dapat mengatur sensibilitas mouse untuk Parallax, serta berbagai tingkat kedalamannya.

Dropdown Scroll Based Effects berisi sejumlah efek menarik yang dapat Anda terapkan pada slider Anda ketika pengguna Anda mulai menggulir halaman ke bawah. Saya sarankan Anda bermain-main dengan ini dan mencoba semuanya.

oz3gfluKZPPHVv k0y4lcvefYYYU NYPycYWYThbQuaPSRplc5DzrxXy2g72aWNLWhsxOvE2BJEy0W0VTOniwUwSqlHbYoCv KORJcfVLEKr06BC o8OaR7OkB9iZei27Uk60AYGEOh9sC uEQ

Jika Anda berencana memiliki lebih dari satu slide, Anda dapat mengatur navigasi Anda di Navigasi Pilihan. Di sini, Anda dapat menyesuaikan pengaturan untuk panah, peluru (kebanyakan digunakan untuk perangkat seluler), dll.

9efb65TuKdRQhswVgWktFwkUXwyLJ6HUlUya4t06vw0UX ukA7 dveY

4. Menampilkan Slider Anda di Halaman

Sekarang saatnya untuk memutuskan di mana Anda ingin menampilkan slider Anda. Untuk menambahkan penggeser ke halaman, Anda harus menyalin kode pendek penggeser dari Opsi Umum Modul > Judul. Dalam kasus kami, kode pendeknya adalah [rev_slider alias=”my-first-slider-revolution”].

6p2ZNzKBQy9qfoV6BzXsw4xFa3w080cuqi8obSynGXFitnNJvRz10ZkxBIIZs2A A9 ioiHHplGi

Selanjutnya, pergilah ke bagian belakang halaman Anda dan tempelkan kode pendek di mana pun Anda ingin menampilkan penggeser. Perbarui halaman setelahnya, sehingga Anda dapat segera melihat pratinjau langsung dari penggeser Anda. Setelah Anda menambahkan kode pendek ke laman, setiap perubahan yang Anda buat pada bilah geser akan terlihat di laman itu. Jangan lupa untuk menekan Simpan setiap kali Anda melakukan perubahan!

Slider saya masih kosong, karena saya belum menambahkan slide apa pun ke dalamnya.

o1hJhmj

5. Menambahkan Slide dan Bekerja dengan Layer

Setelah Anda menentukan dan menyimpan semua pengaturan slider Anda, saatnya untuk mulai membuat slide individual Anda. Mari menuju ke Slide Options .

3dxGVlqSpVKD3M9veOzQX8TaaPSY3X2U6T1JhfhoQon5Nwnur96TcPqtSvk2t3zHMj65Y44DRImlP

Anda akan melihat banyak opsi di sini, tetapi jangan biarkan hal itu membuat Anda takut! Saya akan membahas yang paling berguna, jadi bertahanlah!

Jika Anda menggulir halaman Anda sedikit ke bawah, Anda akan melihat bingkai slide. Slide Anda dan semua isinya akan ditampilkan di dalamnya. Saat ini bingkai kosong.

2L0IROKoIjEZRJ4QIbv9U1xUR0PnyurFGrJdhi21eOaXvp8Wp uq3dBTB29t227iMDuSC73MYmuFQkyi zFA8tc6MLlewz2I5d4vCQ8fO3HX410m7gjHOnwZfdS0cUQyiXOGJiKE sUnJEjElw

Menambahkan Gambar Latar Belakang

Jika Anda tidak ingin latar belakang Anda tetap transparan, Anda dapat dengan mudah menambahkan gambar latar belakang. Di panel opsi di sebelah bingkai ada banyak tab berbeda. Salah satunya berjudul Background, dan dipilih secara default. Opsi Transparan juga dipilih secara default.

JtkEm3Be4scj0ecL0hozdjxpVye O2m9ioXDEzoqxGLFtDs FjsFsrS4LHyFqQtbTYmdTiSbiAns6eqBvhQpFMtlXS07 APU O bXH0t0iGrCkvDTdkxd

Untuk menambahkan gambar latar belakang, yang perlu Anda lakukan adalah memilih Gambar dari dropdown, lalu klik Perpustakaan Media . Sekarang Anda dapat mengunggah gambar baru atau memilih salah satu dari Perpustakaan Media Anda. Pastikan untuk memilih gambar yang sesuai dengan ukuran slider Anda. Saya telah membuat Fullscreen Slider, jadi ukuran gambar saya akan (setidaknya) 1920×1100 piksel untuk mengisi seluruh ruang layar desktop.

BtQ5Vp9PwXmEaMOpjnlPAg1Fzf2tkXU6rLSHNErNG6fgKrG0

Anda juga dapat menambahkan gambar dari sumber eksternal dengan memilih Gambar Eksternal dari dropdown. Anda harus memasukkan URL gambar dan klik tombol Refresh Source .

2qF6kE3FRQGFKIGo41OHbxMbkpRbqa lbLX xFJyZ7bsdvsff2Tt VubiKGN6CKYC1eST9DTtG87ElrRzhdHqrY2Iu3wL25WCM9jF4 PLvuLbuvvjah7lA8ODhQHbj DApgw7aM0IYOPuRnfmA

Setelah Anda memilih gambar, itu akan muncul dalam kerangka kerja Anda.

M5TDNMUgzE9Zgiq4l9PCRCj7 QC8pq greiNOdnVT QkozMv zn1Dx1Nyxj6Rd8sjRHL2EGpmBrniYCt cfs0MNTRLCX1L79c119vSfp76UXKPYVEYhz0 mqeA91w5fBOOm8dtpNkKzGVRzPvA

Di bawah bagian Sumber, ada Pengaturan Gambar. Hal pertama yang harus diatur adalah Source Size. Ada berbagai ukuran untuk dipilih – rekomendasi kami adalah untuk meninggalkan ukuran gambar asli, jika Anda ingin terlihat bagus.

J5SwMXpbnUszqjUyZBTrRKzHWDV2XzT3wxb25iELQ3hyagxtOXiMYqQwAAJQhDkxKS ErxBJj95Z45rAOeU9DG2k1HqHgzFUL 8HAFZnu5Lwtdx4NjTqYclWL1jUpLB2rApUp7cyWIPnesGS A

Selanjutnya, di bawah BG Fit, Anda dapat memilih bagaimana Anda ingin gambar ditampilkan dalam slide Anda – kami ingin itu menjadi latar belakang yang sebenarnya, jadi kami memilih Cover. Anda juga dapat memilih apakah Anda ingin mengulanginya atau tidak – ini berguna jika gambar lebih kecil dari ukuran bilah geser, tetapi tidak disarankan. Opsi berikutnya memungkinkan Anda memilih posisi gambar Anda – secara default dipusatkan.

LSN0VSVdjWbBShIJ4y9oZQxf0B E0fsUx66CHXc 5PJg BPCUpii1OUOfoB81vyB2N2JnLbfWpBIXxDT7tlDPkr4je1iAcqKJF7N1yO1sAnO5mh30yKwiWinmO2unT j7ccjTc35fdBiO2tBtQ

Anda sekarang dapat menekan Simpan dan kembali ke halaman tempat Anda menambahkan slider. Anda akan melihat bahwa gambar sekarang ditampilkan di posisi yang Anda tetapkan untuk penggeser.

Jangan lupa untuk menekan Simpan setiap kali Anda membuat perubahan pada slide Anda! Untuk memperjelas tombol mana yang sedang kita bicarakan, lihat gambar di bawah ini.

f3XWXfeeKrMf5yWkLPWavheWMggFZddDlJrWvKAFrDySluKB08q3MDvCC J8FJR49gN5SFL0LaS0 hbSccPWPyFRGjvc3po0i53p15ivkQrsoNYMq 9MRJdLoUDEtfa5jANvzmzDpaz00ZrpaQ
hvIuff7ATpX0 E8VIXsRPX6yPNruOUsPP4mfYUMHVoRi HvduO uZ8CytpNQ8Khk74uT bGbMnNCRFv2Va8cv1NMC7yw2KRaFqIhciun2kdrgkIf7bldfG88V9hwnVdvoJdH1BUauzBTlVYTMw

Mengatur Warna Latar Belakang

Jika desain slider Anda membutuhkan warna untuk latar belakang, bukan gambar, Anda dapat mengaturnya dengan cukup mudah. Cukup pilih opsi Berwarna dari Jenis di Sumber , lalu klik Warna BG untuk memilih warna Anda. Anda dapat memilih warna menggunakan alat pemilih warna, atau Anda cukup memasukkan nilai hex ke kolom Color Hex Value . Anda juga dapat bermain-main dengan opacity jika Anda suka. Mengatur Opacity ke 100% akan memberi Anda warna yang sepenuhnya jenuh, sementara nilai yang lebih rendah akan menghasilkan latar belakang semi-transparan. Setelah selesai, tekan saja tanda centang biru.

Wdn0HYMsOh

Opsi Berguna Lainnya

Ada banyak sekali opsi untuk menyesuaikan latar belakang slide Anda. Anda dapat menambahkan slide Video YouTube, slide Video Vimeo, dll. Menambahkan video ke Slider Revolution membutuhkan artikel yang terpisah, jadi saya akan melewatkannya untuk saat ini. Tapi saya akan kembali dengan lebih banyak tentang itu dalam waktu dekat.

Di bawah On Scroll > Parallax & 3D Settings Anda dapat menyesuaikan efek paralaks untuk setiap slide.Opsi Pastikan Parallax diaktifkan di Umum Modul.

t 7w5fi6gztvUDAcoYcw1vSXmVsCvEFFHW0IMC12hIGna

Jika Anda ingin gambar latar belakang Anda diperbesar atau diperkecil, para ahli dari Slider Revolution telah membuat Ken Burns , yang dapat Anda aktifkan dan sesuaikan di panel Ken Burns khusus.

jrJ RoqkFPlA3Su7rgLbOYrpflzrTGAJZAAcTU9EGE BO 3FhdL auVpe12kqApDhLulw2JZlXEqnGQaX6DuzA3 0n XgjVsYITkqRPf6zk9I0KNZJbGvtK7WgSw3omR7wlXZL jMtCoqnZUWw

Selain Opsi Slide , Anda juga akan menemukan sejumlah pengaturan lain untuk menyesuaikan latar belakang Anda. Di Opsi Umum Modul , Anda memiliki berbagai opsi terkait perilaku dan visibilitas slide Anda. Perlu diketahui bahwa jika Anda memasukkan nilai di bidang “Penundaan Inisialisasi” , akan ada penundaan sebelum gambar latar slide muncul.

v31nrd31rts0CALftp854njTe8s7kBG8Z5uSVHrTJM7qkx97EKxGynYnNezeNlP k

Anda dapat mengubah cara slide Anda memasuki layar di bawah Slide Options > Animation > Slide Animation tabAnimasi default adalah Fade. Jika Anda membiarkan opsi Fade default, latar belakang slider Anda akan memudar. Di sini, Anda juga akan menemukan bidang untuk mengonfigurasi durasi animasi, yang diatur ke 1000ms secara default.

ZePKHXiF4MQ8 ecIl m7OKTdxggB7

Menambahkan Layer ke Slide Anda

Sekarang kita telah melewati opsi slide dasar, kita siap untuk mulai menambahkan layer ke slide kita. Lompat ke kerangka kerja dan arahkan tombol Add Layer dengan kursor mouse Anda. Anda akan melihat dropdown dengan opsi lapisan yang berbeda.

m7yXr0Cy8MVMqUKk mdSwDmCMEYkpEUfschzzwRECkR7yInZl 7a4DgvPZv1L7nGaCdKSxA7lwEf4 fNGGM24 pxULN jGMl41 85xx5qXcEbyPT kv369jA8 txSc64T9dDGU WV453N1ZiIg

Sekarang mari kita tambahkan layer gambar baru. Anda mungkin bertanya-tanya mengapa kami menambahkan gambar dan bukan teks, untuk memulai. Sejujurnya, sebenarnya jauh lebih mudah untuk bekerja dengan lapisan gambar daripada dengan lapisan teks. Tapi jangan khawatir, saya akan menangani lapisan teks di bagian terpisah di bawah ini.

Jadi, ketika Anda ingin menambahkan layer gambar ke slide Anda, cukup klik Image di Add Layer dropdownKemudian lanjutkan untuk mengunggah gambar yang diinginkan. Saya telah mengunggah gambar vektor dari sebuah lingkaran sebagai .png dengan latar belakang transparan.

JQx3ITtxWYMe1wrFqHRhq nTa7wC23Xcrzik2H2GEOR8oix5bTzNlgBBWpAKqe76 E3e6udvLFnUgOADi3T295KhrvWavXLHHqP 79ibpdbxb6WQam2K

Sekarang Anda dapat menyimpan penggeser dan memeriksa apakah gambar ditampilkan di halaman tempat Anda menambahkan penggeser. Saya baru saja memeriksa halaman saya, dan ya, pasti ada lingkaran di sana sekarang.

Pengaturan Lapisan

Sekarang, kita akan membahas beberapa opsi yang kita miliki untuk setiap lapisan yang kita tambahkan. Di sebelah bingkai Anda, Anda akan menemukan sejumlah Opsi Lapisan (Konten, Gaya, Ukuran & Pos, dll.). Saya hanya akan membahas dasar-dasar opsi ini untuk saat ini, tetapi Anda dapat mengharapkan artikel terpisah di masa mendatang di mana saya akan membahasnya secara mendetail.

srK XsFNeHWfc4CdAKA3YF51cFW1

Konten Lapisan Gambar

Di sini kita memiliki beberapa informasi dasar tentang lapisan. Kita dapat mengatur lazy loading dan mengubah jenis sumbernya. Di sini Anda juga akan menemukan opsi tag HTML, tetapi pengaturan ini tidak terlalu penting untuk lapisan gambar.

hJSyxs9CmfPFJpgluP8Bm0 JoIlFUXqzBVpW3e3uDvvVVoda fYc0x3glZBIZBKURxP4aymCXgEx KZ1

Opsi Layer Style Opsi

pertama memungkinkan kita untuk menambahkan latar belakang layer. Ketika kita mengkliknya, kita dapat memilih warna untuk latar belakang.

3F MuoKEjhJ01REo3znc5CTvDmw0p8bapu2rmSDBJTMpqZ 5pFYsv dqb9dwrG vrbmUG8B6sdv9pK8tBmm0UEOfyqIahw Tq VIuA2rIhgheTq9ItV5fNf0m0dyFrPyZKs5KcdL6semuvB8Vg

Dalam kasus kami, itu akan terlihat seperti ini.

5H56i3SNzaLoqfXu62B Dkko8bPR1hsBuoaL96TxH63nkAk G tz9hAj3ZBxa9Fl1 Ccfa2iZC4kITpSavAuYBdI3k0TlnyUlJp7L

Selanjutnya, ada Spasi . Yang pertama adalah untuk memindahkan layer – dari atas ke bawah, dari kiri ke kanan, dari bawah ke atas, dan dari kiri ke kanan. Mereka ditandai dengan huruf ‘M’.

EjtFHzfyt6apLhbf 9fdChUZtgPyBnUunUm4lgbXk9Dh1vEMSiP yd4ek0ruOjNURwRTkDrrgGyXJZx r6DrHe3R6wT77Mx3NvO4zGnYE8XCvy8KH3j7O2b978 4rr7qt8T fT gPzY5Eazg

Empat bidang berikutnya adalah untuk mengubah lapisan. Setiap lapisan yang kita tambahkan memiliki empat sisi, dan setiap sisi dapat diubah. Sekarang mari kita tambahkan nilai di salah satu bidang dan lihat bagaimana reaksi lingkaran kita.

59VUfTvSZSbMP9eN2UXyqpfHJKOMf5 43W b6r2twdlYJB EA63inaF3BWER5mC ju C Vy8M9eeFqURui1 NLmT3lGtvOQItZaLmcI IM9Lks1Adr9KlWAS FbNuFxjjDygRCIFv

Saya memasukkan 30px di bidang pertama – bidang yang mengubah sisi atas layer. Sisi atas layer saya bergerak 30px ke bawah. Dan sekarang terlihat seperti ini:

Ba57YwlqQZEDQaS FToQ I1VwmtLj9 NYsHrywe9ApjgJPmG76SIKdSVXTX933PW7zWBAaAQs

Anda juga dapat menambahkan batas ke layer Anda. Ini transparan secara default, tetapi jika Anda ingin menambahkannya, Anda harus memilih warna dan gayanya, dan mengatur ketebalannya dalam piksel.

mdDIGGuaruBKvEYZfF7g73kicJfp6qNsiHbxZhKYE3iJABKZ6SpgZwDKU2YSQfjgihpcWBZKbnX ywWZN EAXMg J2NwWSv1iuuhO0an1as E1NH4qqyE

The Layer Size & Pos Options

Di bagian ini, Anda dapat mengatur Alignment, dan mengubah Size. Lapisan kami secara default ditempatkan di sisi kiri atas layar. Ini berarti bahwa perataan horizontal diatur ke kiri, dan perataan vertikal diatur ke atas. Perataan lapisan, baik secara vertikal maupun horizontal, dapat diubah dengan mudah dengan mengklik salah satu ikon perataan. Saya hanya akan mengubah perataan vertikal saya ke tengah.

Setelah Anda memilih perataan, Anda dapat mengatur posisi layer Anda lebih tepat menggunakan opsi Horizontal dan Vertical Offset dari Aligned Position . Dengan perataan horizontal default, layer Anda macet di sisi kiri. Ini pada dasarnya berarti bahwa offset horizontal (X) saat ini adalah 0. Hal yang sama berlaku untuk offset vertikal (Y), yang berarti bahwa lapisan tersebut tepat berada di tengah layar Anda. Jika Anda memasukkan 50 untuk offset X, layer Anda akan bergerak ke kanan sebesar 50px. Dan jika Anda memasukkan -50 (ya, itu juga opsi), gambar Anda akan bergerak 50px ke kiri, dan itu akan keluar dari batas layar. Saya memasukkan 200 untuk offset horizontal, dan 200 untuk offset vertikal. Mari simpan slide ini sekarang dan periksa tampilannya di halaman.

Anda juga dapat mengubah ukuran asli layer. Pastikan saja ikon gembok terkunci, sehingga layer Anda mengubah lebar dan tingginya secara proporsional.

cfclwfxuoM14v7bUVQO6MF6iyX7DhjPsWEXHzUwpbFvi3EBiuLlbFOXwR3AXYqPmgOfVnRJwEiUEqnmZVRoaI v2fOyfad m Pottr1kirdSdYOlQTRWUSKpS lgk8P895b1pJEbCdIgLJfLhw

Opsi Lanjutan Lapisan Opsi

ini memungkinkan kita untuk Memutar lapisan secara horizontal, vertikal, dan terpusat.

sgSeVUDqm4eap0c0M9ttxCe9UG7N4mfSUBZbgbOrJg8YeUhG63IubUVk axiL4c97Wi3y9Xbu8Ym8Tn3rXdwKn FHI862 MB8VkdbV yvZQVPcpAPMbnASMob1hWYw7LcEqp18W0KafqdOWGDw

Opsi berguna lainnya di sini mari kita tambahkan bayangan ke lapisan.

Opsi Animasi Lapisan

Tab Animasi adalah tempat Anda dapat menganimasikan lapisan Anda dan mengatur muncul dan keluar . Saya selalu menggunakan animasi yang muncul, karena menurut saya itu adalah cara yang bagus untuk membuat kesan.

Di Animations , Anda akan menemukan dua baris. Yang pertama untuk animasi yang muncul dan yang kedua untuk animasi keluar.

OAs2MsmJOicWSHgbtdP9UBMaAL oMa9TRlcptTq yLpS5RDq8re66VzZkxclsUBoqLbNlq4 Fg lEvcznbqjUKkJdUbrhpT2lDRzsIwsH9maTY9ZUwz105TmWa6QlYolpwHy9OSZ76nYMbVkLg

Setiap baris memiliki menu tarik-turun dengan berbagai jenis animasi. Animasi tampilan default adalah Fade-In untuk semua layer. Saya sarankan Anda pergi dan mencoba beberapa efek animasi lain untuk menemukan yang paling cocok untuk Anda.

k57tiWGu9lb wGD0gBOA8fvhu Z1N4G337G fwb4hugoxHUH5g6wkLWWzFytCuGz9oHCCmL9eer32lazYFA8svedi4N1wv9BREbMtwn48 ckDEqZrmkIx7RGj8x8I2bmLdkRK hAgzqTiPi6fw

Bagian di bawah ini digunakan untuk Durasi Animasi, Easing Animasi, dan untuk menentukan Mulai animasi. Durasi Animasi menentukan berapa lama waktu yang dibutuhkan hingga animasi selesai, sedangkan Mulai menentukan durasi waktu setelah animasi akan dimulai setelah slide dimuat. Nilai awal yang disarankan adalah antara 100-300ms untuk lapisan yang ingin Anda tampilkan terlebih dahulu. Easing menentukan kecepatan kemajuan animasi (yang tidak sama dengan durasi animasi, yang menentukan berapa lama animasi akan bertahan secara keseluruhan), dan pengaturan easing yang berbeda dapat menghasilkan efek animasi yang berbeda. Easing memastikan animasi memiliki nuansa kehidupan nyata yang alami. Silakan dan bermain-main dengan pengaturan ini untuk merasakannya dengan lebih baik!

jUcAaOEqZSzog29yZWQR5nupdgH7hpMMUUsSrjlRh7BvBs03oluXVkL5qixuh9 JcKbzOyPrzpAvRNm7Lg8UnYW2Tj2elgy9ZpvWAeKjyOEudHi759TM p0TmBdtJkubIv2s4LtYjNbwbzXHrA

Seperti yang Anda lihat, ada beberapa pengaturan lagi di tab ini, tetapi kami akan melewatkannya untuk saat ini, karena memerlukan pemahaman yang lebih lanjut tentang prinsip-prinsip animasi.

Tab Layer Loop Tab

Loop, seperti namanya, memungkinkan Anda membuat animasi looping. Pengaturan di sini cukup mudah. Anda dapat memilih jenis animasi, menentukan kecepatan loop dan easing, dan mengatur waktu mulai dan berakhir untuk loop. Sejujurnya, saya tidak banyak menggunakan animasi loop, tetapi Anda dapat bermain-main dengan mereka untuk melihat apakah Anda merasa berguna. Pastikan untuk mengaktifkan sakelar Enable Timeline Loops .

Opsi Layer Hover

Jika Anda berencana untuk melakukan beberapa tindakan saat layer Anda diklik atau dipicu dengan cara lain, Anda mungkin ingin menentukan perilakunya saat melayang. Aktifkan hover sebelum Anda mulai mengaturnya.

91QDrWECciEiRCzIFlg00RVbzwG1znxhf5OkIp5PuYd Xp6IfTUDZxb 1lJClRKTeDsljc4LmpJWT1dgcL21S pxGpNlqg8TbUAJxhyO2C1 WS36An4Ek4HEyLThiF1UM jObD65hkVtRMoy A

Dropdown pertama di sini memungkinkan Anda memilih tampilan Cursor pada layer hover.

eAxePtrdm6NG6udxNQTcaXyEI7iB3PssPS67ARIpNHUjUds5nk9cttFZ0 iiG5BkO5wSpy2 CYnchxBX 10rWX2W iUg H6ZAiFr qkWvd8AKHeeHe4y8p1WFVYqY0njfCZGbwDIuoq7 1HZsQ

Di bawah ini, Anda dapat mengatur semua yang terkait dengan perilaku lapisan saat mengarahkan kursor. Ini lebih berguna ketika bekerja dengan lapisan yang Anda buat sendiri, dalam Slider Revolution (misalnya lapisan teks, bentuk, dll., sebagai lawan dari gambar yang Anda unggah ke slide Anda). Kami akan melewati pengaturan ini untuk saat ini, karena mereka layak mendapatkan artikel mereka sendiri.

On Scroll Layer Options

Jika Anda ingin layer Anda berpindah pada mouse scroll, Anda dapat mengaktifkannya di sini. Ada tiga opsi – Parallax, Timeline Scroll Based, dan Filter Effect Scroll Based.

A4bm3mdX45Hm zjyOqh9T7ihpoaSF1H C9L47lGR9bcy46CSU1g Sg e0VGIrxIisNTx3JJ0VKsyONmbs9SwKc94GJH dRXgIMKAIPrWPee4HZ32KZkbf

Opsi Tindakan Lapisan

Bagian ini memungkinkan Anda membuat lapisan Anda menjadi interaktif. Misalnya, Anda dapat membuat lapisan membuka tautan saat pengguna mengkliknya.

Klik pada ikon tindakan untuk memilih jenis tindakan yang Anda butuhkan.

dS8nXiWw0 Xe6XgUn4wi7HNuLOh1DcLbAh6L0sYXQV1833grHOiESPJUNEOPCv2mL7v5h0Vx6yAJGZeem7NOlMQt5dB67nuAxbzIu9c1j2eAMH4aUUHSvNGwABNpfifYM6Ma70 vCsWILNWvIQ

Dropdown pertama adalah di mana Anda dapat memilih jenis tindakan yang Anda inginkan terjadi. Ada banyak pilihan di sini. Saya akan memilih tautan Sederhana , yang terletak di bawah Tindakan Tautan.

NOacEbiG LaVKuo5fqlehMC1MlCZQWoBW7Hh1ZCL9p9HE DkO1hQJTT0Kykvzb095UOkwSq8e8cQBGVnkos6iiQ5fBrKu8o8JDSu1LmATUVxkFFZ4bbcEPx6UwvtcJp7Tku 8HIWLCjKLJRJiQ

Sekarang saya dapat memilih interaksi, masukkan URL ingin saya tautkan ke lapisan saya, pilih apakah saya ingin tautan saya terbuka di tab browser yang sama atau di tab baru, pilih antara jQuery atau Tautan Tag, dan pilih apakah Saya ingin mesin pencari mengikuti tautan atau tidak. Saya juga memiliki opsi untuk mengatur waktu tunda antara saat pengguna mengklik lapisan saya dan saat tautan dibuka.

klsMmrgLmtKHauF7HzZJP6gLcuCEOp G2sglR3B6gBScZRTPB6qP6mo0pDRnsXBeVNzuKBZAE26VVTuG4ag WhsmJ5YgmvYy5jomMsePZKlc1J1bRhQWr4viTyrQgOEsTki0YMXb9CHG2 Qaw

Ada juga banyak jenis tindakan lain untuk dipilih di sini. Namun, saya terutama menggunakan tab ini untuk menambahkan tautan ke lapisan saya. Saya sarankan Anda mencoba beberapa tindakan yang tersedia dan melihat apa yang menurut Anda berguna.

Opsi Responsivitas Lapisan

Mari kita lihat Perilaku Responsif sekarang. Jika Anda membiarkan opsi Intelligent Inherit aktif, layer Anda akan menjadi lebih kecil secara proporsional di semua perangkat dengan layar lebih kecil dari ukuran layar desktop yang ditentukan. Menurut pengalaman saya, selalu lebih baik untuk menonaktifkan opsi ini, sehingga Anda dapat menentukan ukuran untuk setiap perangkat secara manual. Dengan begitu lebih mudah untuk memanipulasi tidak hanya ukuran layer Anda, tetapi juga posisinya. Hal yang sama berlaku untuk opsi Ubah Ukuran Antar Perangkat, Offset Responsif, dan Anak Responsif, yang menerapkan respons otomatis ke konten tambahan apa pun di lapisan (HTML mentah, kode pendek lainnya, dll.). Setelah Anda mematikan opsi ini, jangan lupa untuk mengklik tombol Atur Ulang Semua Nilai Dari Desktop.

toGfASr1AiRVXXZyb6QefJbwubmWiT2cjAXuYjMVC68exxSai0qKANhuXUZZbWrq7wjZuTn2WMWOw6nXWow3z88hY3XBsou1uR noOELFz1 DhFMX8vWBmBV2v09F zHgWb7wMC7c CuWCzEfw

Jika Anda ingin lapisan Anda terlihat di semua perangkat, pastikan sakelar yang ditunjukkan pada gambar di bawah semuanya AKTIF. Yang pertama untuk desktop, yang kedua untuk laptop dan tablet yang berorientasi horizontal, yang ketiga untuk tablet yang berorientasi vertikal, dan yang terakhir untuk ponsel. Jika, karena alasan tertentu, Anda ingin menyembunyikan lapisan Anda di perangkat apa pun, cukup matikan sakelar yang sesuai.

JMjnjZ30oh4s 8GKBI94wA9zOBlkAAppluncJOdcqpB8XOLYPvtA8YiiXm8CJOemSOAwdYhNJHpN8Z0RXE6JxFJsvA73xwmdQgPuvaz8f0WPbrqPTBtmweGob09Da3pQii2Wa BEQD6x1xGb w

Opsi Atribut Lapisan

Tab Atribut memungkinkan Anda menambahkan ID dan kelas ke lapisan Anda. Ini kemudian memungkinkan Anda untuk memanipulasi lapisan Anda melalui CSS khusus. Anda juga dapat menggunakan opsi tertentu di Attributes tabRel, Title, Tabindex, dan Alt) untuk meningkatkan aksesibilitas penggeser dan lapisannya.

Karena bekerja di Attributes memerlukan beberapa pengetahuan HTML dan CSS dasar, kami akan melewatkannya untuk saat ini.

Bekerja Dengan Lapisan Teks dalam Revolusi Slider

Sekarang setelah Anda mengetahui cara menambahkan lapisan gambar ke slide Anda, mari kita lihat opsi yang tersedia untuk lapisan teks.

Sebelum membuat layer teks pertama Anda, Anda harus membuat beberapa keputusan. Sebagai permulaan, Anda perlu memutuskan salah satu faktor terpenting – font yang akan Anda gunakan. Dalam kombinasi dengan visual yang tepat, font yang dipilih dengan baik dapat melakukan keajaiban untuk presentasi online Anda. Jadi, beri diri Anda cukup waktu untuk menemukan keluarga font yang sesuai dengan kebutuhan dan gaya situs web Anda. Kemudian, Anda perlu memutuskan ukuran font untuk perangkat desktop. Juga, pikirkan tentang warna teks. Saya sarankan Anda tetap sederhana. Warna-warna cerah memang bagus, tetapi hanya jika dikombinasikan dengan elemen serupa. Jadi, kecuali Anda yakin dengan apa yang Anda lakukan, jangan mengambil terlalu banyak risiko terkait warna.

Setelah Anda memilih font dan menentukan gaya dasarnya, Anda siap untuk menambahkan lapisan teks pertama Anda.

Pertama, pergi ke Add Layer, dan klik Text. Jika Anda ingin menambahkan teks ‘judul’ pilih Quick Style Headline, dan jika Anda ingin menambahkan paragraf pilih Quick Style Content. Saya akan memilih judul.

blEQocOR5ZTDX D0p3YGT5ZJx0if1YxdZ6f5lzkdQWl5jU5 j8yCSIULEYv7lLZutkOC08iRcErAyVdsbud5MAYPUnFlcyhE3D090GVQKGV6xv09 Q3kONVi7B6Q6chjiiUf bUBfj0yc CEPA

Sebuah kotak hitam akan muncul. Di sinilah Anda harus memasukkan teks Anda. Semua yang Anda ketik juga akan terlihat di kerangka kerja Anda.

Nute0RNacS yLNa6ssQEzYOeGGNQFDaj 65weyxgSWLkeqSWfsm3w4uZOjwv6vZBsVo43Ye2dBPnI35UP0Og30fKleHJsdbolhPR8tTWdr 7cb3agf4p2HaQcWNc OUvhURlZjKN8hyZks28hQ

Sebelum Anda mengubah pengaturan default lapisan teks Anda, lompat ke opsi Responsivitas untuk mematikan Intelligent Inherit.

Sekarang lihat tab Style. Anda dapat melihat bahwa Roboto adalah keluarga font default untuk setiap lapisan teks yang Anda tambahkan. Anda dapat memilih font pilihan Anda dari dropdown. Sekedar pengingat cepat – untuk mengedit lapisan teks, Anda harus terlebih dahulu memastikan bahwa itu dipilih.

L9m80RkACGyoKRuBjyWzCkKqeZhxCe3xrp3jDrWH1LocsjTgw7TcdngahLpMP7 I7MC0jL jbwa9nOAreSwod nC ebdgeGz22Owd1jk7z7AX5bUvd3To7ryBWrDD8QRd djAOpbv6gfGLSp w

Selain memilih jenis font, Anda juga dapat menentukan ukuran font, tinggi garis, berat font, dan spasi huruf di Gaya tabMasing-masing opsi ini akan mengubah tampilan teks Anda. Jadi jangan ragu untuk bermain-main dan menemukan kombinasi yang paling cocok untuk Anda.

sBaiXih8zI9kQnz JMjBPkSHsJkQFXVrhtybOzstVIImP6vEQjvfrV bKbrGgW951ck9GntiFFBf

Sekarang saatnya untuk mengubah warna teks Anda. Klik pada Warna diajukan untuk membuka alat pemilih warna. Terserah Anda untuk memilih warna yang sesuai dengan visual Anda dengan sempurna.

Setelah Anda menentukan nilai dasar ini, simpan slide Anda dan lihat tampilannya di halaman Anda.

Hal berikutnya yang harus Anda tentukan adalah perataan horizontal dan vertikal dari layer teks Anda. Ekstensi penggaris halaman untuk browser Anda dapat membantu mengatur nilai offset untuk teks Anda. Jika Anda belum memiliki ekstensi penggaris, Anda dapat menemukan ekstensi yang bagus untuk Google Chrome di sini.

Mari kita asumsikan bahwa teks Anda harus mulai 200px dari tepi kiri layar, dan 200px dari tepi atas. Dalam hal ini, perataan horizontal Anda harus diatur ke kiri, dan perataan vertikal Anda ke atas.dan X Y Offset keduanya harus 200px.

uiM u4uAcvvj4hvZRUf fnnqrWLf33fJmOCX80XfbGNMZcvj1Xg3IVPi1B8iGS2GC5yeKsNZY BbB1bdTibsH6ADc5WMwqdbdkvc1otm2hSs7yNYLR8NpDS pwVADsEYCL4AK6WfrdRAaIVuzw

Saat Anda mengisi bidang ini, simpan slide Anda dan periksa di halaman Anda. Anda dapat menggunakan ekstensi penggaris untuk memastikan offset diatur dengan tepat. Terkadang, 200px yang Anda atur di backend tidak akan ditampilkan sebagai 200px di halaman Anda. Itu sebabnya pintar mengukurnya dengan penggaris ekstensi.

BGUkqFFobonuzSVmlZ tKbDageLdjP0Q5l8km4hw4GM68fAZUSVq3ci9G1XnrjvpWfDhBg7xbkyfw 26bF8T7j6qFvnYjtf75dvPVi HMJs8mHbP0CUYp8HwlLdYWsBEnJveywHuaDR6r4CWSQ

Sekarang Anda dapat mulai menyesuaikan lapisan teks Anda menggunakan semua opsi yang sama seperti yang kita lalui ketika berbicara tentang lapisan gambar. Anda dapat menambahkan animasi, menentukan visibilitas, membuat tindakan, dll.

Sangat menarik untuk dicatat bahwa Anda juga dapat memasukkan kode HTML ke bidang lapisan teks Anda. Berkat opsi ini, Anda dapat menyisipkan kode pendek yang berbeda dan membuat elemen HTML Anda sendiri menggunakan lapisan teks.

6. Memastikan Lapisan Anda Sepenuhnya Responsif

Salah satu hal pertama yang kami lakukan saat menyiapkan plugin Slider Revolution adalah menentukan opsi responsivitas global. Kemudian, kami mengaktifkan respons khusus untuk penggeser kami. Namun, opsi ini hanya memungkinkan untuk membuat slider responsif. Mereka tidak menjamin respons penuh. 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 dan memastikan semuanya terlihat bagus di perangkat Desktop, saatnya untuk menyempurnakannya untuk semua perangkat lain yang tersedia. Untungnya, tidak semua lapisan Anda perlu diedit untuk semua perangkat. Beberapa dari mereka akan terlihat bagus secara default. Tapi sekarang kami akan membahas apa yang dapat Anda lakukan untuk mereka yang perlu diubah.

Perangkat Desktop

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

Untuk menunjukkan kepada Anda bagaimana Anda dapat membuat lapisan Anda beradaptasi dengan berbagai perangkat, saya telah menambahkan semua lapisan saya ke slide saya. Katakanlah saya ingin mereka terlihat seperti ini di desktop:

ZzdpDkCwug KCfZRui5Q1gUcWu5P dD0bV2SyFAXxvE SqxFDbAK8sG xawBOJ

buku catatan

Ada dua cara untuk memeriksa tampilan slider Anda di perangkat lain. Cara pertama (dan lebih baik) adalah melihat situs web Anda dari perangkat yang sebenarnya. Namun, jika Anda tidak memiliki akses ke setidaknya satu perangkat dari setiap jenis, Anda juga dapat menggunakan opsi Mode Perangkat di Google Chrome DevTools.

Untuk mengaktifkan mode perangkat, cukup tekan F12 saat berada di Google Chrome dan kemudian klik ikon yang ditunjukkan di bawah ini:

Sekarang Anda dapat memilih perangkat yang ingin Anda tiru dari dropdown. Jika Anda tidak dapat menemukan perangkat tertentu, Anda dapat mengklik tombol edit dan kemudian pilih tanda centang di sebelah perangkat yang ingin Anda tampilkan di dropdown.

Saya sudah menyiapkan beberapa perangkat khusus, jadi mari kita lihat seperti apa tampilan slider saya di perangkat tersebut.

Inilah cara lapisan saya akan dirender di Mac:

cn0mOgvHngr2J jircNX0dJ 6f2wfkjwNxZzQRrtaB5mLuLh2bTOCsQMNe9 L8GvCf QCu1ThEvEbRNPaYZEKi9omg1bx

Dan inilah tampilannya di tablet horizontal:

Saya pikir lapisannya terlihat agak besar untuk layar yang lebih kecil ini. Apakah Anda setuju dengan saya atau tidak tergantung sepenuhnya pada preferensi pribadi Anda. Jika Anda ingin layer Anda ditampilkan dalam format yang lebih besar pada perangkat yang lebih kecil, itu tidak masalah. Namun, jika Anda ingin mengubah cara mereka merender dari perangkat ke perangkat, Anda dapat melakukannya dengan mudah. Ini hampir sama dengan mengubah pengaturan untuk Desktop. 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 mulai mengedit pengaturan responsivitas untuk laptop, notebook, dan tablet horizontal, Anda harus memilih ikon yang ditunjukkan di bawah ini:

R 4HyBmmdU21uu5p8JQABhQgHsYJXcMlyo2vS22uZ6QgYbwxcDCI7Xas9lh8qeDSdK8udkPY4WHOfTMrf7sSmBjAIMYlSJLcO9Q OjfnmzcgV0uiUwYaOOlCmxZaVzlibbGELudDtv jFy0ocQ

Selama ikon ini dipilih, Anda berada di editor untuk perangkat notebook. Pengaturan apa pun yang Anda ubah hanya akan ditampilkan saat penggeser Anda ditampilkan di buku catatan.
Untuk mengubah ukuran layer gambar, Anda cukup menambahkan lebar yang berbeda.

Ketinggian gambar akan secara otomatis disesuaikan agar sesuai dengan lebar yang Anda atur.
Sekarang simpan penggeser Anda, dan lihat tampilannya secara langsung. Jika ada yang terlihat tidak pada tempatnya, cukup kembali ke kerangka kerja, pastikan tampilan buku catatan dipilih, dan sesuaikan pengaturan dengan sempurna.

Tablet Vertikal dan Perangkat Seluler

Sekarang setelah Anda mengetahui cara kerja pengaturan responsivitas lapisan, Anda dapat dengan mudah mengubah pengaturan untuk semua perangkat. Untuk mulai mengedit tata letak slide Anda untuk tablet vertikal dan perangkat seluler, pastikan ikon yang sesuai dipilih di atas kerangka kerja.

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 hingga aman berada di dalam batas.

Dalam kasus saya, saya hanya menyesuaikan ukuran lapisan gambar hingga terlihat di ponsel:

DZvXWpi30WIFjd4utxZCP7bnfk59lOXgeDDndxImOh j oHA CDFABNok46MCwKXA 3zB9801xkSXOCmKzhvw9aEso2gAfkwGRTGcSyYY 2s1X4MSuNi7MH0 8L3MMOJhEotJPtc AcyYU3sw

Setelah semua lapisan Anda disesuaikan dengan semua perangkat, saya berasumsi Anda tidak ingin mereka hanya berdiri di sana, tidak bergerak. Baca terus untuk mempelajari tentang membuat animasi pertama Anda dengan Slider Revolution!

7. Menganimasikan Layer Anda

Kami akhirnya sampai pada fungsionalitas Slider Revolution yang paling kuat – menganimasikan layer kami. Di sinilah Anda bisa memamerkan kreativitas Anda sepenuhnya.

Garis Waktu Animasi

Kita mungkin bisa setuju bahwa tidak ideal untuk semua lapisan muncul di layar secara bersamaan. Kami ingin menambahkan sedikit variasi pada slide kami. Untungnya, Slider Revolution menyediakan alat animasi hebat yang disebut Animation Timeline. Itu dapat ditemukan tepat di bawah kerangka kerja kami.
Anda akan melihat bahwa nilai awal bingkai default untuk setiap lapisan diatur ke 0 milidetik. Ini berarti bahwa setiap lapisan akan muncul di layar 0 milidetik setelah halaman Anda dimuat. Durasi kemunculan default adalah 300 md, yang berarti bahwa lapisan membutuhkan waktu 300 md (atau 3 detik) untuk beralih dari tidak terlihat menjadi terlihat sepenuhnya. Untuk mengubah opsi default ini, pilih layer yang ingin Anda edit dan cukup masukkan nilai yang berbeda.

DWv2FhKHsamDdQGhRw09NbuSayc3QpNv EyIMqrGbaZeJTDcCuvuLkJKYmEnz103bXRVgN2mnSsdngbiSUbKlaJJB7kmN st

Sekarang, Anda ingin memastikan bahwa tidak butuh waktu terlalu lama untuk lapisan pertama Anda muncul. Rekomendasi saya adalah untuk tidak melebihi 300ms untuk nilai awal bingkai. Juga, jika Anda tidak ingin semua lapisan Anda muncul sekaligus, pastikan untuk menetapkan nilai awal bingkai yang berbeda untuk masing-masing lapisan. Misalnya, jika Anda mengatur agar lapisan pertama muncul pada 300 md, Anda mungkin ingin mengatur yang berikutnya menjadi 500 md, yang ketiga menjadi 700 md, dll. Jika menyangkut durasi, terserah Anda, tetapi saya biasanya bekerja dengan nilai antara 500 dan 800 milidetik.

Animasi Masuk

Setelah Anda menetapkan nilai awal bingkai dan durasi untuk semua lapisan Anda, saatnya untuk memilih jenis animasi yang masuk untuk lapisan Anda. Untuk melakukan ini, kita perlu kembali ke tab Animation di atas kerangka kerja kita. Seperti yang saya sebutkan sebelumnya, animasi default adalah Fade-in. Tetapi untuk tujuan tutorial ini, anggaplah Anda ingin gambar Anda masuk dari kiri ke kanan layar. Dalam hal ini, animasi yang ingin Anda pilih adalah Short-From-Left. Anda juga dapat menggunakan Panjang-Dari-Kiri, tetapi saya khawatir ini terlalu panjang secara default dan tidak terlihat bagus kecuali Anda mengeditnya dengan pengaturan khusus. Jadi mari kita pergi dengan Pendek-Dari-Kiri untuk saat ini.

Sekarang setelah Anda memilih jenis animasi yang diinginkan, Anda dapat mengubah easing-nya dari tarik-turun Animation Easing:

Lgsvwm47sTbVQjnxLIuX9ydXx7F5eecybnNKyRamqkk NwZ0En3ufmxqk0S8aNIE0XK 1nfZjo1EtaF4dGrqG okrNkEGgYr3AVhKfXznyvH4A8pbxHvB0BrHDHpWFPzYHRrTx8S 5PeHRH Ug

Preset easing yang berbeda akan menciptakan efek yang berbeda, jadi saya sarankan Anda mencoba beberapa dan melihat apa yang paling sesuai dengan kebutuhan Anda.

Animasi Keluar

Menambahkan animasi yang masuk hampir tidak perlu dipikirkan lagi, karena mereka membantu menciptakan kesan pertama yang hebat. Tapi, bagaimana dengan animasi keluar? Yah, saya sarankan Anda mendekati ini dengan hati-hati, karena mereka membuat lapisan Anda benar-benar hilang dari slide Anda. Memilih animasi keluar semuanya bergantung pada tujuan slide Anda dan kesan terakhir yang Anda inginkan pada penampil sebelum meninggalkan area pandang.

Opsi yang tersedia untuk animasi keluar cukup mirip dengan opsi untuk animasi yang muncul. Namun, untuk mengedit nilai Frame Start dan Duration untuk setiap layer, Anda sekarang harus mengklik tombol edit di akhir timeline animasi.

ALjnZeWBJJPMs2Uz0L04ST1Di0T liiUaNP6OQRyMgySvbPV3fUM1XhgG

Saat ini Frame Start diatur ke 9000ms. Ini karena durasi slide Anda adalah 9000ms secara default. Dengan Frame Start diatur ke 9000ms, layer Anda akan terlihat di layar sampai slide berubah. Untuk menghilangkannya sebelum akhir slide, cukup masukkan nilai yang lebih rendah ke bidang Frame Start.

Sekarang Anda dapat memilih jenis animasi keluar yang ingin Anda gunakan, serta easing-nya. Ini dilakukan di panel Animation, dan semua opsinya hampir sama dengan animasi yang masuk.

kHN1OLJTNYYH40EjUpUKfE3qc nc73t89zQvK1yylD0zWwZRTxzY8yvr3ApVNBWaMrwZZtg7NJ8zEtLaDG91gp4pS T2gCSDy62uX1oOSn3WUbBegqhjLTgaCrerc0h9mZZkheJNHFaR6nnHwg

Opsi Lanjutan

Jika Anda ingin menyesuaikan preset animasi default, Anda dapat melihat pengaturan bagian Lanjutan di bawah ini. Jadi, misalnya, jika menurut Anda titik awal untuk animasi Pendek-Dari-Kiri terlalu pendek, Anda dapat dengan mudah mengubahnya. Katakanlah kita ingin memulai 80px lebih jauh ke kanan: yang perlu kita lakukan adalah memasukkan 80px ke dalam bidang sumbu X.

UvLEfV62Nk3ZBQPzPqj8JQhzQZ gIyktfFhNhJaj9gAVOVYiJFsFZtYbekqZslGtnzixQPtnWlXO0OrtqtDPmDO6gYncyiqQzUynivcy2CT AT62uzTmqNalz8QySS7UuB9PetwO3 rbia9PpA

Jika Anda bertanya-tanya untuk apa bidang “Y” ketika animasi kami tidak ada hubungannya dengan sumbu y, berikut adalah penjelasannya: Jika, karena alasan tertentu, Anda ingin animasi muncul dari kiri dan diagonal, Anda cukup perlu memasukkan nilai di bidang sumbu Y. Jika Anda memasukkan nilai positif, lapisan Anda akan bergerak secara diagonal ke atas dan ke kanan. Di sisi lain, jika Anda memutuskan untuk memasukkan nilai negatif, lapisan akan bergerak dari bawah dan ke kanan layar.

Segera setelah Anda mengedit salah satu bidang ini, Anda dapat menyimpan animasi ini sebagai Animasi Kustom.

Jj2HNYFsbkiQcav7i W8Vv6fmwXWZ1sWmqq vZUH89VDYXyhtyxf vX VqFyqNj6B4QooN GMx4xiIGsF oxgQnU euhxBAz0IQk2pyK8lGJX5mwJCdKSqvgv4QwDHZ16D69Nx3mA

Sekarang lihat tab di bawah ini.

M16UWu4AdkZoB mDwBaTNTUURvNz2cyNPYEX3a1e3 RYKEjH6t2p0FDANub2veCSwIGKTHtZ4PTtr1VGmxTJS0 U BS5gCEa8DG1Vh 9kTu7v6HFreEv9294VaY1CPPDIIH4GZwAghGjYMkhDw

Ini hanya berguna untuk lapisan teks. Anda dapat menggunakan tab Char, Word, dan Line untuk membagi animasi yang diterapkan ke teks Anda berdasarkan huruf, kata, atau baris.

8Mz2oA1s0ZR9CUafNdhfM4YsYvo SylxqSMYiGfk1ML5CNlAd03sx9JpGx8C9C kDsZNt1 VgcSKvr01MitHk

Cara terbaik untuk melihat cara kerja opsi ini adalah dengan mencobanya.
Bidang yang terbuka setelah mengaktifkan salah satunya memungkinkan Anda menyesuaikan animasi. Untuk saat ini, saya hanya ingin mengubah arah animasi split. Jadi saya akan memilih opsi Mundur dari dropdown Arah Teks Animasi Split. Ini akan membuat teks saya muncul huruf demi huruf, dan dari sisi kanan layar ke kiri (mundur).

uhpX9EDMDG0WZeqW6zRGqHkD1dLLPl1kgGIY 5hQVQRv28GFsUjHz3uss8d2sInvd hlSPVfG 9i5

Animasi lingkaran (Loop Animation)

Slider Revolution juga memungkinkan Anda membuat animasi Loop. Ini dilakukan di tab Loop Layer. Di sini, Anda akan melihat bahwa Efek Loop dinonaktifkan secara default.

Anda dapat memilih dari delapan jenis animasi loop: Kustom, Pendulum Loops, Effect Loops, Wave, Wiggles, Rotating, Slide and Hover, dan Pulse. Selain pengaturan Kecepatan Loop dan Easing, setiap animasi loop memiliki serangkaian opsinya sendiri.
Animasi Pendulum membuat layer Anda berayun dari sisi ke sisi. Anda dapat mengatur derajat awal dan akhir, serta titik asal X dan Y. Derajat awal dan akhir menentukan derajat antara animasi yang akan terjadi. Titik asal X dan Y menentukan titik sumbu dari mana lapisan akan berputar dan dinyatakan dalam persentase. Jika Anda ingin titik sumbu berada di tengah lapisan, Anda harus mengatur sumbu X dan Y menjadi 50%.

8Ao6ZOgAzDKsPGo35DzDkxGKdLYh16GBKtvxwniOcKQ4H3b4TaXBeqK 24cecaB8jwY1FPGvIT5VkGyWFet10IRFpMO5d4ATmbdDXBm6upyBSod6XgePwhXeEHkXWnBcPlhMr882TOoBy8zucw

Effect Loops memungkinkan kita memilih dari beberapa efek untuk layer kita – Grayscale, Blink, Flattern, dan Lithing. Masing-masing mencerminkan secara berbeda pada lapisan yang berbeda, jadi Anda harus mencoba semuanya dan melihat mana yang paling cocok dengan lapisan Anda.

mDLSrUNJKNSNkXldCzIEJU4K57uGqR804fee1IBzezFXORwoLG7dwidJ0SGvhVGOg3tJve50K4s92wXDqZnu RTTy1PRUHQ7l0My44K9aLhRJNb2Em6AIA24EzmCj5kOGIvXpvJxouc w1I4Ng

Animasi Gelombang membuat lapisan Anda berputar dalam gerakan seperti gelombang. Dengan kata lain, itu tidak berputar di sekitar sumbunya sendiri, tetapi di sekitar sumbu di luar lapisan yang sebenarnya. Anda dapat mengatur Rotasi X dan Y Point yang menentukan posisi sumbu di mana layer akan berputar, Start Angle yang menentukan posisi awal animasi melingkar, dan Radius, yang menentukan orbit rotasi.
Loop Wiggle akan membuat layer Anda bergoyang dari sisi ke sisi – dari atas ke bawah, dari kiri ke kanan, dan sebaliknya. Anda dapat memilih cara yang Anda inginkan untuk menggoyangkan lapisan Anda dari tarik-turun.

gCFUOkMQ03MPkaNZWgfMxFCo6NiBvTy2oyL3TF5ugSPnGprwONlEw

Seperti namanya, Rotating loop membuat layer Anda berputar di sekitar titik sumbu yang ditetapkan. Namun, lapisan Anda tidak akan berputar secara default. Ini akan berputar dan membuat lingkaran penuh jika Anda memilih item pertama dari dropdown Rotating – item Rotate.

m6jxb1LTrZq3SSR3IW6zvPBycnbLWQMz 7geea6Q OZJ4MJTLLYTJIC1LBOKgZN AT3pj9x7IOv2CaCGy6gaKRMTuCKafXGE2 LSkQRZ2Kr0 zEhf7L d m cjOkcNFWKrjwqA3C6ubpbS8riw

Jika Anda ingin layer Anda bergerak dari kiri ke kanan, kanan ke kiri, atas ke bawah, diagonal, dll. Anda dapat menggunakan animasi Slide and Hover. Di sini, Anda dapat menentukan posisi awal dan akhir untuk animasi di bidang Start X Offset, Start Y Offset, End X Offset, dan End Y Offset. Jika Anda ingin animasi dimulai dari posisi awal layer, Anda harus membiarkan 0 di kedua bidang Start Offset. Untuk membuat layer Anda bergerak dari posisi awal, katakanlah, 100px secara horizontal, Anda harus memasukkan 100 di bidang End X Offset. Yang terbaik adalah bermain-main dengan pengaturan offset awal dan akhir, untuk merasakan cara kerjanya.

CNB8XXw40U7B0dA8TitNmk0Z1DgJ Ul3dB8DB 3Humtba8CYwMw4gCMxQY9Qam 18spL8 e8p7Ob743Mti7sFaILofsmzgT b27D6tMfENwKjKyC eeBilbs4zwaE ikv7Ry7w4qmpkyAkaWnw

Animasi Pulse membuat layer Anda terus memperbesar dan memperkecil. Anda dapat menentukan 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% dari ukurannya dan memperbesar hingga 100% dari ukurannya, lalu kembali ke 50%, dll. Jika Anda ingin layer Anda memperbesar di atas 100% dari ukuran, cukup masukkan nilai yang lebih besar dari 1 di bidang Zoom End.

Pikiran Akhir

Nah, itu saja untuk tutorial ini. Saya harap Anda menemukan hal yang berguna. Masih banyak lagi di Slider Revolution, dan saya akan kembali dengan tutorial yang lebih canggih di masa mendatang. Tetapi Anda sekarang setidaknya harus dapat menemukan jalan di sekitar pengaturan dasar dan mulai membuat bilah geser yang spektakuler untuk situs web Anda.
Jika Anda memiliki pemikiran atau saran tentang artikel ini, jangan ragu untuk memberi tahu saya di bagian komentar.

Jika anda tertarik mencoba fitur luar biasa dari Slider Revolution, anda bisa mengunduhnya melalui link ini.

Leave a Reply