Elementor: como adicionar um efeito sonoro de botão

Precisa descobrir como adicionar efeito de som de botão em Elementor ? Descubra neste artigo.

Você vê esses 2 botões?

Quando você clica no Do gato, ele fará um miado, e quando você clicar no botão chien, ele produzirá um som de latido. Neste artigo, mostraremos como adicionar Elementor um efeito sonoro ao botão quando clicado.

Como adicionar efeito sonoro ao botão no Elementor

Etapa 1: criar um botão

Primeiro você precisa criar o botão, você pode personalizar o botão como quiser, pois Elementor tem muitas opções para deixar seu botão lindo.

Etapa 2: prepare o link do efeito sonoro

Quando o botão estiver pronto, agora prepare o efeito sonoro para o botão e faça o upload para a biblioteca de mídia do WordPress. Você pode usar o formato de arquivo MP3 ou WAV para efeito de som.

Para fazer upload do arquivo de som para a biblioteca de mídia do WordPress, navegue até o painel do WordPress e clique em Mídia -> Adicionar. Você pode arrastar e soltar os arquivos ou clicar Selecionar arquivos para carregá-los.

Depois que os arquivos forem baixados, vá para a biblioteca de mídia e clique em um dos sons, depois na janela que aparece, copie o URL do arquivo para obter o link para o efeito sonoro.

Etapa 3: adicione o seguinte código HTML

Para produzir som a partir do botão, precisamos usar o seguinte código 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>

Adicione um widget HTML na área de tela e cole o código no bloco código HTML.

Use seu link de efeito sonoro para substituir URL de efeito sonoro na declaração

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

Escolha as classes CSS para o botão e modifique o código das classes Classe CSS do botão

$(".button-class").mousedown

Depois de modificar o código, ficará assim.

Etapa 4: adicionar uma classe CSS ao botão

Para conectar o botão aos códigos, precisamos adicionar classes CSS ao botão, para que o código saiba qual botão foi clicado e acione os efeitos sonoros.

E isso é para um botão com um efeito sonoro. Agora você pode personalizar seu botão. E se você quiser adicionar mais botões com efeitos sonoros, é possível copiando parte do código e modificando-o um pouco.

Adicionados botões adicionais com efeitos sonoros

Crie o botão ou copie o botão existente

Você pode copiar o botão existente clicando com o botão direito do mouse no botão existente e selecionando Copiar e, em seguida, colá-lo em qualquer seção clicando com o botão direito do mouse dentro dessa seção.

Copie parte do código e ajuste as variáveis ​​e o nome da classe CSS do segundo botão

Vamos copiar algumas partes do código HTML anterior que aciona o efeito sonoro, é o seguinte código abaixo

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

Após copiar o código, cole-o logo abaixo por Áudio 1 Termina. Modifique a variável audio1 e todo o código que usa a variável audio1 no código recém-criado em audio2.

Veja também: Elementor: Como criar um cartão de efeito a partir de um portfólio

Em seguida, substitua o URL do efeito sonoro se estiver usando um novo efeito sonoro para o novo botão e altere o código classe de botão em suas classes CSS de botão recém-criadas.

O código final será parecido com a imagem a seguir.

Substitua o nome da classe CSS do botão

Seu botão recém-criado também terá um efeito sonoro quando clicado. Você pode criar quantos quiser.

Os elementos de áudio estão entre as grandes adições a um site da Web. Eles não apenas fornecem um elemento atraente para sites, mas também ajudam a criar uma impressão duradoura nos usuários finais.

Leia também: Elementor: Como migrar um site WordPress

No entanto, a ação ou resultado só deve ser acompanhado de som se reforçar ou esclarecer significativamente uma mensagem importante para o usuário. Informe o usuário de algo que precisa de sua atenção, para que não cause um impacto negativo em seu site da Web em vez disso.

Obtenha o Elementor Pro agora!

Conclusão

Então ! Isso é tudo neste artigo que mostra como adicionar efeito sonoro de botão ao Elementor. Se você tiver alguma dúvida sobre como chegar lá, avise-nos dentro Comentários.

No entanto, você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.

Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.

...