Elementor: Hvordan legge til en knapplydeffekt

Trenger å finne ut hvordan du legger til knapplydeffekt på Elementor ? Finn ut i denne artikkelen.

Ser du disse 2 knappene?

Når du klikker på Av katten, vil det lage et mjau, og når du klikker på knappen på chien, vil det produsere en bjeffelyd. I denne artikkelen vil vi vise deg hvordan du legger til Elementor en lydeffekt til knappen når den klikkes.

Hvordan legge til lydeffekt på knappen i Elementor

Trinn 1: Lag en knapp

Først må du lage knappen, du kan tilpasse knappen slik du vil, fordi Elementor har mange alternativer for å gjøre knappen vakker.

Trinn 2: Forbered lydeffektkoblingen

Når knappen er klar, forbereder du lydeffekten for knappen og laster den opp til WordPress mediebibliotek. Du kan bruke MP3- eller WAV-filformat for lydeffekt.

For å laste opp lydfilen til WordPress mediebibliotek, naviger til WordPress-dashbordet og klikk Media -> Legg til. Du kan dra og slippe filene eller klikke Velg filer for å laste dem opp.

Når filene er lastet ned, gå til mediebiblioteket og klikk på en av lydene, og kopier deretter i vinduet som vises filens URL for å få lenken til lydeffekten.

Trinn 3: Legg til følgende HTML-kode

For å produsere lyd fra knappen, må vi bruke 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>

Legg til en HTML-widget i lerretsområdet og lim inn koden i blokken HTML kode.

Bruk lydeffektkoblingen for å erstatte Lydeffekt-URL i instruksjonen

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

Velg CSS-klassene for knappen og modifiser koden til CSS-klassene til knappen

$(".button-class").mousedown

Etter å ha modifisert koden, vil den se slik ut.

Trinn 4: Legg til en CSS-klasse på knappen

For å koble knappen til kodene må vi legge til CSS-klasser til knappen, slik at koden vet hvilken knapp som klikkes og utløser lydeffektene.

Og dette er for en knapp med lydeffekt. Du kan nå tilpasse knappen. Og hvis du vil legge til flere knapper med lydeffekter, kan det gjøres ved å kopiere deler av koden og endre den litt.

Lagt til ekstra knapper med lydeffekter

Opprett knappen eller kopier den eksisterende knappen

Du kan kopiere den eksisterende knappen ved å høyreklikke den eksisterende knappen og velge Kopier, og deretter lime den inn i en hvilken som helst del ved å høyreklikke inne i den delen.

Kopier en del av koden og juster variablene og CSS-klassenavnet til den andre knappen

La oss kopiere noen deler av den forrige HTML-koden som utløser lydeffekten, det er 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

Etter å ha kopiert koden, lim den inn rett nedenfor av Audio 1 slutter. Endre variabelen lyd1 og all koden som bruker variabelen lyd1 på den nyopprettede koden i lyd2.

Se også: Elementor: Hvordan lage et effektkort fra en portefølje

Bytt deretter ut lydeffekt-url hvis du bruker en ny lydeffekt for den nye knappen og endre koden knappeklasse i de nyopprettede knappen CSS-klasser.

Den endelige koden vil se ut som følgende bilde.

Erstatt CSS-klassenavnet til knappen

Den nyopprettede knappen vil også ha en lydeffekt når den klikkes. Du kan lage så mange du vil.

Lydelementer er blant de flotte tilleggene til en nettstedet Web. De gir ikke bare et attraktivt element for nettsteder, men bidrar også til å skape et varig inntrykk på sluttbrukere.

Les også: Elementor: Hvordan migrere et WordPress-nettsted

Handlingen eller resultatet skal imidlertid bare ledsages av lyd hvis det i vesentlig grad forsterker eller tydeliggjør et viktig budskap til brukeren. Informer brukeren om noe som trenger deres oppmerksomhet, slik at det ikke gir en negativ innvirkning på din nettstedet Web i stedet.

Få Elementor Pro nå!

konklusjonen

Så! Det er alt for denne artikkelen som viser deg hvordan du legger til knapplydeffekter Elementor. Hvis du har noen bekymringer om hvordan du kommer dit, gi oss beskjed innen commentaires.

Du kan imidlertid også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.

Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.

...