Divi: Nejlepší WordPress téma všech dob!

více Stahování 901.000, Divi je nejoblíbenější téma WordPress na světě. Je kompletní, snadno použitelný a je dodáván s více než šablonami 62 zdarma.

Potřebujete zjistit, jak přidat zvukový efekt tlačítka na Elementor? Dozvíte se 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 jej upravit, jak chcete, protože Elementor má mnoho možností, jak vaše tlačítko vypadat 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 objeví, 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.

Vytvořte si snadno svůj web pomocí Elementoru

Elementor vám umožní tvořit Snadno a zdarma jakýkoli design webových stránek nebo blogu s profesionálním vzhledem. Přestaňte platit hodně za web, který si můžete udělat sami.

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.

Zvukové prvky patří mezi skvělé doplňky webových stránek. 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í uživateli. Informování uživatele o něčem, co vyžaduje jeho pozornost, aby to místo toho nemělo negativní dopad na váš web.

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.

...

0 akcie
podíl
tweet
Zadat