Divi: najbolja WordPress tema svih vremena!

više 901.000 preuzimanja, Divi je najpopularnija WordPress tema na svijetu. Kompletan je, jednostavan za korištenje i dolazi s više od 62 besplatnih predložaka.

Trebate saznati kako dodati zvučni efekt gumba na 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, trebate kreirati gumb, možete ga prilagoditi kako želite, jer Elementor ima mnogo opcija kako bi vaš gumb izgledao lijepo.

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.

Jednostavno izradite svoju web stranicu s Elementor-om

Elementor vam omogućuje stvaranje Jednostavno i besplatno bilo koje web stranice ili blog dizajn s profesionalnim izgledom. Prestanite plaćati puno za web stranicu koju možete sami napraviti.

Za zamjenu upotrijebite vezu za zvučni efekt Sound-Effect-URL 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.

Audio elementi su među sjajnim dodacima web stranici. Oni ne samo da predstavljaju atraktivan element za web-mjesta, 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. Informiranje korisnika o nečemu što zahtijeva njihovu pažnju, kako to ne bi negativno utjecalo na vašu web stranicu.

Nabavite Elementor Pro odmah!

Zaključak

Dakle ! To je to za ovaj članak koji vam pokazuje kako dodati zvučni efekt gumba na Elementor. Ako imate bilo kakvih nedoumica oko toga kako doći do 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.

...

0 dionice
udio
cvrkut
Prijaviti