Trebuie să aflați cum să adăugați efect de sunet pentru buton Elementor ? Aflați în acest articol.

Vedeți aceste 2 butoane?

Când faceți clic pe Al pisicii, va face un miaunat, iar când dați clic pe butonul de pe chien, va produce un lătrat. În acest articol, vă vom arăta cum să adăugați Elementor un efect sonor pentru butonul atunci când este făcut clic.

Cum să adăugați un efect de sunet la butonul din Elementor

Pasul 1: Creați un buton

Mai întâi trebuie să creați butonul, îl puteți personaliza după cum doriți, deoarece Elementor are multe opțiuni pentru a-ți face butonul frumos.

Odată ce butonul este gata, pregătiți acum efectul sonor pentru butonul și încărcați-l în biblioteca media WordPress. Puteți utiliza formatul de fișier MP3 sau WAV pentru efectul sonor.

Pentru a încărca fișierul de sunet în biblioteca media WordPress, navigați la tabloul de bord WordPress și faceți clic Media -> Adăugați. Puteți să glisați și să plasați fișierele sau să faceți clic Selectati fisierele pentru a le încărca.

efect de sunet al butonului pe Elementor

Odată descărcate fișierele, accesați biblioteca media și faceți clic pe unul dintre sunete, apoi în fereastra care apare, copiați URL-ul fișierului pentru a obține linkul pentru efectul sonor.

efect de sunet al butonului pe Elementor

Pasul 3: Adăugați următorul cod HTML

Pentru a produce sunet de la buton, trebuie să folosim următorul cod HTML.

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

Adăugați un widget HTML în zona de pânză și inserați codul în bloc Cod HTML.

Utilizați linkul pentru efectul sonor pentru a înlocui Adresa URL a efectului sonor în declarație

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

Alegeți clasele CSS pentru buton și modificați codul claselor CSS ale butonului

$(".button-class").mousedown

După modificarea codului, va arăta așa.

efect de sunet al butonului pe Elementor

Pasul 4: Adăugați o clasă CSS la buton

Pentru a conecta butonul la coduri, trebuie să adăugăm la buton clase CSS, astfel încât codul să știe pe ce buton se face clic și să declanșeze efectele sonore.

efect de sunet al butonului pe Elementor

Și asta pentru un buton cu efect sonor. Acum vă puteți personaliza butonul. Și dacă doriți să adăugați mai multe butoane cu efecte sonore, este posibil prin copierea unei părți din cod și modificându-l puțin.

S-au adăugat butoane suplimentare cu efecte sonore

Creați butonul sau copiați butonul existent

Puteți copia butonul existent făcând clic dreapta pe butonul existent și selectând Copiere, apoi inserați-l în orice secțiune făcând clic dreapta în interiorul acelei secțiuni.

efect de sunet al butonului pe Elementor

Copiați o parte din cod și ajustați variabilele și numele clasei CSS al celui de-al doilea buton

Să copiem câteva părți din codul HTML anterior care declanșează efectul sonor, este următorul cod de mai jos

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

După ce copiați codul, lipiți-l chiar mai jos de Audio 1 Ends. Modificați variabila audio1 și tot codul care folosește variabila audio1 pe codul nou creat în audio2.

Vezi și: Elementor: Cum să creați o carte de efect dintr-un portofoliu

Apoi înlocuiți adresa URL a efectului de sunet dacă utilizați un nou efect de sunet pentru noul buton și schimbați codul clasa de butoane în clasele CSS de buton nou create.

Codul final va arăta ca imaginea următoare.

efect de sunet al butonului pe Elementor

Înlocuiți numele clasei CSS al butonului

efect de sunet al butonului pe Elementor

Butonul dvs. nou creat va avea, de asemenea, un efect sonor atunci când faceți clic. Puteți crea câte doriți.

Elementele audio se numără printre marile completări la a site-ul web. Ele nu numai că oferă un element atractiv pentru site-uri web, dar ajută și la crearea unei impresii de durată asupra utilizatorilor finali.

Citiți și: Elementor: Cum să migrați un site web WordPress

Cu toate acestea, acțiunea sau rezultatul ar trebui să fie însoțite de sunet numai dacă întărește sau clarifică semnificativ un mesaj important pentru utilizator. Informați utilizatorul despre ceva care necesită atenția sa, astfel încât să nu aibă un impact negativ asupra dumneavoastră site-ul web în schimb.

Obțineți Elementor Pro acum!

Concluzie

Asa de ! Asta este tot pentru acest articol, care vă arată cum să adăugați efect de sunet pentru buton Elementor. Dacă aveți nelămuriri despre cum să ajungeți acolo, anunțați-ne în termen comentarii.

Cu toate acestea, puteți consulta și resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.

Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.

...