Elementor: Cara Menambahkan Efek Suara Tombol

Perlu mencari tahu cara menambahkan efek suara tombol pada Elementor ? Cari tahu di artikel ini.

Apakah Anda melihat 2 tombol ini?

Ketika Anda mengklik dari kucing, itu akan mengeong, dan ketika Anda mengklik tombol di chien, itu akan menghasilkan suara menggonggong. Pada artikel ini, kami akan menunjukkan cara menambahkannya Elementor efek suara ke tombol saat diklik.

Bagaimana cara menambahkan efek suara ke tombol di Elementor

Langkah 1: Buat tombol

Pertama, Anda perlu membuat tombol, Anda dapat menyesuaikan tombol sesuai keinginan, karena Elementor memiliki banyak pilihan untuk membuat tombol Anda indah.

Langkah 2: Siapkan tautan efek suara

Setelah tombol siap, sekarang siapkan efek suara untuk tombol dan unggah ke perpustakaan media WordPress. Anda dapat menggunakan format file MP3 atau WAV untuk efek suara.

Untuk mengunggah file suara ke perpustakaan media WordPress, navigasikan ke dasbor WordPress dan klik Media -> Tambahkan. Anda dapat menarik dan melepas file atau mengklik Pilih file untuk mengunggahnya.

Setelah file diunduh, Buka perpustakaan media dan klik salah satu suara, lalu di jendela yang muncul, salin URL file untuk mendapatkan link untuk efek suara.

Langkah 3: Tambahkan kode HTML berikut

Untuk menghasilkan suara dari tombol, kita perlu menggunakan kode HTML berikut.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  //Audio 1 Starts
  var audio1 = new Audio('Sound-Effect-URL')
  $(".button-class").mousedown(function() {
    audio1.load();
    audio1.play();
  });
  //Audio 1 Ends
});
</script>

Tambahkan widget HTML di area kanvas dan tempel kode di blok Kode HTML.

Gunakan tautan efek suara Anda untuk mengganti URL-Efek-Suara dalam instruksi

var audio1 = new Audio('Sound-Effect-URL')

Pilih kelas CSS untuk tombol dan ubah kode kelas kelas CSS tombol

$(".button-class").mousedown

Setelah memodifikasi kode, akan terlihat seperti ini.

Langkah 4: Tambahkan kelas CSS ke tombol

Untuk menghubungkan tombol ke kode, kita perlu menambahkan kelas CSS ke tombol, sehingga kode tahu tombol mana yang diklik dan memicu efek suara.

Dan ini untuk tombol dengan efek suara. Anda sekarang dapat menyesuaikan tombol Anda. Dan jika Anda ingin menambahkan lebih banyak tombol dengan efek suara, itu bisa dilakukan dengan menyalin sebagian kode dan memodifikasinya sedikit.

Menambahkan tombol tambahan dengan efek suara

Buat tombol atau salin tombol yang ada

Anda dapat menyalin tombol yang ada dengan mengklik kanan tombol yang ada dan memilih Salin, lalu menempelkannya ke bagian mana pun dengan mengklik kanan di dalam bagian itu.

Salin bagian dari kode dan sesuaikan variabel dan nama kelas CSS dari tombol kedua

Mari kita salin beberapa bagian dari kode HTML sebelumnya yang memicu efek suara, itu kode berikut di bawah ini

//Audio 1 Starts
  var audio1 = new Audio('Sound-Effect-URL')
  $(".button-class").mousedown(function() {
    audio1.load();
    audio1.play();
  });
  //Audio 1 Ends

Setelah menyalin kode, rekatkan tepat di bawah ini oleh Audio 1 Berakhir. Ubah variabel audio1 dan semua kode yang menggunakan variabel audio1 pada kode yang baru dibuat di audio2.

Lihat juga: Elementor: Cara membuat kartu efek dari portofolio

Kemudian ganti url efek suara jika Anda menggunakan efek suara baru untuk tombol baru dan ubah kodenya kelas tombol di kelas CSS tombol yang baru Anda buat.

Kode terakhir akan terlihat seperti gambar berikut.

Ganti nama kelas CSS dari tombol

Tombol Anda yang baru dibuat juga akan memiliki efek suara saat diklik. Anda dapat membuat sebanyak yang Anda inginkan.

Elemen audio adalah salah satu tambahan yang bagus untuk a situs jaringan. Mereka tidak hanya memberikan elemen yang menarik untuk situs web tetapi juga membantu menciptakan kesan abadi pada pengguna akhir.

Baca juga: Elementor: Cara memigrasikan situs WordPress

Namun, tindakan atau hasil hanya boleh disertai dengan suara jika secara signifikan memperkuat atau memperjelas pesan penting kepada pengguna. Memberi tahu pengguna tentang sesuatu yang perlu diperhatikan, sehingga tidak berdampak negatif pada Anda situs jaringan sebagai gantinya.

Dapatkan Elementor Pro Sekarang!

Kesimpulan

Jadi ! Itu saja untuk artikel ini yang menunjukkan cara menambahkan efek suara tombol Elementor. Jika Anda memiliki kekhawatiran tentang cara menuju ke sana, beri tahu kami di dalam komentar.

Namun, Anda juga bisa berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.

Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.

...