Elementor: come aggiungere un effetto sonoro del pulsante

È necessario capire come aggiungere l'effetto sonoro del pulsante 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

Per prima cosa devi creare il pulsante, puoi personalizzare il pulsante come desideri, perché Elementor ha molte opzioni per rendere bello il tuo pulsante.

Passaggio 2: preparare il collegamento dell'effetto sonoro

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.

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.

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

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.

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.

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.

Sostituisci il nome della classe CSS del pulsante

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 ad a 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 un impatto negativo sul tuo sito web invece.

Ottieni Elementor Pro ora!

Conclusione

Ecco ! Questo è tutto per questo articolo che mostra come aggiungere effetti sonori ai pulsanti 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.

...