Elementor: Ako pridať zvukový efekt tlačidla

Potrebujete zistiť, ako pridať zvukový efekt tlačidla Elementor ? Viac informácií nájdete v tomto článku.

Vidíte tieto 2 tlačidlá?

Keď kliknete na Z mačky, bude to mňaukať a keď kliknete na tlačidlo na chien, vydá štekavý zvuk. V tomto článku vám ukážeme, ako pridať Elementor zvukový efekt na tlačidlo po kliknutí.

Ako pridať zvukový efekt na tlačidlo v Elementore

Krok 1: Vytvorte tlačidlo

Najprv musíte vytvoriť tlačidlo, môžete si tlačidlo prispôsobiť, ako chcete, pretože Elementor má veľa možností, ako urobiť váš gombík krásnym.

Krok 2: Pripravte odkaz na zvukový efekt

Keď je tlačidlo pripravené, teraz pripravte zvukový efekt pre tlačidlo a nahrajte ho do knižnice médií WordPress. Pre zvukový efekt môžete použiť formát súboru MP3 alebo WAV.

Ak chcete nahrať zvukový súbor do knižnice médií WordPress, prejdite na informačný panel WordPress a kliknite Médiá -> Pridať. Súbory môžete presunúť myšou alebo kliknúť Vyberte súbory aby ste ich nahrali.

Po stiahnutí súborov prejdite do knižnice médií a kliknite na jeden zo zvukov, potom v zobrazenom okne skopírujte URL súboru získať odkaz na zvukový efekt.

Krok 3: Pridajte nasledujúci kód HTML

Na vytvorenie zvuku z tlačidla musíme použiť nasledujúci HTML kód.

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

Pridajte miniaplikáciu HTML do oblasti plátna a vložte kód do bloku HTML kód.

Na nahradenie použite odkaz na zvukový efekt URL zvukového efektu vo výpise

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

Vyberte triedy CSS pre tlačidlo a upravte kód tried CSS triedy tlačidla

$(".button-class").mousedown

Po úprave kódu to bude vyzerať takto.

Krok 4: Pridajte k tlačidlu triedu CSS

Na pripojenie tlačidla ku kódom musíme k tlačidlu pridať triedy CSS, aby kód vedel, na ktoré tlačidlo sa kliklo, a spustí zvukové efekty.

A to na tlačidlo so zvukovým efektom. Teraz si môžete prispôsobiť svoje tlačidlo. A ak chcete pridať ďalšie tlačidlá so zvukovými efektmi, je to možné skopírovaním časti kódu a miernou úpravou.

Pridané ďalšie tlačidlá so zvukovými efektmi

Vytvorte tlačidlo alebo skopírujte existujúce tlačidlo

Existujúce tlačidlo môžete skopírovať kliknutím pravým tlačidlom myši na existujúce tlačidlo a výberom položky Kopírovať a potom ho prilepiť do ľubovoľnej sekcie kliknutím pravým tlačidlom myši do tejto sekcie.

Skopírujte časť kódu a upravte premenné a názov triedy CSS druhého tlačidla

Skopírujeme niektoré časti predchádzajúceho kódu HTML, ktoré spúšťajú zvukový efekt, je to nasledujúci kód

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

Po skopírovaní kódu ho prilepte tesne pod by Audio 1 Ends. Upravte premennú zvuk 1 a všetok kód, ktorý používa premennú zvuk 1 na novovytvorenom kóde v zvuk 2.

Pozri tiež: Elementor: Ako vytvoriť efektovú kartu z portfólia

Potom nahraďte adresu URL zvukového efektu, ak pre nové tlačidlo používate nový zvukový efekt, a zmeňte kód gombíková trieda vo vašich novovytvorených triedach CSS tlačidiel.

Konečný kód bude vyzerať ako na nasledujúcom obrázku.

Nahraďte názov triedy CSS tlačidla

Vaše novovytvorené tlačidlo bude mať po kliknutí aj zvukový efekt. Môžete vytvoriť toľko, koľko chcete.

Zvukové prvky patria medzi skvelé doplnky k a webové stránky. Poskytujú nielen atraktívny prvok pre webové stránky, ale tiež pomáhajú vytvárať trvalý dojem na koncových používateľov.

Čítajte tiež: Elementor: Ako migrovať webovú stránku WordPress

Akcia alebo výsledok by však mal byť sprevádzaný zvukom iba vtedy, ak výrazne posilňuje alebo objasňuje dôležité posolstvo pre používateľa. Informujte používateľa o niečom, čo si vyžaduje jeho pozornosť, aby to nemalo negatívny vplyv na vás webové stránky miesto.

Získajte teraz prvok Elementor!

záver

Takže ! To je všetko pre tento článok, ktorý vám ukáže, ako pridať zvukový efekt tlačidiel Elementor. Ak máte nejaké obavy, ako sa tam dostať, dajte nám vedieť Komentáre.

Môžete sa však tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.

Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.

...