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

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.

zvukový efekt tlačítka na Elementoru

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.

zvukový efekt tlačítka na Elementoru

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.

zvukový efekt tlačítka na Elementoru

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.

zvukový efekt tlačítka na Elementoru

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.

zvukový efekt tlačítka na Elementoru

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.

zvukový efekt tlačítka na Elementoru

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

zvukový efekt tlačítka na Elementoru

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!

Proč investovat do čističky vzduchu?

Tak ! To je vše pro tento článek, který vám ukáže, jak přidat zvukový efekt tlačítka 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.

...