Elementor: Kako dodati zvučni efekat dugmeta

Trebate saznati kako dodati zvučni efekat gumba Elementor ? Saznajte u ovom članku.

Vidite li ova 2 dugmeta?

Kada kliknete na Od mačke, to će mjaukati, a kada kliknete na dugme na pas, proizvešće zvuk lajanja. U ovom članku ćemo vam pokazati kako da dodate Elementor zvučni efekat na dugme kada se klikne.

Kako dodati zvučni efekat dugmetu u Elementoru

Korak 1: Kreirajte dugme

Prvo morate kreirati dugme, možete ga prilagoditi kako želite, jer Elementor ima mnogo opcija da vaše dugme učinite lepim.

Korak 2: Pripremite vezu za zvučni efekat

Kada je dugme spremno, pripremite zvučni efekat za dugme i otpremite ga u WordPress medijsku biblioteku. Za zvučni efekat možete koristiti MP3 ili WAV format datoteke.

Da biste prenijeli zvučnu datoteku u WordPress medijsku biblioteku, idite na WordPress kontrolnu ploču i kliknite Mediji -> Dodaj. Možete prevući i ispustiti datoteke ili kliknuti Odaberite fajlove da ih otpremite.

Kada se datoteke preuzmu, idite u biblioteku medija i kliknite na jedan od zvukova, a zatim u prozoru koji se pojavi kopirajte URL datoteke da dobijete vezu za zvučni efekat.

Korak 3: Dodajte sljedeći HTML kod

Da bismo proizveli zvuk iz dugmeta, trebamo koristiti sljedeći HTML kod.

<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>

Dodajte HTML widget u područje platna i zalijepite kod u blok HTML kod.

Za zamjenu koristite vezu za zvučni efekat Sound-Effect-URL u izjavi

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

Odaberite CSS klase za dugme i izmenite kod klasa CSS klase dugmeta

$(".button-class").mousedown

Nakon izmjene koda, izgledat će ovako.

Korak 4: Dodajte CSS klasu dugmetu

Da povežemo dugme sa kodovima, moramo da dodamo CSS klase dugmetu, tako da kod zna na koje dugme se klikne i pokreće zvučne efekte.

A ovo je za dugme sa zvučnim efektom. Sada možete prilagoditi svoje dugme. A ako želite da dodate još dugmadi sa zvučnim efektima, to je moguće tako što ćete kopirati deo koda i malo ga modifikovati.

Dodata dodatna dugmad sa zvučnim efektima

Kreirajte dugme ili kopirajte postojeće dugme

Možete kopirati postojeće dugme tako što ćete kliknuti desnim tasterom miša na postojeće dugme i izabrati Kopiraj, a zatim ga nalepiti u bilo koji odeljak desnim klikom unutar tog odeljka.

Kopirajte dio koda i prilagodite varijable i ime CSS klase drugog dugmeta

Kopirajmo neke dijelove prethodnog HTML koda koji aktiviraju zvučni efekat, to je sljedeći kod ispod

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

Nakon kopiranja koda, zalijepite ga ispod by Audio 1 Ends. Izmijenite varijablu audio1 i sav kod koji koristi varijablu audio1 na novokreiranom kodu u audio2.

Vidi takođe: Elementor: Kako napraviti efektnu karticu iz portfelja

Zatim zamijenite URL zvučnog efekta ako koristite novi zvučni efekat za novo dugme i promijenite kod dugme klasa u vašim novokreiranim CSS klasama dugmeta.

Konačni kod će izgledati kao na sljedećoj slici.

Zamijenite CSS naziv klase gumba

Vaše novo kreirano dugme će takođe imati zvučni efekat kada se klikne. Možete kreirati koliko god želite.

Audio elementi su među sjajnim dodacima a site Web. Oni ne samo da predstavljaju atraktivan element za web stranice, već i pomažu u stvaranju trajnog utiska na krajnje korisnike.

Pročitajte takođe: Elementor: Kako premjestiti WordPress web stranicu

Međutim, radnja ili rezultat bi trebao biti popraćen zvukom samo ako značajno pojačava ili pojašnjava važnu poruku korisniku. Obavijestite korisnika o nečemu na što je potrebna njihova pažnja, kako to ne bi negativno utjecalo na vas site Web umesto toga.

Nabavite Elementor Pro odmah!

zaključak

Dakle! To je sve za ovaj članak koji vam pokazuje kako dodati zvučni efekt gumba Elementor. Ako imate bilo kakvih nedoumica oko toga kako doći do tamo, javite nam unutar komentari.

Međutim, možete se posavjetovati naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem o Izrada bloga WordPress ili onaj on Divi: najbolja WordPress tema svih vremena.

Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.

...