Divi: Najlepšia WordPress tému všetkých čias!

viac Stahovanie 901.000, Divi je najobľúbenejšia WordPress tému na svete. Je kompletný, ľahko použiteľný a je dodávaný s viac než 62 bezplatnými šablónami.

Potrebujete zistiť, ako pridať zvukový efekt tlačidla na Elementor? Zistite 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 ho prispôsobiť, ako chcete, pretože Elementor má veľa možností, aby vaše tlačidlo vyzeralo krásne.

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.

zvukový efekt tlačidla na Elementore

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.

zvukový efekt tlačidla na Elementore

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.

Ľahko vytvorte svoje webové stránky pomocou Elementoru

Elementor vám umožňuje vytvárať Jednoducho a zadarmo akýkoľvek dizajn webovej stránky alebo blogu s profesionálnym vzhľadom. Prestaňte platiť veľa za webovú stránku, ktorú môžete urobiť sami.

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.

zvukový efekt tlačidla na Elementore

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.

zvukový efekt tlačidla na Elementore

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.

zvukový efekt tlačidla na Elementore

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.

zvukový efekt tlačidla na Elementore

Nahraďte názov triedy CSS tlačidla

zvukový efekt tlačidla na Elementore

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 webovej 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. Informovanie používateľa o niečom, čo si vyžaduje jeho pozornosť, aby to nemalo negatívny vplyv na váš web.

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

...

0 akcie
podiel
tweet
Registrovať