Loncat ke Konten Utama

Cara membuat video demo kontekstual di Divi

Divi: tema WordPress termudah untuk digunakan

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]

Salah satu halaman arahan eksklusif yang banyak diberikan kepada pelanggan mereka selama periode Cyber ​​Monday, adalah halaman arahan yang luar biasa dari versi perangkat lunak. Tata letak ini menyajikan ilustrasi hebat dan penggunaan unik pemisah bagian yang akan memukau pengunjung.

cyber monday.jpg

Cara mendapatkan halaman pendaratan 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 perlu menggunakan tombol di bawah untuk membeli atau meningkatkan sebelum mereka dapat mengikuti tutorial kami selanjutnya.

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 mengunduh laman landas versi perangkat lunak baru dari area anggota kami, Anda dapat terus membaca yang berikut ini.

Dalam hal 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 masuk ke tutorial, mari kita lihat hasil akhir dalam berbagai ukuran layar.

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 plugin ini. Setelah selesai, pastikan untuk mengaktifkan plugin.

video popup.jpg

Pengaturan plugin

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

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]

konfigurasi video popup.jpg

Tambahkan halaman baru menggunakan halaman arahan versi perangkat lunak

Tambahkan halaman baru dan aktifkan menggunakan Visual Builder

Sudah waktunya untuk mulai mempraktikkan semuanya! 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 Tersimpan Anda" dan unduh halaman arahan yang telah Anda poskan.

tata letak yang diunggah divi.jpg

Tambahkan modul teks di bawah modul Blurb tombol putar

Seperti yang Anda lihat, halaman tersebut 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, lanjutkan dan tambahkan gambar tombol putar ke area konten modul teks Anda dengan mengklik " Tambahkan media Dan memilih tombol putar di perpustakaan media Anda.

Tambahkan media untuk mengacak divi.jpg

pilih gambar divi.jpg

Tambahkan salinan ke area konten

Terus tambahkan salinan tepat di bawah gambar.

duplikasi modul blurb.jpg

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

Pengaturan teks

Agar modul sesuai dengan presentasi, kami akan mengaktifkan orientasi teks pusat dalam parameter teks modul.

aktifkan central orientation.jpg

Pengaturan teks tautan default

Dan kami juga akan memodifikasi parameter teks tautan 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 pengaturan teks

Ubah warna teks hover.

  • Tautkan warna teks: # a2b0c1

ubah warna dari tautan divi.jpg

jarak

Terakhir, tambahkan juga margin atas negatif ke modul teks.

  • Marign atas: -20vw

atur 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 modul teks dan pilih mode Editor Teks.

edit modul teks dalam mode editor teks divi.jpg

Tambahkan tautan ke semua konten

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

Buat Toko Online Anda dengan mudah

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

<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 untuk semua jenis tata letak yang Anda gunakan, tetapi sangat bagus untuk halaman arahan rilis perangkat lunak.

hapus modul blurb yang tidak digunakan divi.jpg

final pikiran

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

Artikel ini berisi komentar 0

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.

Kembali ke atas
5 saham
saham4
menciak
Register1