Elementor: Cómo agregar un efecto de sonido de botón

Necesito saber cómo agregar un efecto de sonido de botón en Elementor ? Descúbrelo en este artículo.

¿Ves estos 2 botones?

Cuando haces clic en el del gato, hará un maullido, y cuando haga clic en el botón en el Chien, producirá un sonido de ladrido. En este artículo, le mostraremos cómo agregar Elementor un efecto de sonido en el botón cuando se hace clic.

Cómo agregar efectos de sonido al botón en Elementor

Paso 1: crea un botón

Primero necesitas crear el botón, puedes personalizar el botón como quieras, porque Elementor tiene muchas opciones para embellecer tu botón.

Paso 2: Prepara el enlace del efecto de sonido

Una vez que el botón esté listo, prepare el efecto de sonido para el botón y cárguelo en la biblioteca de medios de WordPress. Puede usar el formato de archivo MP3 o WAV para el efecto de sonido.

Para cargar el archivo de sonido en la biblioteca de medios de WordPress, vaya al panel de control de WordPress y haga clic en Medios -> Agregar. Puede arrastrar y soltar los archivos o hacer clic en Selecciona archivos para subirlos.

Una vez que se descargan los archivos, vaya a la biblioteca de medios y haga clic en uno de los sonidos, luego en la ventana que aparece, copie la URL del archivo para obtener el enlace para el efecto de sonido.

Paso 3: agregue el siguiente código HTML

Para producir sonido desde el botón, necesitamos usar el siguiente 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>

Agregue un widget HTML en el área del lienzo y pegue el código en el bloque código HTML.

Use su enlace de efectos de sonido para reemplazar URL de efectos de sonido en la declaración

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

Elija las clases CSS para el botón y modifique el código de las clases Clase CSS del botón

$(".button-class").mousedown

Después de modificar el código, se verá así.

Paso 4: Agrega una clase CSS al botón

Para conectar el botón a los códigos, necesitamos agregar clases de CSS al botón, para que el código sepa en qué botón se hizo clic y active los efectos de sonido.

Y esto es para un botón con un efecto de sonido. Ahora puede personalizar su botón. Y si quieres añadir más botones con efectos de sonido, es posible copiando parte del código y modificándolo un poco.

Se agregaron botones adicionales con efectos de sonido.

Crear el botón o copiar el botón existente

Puede copiar el botón existente haciendo clic derecho en el botón existente y seleccionando Copiar, luego péguelo en cualquier sección haciendo clic derecho dentro de esa sección.

Copie parte del código y ajuste las variables y el nombre de la clase CSS del segundo botón

Copiemos algunas partes del código HTML anterior que activan el efecto de sonido, es el siguiente código a continuación

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

Después de copiar el código, pégalo justo debajo por Audio 1 Finaliza. Modificar la variable audio1 y todo el código que usa la variable audio1 en el código recién creado en audio2.

Ver también: Elementor: Cómo crear una tarjeta de efectos a partir de un portafolio

Luego reemplace la URL del efecto de sonido si está usando un nuevo efecto de sonido para el nuevo botón y cambie el código clase de botón en sus clases CSS de botón recién creadas.

El código final se verá como la siguiente imagen.

Reemplace el nombre de la clase CSS del botón

Su botón recién creado también tendrá un efecto de sonido cuando se haga clic. Puedes crear tantos como quieras.

Los elementos de audio se encuentran entre las grandes adiciones a un Sitio web. No solo proporcionan un elemento atractivo para los sitios web, sino que también ayudan a crear una impresión duradera en los usuarios finales.

Lea también: Elementor: Cómo migrar un sitio web de WordPress

Sin embargo, la acción o resultado solo debe ir acompañado de sonido si refuerza o aclara significativamente un mensaje importante para el usuario. Informar al usuario de algo que necesita su atención, para que no tenga un impacto negativo en su Sitio web en lugar.

¡Obtenga Elementor Pro ahora!

Conclusión

Listo ! Eso es todo por este artículo que le muestra cómo agregar un efecto de sonido de botón a Elementor. Si tiene alguna inquietud sobre cómo llegar, háganoslo saber dentro de comentarios.

Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.

Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.

...