Loncat ke Konten Utama

Slider Revolution: konfigurasi slider di WordPress

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 600.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

Sejak awal seri tutorial ini didedikasikan untuk plugin WordPress slider Revolusi, kami belajar untuk unduh dan pasang plugin. Kami kemudian menemukan antarmuka dan fungsi yang berbeda. Sekarang, mari kita lanjutkan dengan menunjukkan kepada Anda konfigurasi a Slider.

Jika Anda seorang pemula dan sedang mencari sumber daya untuk memulai; Anda akan menemukan di sini semua yang Anda butuhkan untuk memulai. Dan jika Anda menemukan pembuatan blog baca Cara Membuat Blog WordPress dengan Mudah: Panduan & Tuto

Karena itu, mari kita temukan secara konkret apa itu slider.

Apa itu slider?

Slider adalah komponen HTML. Ya saya tahu, katakan begitu, itu tidak banyak maju. Jadi slider adalah fitur yang memungkinkan Anda untuk menampilkan informasi lain-lain secara longgar (atau tidak). Informasi ini dikelompokkan berdasarkan " meluncur ", Yang merupakan entitas" slider "dan yang dapat terdiri dari gambar, teks video, tautan, dll ...

yang " slider "Karena itu mengandung" slide (Setidaknya 1), dan slide ini mengandung elemen multimedia (gambar, video, musik, teks) yang dapat dianimasikan atau interaktif (bereaksi terhadap tindakan pengguna).

Ucapan : Anda dapat menerjemahkan " slider Dalam " slide interaktif dan dinamis '.

Slider Revolution memungkinkan kita melakukan itu, dan kita akan mulai tanpa penundaan lebih lanjut.

Jika Anda belum membuat situs web dan sedang mencari tema WordPress yang secara alami mengintegrasikan plugin WordPress yang kuat ini, daftar tema WordPress premium ini akan sempurna.

Membuat slider: Konfigurasi pertama

Untuk memulai, Anda harus mengklik menu « slider Revolusi Di dasbor WordPress Anda.

Sekarang klik pada item tersebut baru Slider Dan Anda akan datang ke antarmuka konfigurasi slider.

baru-slider-slider-revolusi-tutorial

Antarmuka konfigurasi penggeser dapat menjadi sesuatu yang menakutkan, tetapi jika Anda mundur Anda akan memahami fitur-fiturnya lebih baik. Anda mungkin memperhatikan bahwa antarmuka ini terdiri dari dua bagian. Yang pertama di sebelah kiri terdiri dari area yang berbeda 5, dan yang kedua di sebelah kanan terdiri dari area kecil 6. Di atas Anda memiliki bilah alat, yang memungkinkan Anda untuk:

  • Kembali ke daftar slider « semua Sliders »
  • Akses pengaturan slider (ini adalah jendela tempat Anda berada)
  • Antarmuka pengeditan slide
  • Sebuah tombol backup
  • Tombol pengeditan slide
  • Tombol pratinjau slider
  • Tombol peluncur penggeser
  • Sebuah tombol untuk kembali (bis) Untuk daftar slider

bar alat-revolusi-slider

Sekarang saya akan menjelaskan setiap bagian di kolom kiri.

Plugin WordPress ini menangani banyak gambar, yang dapat memperlambat pemuatan situs web Anda. Temukan Mengapa Anda perlu mulai mengoptimalkan blog WordPress Anda dengan gambar

bagian "Sumber Konten"

konten-sumber revolusi-slider

Bagian ini memungkinkan Anda untuk mengkonfigurasi sumber slider. Memang, di sini Anda dapat memutuskan untuk membuat:

  • Slider klasik, di mana Anda harus mengkonfigurasi sendiri semua animasi
  • Slider artikel, di mana ruang gerak Anda sangat terbatas
  • Slider artikel tertentu yang dapat Anda pilih
  • Slider dari umpan berita Flickr
  • Slider dari feed Instagram
  • Slider pada produk WooCommerce
  • Sebuah slider pada pakan Twitter
  • Penggeser di pos Facebook
  • Sebuah slider di YouTube Publikasi
  • Dan slider pada publikasi Vimeo

Perlu dicatat secara sepintas bahwa: Slider Revolution adalah plugin yang kuat yang memungkinkan untuk menyorot produk di toko online. Temukan Tema 10 WordPress untuk membuat toko online dan memamerkan pakaian Anda

Yang mengatakan, kita akan puas mempresentasikan cara membuat slider klasik, karena itu adalah yang paling digunakan, yang paling sulit untuk dikuasai dan yang paling luar biasa dalam efeknya. Dengan latihan, Anda akan berhasil membuat konfigurasi sendiri di slider lain. Jika ada masalah, jangan ragu untuk kembali dan memberikan komentar di sini. Jadi tinggalkan pilihan " Slider default »Aktif.

Bagian Judul & Slider shortcode

Anda mungkin sudah bisa menebaknya. Bagian ini memungkinkan Anda untuk menentukan judul bilah geser dan kode pendek yang akan menyertainya (tidak ada yang benar-benar bagus).

judul dan shortcode-du slider

Bagian "Pilih jenis slider"

pilih-a-kind-of-slider-slider-revolusi

Bagian ini memungkinkan Anda untuk menentukan struktur dasar slider. Memang, Anda memiliki pilihan 3 untuk Anda pilih yang memungkinkan Anda:

  • Untuk opsi pertama tentukan slider standar dengan lebar disesuaikan dengan ruang yang tersedia dan memiliki elemen dasar seperti tombol navigasi.
  • Untuk opsi kedua, Anda dapat memutuskan untuk menerapkan gaya dinamis dan interaktif, tanpa tombol navigasi dan jauh lebih mengesankan daripada opsi sebelumnya. Opsi ini disebut "adegan pahlawan" karena di sini Anda akan lebih menekankan pada animasi dan interaksi.
  • Opsi terakhir, menawarkan gaya yang jauh lebih klasik dengan pengguliran gambar yang disederhanakan dari kiri ke kanan dalam berbagai animasi.

Ucapan : Setiap kali Anda memilih opsi, Anda memiliki bagian "Muat preset dari Slider Type iniYang menawarkan Anda variasi lanjutan dari jenis slider yang telah Anda pilih.

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

mengubah-of-jenis-of-slider

Saya tidak akan bisa menjelaskan semua variasi, tetapi Anda akan dapat menarik kesimpulan dari gambar yang tersedia. Misalnya, untuk tipe slider " Standar Anda memiliki variasi keempat " Thumbs Bawah diri ", Yang memungkinkan Anda membuat slider dengan gambar mini di bagian bawah dan memiliki animasi gulir otomatis.

thumbs-bottom diri slider-revolusi-tutorial

Bagian Tata Letak Slide

slider-layout-revolusi-slider

Bagian ini memungkinkan Anda untuk mengatur tata letak untuk slider Anda. Jadi kamu bisa pergi ' Revolusi Slider »Secara otomatis memilih lebar yang akan diterapkan pada slider, pilih untuk menerapkan lebar penuh ke slider atau gunakan slider dalam mode layar penuh.

Tergantung pada opsi mana yang Anda pilih, Slider Anda akan berbeda pada beberapa perangkat. Anda memiliki di bawah bagian konfigurasi grid sesuai dengan perangkat (ponsel, desktop, dll.). Ingatlah bahwa mengonfigurasi kisi memungkinkan Anda mengubah margin internal masing-masing slider.

Baca juga 6 kiat untuk mengoptimalkan desain seluler blog Anda

Di bagian paling bawah dari bagian ini, Anda dapat memilih untuk mengaktifkan visibilitas overflow, mengaktifkan retensi tampilan radio, dan mengatur ketinggian minimum.

Sesuaikan, Bangun & Terapkan bagian

Bagian ini sebenarnya tidak memiliki opsi untuk plugin. Ini menawarkan Anda beberapa tautan cepat ke bagian-bagian penting.

menyesuaikan-build-Melaksanakan

Kami sekarang akan melanjutkan dengan kolom kedua di sebelah kanan.

Bagian Pengaturan Umum

Bagian ini memberi Anda beberapa pengaturan yang akan berlaku untuk slider. Ini adalah bagaimana Anda akan dapat:

Di tab "Tampilan slide"

  • Nonaktifkan slider saat flyover
  • Hentikan slider setelah jumlah gulungan yang ditentukan
  • Perlihatkan slide secara acak
  • Lingkarkan slide
  • Nonaktifkan atau hentikan slider pada ukuran perangkat tertentu
  • Opsi terakhir "Tunggu revapi.revstart ()" tidak akan berguna.

Di tab "Kesalahan"

Anda dapat mendefinisikan:

  • Karakter yang dipilih dari lapisan
  • Tentukan pengidentifikasi slider (ini dilakukan secara otomatis)
  • Durasi minimum antar slide
  • Batas waktu sebelum inisialisasi
  • Transisi antara slide
  • Durasi transisi dinyatakan dalam mikrodetik
  • Ukuran gambar
  • Posisi CSS dari gambar latar belakang
  • Ulangi gambar latar belakang, jika gambar ini tidak cukup besar
  • Aktivasi opsi video Muette Yang memungkinkan Anda untuk menentukan jenis animasi, posisi dalam XY (ya, apa yang Anda pelajari ketika Anda harus menggambar fungsi matematika), dan elemen lainnya.

Tab bilah kemajuan

Semua opsi di bagian ini adalah untuk bilah progres, yang dapat Anda aktifkan dan sesuaikan.

Tab 1er Meluncur

Bagian ini memungkinkan Anda untuk mengaktifkan slide alternatif pertama. Ini akan memungkinkan " slider Untuk memuat " meluncur Dari pilihan Anda terlebih dahulu. Ingat itu " slide Merupakan elemen yang dapat diidentifikasi.

Bagian "Tata Letak & Visual"

tata letak-dan-visual

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

Tab "Penampilan"

Bagian ini memungkinkan Anda untuk mengonfigurasi tampilan slider. Secara khusus, Anda dapat menentukan untuk menampilkan bayangan di bawah slider (sangat berguna jika Anda memilih slider standar, dengan margin rendah yang signifikan).

Anda juga dapat memilih untuk menampilkan overlayer yang ditutupi dengan titik-titik transparan (ini akan membuat slider Anda sangat orisinal, tetapi jika Anda ingin menampilkan informasi yang perlu dibaca secara menyeluruh, Anda harus menggunakannya tanpa).

Kemudian Anda memiliki latar belakang slider, margin internal dan gambar di latar belakang (apa yang perlu Anda ketahui di sini adalah bahwa gambar latar belakang pada tingkat ini akan ditampilkan pada semua Anda slide).

tab "Spinner"

Tab ini memungkinkan Anda untuk menentukan animasi saat memuat slider, tidak lebih.

tab "Mobile"

Tab ini memungkinkan Anda untuk mengelola tampilan slider di ponsel. Anda harus tahu bahwa lalu lintas seluler penting dan karenanya Anda tidak boleh mengabaikannya. Anda akan memiliki kemungkinan untuk menyembunyikan slider jika dimensi ponsel (lebar) kurang dari angka yang telah Anda tentukan (dalam piksel).

tab "Posisi"

Ini memungkinkan Anda untuk menentukan posisi slider relatif terhadap halaman. Saya akan cenderung mengatakan, sehubungan dengan lokasi di mana ia berada. Opsi ini tidak perlu diubah, karena saya kira kita semua ingin slider untuk dipusatkan.

Bagian "Navigasi"

Bagian ini memungkinkan Anda untuk mengaktifkan tombol navigasi di antara slide pada "slider" Anda. Anda memiliki opsi navigasi 6:

  • Panah
  • kutu
  • tab
  • thumbnail
  • Efek touchdown pada perangkat seluler
  • Dan navigasi dengan tombol panah

Setiap opsi, ketika diaktifkan, akan memungkinkan Anda untuk mengonfigurasikan posisi elemen navigasi atau prinsip operasinya (pengaturan standar biasanya cukup).

konfigurasi-navigasi-revolusi-slider

Bagian "Pengaturan Korsel"

Bagian parameter-du carousel-revolusi-slider

Bagian ini hanya muncul ketika Anda memilih jenis " Carousel Slider Dan memungkinkan Anda mengkonfigurasi opsinya. Anda akan dapat:

  • Aktifkan pengguliran tak terbatas
  • Tentukan ruang di antara slide, jika Anda tidak ingin slide menyentuh
  • Tetapkan batas bulat dalam piksel
  • Tetapkan margin atas tinggi (padding-top)
  • Tetapkan margin atas rendah (padding-bottom)
  • Jumlah elemen yang terlihat oleh "slide"
  • « elemen strech"Memungkinkan Anda untuk meregangkan elemen sehingga menempati seluruh lebar" slider »

Keamanan adalah elemen penting dalam ketersediaan situs web Anda dan salah satu teknik yang akan melindungi Anda dari serangan atau bug serius adalah dengan mencadangkan blog Anda secara teratur. Temukan kami Plugin Cadangan Blog WordPress 5

Bagian "Parallax & 3D"

Di sini Anda dapat mengaktifkan opsi " 3D Di slider Anda.

Bagian Masalah & Penanganan

Bagian ini memungkinkan Anda untuk mengelola kompatibilitas dengan perangkat lama. Anda dapat menyederhanakan slider pada " IOS4 dan Internet Explorer 8 '.

Jika tidak, Anda dapat memilih untuk menampilkan gambar alternatif, ketika browser tidak mendukung slider.

Bagian Google Fonts

Fitur ini memungkinkan Anda mengelola Google Font yang Anda unduh dan menerapkannya pada bilah geser.

Setelah Anda menentukan parameter slider Anda. Yang harus Anda lakukan adalah mengklik tombol simpan.

save-a-slider-slider-revolusi

Jika plugin WordPress Slider Revolution bukan favorit Anda dalam membuat slider di situs web WordPress, berikut adalah dua alternatif yang menawarkan fitur serupa.

1. LayerSlider

LayerSlider adalah plugin WordPress premium untuk animasi serbaguna. Ini menawarkan Anda kemampuan untuk membuat tayangan slide dan galeri gambar dengan efek memukau, halaman arahan yang indah, dan halaman blokir, atau bahkan situs web yang lengkap.

Ini adalah salah satu alternatif yang mampu bersaing erat dengan Slider Revolution. Editor visual drag-and-drop-nya memungkinkan semua orang untuk mulai menggunakannya dengan cara yang sangat intuitif. Tidak diperlukan keterampilan teknis atau coding. Pilihan model impor yang terus berkembang adalah titik awal yang ideal untuk proyek baru dan mencakup semua kasus penggunaan umum. Mereka dibuat dengan hati-hati, dan dapat dengan mudah disesuaikan untuk memenuhi semua kebutuhan.

Dukungan luar biasa dan pembaruan yang sering dilakukan memastikan Anda mendapatkan hasil maksimal dari pembelian Anda.

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

Pergi lebih jauh dengan plugin WordPress yang kuat ini dengan membaca artikel ini Layer Slider: Plugin WordPress untuk membuat slider

Download | Demo | Hébergement Web

2. Slider WP1

WP1 Slider adalah plugin WordPress serbaguna. Mudah digunakan dan memiliki semua fitur berguna yang Anda perlukan untuk membuat tayangan slide yang indah. Sebagian besar penggeser penggeser terlalu teknis dan memerlukan banyak waktu untuk mengonfigurasinya, tetapi WP1 Slider dirancang untuk yang bukan pemrogram dan menawarkan opsi yang luar biasa.

Di antara ini Anda akan menemukan:dukungan efek Kenburn, 6 model yang berbeda dari transisi slider, thedukungan shortcode, a conception slide dengan drag dan drop, cpelecehan cepat dan SEO yang sangat baikBerbagi dukungan di berbagai jejaring sosial, iintegrasi video YouTube dan Vimeo, tata letak esepenuhnya responsif, dukungan WooCommerce dan lainnya.

Download | Demo | Hébergement Web

Sumber daya lain yang direkomendasikan

Berikut ini beberapa sumber yang kami sangat rekomendasikan:

Kesimpulan

Voila! Itu saja untuk presentasi ini tentang konfigurasi plugin WordPress Slider Revolusi. Kami akan melanjutkan tutorial di masa mendatang, di mana kami akan membahas desain slide.

Namun, Anda juga akan dapat berkonsultasi dengan kami ressources, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.

Tetapi, jika Anda memiliki komentar atau saran dalam masalah ini, dia akan diterima di bagian komentar. Terutama bagikan artikel ini pada Anda yang berbeda jaringan sosial.

Artikel ini berisi komentar 29
  1. Halo, saya membuat 2 model yang berbeda. Saya sekarang ingin pindah dari kursor online saya saat ini. Saya tidak bisa melakukan itu. Adakah yang bisa memberikan saran sihir? Terima kasih sebelumnya!

  2. Saya membuat slider4 dan menempatkan 3 diaspositif di slider ini. Tetapi di halaman rumah saya, revolusi slider hanya menampilkan satu slide dan tidak menunjukkan yang lain. Ini hanya menampilkan slide pertama. Misalnya, ketika saya mengambil slide terakhir kembali ke tempat pertama, revolusi slider menampilkannya dan meninggalkan yang lain

  3. Halo,

    Saya ingin mewujudkan slider dinamis, apakah Anda memiliki kartu mengenai realisasi slider dengan efek dengan overflight mouse.

    merci

  4. Halo saya mengunduh template slider, saya bisa mengedit teks dan gambar, saya pada slider slider premium, namun: kita dapat melihat teks "Slider Revolution ..." + tautan ke jejaring sosial mereka di slide pff. Dan saya tidak dapat menemukan atau menghapus teks ini. Terima kasih sebelumnya

  5. halo saya punya masalah kecil ketika saya menyadari slider dan saya ingin mengubahnya pada teks seluler yang sudah saya tambahkan pada slider tidak muncul di slider ponsel mengapa (pada saat modifikasi) ???

  6. Halo,
    Saya mengalami masalah dengan Revolution Slider. Saya tidak dapat menemukan solusinya sehingga foto saya tidak dipangkas secara vertikal.
    Haruskah dia memiliki kotak centang?
    Terima kasih atas kembalinya kamu
    Norbert

  7. Halo,
    pada revolusi slider Saya ingin slide saya untuk memulai hanya ketika mouse atau gulir memicu itu. Apakah mungkin?
    Parameter mana di penggeser yang diaktifkan?
    Merci beaucoup.

    dapatkah kita melakukan keduanya, yaitu memulai slider dengan melewatkan mouse / scroll dan juga menempatkan penundaan inisialisasi yang saya lihat dalam parameter umum untuk menghindari semua kemungkinan kasus secara bersamaan dan pastikan pengunjung situs melihat penggeser ini

    merci beaucoup

  8. bonjour,

    pada revolusi slider Saya ingin slide saya untuk memulai hanya ketika mouse atau gulir memicu itu. Apakah mungkin?
    Parameter mana di penggeser yang diaktifkan?
    Merci beaucoup.

    dapatkah kita melakukan keduanya, yaitu memulai slider dengan melewatkan mouse / gulir dan juga menempatkan penundaan inisialisasi yang saya lihat dalam parameter umum untuk menjaga semua kemungkinan kasus secara bersamaan dan berada di bahwa pengunjung situs melihat penggeser ini

  9. Halo, selamat malam, saya punya keraguan.
    Saya memiliki beberapa gambar di Slider Revolution dan saya ingin menyembunyikannya di versi seluler dikurangi yang pertama. Saya melihat bahwa plugin yang sama memiliki kemampuan untuk menyembunyikan gambar yang Anda inginkan di perangkat yang berbeda, tetapi masalahnya adalah hanya menyembunyikan gambar karena terus mendeteksi bahwa ada beberapa elemen karena bilah waktu terus memuat dan meninggalkan layar putih ketika lompatan pertama. Bagaimana saya bisa benar-benar menyembunyikan gambar?

    Terima kasih banyak

  10. Hai, saya ingin bertanya kepada Anda bagaimana menempatkan kursor di bawah bilah menu bar navigasi horizontal saat itu terjadi di situs Apple.com di mana menu di atas dan tepat di bawah kursor berada (menu tampak transparan
    merci
    andrea

  11. Halo,

    Saya ingin membuat penggeser yang berisi gambar 2 atau 3 yang merupakan kutipan tertulis. Masalah saya adalah ketika saya menulis, kutipan terlalu panjang dan melebihi foto, hasilnya tidak muncul secara penuh. Namun ada ruang di seluruh gambar. Bagaimana cara melakukannya?

    Judul untuk setiap slide wajib diisi. Secara default, saya memasukkan "1 quote" dan seterusnya. Tetapi judul ditampilkan di slide ... Misalnya, "1 Kutipan" ditampilkan dalam kecil tepat pada slide pertama saya. Bagaimana cara menghindari judul-judul yang muncul?

    Saya berterima kasih sebelumnya atas jawaban Anda, Anda akan membantu siswa untuk proyek yang dipertaruhkan!

  12. Halo,

    Saya punya masalah dengan slider ini dan meski banyak penelitian saya belum menemukan solusinya. Dapatkah Anda menyelamatkan saya?
    Saya mengonfigurasikan slider di beranda saya, tanpa cacat, tidak masalah. KECUALI bahwa saat mouse diposisikan di atasnya, tidak mungkin dilakukan scroller. Saya harus meletakkan mouse dari slide untuk bisa menyusuri bawah (up ternyata berhasil). Ini mengganggu saya sedikit karena saya takut beberapa orang tidak mengerti bahwa Anda harus melepaskan mouse dari slide untuk melakukannya .. (www.sarah-scaniglia.com). Saya mencari semua setting tapi saya tidak menemukannya ... dan saya bukan ahli web.

    Jika Anda menemukan solusinya Anda hebat

    1. Halo,

      apakah kamu sudah mencoba ini?

      1. Nonaktifkan plugin lain kecuali Revolution Slider dan tes lagi.

      2. Aktifkan theme Wordpress default lalu test

      Ini akan memberi tahu Anda jika masalahnya berasal dari tema atau konflik dengan plugin lain.

      Juga periksa apakah Anda memiliki plugin versi terbaru.

  13. Halo,

    Bisakah Anda menjelaskan kepada saya bagaimana membuat "Slider" dengan satu slide di dalamnya karena ketika saya mencoba semuanya menghilang di akhir animasi. Saya menempatkan "tidak ada transmisi" di "slide animation" tetapi tidak ada yang membuatnya ...
    Merci par avance tuangkan votre aide.

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
9 saham
saham2
menciak1
Register6