Cara Menampilkan/Menyembunyikan Slider Video Berdasarkan Status Masuk dengan Divi
Diterbitkan: 2022-03-05Video Slider sangat bagus untuk menampilkan koleksi video untuk kursus, halaman resep, atau tutorial. Mereka juga merupakan kandidat yang baik untuk menampilkan konten premium untuk anggota atau pelanggan situs Anda. Misalnya, pengunjung bisa mendarat di halaman resep dan hanya melihat petunjuk dalam format teks saja. Namun, begitu mereka menjadi pengguna terdaftar, mereka akan melihat penggeser video di halaman yang sama dengan konten premium. Dalam tutorial ini, kami akan menunjukkan kepada Anda betapa mudahnya menyembunyikan/menampilkan penggeser video berdasarkan status masuk dengan Divi. Ini memungkinkan Anda memberikan konten video kepada pengguna yang masuk sebagai fitur premium.
Mari selami!
Sneak Peek
Berikut ini sekilas desain yang akan kita buat dalam tutorial ini. Perhatikan bagaimana penggeser video disembunyikan dari pengguna hingga mereka masuk menggunakan formulir masuk.
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?
Menampilkan/Menyembunyikan Slider Video Berdasarkan Status Masuk 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.
Menambahkan Slider Video ke Halaman
Di halaman resep, Anda akan melihat video lebar penuh di baris tepat di bawah baris dengan bahan dan instruksi. Kami akan mengganti video dengan modul penggeser video. Untuk melakukannya, hapus modul video.
Kemudian tambahkan modul penggeser video baru sebagai gantinya.
Menambahkan Video ke Slider
Untuk menambahkan video ke penggeser, buka setelan penggeser video. Di bawah tab konten, Anda akan melihat video tiruan yang sudah ada. Buka pengaturan untuk video yang ada.
Selanjutnya, hapus video default dan klik ikon Tambahkan Video untuk menambahkan video baru ke penggeser.
Untuk contoh ini, saya menambahkan video yang dihosting sendiri. Itu selalu merupakan ide yang baik untuk mengunggah file video versi MP4 dan Webm.
Selanjutnya, kita dapat menambahkan overlay gambar ke video.
Setelah selesai, simpan perubahannya.
Untuk membuat video tambahan, kembali ke pengaturan penggeser video dan duplikat video yang ada 3 kali untuk mendapatkan total 4 video. Kemudian, di bawah opsi overlay, aktifkan YA untuk menampilkan overlay gambar pada video utama.
Menambahkan Opsi Tampilan Bersyarat
Untuk tutorial ini, kami akan menampilkan penggeser video ini hanya kepada pengguna yang masuk. Untuk melakukan ini, buka tab lanjutan dan klik untuk menambahkan kondisi baru di bawah grup opsi kondisi.
Di menu tarik-turun kondisi tampilan, pilih Status Masuk dari daftar. Pastikan Anda memilih untuk menampilkan hanya jika pengguna login . Kemudian simpan perubahan.
Tips Bonus: Buat CTA atau Formulir Login untuk Pengguna yang Belum Masuk
Untuk pengunjung baru, Anda mungkin ingin membuat semacam CTA untuk mendaftar atau formulir masuk untuk memudahkan anggota masuk dan melihat video. Untuk melakukan ini, Anda dapat membuat baris dua kolom baru dengan gambar yang terlihat seperti video di kolom kiri dan formulir login di kolom kanan seperti pada tangkapan layar di bawah.
Kemudian buka pengaturan baris dan tambahkan kondisi tampilan berdasarkan status login. Hanya saja kali ini, pilih untuk ditampilkan hanya jika Pengguna Keluar . Ini akan menampilkan konten kepada pengguna hanya jika mereka keluar.
Saat menambahkan formulir login, pastikan untuk memperbarui opsi pengalihan untuk mengalihkan ke halaman saat ini . Ini akan meningkatkan UX untuk pengguna yang ingin masuk dan melihat video di halaman yang sama.
Untuk mempelajari cara membuat bagian CTA untuk pengguna yang keluar dari awal, lihat posting kami tentang cara membuat posting blog eksklusif anggota dengan opsi kondisi Divi.
Hasil Akhir
Berikut ini tampilan slider video terakhir kami. Perhatikan bagaimana mereka disembunyikan dari pengguna sampai mereka masuk menggunakan formulir masuk.
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.
Pikiran Akhir
Memiliki kemampuan untuk menampilkan/menyembunyikan penggeser video berdasarkan status masuk dapat berguna saat Anda ingin menawarkan konten premium kepada anggota atau pelanggan.
Untuk lebih lanjut, lihat posting serupa tentang cara membuat posting blog eksklusif anggota dengan opsi kondisi Divi.
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!