Elementor: Jak přidat zvukový efekt tlačítka

Potřebujete zjistit, jak přidat zvukový efekt tlačítka Elementor ? Zjistit v tomto článku.

Vidíte tato 2 tlačítka?

Když kliknete na Z kočky, bude to mňoukat, a když kliknete na tlačítko na chien, bude vydávat štěkavý zvuk. V tomto článku vám ukážeme, jak přidat Elementor zvukový efekt tlačítka po kliknutí.

Jak přidat zvukový efekt k tlačítku v Elementor

Krok 1: Vytvořte tlačítko

Nejprve musíte vytvořit tlačítko, můžete si upravit tlačítko, jak chcete, protože Elementor má mnoho možností, jak udělat vaše tlačítko krásné.

Krok 2: Připravte odkaz na zvukový efekt

Jakmile je tlačítko připraveno, nyní připravte zvukový efekt pro tlačítko a nahrajte jej do knihovny médií WordPress. Pro zvukový efekt můžete použít formát souboru MP3 nebo WAV.

Chcete-li nahrát zvukový soubor do knihovny médií WordPress, přejděte na řídicí panel WordPress a klikněte Média -> Přidat. Soubory můžete přetáhnout nebo kliknout Vyberte soubory nahrát je.

Jakmile jsou soubory staženy, přejděte do knihovny médií a klikněte na jeden ze zvuků, poté v okně, které se zobrazí, zkopírujte URL souboru získat odkaz na zvukový efekt.

Krok 3: Přidejte následující kód HTML

K vytvoření zvuku z tlačítka musíme použít následující 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>

Přidejte widget HTML do oblasti plátna a vložte kód do bloku HTML kód.

K nahrazení použijte odkaz na zvukový efekt URL zvukového efektu v pokynu

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

Vyberte třídy CSS pro tlačítko a upravte kód tříd Třída CSS tlačítka

$(".button-class").mousedown

Po úpravě kódu to bude vypadat takto.

Krok 4: Přidejte k tlačítku třídu CSS

Abychom spojili tlačítko s kódy, musíme do tlačítka přidat třídy CSS, aby kód věděl, na které tlačítko bylo kliknuto, a spustil zvukové efekty.

A to je na tlačítko se zvukovým efektem. Tlačítko si nyní můžete přizpůsobit. A pokud chcete přidat další tlačítka se zvukovými efekty, je to proveditelné zkopírováním části kódu a jeho drobnou úpravou.

Přidána další tlačítka se zvukovými efekty

Vytvořte tlačítko nebo zkopírujte stávající tlačítko

Existující tlačítko můžete zkopírovat kliknutím pravým tlačítkem na existující tlačítko a výběrem možnosti Kopírovat a poté jej vložit do libovolné sekce kliknutím pravým tlačítkem myši do této sekce.

Zkopírujte část kódu a upravte proměnné a název třídy CSS druhého tlačítka

Zkopírujeme některé části předchozího kódu HTML, které spouštějí zvukový efekt, je to následující kód

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

Po zkopírování kódu jej vložte těsně pod by Audio 1 Ends. Upravte proměnnou zvuk 1 a veškerý kód, který používá proměnnou zvuk 1 na nově vytvořeném kódu v zvuk 2.

Viz také: Elementor: Jak vytvořit efektovou kartu z portfolia

Pak nahraďte adresu URL zvukového efektu, pokud pro nové tlačítko používáte nový zvukový efekt, a změňte kód knoflíková třída ve vašich nově vytvořených třídách CSS tlačítek.

Konečný kód bude vypadat jako na následujícím obrázku.

Nahraďte název třídy CSS tlačítka

Vaše nově vytvořené tlačítko bude mít po kliknutí také zvukový efekt. Můžete jich vytvořit kolik chcete.

Audio prvky patří mezi skvělé doplňky a Webové stránky. Poskytují nejen atraktivní prvek pro webové stránky, ale také pomáhají vytvořit trvalý dojem na koncové uživatele.

Čtěte také: Elementor: Jak migrovat web WordPress

Akce nebo výsledek by však měl být doprovázen zvukem pouze v případě, že výrazně posiluje nebo objasňuje důležité sdělení pro uživatele. Informujte uživatele o něčem, co vyžaduje jeho pozornost, aby to nemělo negativní dopad na vás Webové stránky místo toho.

Získejte nyní prvek Elementor Pro!

závěr

Tak ! To je vše pro tento článek, který vám ukáže, jak přidat zvukový efekt tlačítka na Elementor. Pokud máte nějaké obavy, jak se tam dostat, dejte nám vědět commentaires.

Můžete však také konzultovat naše zdroje, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.

Mezitím sdílejte tento článek na různých sociálních sítích.

...