Cara Membuat Video Promo Sticky dengan Toggle Show/Hide di Divi
Diterbitkan: 2020-11-25Video promo adalah alat pemasaran yang luar biasa untuk mempromosikan produk dan layanan Anda kepada semua pengunjung yang lebih suka menonton video daripada menjelajahi halaman Anda untuk mendapatkan informasi. Dan, jika Anda yakin bahwa video Anda akan membantu meningkatkan konversi, ada baiknya untuk membuat video tersebut tersedia bagi pengguna sebanyak mungkin. Dengan mengingat hal ini, video promo tempel (video yang tetap berada di bagian atas halaman) dapat menjadi aset berharga bagi situs web Anda.
Dalam tutorial ini, kami akan menunjukkan kepada Anda cara membuat video promo sticky dengan tombol show/hide di Divi. Idenya adalah untuk menampilkan versi ukuran penuh dari video pada awalnya di paro atas. Kemudian saat pengguna menggulir halaman ke bawah, video menempel di bagian atas halaman untuk memudahkan akses dan/atau melihat saat pengguna menjelajahi sisa konten di halaman. Tentu saja, ini bisa sedikit mengganggu bagi sebagian pengunjung. Jadi kami juga akan menunjukkan cara menambahkan tombol sakelar untuk memberi pengguna kemampuan untuk menampilkan atau menyembunyikan video kapan pun mereka mau.
Mari kita mulai!
Sneak Peek
Berikut ini sekilas desain yang akan kita buat dalam tutorial ini.
Ini video lengket tanpa sakelar.
Ini adalah video lengket yang sama dengan tombol sakelar.
Berikut ini adalah melihat lebih dekat pada fungsi toggle.
Dan inilah tampilannya di ponsel.
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 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?
Apa yang Anda Butuhkan untuk Memulai
Untuk memulai, Anda perlu melakukan hal berikut:
- Jika belum, instal dan aktifkan Tema Divi.
- Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
- Pilih opsi “Choose a Premade Layout”.
- Unggah Tata Letak Halaman Layanan Pemasaran Digital.
Cara Membuat Video Promo Sticky dengan Toggle Show/Hide untuk Halaman Penjualan Anda
Menambahkan Baris untuk Video Lengket
Untuk memulai, kita akan menghapus modul teks kedua di baris bagian pertama/atas tata letak.
Di bawah baris yang ada di bagian atas, tambahkan baris satu kolom baru.
Buka pengaturan baris untuk baris baru dan, di bawah tab Lanjutan, perbarui Indeks Z sebagai berikut:
- Indeks Z: 14
Ini akan memastikan video yang kami tambahkan ke baris akan tetap berada di atas konten lain di halaman saat macet selama pengguliran halaman.
Menambahkan Video
Di dalam kolom baris, tambahkan modul video baru.
Buka pengaturan video dan unggah format mp4 dan webm untuk video pilihan Anda.
Jika Anda mau, tambahkan gambar overlay ke video.
Di bawah tab Desain, perbarui opsi ukuran berikut:
- Lebar Maks: 900px
- Penyelarasan Modul: tengah
- Sudut Bulat: 8px
- Bayangan Kotak: lihat tangkapan layar
Membuat Kolom Lengket
Buka pengaturan untuk kolom yang berisi video dan tambahkan Kelas CSS berikut di bawah tab Lanjutan:
- Kelas CSS: et-sticky-video
Kemudian perbarui posisi tongkat sebagai berikut:
- Posisi Lengket: Menempel ke Atas
- Default Transisi dan Gaya Lengket: TIDAK
Sekarang setelah posisi lengket berlaku, tambahkan CSS khusus berikut ke Elemen Utama untuk Status Tempel:
width: 300px !important; right: 0px !important; left: auto !important; top: 0px;
Perbarui Ukuran Ikon Putar Video dalam Status Lengket
Selanjutnya buka kembali pengaturan video dan perbarui ukuran font ikon putar dalam keadaan lengket sebagai berikut:
- Gunakan Ukuran Ikon Kustom: YA
- Mainkan Ukuran Font Ikon (lengket): 50px
Hasil sejauh ini
Membuat Tombol Toggle Video Lengket
Untuk membuat tombol sakelar video tempel, buat modul tombol baru di bawah modul video.
Kemudian pindahkan tombol di atas modul video.
Buka pengaturan tombol dan perbarui teks tombol sebagai berikut:
- Teks Tombol: Sembunyikan
(CATATAN: Teks ini akan diganti/dimatikan dengan kata “Show” saat mengklik tombol saat kita menambahkan kode kita nanti.)
Di bawah tab desain, perbarui yang berikut ini:
- Gunakan gaya khusus untuk tombol: YA
- Gaya Teks Tombol: 14px
- Warna Teks Tombol: #fa50a9
- Berat Huruf Tombol: Semi Tebal
- Gaya Font Tombol: TT
- Ikon Tombol: panah kanan
- Hanya Tampilkan Ikon Saat Arahkan ke Tombol: TIDAK
(CATATAN: ikon tombol yang Anda pilih akan diputar 180 derajat saat mengklik tombol saat kami menambahkan tata letak kode untuk pengalaman pengguna yang lebih intuitif dan lebih baik.
Perbarui juga jarak untuk tombol:
- Padding: 0.5em atas, 0.5em bawah, 1em kiri, 1.7em kanan
Di bawah tab Advanced, tambahkan Kelas CSS berikut ke tombol:
- Kelas CSS: et-sticky-video-toggle
Di bawah tab Lanjutan, perbarui opsi posisi:
- Posisi: Absolut
- Lokasi: kiri bawah
Sekarang pindahkan tombol di luar kolom/video ke kiri dengan memperbarui opsi terjemahkan transformasi dalam status lengket sebagai berikut:
- Transformasi Terjemahkan X Sumbu (lengket): -100%
Untuk menyelesaikan desain sakelar tombol, kita perlu menyembunyikan tombol hingga mencapai status lengket. Untuk melakukannya, perbarui CSS khusus ke elemen utama untuk desktop dan status lengket sebagai berikut:
Untuk Elemen Utama di Desktop…
display:none !important;
Untuk Elemen Utama pada Sticky…
display:block !important;
Menambahkan Kode Kustom untuk Fungsi Toggle
Agar sakelar berfungsi sesuai kebutuhan, kita perlu menambahkan modul kode di bawah modul video.
CSS khusus
Di tab konten, lewati CSS khusus berikut, pastikan untuk membungkusnya dengan tag gaya .
.et-sticky-video-toggle.et_pb_button:after, .et_pb_sticky.et-sticky-video {
transition: all 200ms;
}
.et_pb_sticky.et-sticky-video-active {
transform: translate(100%, 0%);
}
.et-sticky-video-toggle:hover {
cursor: pointer;
}
.et-sticky-video-hidden:after {
transform: rotate(180deg) !important;
}
JQuery Kustom
Kemudian di bawah CSS dengan tag gaya, tambahkan JQuery berikut yang dibungkus dengan tag skrip .
(function($) {
$(document).ready(function(){
var $stickyVideoToggle = $('.et-sticky-video-toggle');
$stickyVideoToggle.on('click',function(e) {
e.preventDefault();
$(e.target).closest('.et-sticky-video').toggleClass('et-sticky-video-active');
$(this).toggleClass('et-sticky-video-hidden');
if ($(this).hasClass('et-sticky-video-hidden')) {
$stickyVideoToggle.text('show');
} else {
$stickyVideoToggle.text('hide');
}
});
});
})(jQuery);
Itu dia!
Hasil Akhir
Sekarang lihat versi langsung halaman untuk melihat sendiri hasilnya.
Ini video lengket tanpa sakelar.
Ini adalah video lengket yang sama dengan tombol sakelar.
Berikut ini adalah melihat lebih dekat pada fungsi toggle.
Dan inilah tampilannya di ponsel.
Tambahkan Modul Tambahan dengan Mudah ke Kolom Lengket untuk Memuji Video
Karena posisi sticky ditambahkan ke kolom (bukan video), silakan tambahkan modul/konten tambahan untuk melengkapi video.
Misalnya, Anda dapat menyertakan tombol di bagian bawah video di kolom tempel yang sama.
Kemudian akan tetap berada di bawah video dalam status lengket kolom.
Tambahkan Opsi Video Kustom Anda Sendiri dengan Mudah dengan Tata Letak Video Lengket ini
Menerapkan posisi tempel ke kolom (bukan video) juga berguna untuk menambahkan penyematan video khusus atau HTML (menggunakan modul teks atau kode) di dalam kolom. Fungsionalitas video lengket akan tetap berfungsi.
Misalnya, Anda dapat menambahkan video HTML5 ke modul kode dalam kolom yang sama.
Ubah Struktur Kolom dengan Mudah Juga!
Selain itu, Anda dapat dengan mudah mengubah baris ke struktur kolom mana pun yang Anda inginkan untuk menampilkan video Anda dengan konten yang berdekatan. Misalnya, Anda dapat membuat tata letak dua kolom dengan video tempel awalnya di kolom kanan atau kiri. Pastikan kolom yang berisi konten video akan memiliki Kelas CSS dan gaya lengket yang sama seperti yang dijelaskan dalam tutorial ini. Fungsionalitas lengket akan bekerja dengan cara yang sama.
Misalnya, dengan menggunakan desain yang ada, kita dapat menambahkan kolom baru menggunakan tampilan lapisan dan mengisi kolom baru itu dengan teks judul utama.
Kolom lengket akan tetap berfungsi dengan mulus sementara kolom/konten yang berdekatan tetap berada dalam aliran normal dokumen.
Masalah dengan video/penyematan YouTube Menggunakan Opsi Gambar Divi Overlay
Jika Anda menggunakan URL YouTube untuk menyematkan video dengan Modul Video seperti dalam desain ini, sebaiknya jangan gunakan opsi gambar overlay bawaan Divi (dengan ikon putar). Ini akan menyebabkan audio video diputar otomatis dari awal dalam status lengket yang menyebabkan pemutaran audio duplikat pada interval yang berbeda. Jadi jika Anda ingin menggunakan gambar overlay dan ikon putar Divi dengan Modul Video Divi, Anda harus menambahkan file/URL video mp4 dan WebM.
Pikiran Akhir
Membuat video promo tempel dengan tombol tampilkan/sembunyikan untuk halaman Anda membuka pintu bagi cara baru untuk mempromosikan produk dan layanan Anda. Anda tidak hanya dapat menyimpan video dengan konversi tinggi di garis depan, tetapi Anda juga dapat dengan mudah memasukkan informasi gratis atau CTA di atas atau di bawah video hanya dengan menambahkannya ke kolom yang sama di Divi.
Bahkan, Anda bahkan tidak perlu menyertakan video sama sekali, cukup isi kolom tempel dengan info apa pun yang ingin Anda tempel di bagian atas halaman saat menggulir!
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!