Cree fácilmente su sitio web con Elementor

Elementor te permite crear Fácil y Gratis cualquier sitio web o diseño de blog con un aspecto profesional. Deja de pagar mucho por un sitio web que puedes hacer tú mismo.

¿Necesita 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, debe crear el botón, puede personalizar el botón como desee, porque Elementor tiene muchas opciones para que su botón se vea hermoso.

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.

efecto de sonido de botón en Elementor

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.

Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 901.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62.

efecto de sonido de botón en Elementor

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

efecto de sonido de botón en Elementor

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.

efecto de sonido de botón en Elementor

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.

efecto de sonido de botón en Elementor

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.

efecto de sonido de botón en Elementor

Reemplace el nombre de la clase CSS del botón

efecto de sonido de botón en Elementor

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 genere un impacto negativo en su sitio web.

¡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 en 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.

...

0 acciones
cuota
Tweet
Siguiente