버튼 사운드 효과를 추가하는 방법을 알아내야 합니다. Elementor ? 이 기사에서 알아보십시오.
2개의 버튼이 보이시나요?
클릭하면 고양이의, 그것은 야옹 할 것이고, 당신이 버튼을 클릭하면 CHIEN, 짖는 소리가 납니다. 이 기사에서는 추가하는 방법을 보여줍니다. Elementor 클릭 시 버튼에 사운드 효과.
Elementor에서 버튼에 사운드 효과를 추가하는 방법
1단계: 버튼 만들기
먼저 버튼을 생성해야 하므로 원하는 대로 버튼을 사용자 정의할 수 있습니다. Elementor 버튼을 아름답게 만드는 많은 옵션이 있습니다.
2단계: 효과음 링크 준비
버튼이 준비되면 이제 버튼의 음향 효과를 준비하고 WordPress 미디어 라이브러리에 업로드합니다. 음향 효과를 위해 MP3 또는 WAV 파일 형식을 사용할 수 있습니다.
사운드 파일을 WordPress 미디어 라이브러리에 업로드하려면 WordPress 대시보드로 이동하여 다음을 클릭합니다. 미디어 -> 추가. 파일을 끌어다 놓거나 클릭할 수 있습니다. 파일 선택 업로드할 수 있습니다.
파일이 다운로드되면 미디어 라이브러리로 이동하여 소리 중 하나를 클릭한 다음 나타나는 창에서 복사합니다. 파일 URL 사운드 효과에 대한 링크를 가져옵니다.
3단계: 다음 HTML 코드 추가
버튼에서 소리를 내려면 다음 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>캔버스 영역에 HTML 위젯을 추가하고 블록에 코드를 붙여넣습니다. HTML 코드.
사운드 효과 링크를 사용하여 교체 음향 효과-URL 지시에
var audio1 = new Audio('Sound-Effect-URL')버튼의 CSS 클래스를 선택하고 버튼의 CSS 클래스 코드를 수정합니다.
$(".button-class").mousedown코드를 수정하면 이런 모양이 됩니다.
4단계: 버튼에 CSS 클래스 추가
버튼을 코드에 연결하려면 버튼에 CSS 클래스를 추가해야 코드가 어떤 버튼이 클릭되었는지 알고 사운드 효과를 트리거합니다.
그리고 이것은 효과음이 있는 버튼을 위한 것입니다. 이제 버튼을 사용자 정의할 수 있습니다. 그리고 효과음이 있는 버튼을 더 추가하고 싶다면 코드의 일부를 복사하고 약간 수정하면 됩니다.
음향 효과가 있는 추가 버튼 추가
버튼 생성 또는 기존 버튼 복사
기존 버튼을 마우스 오른쪽 버튼으로 클릭하고 복사를 선택하여 기존 버튼을 복사한 다음 해당 섹션 내부를 마우스 오른쪽 버튼으로 클릭하여 섹션에 붙여넣을 수 있습니다.
코드의 일부를 복사하고 두 번째 버튼의 변수와 CSS 클래스 이름을 조정합니다.
사운드 효과를 트리거하는 이전 HTML 코드의 일부를 복사해 보겠습니다. 아래 코드는
//Audio 1 Starts
var audio1 = new Audio('Sound-Effect-URL')
$(".button-class").mousedown(function() {
audio1.load();
audio1.play();
});
//Audio 1 Ends코드를 복사한 후 바로 아래에 붙여넣습니다. 오디오 1 끝으로. 변수 수정 오디오1 변수를 사용하는 모든 코드 오디오1 새로 생성된 코드에 오디오2.
참조 : Elementor: 포트폴리오에서 효과 카드를 만드는 방법
그런 다음 새 버튼에 새 사운드 효과를 사용하는 경우 사운드 효과 URL을 교체하고 코드를 변경합니다. 버튼 클래스 새로 생성된 버튼 CSS 클래스에서.
최종 코드는 다음 이미지와 같습니다.
버튼의 CSS 클래스 이름 바꾸기
새로 만든 버튼을 클릭하면 사운드 효과도 나타납니다. 원하는 만큼 생성할 수 있습니다.
오디오 요소는 사이트 웹. 웹사이트에 매력적인 요소를 제공할 뿐만 아니라 최종 사용자에게 지속적인 인상을 남길 수 있습니다.
읽기 : Elementor: WordPress 웹사이트를 마이그레이션하는 방법
그러나 행동이나 결과는 사용자에게 중요한 메시지를 유의하게 강화하거나 명확하게 하는 경우에만 소리를 동반해야 합니다. 주의가 필요한 사항을 사용자에게 알려 귀하의 서비스에 부정적인 영향을 미치지 않도록 사이트 웹 대신에.
지금 Elementor Pro를 받으세요!
결론
그래서 ! 버튼 사운드 효과를 추가하는 방법을 보여주는 이 기사는 이것이 전부입니다. Elementor. 가는 방법에 대해 우려 사항이 있는 경우 내부에 알려주십시오. commentaires.
그러나 상담 할 수도 있습니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
