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 File
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: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
- Kelas CSS: et-sticky-video
- Posisi Lengket: Menempel ke Atas
- Default Transisi dan Gaya Lengket: TIDAK
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
- 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
- Kelas CSS: et-sticky-video-toggle
- Posisi: Absolut
- Lokasi: kiri bawah
- Transformasi Terjemahkan X Sumbu (lengket): -100%
Untuk Elemen Utama di Desktop… display:none !important;
Untuk Elemen Utama pada Sticky… display:block !important;
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);
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!