Loncat ke Konten Utama

Cara membuat video demo kontekstual di Divi

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 701.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 disediakan untuk pelanggan mereka selama periode Cyber ​​Monday adalah halaman arahan rilis perangkat lunak yang mengagumkan. Tata letak ini menampilkan karya seni yang hebat dan penggunaan unik pembagi bagian yang akan memukau pengunjung.

cyber monday.jpg

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

Sebelum Anda mulai menggunakan ini, Anda harus membiasakan diri dengan halaman arahan Cyber ​​Monday eksklusif yang bisa Anda peroleh dengan menjadi anggota Tema Elegan baru, meningkatkan akun yang ada, atau sudah 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 ini untuk membeli atau meningkatkan sebelum mereka dapat menyelesaikan sisa tutorial kami.

Sudah menjadi anggota seumur hidup? Anda dapat mengunduh paketnya 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 kasus penggunaan tutorial ini, kami akan menunjukkan cara membuat video demo dengan mengklik tombol. Video yang muncul saat diklik akan terlihat bagus di desktop dan layar kecil. Ini adalah pendekatan yang bagus jika Anda tidak ingin menyertakan video secara langsung di halaman Anda, tetapi lebih memilih untuk membuat interaksi dengan pengunjung.

penelitian

Sebelum kita mendalami tutorial, mari kita lihat hasil akhirnya 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 membuka Situs web WordPress> Plugin> Tambah baru> Cari 'Video PopUp'. Setelah Anda menemukan plugin ini, instal. Setelah Anda selesai, pastikan untuk mengaktifkan plugin.

video popup.jpg

Pengaturan plugin

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

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]

konfigurasi video popup.jpg

Tambahkan halaman baru menggunakan halaman landing versi software

Tambahkan halaman baru dan aktifkan menggunakan Visual Builder

Saatnya untuk mulai mempraktikkan berbagai hal! Tambahkan halaman baru, beri judul halaman Anda dan segera aktifkan Visual Builder.

buat halaman baru divi.jpg

Unduh tata letak versi perangkat lunak dari tata letak yang disimpan

Buka "Tata letak tersimpan Anda" dan unduh laman landas yang Anda unggah.

tata letak yang diunggah divi.jpg

Tambahkan modul teks di bawah modul Blurb tombol putar

Seperti yang Anda lihat, halaman tersebut sudah memiliki tombol putar yang akan membantu kami mencapai hasil yang diinginkan. Tetapi agar ini berfungsi, kita perlu membuat ulang desain di 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

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]

Tambahkan salinan ke area konten

Lanjutkan dengan menambahkan salinan tepat di bawah gambar.

duplikasi modul blurb.jpg

Pengaturan teks

Untuk membuat modul sesuai dengan tata letak, kami akan mengaktifkan orientasi teks pusat dalam pengaturan 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 pop-up saat diklik, kita perlu menambahkan link kustom 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 tempat konten Anda ke pop-up dengan menambahkan link ke gambar dan salinannya. 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. [Rekomendasi]

<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 mod teks yang terlihat persis sama dengan mod Blurb, kita dapat menghapus mod Blurb yang sudah ada sebelumnya dan hanya itu! Anda dapat menerapkan metode ini ke semua jenis tata letak yang Anda gunakan, tetapi ini benar-benar nilai tambah yang bagus untuk halaman arahan versi perangkat lunak.

hapus modul blurb yang tidak digunakan divi.jpg

final pikiran

Seperti yang Anda lihat, menambahkan jendela pop-up di Divi menggunakan plugin Video Popup cukup sederhana. Ini akan memungkinkan Anda menampilkan video di blog Anda tanpa perlu menyematkannya pada konten secara otomatis.

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