Cara Membuat Slider Video Lengket dengan Divi
Diterbitkan: 2022-03-07Sticky Video Slider adalah cara yang efektif untuk menyimpan koleksi video yang ringkas di garis depan saat pengguna menggulir konten di halaman. Ini akan sangat cocok untuk tutorial atau resep yang akan mendapat manfaat dari video dan instruksi tertulis secara bersamaan. Dalam tutorial ini, kami akan menunjukkan kepada Anda betapa mudahnya membuat slider video lengket dengan Divi. Dan untuk contoh kasus penggunaan kami, kami akan menambahkan slider video lengket ke halaman resep.
Mari selami!
Berlangganan Saluran Youtube Kami
Sneak Peek
Berikut ini sekilas desain yang akan kita buat dalam tutorial ini.
Unduh Tata Letaknya GRATIS
Untuk mendapatkan desain dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.
Unduh Gratis
Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti bersama dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.
Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!
Untuk mengimpor tata letak bagian ke Perpustakaan Divi Anda, navigasikan ke Perpustakaan Divi.
Klik tombol Impor.
Di popup portabilitas, pilih tab impor dan pilih file unduhan dari komputer Anda.
Kemudian klik tombol impor.
Setelah selesai, tata letak bagian akan tersedia di Divi Builder.
Langsung saja ke tutorialnya ya?
Membuat Slider Video Lengket dengan Divi
Buat Halaman Baru dengan Tata Letak Premade
Mari kita mulai dengan tutorial kita dengan mengaktifkan dan menjalankan halaman baru dengan salah satu tata letak yang telah dibuat sebelumnya.
Berikut cara melakukannya:
- Buat halaman baru dan beri judul
- Klik untuk menggunakan Divi Builder (di ujung depan)
- Pilih untuk menggunakan tata letak yang dibuat sebelumnya
- Cari dan pilih tata letak halaman resep ahli gizi.
- Untuk memuat tata letak ke halaman, cukup klik tombol "Gunakan Tata Letak ini".
Setelah tata letak dimuat ke halaman, Anda siap untuk menambahkan slider video lengket ke halaman.
Memodifikasi tata letak untuk Slider Video Lengket
Untuk contoh ini, kita akan menambahkan slider video lengket ke kolom kiri dari baris dua kolom. Ini akan memungkinkan kami untuk menjaga agar video tetap terlihat saat pengguna menggulir untuk menyiapkan konten di kolom kanan. Jenis pengaturan ini akan sangat cocok untuk resep dan tutorial yang akan mendapat manfaat dari video dan instruksi tertulis.
Untuk mengubah tata letak, pertama-tama cari baris kedua di bagian kedua halaman yang berisi "Bahan" dan "Petunjuk". Kemudian pindahkan kedua modul teks dari kolom kiri ke atas kolom kanan, biarkan kolom kiri kosong.
Membuat Modul Slider Video Lengket
Di kolom kiri kosong dari baris yang sama, tambahkan modul penggeser video baru.
Video tiruan akan menampilkan salah satu video Youtube kami menggunakan embed URL. Ini adalah bagaimana Anda dapat menambahkan video yang dihosting pihak ketiga ke penggeser video Anda. Untuk mengubah video, buka pengaturan item video.
Kemudian pilih tindakan "Sisipkan dari URL". Rekatkan URL baru di dalam kotak entri dan klik tombol "Sisipkan ke dalam Postingan".
Untuk menambahkan lebih banyak video ke penggeser, Anda dapat mengeklik ikon tambah abu-abu “Tambah Video Baru” atau cukup menduplikasi video yang ada. Untuk contoh ini, mari kita duplikat video yang ada dua kali untuk membuat total 3 video di slider.
Di bawah tab desain, perbarui warna hamparan gambar mini agar sesuai dengan tata letak.
- Warna Hamparan Gambar Mini: rgba(53,55,82,0.55)
Membuat Slider Video “Melekat”
Untuk membuat penggeser “lengket”, buka tab lanjutan dan perbarui yang berikut:
- Posisi Lengket: Tempel ke Atas (desktop), Jangan Tempel (tablet dan ponsel)
- Offset Atas Lengket: 30px (desktop), 0px (tablet dan ponsel)
- Batas Lengket Bawah: Baris
Ini akan memastikan penggeser video akan menempel di bagian atas jendela browser saat mencapai bagian atas browser saat menggulir halaman ke bawah. Kemudian akan berhenti lengket setiap kali mencapai bagian bawah baris.
Hasil
Masalah dengan video/penyematan YouTube Menggunakan Hamparan Gambar di Video Utama
Jika Anda menggunakan URL YouTube untuk menyematkan banyak video di penggeser video, sebaiknya jangan gunakan opsi bawaan Divi untuk "Tampilkan Hamparan Gambar di Video Utama". Ini akan menyebabkan audio video diputar otomatis dari awal dalam status lengket yang menyebabkan pemutaran audio duplikat pada interval yang berbeda.
Ini tidak berlaku untuk video yang dihosting sendiri dalam format file mp4 atau webm. Anda dapat menampilkan hamparan gambar pada video utama untuk video yang dihosting sendiri. Jadi jika Anda ingin menggunakan gambar overlay dan ikon putar Divi dengan Modul Video Divi, Anda harus menambahkan file/URL video MP4 dan Webm.
Meskipun demikian, Anda masih dapat menambahkan hamparan gambar khusus ke video Youtube Anda di penggeser video. Mereka masih akan muncul di kontrol thumbnail di bawah video utama.
Kiat Pro: Buat Gambar Miniatur untuk setiap Langkah dalam Urutan Video
Jika Anda memiliki pengetahuan, Anda dapat dengan mudah membuat gambar mini sederhana untuk setiap video untuk mengaturnya menurut langkah atau angka.
contoh gambar overlay
Berikut adalah contoh tampilannya pada bilah geser.
Menggunakan Video yang Dihosting Sendiri di Slider
Jika Anda ingin menggunakan Video yang dihosting sendiri di Slider, buka pengaturan video.
Klik Tambahkan Video.
Pilih file dari perpustakaan Anda atau tambahkan URL hosting pihak ketiga ke video.
Itu selalu merupakan ide yang baik untuk menambahkan file MP4 dan Webm untuk setiap video. Gabungan, keduanya menawarkan dukungan untuk sebagian besar browser web termasuk seluler.
Jangan lupa, Anda dapat menambahkan overlay gambar sebagai thumbnail yang bagus untuk video Anda.
Di bawah opsi Overlay, Anda bahkan dapat memilih untuk menampilkan overlay gambar pada video utama.
Hasil Akhir
Berikut adalah tampilan lain dari slider video lengket kami yang sedang beraksi.
Pikiran Akhir
Membuat modul slider video lengket cukup mudah jika Anda terbiasa dengan opsi lengket bawaan Divi. Dan hasilnya dapat memiliki beberapa aplikasi hebat. Untuk lebih lanjut, Ini akan membantu untuk memahami cara kerja video di Divi juga.
Juga, lihat bagaimana Anda dapat membuat video tempel dengan sakelar sembunyikan/tampilkan.
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!