Loncat ke Konten Utama

Cara membuat video demo kontekstual di Divi

Divi: tema WordPress termudah untuk digunakan

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

Satu halaman arahan eksklusif yang banyak memberikan pelanggan mereka selama periode Cyber ​​Monday adalah versi perangkat lunak halaman arahan yang besar. Tata letak ini menampilkan ilustrasi yang indah dan penggunaan pemisah bagian yang unik yang akan memukau pengunjung.

cyber monday.jpg

Cara mendapatkan halaman landing rilis perangkat lunak eksklusif untuk Cyber ​​Monday

Sebelum memulai penggunaan ini, Anda harus membiasakan diri dengan halaman pendaratan eksklusif Cyber ​​Monday yang dapat Anda peroleh dengan menjadi anggota Tema Elegan yang baru, meningkatkan akun yang ada, atau menjadi anggota seumur hidup. bersama kami. Jika Anda sudah menjadi anggota seumur hidup, Anda dapat masuk ke area anggota kami dan mengunduh semua halaman eksklusif kami di sini. Semua pengguna lain harus menggunakan tombol di bawah ini untuk membeli atau meningkatkan sebelum mereka dapat mengikuti sisa tutorial kami.

Sudah menjadi anggota seumur hidup? Anda dapat mengunduh paket ini sekarang, tidak perlu berpartisipasi dalam penawaran Cyber ​​Monday!

Cara membuat video demo kontekstual di Divi

Setelah Anda mengunduh halaman landing versi perangkat lunak baru dari area anggota kami, Anda dapat melanjutkan membaca yang berikut ini.

Jika menggunakan tutorial ini, kami akan menunjukkan kepada Anda cara membuat demo video dengan mengklik tombol. Video yang muncul saat klik akan terlihat bagus di layar desktop dan kecil. Ini adalah pendekatan yang sangat baik jika Anda tidak ingin memasukkan video langsung ke halaman Anda tetapi lebih suka berinteraksi dengan pengunjung.

penelitian

Sebelum terjun ke tutorial, mari kita lihat hasil akhir dalam ukuran layar yang berbeda.

Biro

hasil akhir divi video popup.gif

mobil

hasilkan popup video seluler divi.gif

Mari kita mulai!

Gunakan plugin Video PopUp gratis

Instal dan aktifkan plugin

Hal pertama yang harus dilakukan adalah mengunduh Plugin gratis Video PopUp . Anda dapat menemukan plugin ini dengan masuk ke Anda Situs WordPress> Plugin> Tambah baru> Cari 'Video PopUp'. Setelah Anda menemukan plugin ini, instal. Setelah selesai, pastikan untuk mengaktifkan plugin.

video popup.jpg

Pengaturan Plugin

Lanjutkan dengan membuka pengaturan umum plugin ini dan aktifkan dua opsi di bagian atas.

Divi: Tema WordPress terbaik sepanjang masa!

lebih 600.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

konfigurasi video popup.jpg

Tambahkan halaman baru menggunakan halaman arahan dari versi perangkat lunak

Tambahkan halaman baru dan aktifkan menggunakan Visual Builder

Saatnya mulai mempraktekkan segala sesuatu! Tambahkan halaman baru, berikan judul ke halaman Anda, dan aktifkan Visual Builder segera.

buat halaman baru divi.jpg

Unduh tata letak versi perangkat lunak dari tata letak yang disimpan

Buka "Tata Letak Terselamatkan Anda" dan unduh laman landas yang Anda poskan.

tata letak divi.jpg yang diunggah

Tambahkan modul teks di bawah modul Blurb tombol putar

Seperti yang Anda lihat, halaman sudah berisi tombol putar yang akan membantu kami mendapatkan hasil yang diinginkan. Tetapi agar ini berfungsi, kita perlu membuat ulang desain dalam modul Blurb menggunakan modul teks. Tambahkan modul teks baru tepat di bawah modul Blurb.

tambahkan teks di atas modul blurb.jpg

Tambahkan gambar ke area konten

Setelah Anda menambahkan modul teks, maju dan menambahkan gambar dari tombol putar untuk area konten modul teks Anda dengan mengklik " Tambahkan sebuah media Dan memilih tombol putar di pustaka media Anda.

Tambahkan media untuk mengacak divi.jpg

pilih gambar divi.jpg

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [GRATIS]

Tambahkan salinan ke area konten

Terus tambahkan salinan tepat di bawah gambar.

duplikasi modul blurb.jpg

Pengaturan teks

Agar modul untuk mencocokkan presentasi, kami akan mengaktifkan orientasi teks sentral dalam parameter teks dari modul.

aktifkan central orientation.jpg

Pengaturan teks tautan default

Dan kami juga akan memodifikasi parameter teks tautan yang sesuai:

  • Tautan Font: Kabin
  • Tautkan bobot font: tebal
  • Warna Teks Tautan: rgba (162,176,193,0.7)
  • Ukuran teks tautan: 17px
  • Ketinggian garis tautan: 1.6em

tautan menu desain divi.jpg

Arahkan kursor ke setelan teks

Ubah warna teks hover.

  • Tautkan warna teks: # a2b0c1

ubah warna dari tautan divi.jpg

jarak

Akhirnya, tambahkan juga margin negatif atas ke modul teks.

  • Marign atas: -20vw

tentukan margin atas divi.jpg

Tambahkan pembacaan kontekstual ke isi modul teks

Beralih ke editor teks

Untuk membuat jendela pop-up klik, kita perlu menambahkan tautan khusus ke konten modul teks. Kembali ke area konten dari modul teks dan pilih mode Text Editor.

edit modul teks dalam mode editor teks divi.jpg

Tambahkan tautan ke semua konten

Tautkan area konten Anda ke jendela pop-up dengan menambahkan tautan ke gambar dan salin. Pastikan untuk mengganti URL tautan dengan milik Anda.

<a class="vp-s vp-yt-type" href="https://www.youtube.com/watch?v=zesTKCnvyAU" data-dwrap="1"> </a>

tambahkan tautan gambar dengan divi.jpg video

Hapus modul Blurb dari tombol putar

Sekarang kita telah membuat modul teks yang persis seperti modul Blurb, kita dapat menghapus modul Blurb sebelumnya dan hanya itu! Anda dapat menerapkan metode ini ke semua jenis tata letak yang Anda gunakan, tetapi itu benar-benar nilai yang sangat baik untuk halaman landing rilis perangkat lunak.

hapus modul uraian yang tidak digunakan divi.jpg

Pikiran terakhir

Seperti yang Anda lihat, menambahkan jendela popup di Divi menggunakan plugin Video Popup cukup sederhana. Ini akan memungkinkan Anda untuk menyajikan video di blog Anda tanpa secara otomatis harus mengintegrasikannya pada konten.

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Tema WordPress Keren yang saya temukan
Dan ada lebih banyak tema dan model 50 000 untuk dipilih!

Kembali ke atas
5 saham
saham4
menciak
Register1
Ada apa