Elementor: Jak dodać efekt dźwiękowy przycisku

Musisz dowiedzieć się, jak dodać efekt dźwiękowy przycisku Elementor ? Dowiedz się w tym artykule.

Czy widzisz te 2 przyciski?

Po kliknięciu Kota, wyda miauczenie, a po kliknięciu przycisku na chien, wyda dźwięk szczekania. W tym artykule pokażemy, jak dodać w Elementor efekt dźwiękowy przycisku po kliknięciu.

Jak dodać efekt dźwiękowy do przycisku w Elementorze

Krok 1: Utwórz przycisk

Najpierw musisz utworzyć przycisk, możesz go dostosować, jak chcesz, ponieważ Elementor ma wiele opcji, dzięki którym Twój przycisk będzie piękny.

Krok 2: Przygotuj link do efektu dźwiękowego

Gdy przycisk będzie gotowy, przygotuj teraz efekt dźwiękowy dla przycisku i prześlij go do biblioteki multimediów WordPress. Do uzyskania efektu dźwiękowego można użyć formatu pliku MP3 lub WAV.

Aby przesłać plik dźwiękowy do biblioteki multimediów WordPress, przejdź do pulpitu nawigacyjnego WordPress i kliknij Multimedia -> Dodaj. Możesz przeciągnąć i upuścić pliki lub kliknąć Wybierz pliki aby je przesłać.

Po pobraniu plików przejdź do biblioteki multimediów i kliknij jeden z dźwięków, a następnie w wyświetlonym oknie skopiuj URL pliku aby uzyskać link do efektu dźwiękowego.

Krok 3: Dodaj następujący kod HTML

Aby wytworzyć dźwięk z przycisku, musimy użyć następującego kodu 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>

Dodaj widżet HTML w obszarze płótna i wklej kod w bloku Kod HTML.

Użyj linku do efektu dźwiękowego, aby zastąpić Efekt-dźwiękowy-URL w oświadczeniu

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

Wybierz klasy CSS dla przycisku i zmodyfikuj kod klas Klasa CSS przycisku

$(".button-class").mousedown

Po zmodyfikowaniu kodu będzie to wyglądać tak.

Krok 4: Dodaj klasę CSS do przycisku

Aby połączyć przycisk z kodami, musimy dodać do przycisku klasy CSS, aby kod wiedział, który przycisk jest klikany i uruchamiał efekty dźwiękowe.

A to za przycisk z efektem dźwiękowym. Możesz teraz dostosować swój przycisk. A jeśli chcesz dodać więcej przycisków z efektami dźwiękowymi, możesz to zrobić kopiując część kodu i nieco go modyfikując.

Dodano dodatkowe przyciski z efektami dźwiękowymi

Utwórz przycisk lub skopiuj istniejący przycisk

Możesz skopiować istniejący przycisk, klikając go prawym przyciskiem myszy i wybierając Kopiuj, a następnie wklej go do dowolnej sekcji, klikając prawym przyciskiem myszy w tej sekcji.

Skopiuj część kodu i dostosuj zmienne oraz nazwę klasy CSS drugiego przycisku

Skopiujmy niektóre części poprzedniego kodu HTML, które uruchamiają efekt dźwiękowy, oto poniższy kod

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

Po skopiowaniu kodu wklej go poniżej przez Audio 1 Koniec. Zmodyfikuj zmienną audio1 i cały kod, który używa tej zmiennej audio1 na nowo utworzonym kodzie w audio2.

Zobacz także: Elementor: Jak stworzyć kartę efektów z portfolio

Następnie zamień adres URL efektu dźwiękowego, jeśli używasz nowego efektu dźwiękowego dla nowego przycisku i zmień kod klasa przycisków w nowo utworzonych klasach CSS przycisków.

Ostateczny kod będzie wyglądał jak na poniższym obrazku.

Zamień nazwę klasy CSS przycisku

Twój nowo utworzony przycisk również będzie miał efekt dźwiękowy po kliknięciu. Możesz stworzyć tyle, ile chcesz.

Elementy audio należą do świetnych dodatków do Witryna internetowa. Nie tylko stanowią atrakcyjny element stron internetowych, ale także pomagają wywrzeć trwałe wrażenie na użytkownikach końcowych.

Czytaj także: Elementor: Jak przeprowadzić migrację witryny WordPress

Jednak działaniu lub rezultatowi powinien towarzyszyć dźwięk tylko wtedy, gdy znacząco wzmacnia lub wyjaśnia ważną wiadomość dla użytkownika. Poinformuj użytkownika o czymś, co wymaga jego uwagi, aby nie miało to negatywnego wpływu na jego Witryna internetowa zamiast tego.

Pobierz Elementor Pro teraz!

Wnioski

Więc ! To wszystko w tym artykule, który pokazuje, jak dodać efekt dźwiękowy przycisku Elementor. Jeśli masz jakiekolwiek wątpliwości, jak się tam dostać, daj nam znać w ciągu commentaires.

Możesz jednak również skonsultować się nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.

Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.

...