Elementor: Hur man lägger till en knappljudeffekt

Behöver ta reda på hur man lägger till knappljudeffekt på Elementor ? Ta reda på det i den här artikeln.

Ser du dessa 2 knappar?

När du klickar på Av katten, kommer det att göra en jamning, och när du klickar på knappen på chien, kommer det att producera ett skällande ljud. I den här artikeln kommer vi att visa dig hur du lägger till Elementor en ljudeffekt till knappen när den klickas.

Hur man lägger till ljudeffekt till knappen i Elementor

Steg 1: Skapa en knapp

Först måste du skapa knappen, du kan anpassa knappen som du vill, eftersom Elementor har många alternativ för att göra din knapp vacker.

Steg 2: Förbered ljudeffektlänken

När knappen är klar, förbered nu ljudeffekten för knappen och ladda upp den till WordPress mediebibliotek. Du kan använda MP3- eller WAV-filformat för ljudeffekt.

För att ladda upp ljudfilen till WordPress mediebibliotek, navigera till WordPress-instrumentpanelen och klicka Media -> Lägg till. Du kan dra och släppa filerna eller klicka Välj filer för att ladda upp dem.

När filerna har laddats ner, gå till mediabiblioteket och klicka på ett av ljuden, kopiera sedan i fönstret som visas filens URL för att få länken till ljudeffekten.

Steg 3: Lägg till följande HTML-kod

För att producera ljud från knappen måste vi använda följande HTML-kod.

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

Lägg till en HTML-widget i arbetsytan och klistra in koden i blocket HTML Code.

Använd din ljudeffektlänk för att ersätta Ljudeffekt-URL i instruktionen

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

Välj CSS-klasserna för knappen och ändra koden för knappens CSS-klass

$(".button-class").mousedown

Efter att ha modifierat koden kommer den att se ut så här.

Steg 4: Lägg till en CSS-klass till knappen

För att koppla knappen till koderna behöver vi lägga till CSS-klasser till knappen, så att koden vet vilken knapp som klickas på och utlöser ljudeffekterna.

Och det här är för en knapp med ljudeffekt. Du kan nu anpassa din knapp. Och om du vill lägga till fler knappar med ljudeffekter går det att göra genom att kopiera en del av koden och modifiera den lite.

Lade till ytterligare knappar med ljudeffekter

Skapa knappen eller kopiera den befintliga knappen

Du kan kopiera den befintliga knappen genom att högerklicka på den befintliga knappen och välja Kopiera och sedan klistra in den i valfri sektion genom att högerklicka inuti den sektionen.

Kopiera en del av koden och justera variablerna och CSS-klassnamnet för den andra knappen

Låt oss kopiera några delar av den tidigare HTML-koden som utlöser ljudeffekten, det är följande kod nedan

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

Efter att ha kopierat koden, klistra in den precis nedanför av Audio 1 slutar. Ändra variabeln audio1 och all kod som använder variabeln audio1 på den nyskapade koden i audio2.

Se även: Elementor: Hur man skapar ett effektkort från en portfölj

Byt sedan ut ljudeffektens url om du använder en ny ljudeffekt för den nya knappen och ändra koden knappklass i dina nyskapade knapp CSS-klasser.

Den slutliga koden kommer att se ut som följande bild.

Byt ut knappens CSS-klassnamn

Din nyskapade knapp kommer också att ha en ljudeffekt när du klickar på den. Du kan skapa så många du vill.

Ljudelement är bland de stora tilläggen till en webbplats. De ger inte bara ett attraktivt element för webbplatser utan hjälper också till att skapa ett bestående intryck på slutanvändarna.

Läs också: Elementor: Hur man migrerar en WordPress-webbplats

Handlingen eller resultatet bör dock endast åtföljas av ljud om det avsevärt förstärker eller förtydligar ett viktigt budskap till användaren. Informera användaren om något som behöver deras uppmärksamhet, så att det inte ger en negativ inverkan på din webbplats stället.

Skaffa Elementor Pro nu!

Slutsats

Så ! Det är allt för den här artikeln som visar hur du lägger till knappljudeffekter Elementor. Om du har några funderingar kring hur du ska ta dig dit, låt oss veta inom commentaires.

Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Men under tiden dela den här artikeln på dina olika sociala nätverk.

.