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.
Pasul 2: Pregătiți legătura cu efectul sonor
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.
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.
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.
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.
Ș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.
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.
Înlocuiți numele clasei CSS al butonului
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.
...