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

Vidite li ova 2 gumba?

Kada kliknete na Od mačke, napravit će mijaukanje, a kada kliknete gumb na chien, proizvest će zvuk lajanja. U ovom članku ćemo vam pokazati kako dodati Elementor zvučni efekt na gumb kada se klikne.

Kako dodati zvučni efekt gumbu u Elementoru

Korak 1: Napravite gumb

Prvo morate kreirati gumb, možete ga prilagoditi kako želite, jer Elementor ima mnogo opcija da vaš gumb učini lijepim.

Nakon što je gumb spreman, sada pripremite zvučni efekt za gumb i prenesite ga u WordPress medijsku biblioteku. Za zvučni efekt možete koristiti MP3 ili WAV format datoteke.

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

Zvučni efekt gumba na Elementoru

Nakon što 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 efekt.

Zvučni efekt gumba na Elementoru

Korak 3: Dodajte sljedeći HTML kod

Da bismo proizveli zvuk iz gumba, moramo 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 kôd.

Za zamjenu upotrijebite vezu za zvučni efekt URL zvučnog efekta u naputku

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

Odaberite CSS klase za gumb i izmijenite kod klasa CSS klase gumba

$(".button-class").mousedown

Nakon izmjene koda, izgledat će ovako.

Zvučni efekt gumba na Elementoru

Korak 4: Dodajte CSS klasu gumbu

Kako bismo povezali gumb s kodovima, gumbu moramo dodati CSS klase, tako da kod zna koji je gumb kliknut i aktivira zvučne efekte.

Zvučni efekt gumba na Elementoru

A ovo je za gumb sa zvučnim efektom. Sada možete prilagoditi svoj gumb. A ako želite dodati još gumba sa zvučnim efektima, to je izvedivo kopiranjem dijela koda i malo ga modificiranjem.

Dodani dodatni gumbi sa zvučnim efektima

Napravite gumb ili kopirajte postojeći gumb

Postojeći gumb možete kopirati tako da desnom tipkom miša kliknete postojeći gumb i odaberete Kopiraj, a zatim ga zalijepite u bilo koji odjeljak desnim klikom unutar tog odjeljka.

Zvučni efekt gumba na Elementoru

Kopirajte dio koda i prilagodite varijable i naziv CSS klase drugog gumba

Kopirajmo neke dijelove prethodnog HTML koda koji pokreću zvučni efekt, to je sljedeći kod u nastavku

//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 završava. Izmijenite varijablu audio1 i sav kod koji koristi varijablu audio1 na novostvorenom kodu u audio2.

Otkrijte također: Elementor: Kako stvoriti efekt karticu iz portfelja

Zatim zamijenite URL zvučnog efekta ako koristite novi zvučni efekt za novi gumb i promijenite kod tip gumba u vašim novostvorenim CSS klasama gumba.

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

Zvučni efekt gumba na Elementoru

Zamijenite naziv CSS klase gumba

Zvučni efekt gumba na Elementoru

Vaš novostvoreni gumb također će imati zvučni efekt kada ga kliknete. Možete kreirati koliko god želite.

Audioelementi su među izvrsnim dodacima a web stranica. Oni ne samo da pružaju atraktivan element za web stranice, već također pomažu stvoriti trajan dojam na krajnje korisnike.

Pročitajte također: Elementor: Kako migrirati WordPress web stranicu

Međutim, radnja ili rezultat trebaju biti popraćeni zvukom samo ako značajno pojačavaju ili pojašnjavaju važnu poruku korisniku. Obavijestite korisnika o nečemu što zahtijeva njegovu pozornost, kako to ne bi negativno utjecalo na vas web stranica umjesto 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 o tome kako doći tamo, javite nam unutar Komentari.

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

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

...