Loncat ke Konten Utama

Cara membuat tampilan slide dengan Slider Revolution 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]

Kita sekarang dapat memulai hal-hal serius. Pembuatan slider aktif Slider Revolusi bisa sangat membosankan pada awalnya. Anda akan kehilangan arah, karena Anda ingin tahu di mana elemen ini atau itu.

Anda akan menyingkirkan Slider Revolution dengan berlatih dengan kebiasaan dan juga membaca tutorial ini.

Selama tutorial kami sebelumnya, kami menemukan caranya:

Dan sekarang kita telah mengatur slider kita, kita akan membuat slide »Dari« slider '.

Cara mengendalikan editor "Slide"

Pada prinsipnya, setelah menyimpan konfigurasi slider, Anda mengakses ke antarmuka baru yang memperkenalkan Anda ke editor " slide '.

editor-in-slide-revolusi-slider

Anda akan melihat di bagian paling atas bilah alat yang sama yang memungkinkan Anda untuk kembali ke daftar "slider atau slide", ke parameter slider dan preview slider.

Temukan juga milik kami Plugin 10 WordPress yang memungkinkan Anda untuk mengevaluasi artikel di Blog Anda

Revolusi-slider-bar doutil-edisi-of-slide

Di bagian bawah, kami memiliki bagian baru yang memungkinkan kami untuk melihat, lapisan global, "slide" yang berbeda dan tombol untuk menambahkan yang baru " meluncur '.

penciptaan-of-slide-tombol-slider-revolusi

Dengan mengarahkan tombol slide, Anda akan melihat bahwa opsi baru ditampilkan. Opsi-opsi ini cukup jelas dan mudah dipahami (duplikat, tambahkan ke templat untuk menggunakannya kembali nanti dan hapus slide).

Pilihan-penciptaan-slide-revolusi slider

Dengan mengarahkan tombol tambah slide, Anda akan melihat opsi lain yang memungkinkan Anda untuk menambahkan slide kosong, menambahkan beberapa slide, menambahkan slide dari template (model).

penciptaan-of-slide-opsi-revolusi-slider

Saat ini, Anda berada di slide 1, itulah sebabnya itu disorot pada daftar slide. Jika Anda membuat slide baru, itu akan disorot di tempat slide pertama.

kedua-slide-penciptaan-dun-slider-slider-revolusi

Slider Revolution pada level ini adalah dasbor nyata. Jika saya menjelaskan semuanya kepada Anda, Anda tidak akan mengerti banyak, jadi saya akan menghindari berbicara tentang fitur yang dapat membingungkan dan tidak penting.

Baca artikel kami di 6 plugin kompresi gambar WordPress untuk Blog Anda

Setelah memilih slide, Anda dapat mulai mengedit di bagian berikut. Bagian ini terdiri dari beberapa tab (7) yang memberi Anda akses ke berbagai fitur.

Bagaimana cara menambahkan gambar latar belakang dalam sebuah adegan

Hal pertama yang ingin Anda lakukan pertama adalah menambahkan latar belakang ke slide kami. Di sini Anda memiliki pilihan antara: Gambar latar belakang (dari perpustakaan media Anda), URL eksternal yang menunjuk ke gambar, latar belakang transparan yang akan menggunakan warna yang diusulkan oleh tema WordPress, warna tetap, video Youtube, Vimeo atau HTML5. Kami akan memilih latar belakang " gambar '.

LATAR BELAKANG gambar-contoh

Anda dapat menemukan banyak gambar gratis di web. Lakukan pencarian di Google.

Gambar-kembali rencana-revolusi-slider

Ketika Anda menambahkan gambar, ini berlaku segera di pratinjau slide dan dalam "adegan".

Szene-revolusi-slider

Cara menambahkan elemen dalam sebuah adegan

Sekarang kita memiliki pemandangan yang didekorasi dengan baik, kita akan menambahkan elemen. Setiap elemen yang Anda tambahkan ke adegan dianggap sebagai layer atau layer. Fitur lapisan ini akan membantu Anda mempercayai saya.

Untuk menambahkan item ke adegan, arahkan kursor tambahkan layer '.

fly-add-layer-slider-revolusi

Anda akan melihat bahwa Anda dapat menambahkan beberapa elemen yang berbeda termasuk: teks / HTML, gambar, audio, video, tombol, bentuk, objek dan impor elemen.

Kami akan mulai dengan menambahkan gambar transparan Snoopy the little puppy.

lucu-snoopy-png

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]

Kemudian tambahkan gambar ini dalam adegan, dan Anda akan memiliki sesuatu seperti ini:

Contoh-slider-slider-revolusi

Anda akan melihat bahwa di empat sudut gambar adalah kotak kecil. Kotak ini memungkinkan kita untuk mengubah ukuran gambar, karena dalam hal ini Snoopy menempati banyak ruang.

Mengubah ukuran dilakukan oleh " menyeret ". Untuk mengubah ukuran sambil menjaga proporsi, tahan tombol " Mei Dari keyboard Anda saat mengubah ukuran.

Lihat juga kami Plugin 10 WordPress yang akan membuat Anda menjadi Blogger yang lebih baik

baru-representasi-snoopy-revolusi-slider

Sekarang Snoopy terlihat seperti ini, lebih pas. Anda juga dapat membalik gambar menggunakan cahaya di kanan atas setiap gambar seperti ini:

rotasi-DIMAGE-revolusi-slider

Cara memposisikan elemen dengan kotak bantuan

Kotak bantuan adalah elemen berharga yang membantu memposisikan elemen dengan lebih baik. Anda dapat mengaktifkan kotak bantuan di kiri bawah panggung.

jaringan daide-revolusi-slider

Kotak ini memiliki ubin dengan ukuran berbeda, semakin kecil ukurannya, semakin tepat Anda dalam penempatan elemen.

Investasi-of-gambar

Cara menambahkan animasi

Ada jenis-jenis animasi 3 di Slider Revolution: animasi masukan, animasi selama (keberadaan elemen dalam adegan) Dan animasi akhir.

Lihat juga kami 6 plugin kompresi gambar WordPress untuk Blog Anda

Untuk menambahkan animasi ke suatu elemen, Anda harus terlebih dahulu memilihnya dengan mengkliknya (ketika sebuah elemen dipilih, elemen tersebut dibingkai oleh garis putus-putus dengan sudut-sudut yang dapat diubah ukurannya).

Jadi klik Snoopy, naik ke halaman dan klik pada tab « animasi '.

animasi-slider-revolusi

Pada gambar sebelumnya, saya memiliki animasi input berwarna biru dan animasi output berwarna merah.

Untuk mengubah animasi, klik pada daftar drop-down yang terletak setelah ikon running man.

icon-animasi-slider-revolusi

Anda kemudian memiliki berbagai macam animasi yang Anda inginkan. Saya serahkan kepada Anda untuk memilih animasi yang ingin Anda tentukan untuk entri elemen. Untuk bagian saya, saya memilih " easeOutElastic Untuk mendapatkan hasil ini:

Animasi-hidangan-snoopy

Di sini untuk Anda 4 plugin WordPress untuk meningkatkan footer blog Anda

Lebih jauh ke kiri, Anda dapat menentukan durasi animasi dan mode animasi yang harus Anda tinggalkan " Tidak ada perpecahan Karena opsi lain hanya berlaku untuk teks, bukan gambar.

konfigurasi-gundukan-animasi-slider-revolusi

Lire aussi Cara menyembunyikan judul artikel dan halaman WordPress

Sekarang, saya ingin mengapung Snoopy, untuk itu, buka " Lingkaran Dan pada pilihan tarik-turun, pilih " Gelombang ". Sekarang Snoopy mengapung:

snoppy-apung

Cara mengonfigurasi visibilitas elemen

Snoopy saya mengapung, tetapi saya tidak ingin terlihat di ponsel. Jadi klik " jarak penglihatan Dan pada ikon Smartphone, pastikan tidak aktif:

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]

visibilitas-unsur-revolusi-slider

Cara menyesuaikan perilaku elemen

Untuk mengoptimalkan pemuatan slider, Anda mungkin ingin menunda pemuatan gambar. Ini dilakukan di tab " laku Dengan opsi " malas Memuat ". Anda bahkan dapat memaksa elemen responsif.

perilaku-elemen-revolusi-slider

Cara membuat pemicu khusus pada suatu elemen

Tindakan memungkinkan Anda untuk mengaitkan pemicu dengan tindakan tertentu. Untuk menambahkan pemicu, klik pada tab tindakan Kemudian tombol "+".

add-a-shutter button

Ada beberapa jenis pemicu 3:

  • klik adalah tindakan mengklik mouse
  • Input mouse di atas elemen
  • Keluar mouse di atas elemen

Daftar tindakannya cukup panjang. Misalnya, Anda dapat mengarahkan pengguna yang mengklik Snoopy ke halaman lain dengan memilih tindakan " tunggal Tautan Yang akan memunculkan opsi baru.

Temukan juga milik kami Plugin WordPress premium 10 dari Booking and Booking

Manajemen-of-pemicu-revolusi-slider

Cara menggunakan Slider Revolution TimeLine

Slider Revolution menawarkan antarmuka manajemen waktu di bagian bawah. Antarmuka ini memungkinkan Anda untuk melihat di mana animasi elemen dimulai dan di mana akhirnya.

mulai-dan-end-gundukan-film-on-slider-revolusi

Pada gambar sebelumnya, Anda akan melihat dua panah biru. Yang pertama di sebelah kiri menunjukkan awal dari animasi input dari suatu elemen dan yang kedua menunjukkan akhir dari animasi input. Warna merah gelap menunjukkan umur item dalam adegan.

Lire aussi Bagaimana menambahkan countdown pada blog WordPress Anda

Anda akan menemukan ujung juga mirip dengan ujung lain durasi (animasi input, waktu hidup dan akhir animasi).

Dengan " waktu Anda akan dapat mengontrol elemen mana yang ditampilkan sebelum dan elemen mana yang menghilang terlebih dahulu. Ini adalah alat yang sangat praktis yang perlu Anda kuasai untuk membuat animasi yang bagus.

Timeline juga memiliki pemain yang dapat Anda aktifkan untuk melihat slide.

Animasi-waktu-revolusi-slider

Sampai saat itu, saya memberi Anda dasar-dasar untuk membuat slide. Sekarang simpan slider Anda dan mulai pratinjau.

Backup-dan-previsulisation

Itu saja untuk tutorial ini, di bagian selanjutnya, kita akan berbicara tentang tampilan slider pada sebuah artikel dan beberapa operasi lanjutan.

Temukan juga beberapa tema dan plugin WordPress premium

Anda dapat menggunakan plugin WordPress lainnya untuk memberikan tampilan modern dan mengoptimalkan cengkeraman blog atau situs web Anda.

Kami menawarkan kepada Anda beberapa plugin WordPress premium yang akan membantu Anda melakukannya.

1. Disk Audio

Disk Audio adalah plugin WordPress lain yang akan membantu Anda menampilkan pemutar audio langsung di situs web Anda hanya dengan menekan tombol. Tata letak pemutar audio sepenuhnya responsif, sehingga pengguna seluler akan menikmati fitur-fiturnya tanpa masalah.

Plugin wordpress premium pemutar audio disk menambahkan pemutar audio

Selain itu, ia menawarkan banyak opsi penyesuaian, termasuk skema warna, penampilan, gambar latar belakang dan opacity. Ini memiliki beberapa opsi untuk mengontrolnya dengan keyboard dan itu Anda juga dapat menampilkan daftar putar dengan scrollbar yang dapat disesuaikan.

Baca juga: plugin 10 WordPress untuk meningkatkan penelitian di blog Anda

Anda juga dapat menyematkan tautan unduhan pada pemutar musik untuk menunjukkan kepada pengguna ke mana mereka dapat pergi untuk membeli trek yang diputar di situs web Anda.

Download | Demo | Hébergement Web

2. Pemesanan acara Pro

Ini adalah plugin WordPress 100% responsif, mudah untuk disesuaikan dan didedikasikan untuk mengelola reservasi di situs web mana pun, yang menawarkan layanannya di bidang acara.

Pemesanan acara pro

Fitur utamanya meliputi: penyesuaian teks, warna, batas dan lainnya, dukungan untuk PayPal, pengelolaan kode kupon dan kupon, dukungan untuk Google Maps, dukungan dari manajemen email, dukungan kode pendek, panel kontrol intuitif, pembuatan acara mudah, kontrol total atas penampilan, dll.

Download | Demo | Hosting Web

Buat Toko Online Anda dengan mudah

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

3. Social Share & Locker Pro

Ekstensi Social Share & Locker Pro dirancang untuk membantu situs web Anda lebih terlihat di jejaring sosial. Hanya dengan beberapa klik, Anda dapat mengatur posisi ikon sosial Anda, atau mengunci konten Anda dengan mengharuskan berbagi di salah satu jejaring sosial yang Anda usulkan.

Pengunci berbagi sosial plugin wordpress

Anda memiliki tema 10 yang telah ditentukan dan ini harus mencakup keinginan yang paling umum. Semua temanya adalah Retina dan keajaiban pekerjaan.

hal 30 untuk melakukan pada posting blog Anda setelah publikasi mereka Temukan mereka dengan membaca artikel ini.

Selain itu, dengan Social Share & Locker Pro, Anda akan dapat melihat nama lengkap jejaring sosial atau hanya ikonnya. Itu akan tergantung pada desain Anda, ruang yang tersedia, atau keinginan Anda.

Download | Demo | Hébergement Web

Sumber Daya yang Direkomendasikan

Temukan sumber daya lain yang direkomendasikan yang akan menemani Anda dalam membuat dan mengelola situs web Anda.

Kesimpulan

Voila! Itu saja untuk panduan ini. Kami berharap tutorial ini memberi Anda dasar-dasar membuat tayangan slide dengan Slider Revolution di blog atau situs WordPress. Jika Anda memiliki pertanyaan, saran, atau komentar, tinggalkan di bagian kami komentar.

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.

Jangan ragu untuk melakukannya berbagi dengan teman-teman Anda di jejaring sosial favorit Anda.

...

Artikel ini berisi komentar 0

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
4 saham
saham1
menciak
Register3