Divi: Tema WordPress terbaik sepanjang masa!

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

Perlu mencari tahu cara menambahkan efek suara tombol di 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 seperti yang Anda inginkan, karena Elementor memiliki banyak opsi untuk membuat tombol Anda terlihat cantik.

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.

efek suara tombol pada Elementor

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.

efek suara tombol pada Elementor

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.

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda membuat Mudah dan Gratis desain situs web atau blog apa pun dengan tampilan profesional. Berhentilah membayar banyak untuk situs web yang dapat Anda lakukan sendiri.

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.

efek suara tombol pada Elementor

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.

efek suara tombol pada Elementor

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.

efek suara tombol pada Elementor

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.

efek suara tombol pada Elementor

Ganti nama kelas CSS dari tombol

efek suara tombol pada Elementor

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 situs web. 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 memberikan dampak negatif pada situs web Anda.

Dapatkan Elementor Pro Sekarang!

Kesimpulan

Jadi ! Itu saja untuk artikel ini yang menunjukkan cara menambahkan efek suara tombol pada 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.

...

0 saham
saham
menciak
Register