Elementor: Cách thêm hiệu ứng âm thanh cho nút

Cần tìm hiểu cách thêm hiệu ứng âm thanh của nút trên Elementor ? Tìm hiểu trong bài viết này.

Bạn có thấy 2 nút này không?

Khi bạn nhấp vào Của con mèo, nó sẽ kêu meo meo và khi bạn nhấp vào nút trên chien, nó sẽ tạo ra âm thanh sủa. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách thêm Elementor một hiệu ứng âm thanh cho nút khi được nhấp vào.

Cách thêm hiệu ứng âm thanh vào nút trong Elementor

Bước 1: Tạo một nút

Đầu tiên, bạn cần tạo nút, bạn có thể tùy chỉnh nút theo ý muốn, vì Elementor có nhiều tùy chọn để làm cho nút của bạn đẹp.

Bước 2: Chuẩn bị liên kết hiệu ứng âm thanh

Khi nút đã sẵn sàng, bây giờ hãy chuẩn bị hiệu ứng âm thanh cho nút và tải nó lên thư viện phương tiện WordPress. Bạn có thể sử dụng định dạng tệp MP3 hoặc WAV để tạo hiệu ứng âm thanh.

Để tải tệp âm thanh lên thư viện phương tiện WordPress, hãy điều hướng đến bảng điều khiển WordPress và nhấp vào Phương tiện -> Thêm. Bạn có thể kéo và thả các tệp hoặc nhấp vào Chọn tệp tin để tải chúng lên.

Sau khi các tệp được tải xuống, hãy chuyển đến thư viện phương tiện và nhấp vào một trong các âm thanh, sau đó trên cửa sổ xuất hiện, hãy sao chép URL của tệp để lấy liên kết cho hiệu ứng âm thanh.

Bước 3: Thêm mã HTML sau

Để tạo ra âm thanh từ nút, chúng ta cần sử dụng mã HTML sau.

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

Thêm tiện ích HTML vào vùng canvas và dán mã vào khối Mã HTML.

Sử dụng liên kết hiệu ứng âm thanh của bạn để thay thế URL hiệu ứng âm thanh trong hướng dẫn

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

Chọn các lớp CSS cho nút và sửa đổi mã của các lớp Lớp CSS của nút

$(".button-class").mousedown

Sau khi sửa đổi mã, nó sẽ như thế này.

Bước 4: Thêm một lớp CSS vào nút

Để kết nối nút với mã, chúng ta cần thêm các lớp CSS vào nút, để mã biết nút nào được nhấp và kích hoạt hiệu ứng âm thanh.

Và đây là một nút có hiệu ứng âm thanh. Bây giờ bạn có thể tùy chỉnh nút của mình. Và nếu bạn muốn thêm nhiều nút hơn với hiệu ứng âm thanh, bạn có thể thực hiện bằng cách sao chép một phần mã và sửa đổi một chút.

Đã thêm các nút bổ sung với hiệu ứng âm thanh

Tạo nút hoặc sao chép nút hiện có

Bạn có thể sao chép nút hiện có bằng cách nhấp chuột phải vào nút hiện có và chọn Sao chép, sau đó dán nó vào bất kỳ phần nào bằng cách nhấp chuột phải vào bên trong phần đó.

Sao chép một phần mã và điều chỉnh các biến và tên lớp CSS của nút thứ hai

Hãy sao chép một số phần của mã HTML trước đó để kích hoạt hiệu ứng âm thanh, đó là đoạn mã sau bên dưới

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

Sau khi sao chép mã, hãy dán mã đó ngay bên dưới bởi Âm thanh 1 Kết thúc. Sửa đổi biến âm thanh1 và tất cả mã sử dụng biến âm thanh1 trên mã mới được tạo trong âm thanh2.

Xem thêm: Elementor: Cách tạo thẻ hiệu ứng từ danh mục đầu tư

Sau đó, thay thế url hiệu ứng âm thanh nếu bạn đang sử dụng hiệu ứng âm thanh mới cho nút mới và thay đổi mã lớp nút trong các lớp CSS nút mới tạo của bạn.

Đoạn mã cuối cùng sẽ giống như hình sau.

Thay thế tên lớp CSS của nút

Nút mới tạo của bạn cũng sẽ có hiệu ứng âm thanh khi nhấp vào. Bạn có thể tạo bao nhiêu tùy thích.

Các yếu tố âm thanh là một trong những bổ sung tuyệt vời cho một Website. Chúng không chỉ cung cấp một yếu tố hấp dẫn cho các trang web mà còn giúp tạo ấn tượng lâu dài đối với người dùng cuối.

Đọc cũng: Elementor: Cách di chuyển một trang web WordPress

Tuy nhiên, hành động hoặc kết quả chỉ nên đi kèm với âm thanh nếu nó củng cố đáng kể hoặc làm rõ một thông điệp quan trọng cho người dùng. Thông báo cho người dùng về điều gì đó mà họ cần họ chú ý để nó không gây tác động tiêu cực đến Website thay vào đó

Tải xuống Elementor Pro ngay!

Kết luận

Vì thế ! Đó là tất cả những gì trong bài viết này hướng dẫn bạn cách thêm hiệu ứng âm thanh nút vào Elementor. Nếu bạn có bất kỳ thắc mắc nào về cách đến đó, hãy cho chúng tôi biết trong vòng ý kiến.

Tuy nhiên, bạn cũng có thể tham khảo ý kiến tài nguyên của chúng tôi, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.

Nhưng trong lúc này, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.

...