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.
Korak 2: Pripremite vezu za zvučni efekt
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.
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.
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.
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.
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.
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.
Zamijenite naziv CSS klase gumba
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.
...