Elementor: Hogyan adjunk hozzá egy gomb hangeffektust

Meg kell találnia, hogyan adhat hozzá gomb hanghatást Elementor ? Tudja meg ebben a cikkben.

Látod ezt a 2 gombot?

Amikor rákattint a A macskától, akkor nyávog, és amikor rákattint a gombra a chien, ugató hangot ad ki. Ebben a cikkben megmutatjuk, hogyan kell hozzáadni Elementor hangeffektus a gombra kattintáskor.

Hogyan adhatunk hangeffektust az Elementor gombjához

1. lépés: Hozzon létre egy gombot

Először létre kell hoznia a gombot, testreszabhatja a gombot, ahogy akarja, mert Elementor számos lehetőséget kínál a gomb gyönyörűvé tételére.

2. lépés: Készítse elő a hangeffektus linkjét

Ha a gomb készen van, most készítse elő a gomb hangeffektusát, és töltse fel a WordPress médiakönyvtárába. A hanghatásokhoz MP3 vagy WAV fájlformátumot használhat.

A hangfájl WordPress médiakönyvtárba való feltöltéséhez lépjen a WordPress irányítópultjára, és kattintson a gombra Média -> Hozzáadás. A fájlokat áthúzhatja, vagy rákattinthat Fájlok kiválasztása feltölteni őket.

A fájlok letöltése után lépjen a médiakönyvtárba, és kattintson az egyik hangra, majd a megjelenő ablakban másolja a fájl URL-jét hogy megkapja a hangeffektus linkjét.

3. lépés: Adja hozzá a következő HTML-kódot

Ahhoz, hogy hangot állítsunk elő a gombról, a következő HTML kódot kell használnunk.

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

Adjon hozzá egy HTML widgetet a vászonterülethez, és illessze be a kódot a blokkba HTML kód.

Használja a hangeffektus hivatkozását a cseréhez Hanghatás-URL az utasításban

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

Válassza ki a gombhoz tartozó CSS ​​osztályokat, és módosítsa a gomb osztályainak CSS osztályának kódját

$(".button-class").mousedown

A kód módosítása után így fog kinézni.

4. lépés: Adjon hozzá egy CSS-osztályt a gombhoz

A gomb kódokhoz való csatlakoztatásához CSS osztályokat kell hozzáadnunk a gombhoz, így a kód tudja, melyik gombra kattintott, és kiváltja a hangeffektusokat.

És ez egy hangeffektusos gombhoz való. Most már személyre szabhatja gombját. Ha pedig további hangeffektusos gombokat szeretne hozzáadni, az megtehető a kód egy részének másolásával és egy kicsit módosításával.

További gombok hanghatásokkal

Hozza létre a gombot, vagy másolja a meglévő gombot

Másolhatja a meglévő gombot, ha jobb gombbal rákattint a meglévő gombra, és kiválasztja a Másolás parancsot, majd beillesztheti bármelyik szakaszba, ha jobb gombbal kattint az adott szakaszon belül.

Másolja ki a kód egy részét, és állítsa be a változókat és a második gomb CSS-osztálynevét

Másoljuk át az előző HTML kód néhány részét, amelyek kiváltják a hangeffektust, ez az alábbi kód

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

A kód kimásolása után illessze be alább by Audio 1 Ends. Módosítsa a változót audio1 és az összes kódot, amely a változót használja audio1 az újonnan létrehozott kódon audio2.

Lásd még: Elementor: Hogyan készítsünk effektkártyát egy portfólióból

Ezután cserélje ki a hangeffektus URL-címét, ha új hangeffektust használ az új gombhoz, és módosítsa a kódot gomb osztály az újonnan létrehozott gombos CSS-osztályaiban.

A végső kód az alábbi képhez hasonlóan fog kinézni.

Cserélje ki a gomb CSS-osztálynevét

Újonnan létrehozott gombjának hanghatása is lesz, ha rákattint. Létrehozhat annyit, amennyit csak akar.

Az audio elemek a nagyszerű kiegészítések közé tartoznak a weboldal. Nemcsak vonzó elemként szolgálnak a webhelyek számára, hanem segítenek tartós benyomást kelteni a végfelhasználókban.

Olvassa el: Elementor: Hogyan migráljunk egy WordPress-webhelyet

A cselekvést vagy eredményt azonban csak akkor szabad hang kísérni, ha az jelentősen megerősít vagy tisztáz egy fontos üzenetet a felhasználó számára. Tájékoztassa a felhasználót valamiről, ami figyelmet igényel, hogy az ne legyen negatív hatással az Önre weboldal helyette.

Szerezd meg az Elementor Pro alkalmazást most!

Következtetés

Így ! Ennyi ebben a cikkben, amely bemutatja, hogyan adhat hozzá gomb hanghatást Elementor. Ha bármilyen aggálya van az odajutással kapcsolatban, tudassa velünk észrevételek.

Ön is konzultálhat forrásaink, ha további elemekre van szüksége az internetes oldalak létrehozására irányuló projektek végrehajtásához, olvassa el a WordPress blog létrehozása vagy az egyiket Divi: minden idők legjobb WordPress témája.

De időközben ossza meg ezt a cikket a különböző közösségi hálózatokon.

...