Cara Membuat Toggle Kustom untuk Transkrip Video di Divi

Menambahkan sakelar khusus untuk transkrip video Anda dapat membawa banyak manfaat ke situs web Anda. Bahkan, cukup menyertakan transkrip video untuk setiap video di situs web Anda dapat meningkatkan pengalaman pengguna, aksesibilitas, dan SEO. Pengguna akan memiliki pilihan untuk membaca konten yang merupakan fitur aksesibilitas yang hebat bagi mereka yang tuli, sulit mendengar, atau di kedai kopi yang bising. Dan Anda dapat membaca transkrip lebih cepat daripada menonton video (atau subtitle video). Plus, konten yang ditambahkan kemungkinan akan menyertakan sejumlah besar kata kunci yang akan meningkatkan SEO. Membuat sakelar khusus untuk transkrip video juga bagus karena dapat menyembunyikan konten berdurasi panjang itu hingga diperlukan.

Dalam tutorial ini, kita akan membuat sakelar khusus (dan ringkas) untuk transkrip video di Divi. Untuk melakukan ini, kita akan menyesuaikan modul sakelar Divi dengan perubahan ringkas sehingga cocok dengan video apa pun. Kemudian kami akan menunjukkan kepada Anda cara menggunakan transkrip yang dibuat secara otomatis dari Youtube sebagai konten untuk sakelar. Semua ini tanpa harus menggunakan plugin.

Mari kita mulai!

Sneak Peek

Berikut ini sekilas desain yang akan kita buat dalam tutorial ini.

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.

UNDUH

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:

1. Jika belum, instal dan aktifkan Tema Divi.
2. Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
3. Pilih opsi "Bangun Dari Awal".

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

Membuat Toggle Kustom untuk Transkrip Video di Divi

Bagian 1: Menambahkan Video Youtube ke Halaman menggunakan Modul Video Divi

Untuk bagian pertama dari tutorial kita, kita akan menambahkan/menyematkan video youtube ke halaman menggunakan modul video di Divi builder. Proses ini sebenarnya cukup sederhana.

Tapi sebelum kita menambahkan video, mari tambahkan baris satu kolom ke bagian.

Selanjutnya, tambahkan modul video ke baris.

Klik ikon tambah video plus di bawah opsi “File MP4 Video Atau URL Youtube.

Kemudian pilih tindakan Sisipkan dari URL di bilah sisi kiri popup.

Tempelkan URL untuk video YouTube di kotak input.

Kemudian klik tombol Sisipkan ke dalam Postingan .

Setelah video ditambahkan, Anda dapat menambahkan gambar overlay khusus ke video.

Bagian 1: Membuat Toggle Kustom untuk Transkrip

Sekarang setelah video kami siap, kami dapat membuat sakelar khusus yang akan menampung konten transkrip kami. Untuk melakukan ini, kita akan menyesuaikan modul sakelar.

Pertama, tambahkan modul sakelar langsung di bawah video.

Di Pengaturan Toggle, tambahkan kata "Transkrip" untuk teks Judul. (Nanti kita akan kembali ke body content untuk paste di konten transkrip video youtube kita nanti)

Di bawah tab desain, perbarui yang berikut ini:

• Warna Ikon: #42b3a9
• Buka Toggle Background Color: transparan
• Warna Latar Toggle Tertutup: transparan
• Perataan Teks: Tengah
• Judul Font: Roboto
• Judul Font Gaya: TT

• Lebar Maks: 800px
• Penyelarasan Modul: Pusat
• Padding: 0px atas, 20px bawah, 0px kiri, 0px kanan
• Lebar Perbatasan: 0px

Di bawah Tab Tingkat Lanjut, kita perlu menambahkan beberapa cuplikan CSS untuk menyelesaikan desain sakelar.

Tambahkan CSS berikut ke Judul Toggle :

display:inline-block;
padding: 1em 2.5em 1em 2em !important;

Tambahkan CSS berikut ke Ikon Toggle :

right: 0.75em !important;

Tambahkan CSS berikut ke Toggle Content :

max-height: 30vh;
overflow-y: scroll;
padding: 20px 3%;
background: #ffffff;
border: 2px solid #eeeeee;
border-radius: 5px;
text-align:left;

Bagian 3: Mendapatkan Transkrip dari Youtube dan Menambahkannya ke Konten Toggle

Membuat transkrip untuk video bisa sedikit merepotkan jika dilakukan secara manual. Dan ada layanan dan plugin di luar sana yang dapat melakukannya dengan cara yang lebih profesional (beberapa dengan biaya premium). Tetapi untuk tutorial ini, kita akan menggunakan metode yang cepat, mudah, dan gratis. Kami akan mengekstrak transkrip yang dibuat secara otomatis dari Youtube untuk sebuah video dan menggunakannya di situs web kami.

Untuk melakukannya, buka video Anda di Youtube dan ikuti langkah-langkah berikut:

1. Buka menu tarik-turun Tindakan Lainnya (3 titik horizontal) di sebelah tombol Simpan di bawah video.
2. Klik Buka Transkrip dari daftar.
3. Di bagian atas kotak Transkrip, buka menu tarik-turun Tindakan Lainnya (3 titik vertikal).
4. Klik Alihkan stempel waktu. Ini akan menyembunyikan stempel waktu agar tidak muncul di sebelah kiri setiap blok teks.

Salin seluruh konten transkrip di dalam kotak ke clipboard Anda.

Saat ini teks penuh dengan jeda baris. Untuk menghapusnya, Anda dapat pergi ke textfixer.com dan menggunakan alat penghapus jeda baris gratis untuk menghapus jeda baris dari teks.

Di bawah bagian Hapus Jeda Baris, pilih "Hapus jeda baris saja."

Kemudian tempel teks transkrip di dalam kotak.

Dan klik tombol Hapus Jeda Baris.

Setelah teks dibuat di bawah bagian berjudul Teks Baru tanpa Jeda Baris, salin teks ke clipboard.

Kembali ke situs Anda, buka pengaturan sakelar, dan tempel konten transkrip ke modul.

Memang, teks transkripnya kurang banyak huruf kapital, tanda baca, paragraf, dll. Tapi, isinya ada dan bisa dibaca. Namun, Anda mungkin ingin meluangkan beberapa menit untuk membersihkan teks untuk pembaca Anda.

Itu dia!

Hasil Akhir

Berikut adalah hasil akhir dari custom toggle kami untuk transkrip video di Divi.

Di Desktop…

Di Tablet…

Dan di Telepon…

Pikiran Akhir

Dalam tutorial ini, kami menunjukkan cara mengubah modul sakelar Divi menjadi sakelar khusus untuk transkrip video di Divi. Desain toggle yang ringkas dan unik saja memiliki aplikasi yang melampaui transkrip video. Maksud saya, Anda benar-benar dapat memasukkan teks apa pun yang Anda inginkan di sana. Tapi saya pikir itu cocok dengan baik di bawah video. Juga, menggunakan transkrip yang dibuat secara otomatis untuk video youtube pasti dapat berguna jika Anda memerlukan solusi sederhana. Namun, jangan ragu untuk menjelajahi opsi lain untuk menyalin konten video Anda dan/atau membagikannya kepada kami.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!