Elementor: een knopgeluidseffect toevoegen

Wilt u weten hoe u een knopgeluidseffect kunt toevoegen aan Elementor ? Ontdek het in dit artikel.

Zie je deze 2 knoppen?

Wanneer u op de klikt van de kat, zal het een miauw maken, en wanneer u op de knop op de klikt chien, zal het een blaffend geluid produceren. In dit artikel laten we u zien hoe u kunt toevoegen Elementor een geluidseffect op de knop wanneer erop wordt geklikt.

Hoe voeg je een geluidseffect toe aan de knop in Elementor

Stap 1: Maak een knop

Eerst moet je de knop maken, je kunt de knop naar wens aanpassen, want Elementor heeft veel opties om je knop mooi te maken.

Stap 2: Bereid de geluidseffectlink voor

Zodra de knop klaar is, bereidt u nu het geluidseffect voor de knop voor en uploadt u deze naar de WordPress-mediabibliotheek. U kunt het MP3- of WAV-bestandsformaat gebruiken voor het geluidseffect.

Om het geluidsbestand naar de WordPress-mediabibliotheek te uploaden, navigeert u naar het WordPress-dashboard en klikt u op Media -> Toevoegen. U kunt de bestanden slepen en neerzetten of klikken op Selecteer bestand om ze te uploaden.

Zodra de bestanden zijn gedownload, gaat u naar de mediabibliotheek en klikt u op een van de geluiden. Kopieer vervolgens in het venster dat verschijnt de bestands-URL om de link voor het geluidseffect te krijgen.

Stap 3: Voeg de volgende HTML-code toe:

Om geluid van de knop te produceren, moeten we de volgende HTML-code gebruiken.

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

Voeg een HTML-widget toe in het canvasgebied en plak de code in het blok HTML-code.

Gebruik uw geluidseffectlink om te vervangen Geluidseffect-URL in de instructie

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

Kies de CSS-klassen voor de knop en wijzig de code van de klassen CSS-klasse van de knop

$(".button-class").mousedown

Na het wijzigen van de code ziet het er als volgt uit.

Stap 4: Voeg een CSS-klasse toe aan de knop

Om de knop aan de codes te koppelen, moeten we CSS-klassen aan de knop toevoegen, zodat de code weet op welke knop wordt geklikt en de geluidseffecten activeert.

En dit is voor een knop met een geluidseffect. U kunt nu uw knop aanpassen. En als je meer knoppen met geluidseffecten wilt toevoegen, kan dat door een deel van de code te kopiëren en een beetje aan te passen.

Extra knoppen met geluidseffecten toegevoegd

Maak de knop of kopieer de bestaande knop

U kunt de bestaande knop kopiëren door met de rechtermuisknop op de bestaande knop te klikken en Kopiëren te selecteren, en deze vervolgens in een sectie te plakken door met de rechtermuisknop in die sectie te klikken.

Kopieer een deel van de code en pas de variabelen en de CSS-klassenaam van de tweede knop aan

Laten we enkele delen van de vorige HTML-code kopiëren die het geluidseffect activeren, het is de volgende code hieronder:

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

Na het kopiëren van de code, plak je deze er net onder door Audio 1 Eindigt. Wijzig de variabele audio 1 en alle code die de variabele gebruikt audio 1 op de nieuw gemaakte code in audio 2.

Zie ook: Elementor: Hoe maak je een effectkaart van een portfolio

Vervang vervolgens de url van het geluidseffect als u een nieuw geluidseffect gebruikt voor de nieuwe knop en wijzig de code knop klasse in uw nieuw gemaakte CSS-klassen voor knoppen.

De uiteindelijke code ziet eruit als de volgende afbeelding.

Vervang de CSS-klassenaam van de knop

Uw nieuw gemaakte knop heeft ook een geluidseffect wanneer erop wordt geklikt. U kunt er zoveel maken als u wilt.

Audio-elementen behoren tot de geweldige toevoegingen aan een Site web. Ze bieden niet alleen een aantrekkelijk element voor websites, maar helpen ook om een ​​blijvende indruk te maken op eindgebruikers.

Lees ook: Elementor: een WordPress-website migreren

De actie of het resultaat mag echter alleen vergezeld gaan van geluid als het een belangrijke boodschap voor de gebruiker aanzienlijk versterkt of verduidelijkt. Informeer de gebruiker over iets dat zijn of haar aandacht nodig heeft, zodat het geen negatieve invloed heeft op uw Site web in plaats daarvan.

Download Elementor Pro nu!

Conclusie

Alstublieft ! Dat is alles voor dit artikel, waarin u ziet hoe u een knopgeluidseffect kunt toevoegen Elementor. Als u zich zorgen maakt over hoe u daar kunt komen, laat het ons dan weten binnen commentaires.

U kunt echter ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.

Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.

...