Elementor: Sådan tilføjes en knaplydeffekt

Har brug for at finde ud af, hvordan man tilføjer knaplydeffekt Elementor ? Find ud af i denne artikel.

Kan du se disse 2 knapper?

Når du klikker på Af katten, vil det lave et miau, og når du klikker på knappen på chien, vil det frembringe en gøende lyd. I denne artikel viser vi dig, hvordan du tilføjer Elementor en lydeffekt til knappen, når der klikkes på den.

Sådan tilføjer du lydeffekt til knappen i Elementor

Trin 1: Opret en knap

Først skal du oprette knappen, du kan tilpasse knappen som du vil, fordi Elementor har mange muligheder for at gøre din knap smuk.

Trin 2: Forbered lydeffektlinket

Når knappen er klar, skal du nu forberede lydeffekten til knappen og uploade den til WordPress mediebibliotek. Du kan bruge MP3- eller WAV-filformat til lydeffekt.

For at uploade lydfilen til WordPress-mediebiblioteket skal du navigere til WordPress-dashboardet og klikke Medier -> Tilføj. Du kan trække og slippe filerne eller klikke Vælg filer at uploade dem.

Når filerne er downloadet, skal du gå til mediebiblioteket og klikke på en af ​​lydene, og derefter kopiere i det vindue, der vises. filens URL for at få linket til lydeffekten.

Trin 3: Tilføj følgende HTML-kode

For at producere lyd fra knappen skal vi bruge følgende HTML-kode.

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

Tilføj en HTML-widget i lærredsområdet og indsæt koden i blokken HTML kode.

Brug dit lydeffektlink til at erstatte Lydeffekt-URL i instruktionen

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

Vælg CSS-klasserne for knappen, og modificer koden for knappens CSS-klasse

$(".button-class").mousedown

Efter at have ændret koden, vil den se sådan ud.

Trin 4: Tilføj en CSS-klasse til knappen

For at forbinde knappen til koderne skal vi tilføje CSS-klasser til knappen, så koden ved hvilken knap der klikkes på og udløser lydeffekterne.

Og dette er til en knap med lydeffekt. Du kan nu tilpasse din knap. Og hvis du vil tilføje flere knapper med lydeffekter, kan det lade sig gøre ved at kopiere en del af koden og ændre den lidt.

Tilføjet yderligere knapper med lydeffekter

Opret knappen eller kopier den eksisterende knap

Du kan kopiere den eksisterende knap ved at højreklikke på den eksisterende knap og vælge Kopier, og derefter indsætte den i en vilkårlig sektion ved at højreklikke inde i den sektion.

Kopier en del af koden og juster variablerne og CSS-klassenavnet på den anden knap

Lad os kopiere nogle dele af den tidligere HTML-kode, der udløser lydeffekten, det er den følgende kode nedenfor

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

Efter at have kopieret koden, indsæt den lige nedenfor af Audio 1 slutter. Rediger variablen lyd1 og al den kode, der bruger variablen lyd1 på den nyoprettede kode i lyd2.

Se også: Elementor: Sådan opretter du et effektkort fra en portefølje

Udskift derefter lydeffekt-url'en, hvis du bruger en ny lydeffekt til den nye knap, og skift koden knapklasse i dine nyoprettede knap CSS-klasser.

Den endelige kode vil se ud som det følgende billede.

Erstat knappens CSS-klassenavn

Din nyoprettede knap vil også have en lydeffekt, når du klikker på den. Du kan oprette så mange, du vil.

Lydelementer er blandt de store tilføjelser til en Websted. De giver ikke kun et attraktivt element til websteder, men hjælper også med at skabe et varigt indtryk på slutbrugere.

Læs også: Elementor: Sådan migrerer du et WordPress-websted

Handlingen eller resultatet bør dog kun ledsages af lyd, hvis det væsentligt forstærker eller tydeliggør et vigtigt budskab til brugeren. Informer brugeren om noget, der har brug for deres opmærksomhed, så det ikke giver en negativ indvirkning på din Websted i stedet.

Hent Elementor Pro nu!

Konklusion

Så! Det er alt for denne artikel, som viser dig, hvordan du tilføjer knaplydeffekt Elementor. Hvis du er i tvivl om, hvordan du kommer dertil, så lad os det vide inden for kommentarer.

Du kan dog også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.

Men i mellemtiden del denne artikel på dine forskellige sociale netværk.

...