Cara Membuat Ulang Panduan Video Klik ET dengan Divi

Berbagi pratinjau video di situs web Anda dapat meningkatkan interaktivitas dan membantu pengunjung memahami produk dan/atau layanan Anda dengan lebih baik dan lebih cepat. Sekarang, di situs web Elegant Themes, kami telah mengambil pendekatan ini untuk diri kami sendiri dan membuat desain panduan video klik langsung yang memungkinkan orang untuk menavigasi beberapa fitur kami yang paling populer. Kami telah membuat ulang desain ini di dalam Divi dan hari ini, kami akan menunjukkan cara membuatnya kembali dari awal. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Tata Letak Panduan Klik Video GRATIS

Untuk mendapatkan tata letak panduan video klik gratis, 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.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Berlangganan Saluran Youtube Kami

Mari Mulai Berkreasi!

Tambahkan Bagian Reguler Baru

Mulailah dengan menambahkan bagian reguler baru ke halaman yang sedang Anda kerjakan.

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan terapkan pengaturan ukuran berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 2
• Lebar: 85vw (Desktop), 90% (Tablet & Ponsel)
• Lebar Maks: 100%

Pengaturan Kolom 1

Buka pengaturan kolom 1 selanjutnya.

Jarak

Buka pengaturan spasi dan tambahkan beberapa padding atas di desktop.

• Padding Atas: 5vw (Desktop), 0vw (Tablet & Ponsel)

Kelas CSS

Pindah ke tab lanjutan dan tambahkan kelas CSS. Nanti di postingan, kita akan menggunakan kelas CSS ini untuk membuat efek grid di tablet dan seluler.

• Kelas CSS: item-responsive-grid

Tambahkan Modul Blurb ke Kolom 1

Tambahkan judul

Mari mulai menambahkan modul! Untuk setiap item yang dapat diklik, kita akan menggunakan Modul Blurb. Kita akan mulai dengan yang pertama dan menggunakannya kembali untuk item klik yang tersisa. Tambahkan Modul Blurb baru ke kolom 1 dan masukkan judul pilihan Anda.

Pilih Ikon

Pilih ikon berikutnya.

Pengaturan Ikon Default

Pindah ke desain dan ubah pengaturan ikon yang sesuai:

• Warna Ikon: #e8e9ea
• Penempatan Ikon: Kiri
• Gunakan Ukuran Font Ikon: Ya
• Ikon Ukuran Font: 2vw (Desktop), 4.5vw (Tablet), 7vw (Telepon)

Arahkan ke Pengaturan Ikon

Ubah warna ikon saat melayang.

• Warna Ikon: #b0c8ff

Pengaturan Teks Judul

Pindah ke pengaturan teks judul dan buat beberapa perubahan di sana juga.

• Judul Font: Lato
• Judul Font Berat: Tebal
• Judul Font Style: Huruf Besar
• Judul Teks Ukuran: 0.8vw (Desktop), 1.7vw (Tablet), 2.5vw (Telepon)
• Judul Baris Tinggi: 2vw (Desktop), 4.5vw (Tablet), 7vw (Telepon)

Spasi Default

Kita akan membentuk Modul Blurb menggunakan beberapa nilai padding khusus di berbagai ukuran layar.

• Padding Atas: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Padding Bawah: 0.5vw (Desktop), 1.5vw (Tablet & Telepon)
• Padding Kiri: 1.2vw (Desktop & Tablet), 5vw (Telepon)
• Padding Kanan: 1.2vw (Desktop & Tablet), 5vw (Telepon)

Spasi Arahkan

Buat efek hover sorot dengan memodifikasi nilai margin hover.

• Margin Kiri: -0.5vw
• Margin Kanan: -0.5vw

Berbatasan

Tambahkan beberapa sudut membulat juga.

Bayangan Kotak Default

Bersamaan dengan bayangan kotak yang halus.

• Posisi Vertikal Bayangan Kotak: 10px
• Kekuatan Buram Bayangan Kotak: 70px
• Warna Bayangan: rgba (0,0,0,0.11)

Arahkan Bayangan Kotak

Ubah warna bayangan kotak saat melayang.

• Warna Bayangan: rgba(103.151.255,0.22)

ID & Kelas CSS

Last but not least, buka tab lanjutan dari Modul Blurb dan tambahkan ID dan kelas CSS.

• ID CSS: video-walkthrough-item-1
• Kelas CSS: video-item-kursor

Modul Blurb Klon Tiga Kali

Setelah Anda menyelesaikan Modul Blurb pertama, Anda dapat mengkloningnya tiga kali.

Ubah Konten

Ubah konten setiap Modul Blurb duplikat.

Ubah Semua ID CSS Modul Blurb Duplikat

Bersama dengan ID CSS.

• 1) Bangun Secara Visual: video-walkthrough-item-1
• 2) Efek: video-walkthrough-item-2
• 3) Pembagi Bentuk: video-walkthrough-item-3
• 4) Pengeditan Massal: video-walkthrough-item-4

Gunakan kembali Kolom 1

Hapus Kolom 3

Setelah Anda menyelesaikan kolom pertama, Anda dapat membuka pengaturan baris dan menghapus kolom ketiga.

Klon Kolom 1 & Tempatkan di Bawah

Kloning kolom pertama (berisi Modul Blurb) dan tempatkan kolom duplikat di bagian bawah.

Ubah Struktur Kolom Kembali

Ubah kembali struktur kolom menjadi yang dipilih di awal tutorial ini.

Ubah Semua Konten Modul Blurb Kolom 3

Ubah judul Modul Blurb setiap duplikat di kolom 3.

Ubah Semua ID CSS Modul Blurb Kolom 3

Bersama dengan ID CSS.

• 5) Layout Library: video-walkthrough-item-5
• 6) Transformasi: video-walkthrough-item-6
• 7) Hover States: video-walkthrough-item-7
• 8) Temukan & Ganti: video-walkthrough-item-8

Tambahkan Modul Teks ke Kolom 2

Biarkan Kotak Konten Kosong

Saatnya mulai menambahkan pratinjau video yang berbeda! Ada dua cara untuk mendekatinya; menggunakan Modul Video atau Modul Teks. Modul Video mengharuskan pengunjung untuk menekan putar. Menggunakan Modul Teks dengan latar belakang video, di sisi lain, memutar video secara otomatis tetapi tanpa suara. Untuk tutorial ini, kita akan menggunakan Modul Teks tetapi jangan ragu untuk menggunakan Modul Video sebagai gantinya. Pastikan kotak konten Modul Teks tetap kosong.

Latar Belakang Video

Buka pengaturan latar belakang dan unggah video pilihan Anda.

• Jeda Video Saat Tidak Dilihat: Ya

Perekat

Pindah ke tab desain dan tambahkan '100%' pada lebarnya.

• Lebar: 100%

Jarak

Selanjutnya, kita akan mengizinkan latar belakang video untuk ditampilkan dengan menambahkan beberapa nilai padding atas dan bawah kustom di berbagai ukuran layar. Catatan: nilai yang Anda tambahkan perlu disesuaikan dengan kumpulan dimensi video Anda.

• Padding Atas: 15vw (Desktop), 24vw (Tablet), 26vw (Telepon)
• Padding Bawah: 15vw (Desktop), 24vw (Tablet), 26vw (Telepon)

Berbatasan

Lanjutkan dengan menambahkan '10px' ke masing-masing sudut.

Bayangan Kotak

Bersamaan dengan bayangan kotak yang halus.

• Kekuatan Buram Bayangan Kotak: 30px
• Kekuatan Penyebaran Bayangan Kotak: -5px
• Warna Bayangan: rgba (0,0,0,0.11)

ID CSS

Terakhir, tambahkan ID CSS.

• ID CSS: panduan video-1

Modul Teks Klon 7 Kali

Setelah Anda menyelesaikan Modul Teks, Anda dapat mengkloningnya tujuh kali (satu untuk setiap Modul Blurb).

Ubah Semua Latar Belakang Video Modul Teks Duplikat

Unggah latar belakang video yang berbeda untuk setiap duplikat.

Ubah Semua ID CSS Modul Teks Duplikat & Tambahkan Kelas CSS ke Semua Modul Teks Duplikat

Ubah juga ID CSS. Pastikan Anda menghubungkan setiap Modul Teks ke Modul Blurb yang tepat dengan menggunakan nomor yang sama di akhir ID CSS. Kami juga menyembunyikan setiap Modul Teks, selain Modul Teks asli, menggunakan kelas CSS.

• Modul Teks 1: panduan video-1
• Modul Teks 2: panduan video-2
• Modul Teks 3: panduan video-3
• Modul Teks 4: panduan video-4
• Modul Teks 5: panduan video-5
• Modul Teks 6: panduan video-6
• Modul Teks 7: panduan video-7
• Modul Teks 8: panduan video-8
• Kelas CSS: video-bukan-pertama

Tambahkan Modul Kode #1 ke Kolom 1

Setelah Anda menyelesaikan baris kedua, saatnya untuk mulai menambahkan kode. Untuk membuat fungsi klik berfungsi, kita akan menggunakan beberapa kode CSS dan JQuery. Kami akan menempatkan kode dalam dua Modul Kode terpisah. Mulailah dengan menambahkan Modul Kode pertama ke kolom 1.

Masukkan Kode CSS Halaman

Tambahkan baris kode CSS berikut:

<style>
.video-not-first {
display: none;
}
.video-item-cursor {
cursor: pointer;
}

@media all and (max-width: 980px) {
.item-responsive-grid {
display: grid;
grid-template-columns: 50% 50%;
grid-column-gap: 2vw;
}
}
.video-walkthrough-active {
background-color:#fff;
margin-right:-0.5vw;
margin-left:-0.5vw;
box-shadow:0 10px 70px 0 rgba(103,151,255,.22),0 15px 105px 0 rgba(103,151,255,.22) !important;
}

.video-walkthrough-active .et-pb-icon{
color: #b0c8ff !important;
}
</style>

Tambahkan Modul Kode #2 ke Kolom 3

Lanjutkan dengan menambahkan Modul Kode lain ke kolom ketiga.

Masukkan Kode JQuery Fungsi Klik

Masukkan baris kode JQuery berikut:

<script>
jQuery(function($){

$('[id*="video-walkthrough-item"]').click(function() {
	var selector1 = $(this).attr('id').replace('-item', '');
  var $video   = $('#' + selector1);
  
  $video.show().siblings().hide();
  $video.addClass('play-video');
  $(".play-video .et_pb_section_video_bg video").trigger('play');
  $video.removeClass('play-video');

  $('[id*="video-walkthrough-item"]').removeClass("video-walkthrough-active");
  $(this).addClass('video-walkthrough-active');

});
});
</script>

Setelah Anda melewati langkah ini, Anda dapat menyimpan halaman Anda dan keluar dari Visual Builder!

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat ulang panduan video klik Tema Elegan dengan Divi. Kami telah memberi Anda unduhan JSON secara gratis juga! Jangan ragu untuk menggunakan desain ini untuk semua jenis situs web yang Anda buat. Ini adalah cara yang bagus untuk menampilkan video dan menarik perhatian pengunjung Anda. Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah!

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.