Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare Facile e gratuito qualsiasi sito web o blog design con un aspetto professionale. Smetti di pagare molto per un sito web che puoi fare da solo.

Hai bisogno di scoprire come aggiungere un effetto sonoro del pulsante su Elementor? Scoprilo in questo articolo.

Vedi questi 2 pulsanti?

Quando fai clic su del gatto, emetterà un miagolio e quando fai clic sul pulsante sul file chien, produrrà un suono che abbaia. In questo articolo, ti mostreremo come aggiungere Elementor un effetto sonoro al pulsante quando viene cliccato.

Come aggiungere effetti sonori al pulsante in Elementor

Passaggio 1: crea un pulsante

Innanzitutto, devi creare il pulsante, puoi personalizzarlo come desideri, perché Elementor ha molte opzioni per rendere il tuo pulsante bello.

Una volta che il pulsante è pronto, ora prepara l'effetto sonoro per il pulsante e caricalo nella libreria multimediale di WordPress. È possibile utilizzare il formato file MP3 o WAV per l'effetto sonoro.

Per caricare il file audio nella libreria multimediale di WordPress, vai alla dashboard di WordPress e fai clic su Media -> Aggiungi. Puoi trascinare e rilasciare i file o fare clic Seleziona i file per caricarli.

effetto sonoro del pulsante su Elementor

Una volta scaricati i file, vai nella libreria multimediale e fai clic su uno dei suoni, quindi nella finestra che appare, copia l'URL del file per ottenere il collegamento per l'effetto sonoro.

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62.

effetto sonoro del pulsante su Elementor

Passaggio 3: aggiungi il seguente codice HTML

Per produrre il suono dal pulsante, dobbiamo utilizzare il seguente codice 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>

Aggiungi un widget HTML nell'area della tela e incolla il codice nel blocco Codice HTML.

Usa il link dell'effetto sonoro per sostituire URL effetto sonoro nell'istruzione

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

Scegli le classi CSS per il pulsante e modifica il codice delle classi Classe CSS del pulsante

$(".button-class").mousedown

Dopo aver modificato il codice, apparirà così.

effetto sonoro del pulsante su Elementor

Passaggio 4: aggiungi una classe CSS al pulsante

Per collegare il pulsante ai codici, dobbiamo aggiungere classi CSS al pulsante, in modo che il codice sappia quale pulsante viene cliccato e attiva gli effetti sonori.

effetto sonoro del pulsante su Elementor

E questo è per un pulsante con un effetto sonoro. Ora puoi personalizzare il tuo pulsante. E se vuoi aggiungere più pulsanti con effetti sonori, è fattibile copiando parte del codice e modificandolo un po'.

Aggiunti pulsanti aggiuntivi con effetti sonori

Crea il pulsante o copia il pulsante esistente

Puoi copiare il pulsante esistente facendo clic con il pulsante destro del mouse sul pulsante esistente e selezionando Copia, quindi incollarlo in qualsiasi sezione facendo clic con il pulsante destro del mouse all'interno di quella sezione.

effetto sonoro del pulsante su Elementor

Copia parte del codice e regola le variabili e il nome della classe CSS del secondo pulsante

Copiamo alcune parti del codice HTML precedente che attivano l'effetto sonoro, è il seguente codice qui sotto

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

Dopo aver copiato il codice, incollalo appena sotto di Audio 1 finisce. Modifica la variabile audio1 e tutto il codice che utilizza la variabile audio1 sul codice appena creato in audio2.

Vedi anche: Elementor: come creare una carta effetto da un portfolio

Quindi sostituisci l'URL dell'effetto sonoro se stai utilizzando un nuovo effetto sonoro per il nuovo pulsante e modifica il codice classe di pulsanti nelle classi CSS dei pulsanti appena create.

Il codice finale sarà simile alla seguente immagine.

effetto sonoro del pulsante su Elementor

Sostituisci il nome della classe CSS del pulsante

effetto sonoro del pulsante su Elementor

Il pulsante appena creato avrà anche un effetto sonoro quando viene cliccato. Puoi crearne quanti ne vuoi.

Gli elementi audio sono tra le grandi aggiunte a un sito web. Non solo forniscono un elemento attraente per i siti Web, ma aiutano anche a creare un'impressione duratura sugli utenti finali.

Leggi anche: Elementor: come migrare un sito Web WordPress

Tuttavia, l'azione o il risultato dovrebbe essere accompagnato da un suono solo se rafforza o chiarisce in modo significativo un messaggio importante per l'utente. Informare l'utente di qualcosa che richiede la sua attenzione, in modo che non abbia invece un impatto negativo sul tuo sito web.

Ottieni Elementor Pro ora!

Conclusione

Ecco ! Questo è tutto per questo articolo che ti mostra come aggiungere l'effetto sonoro dei pulsanti su Elementor. Se hai dubbi su come arrivarci, faccelo sapere all'interno commentaires.

Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.

Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.

...

0 azioni
quota
Tweet
Enregistrer