Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen.

Müssen Sie herausfinden, wie Sie Elementor einen Schaltflächen-Soundeffekt hinzufügen können? Finden Sie es in diesem Artikel heraus.

Sehen Sie diese 2 Schaltflächen?

Wenn Sie auf klicken Von der Katze, es wird miauen, und wenn Sie auf die Schaltfläche klicken chien, wird es ein bellendes Geräusch erzeugen. In diesem Artikel zeigen wir Ihnen, wie Sie hinzufügen Elementor ein Soundeffekt für die Schaltfläche, wenn sie angeklickt wird.

So fügen Sie der Schaltfläche in Elementor einen Soundeffekt hinzu

Schritt 1: Erstellen Sie eine Schaltfläche

Zuerst müssen Sie die Schaltfläche erstellen. Sie können die Schaltfläche nach Ihren Wünschen anpassen, da Elementor viele Optionen bietet, um Ihre Schaltfläche schön aussehen zu lassen.

Sobald die Schaltfläche fertig ist, bereiten Sie nun den Soundeffekt für die Schaltfläche vor und laden Sie ihn in die WordPress-Medienbibliothek hoch. Sie können das MP3- oder WAV-Dateiformat für Soundeffekte verwenden.

Um die Sounddatei in die WordPress-Medienbibliothek hochzuladen, navigieren Sie zum WordPress-Dashboard und klicken Sie auf Medien -> Hinzufügen. Sie können die Dateien ziehen und ablegen oder klicken Dateien auswählen um sie hochzuladen.

Schaltflächen-Soundeffekt auf Elementor

Sobald die Dateien heruntergeladen sind, gehen Sie zur Medienbibliothek und klicken Sie auf einen der Sounds, dann im angezeigten Fenster auf Kopieren die Datei-URL um den Link für den Soundeffekt zu erhalten.

Schaltflächen-Soundeffekt auf Elementor

Schritt 3: Fügen Sie den folgenden HTML-Code hinzu

Um Ton von der Schaltfläche zu erzeugen, müssen wir den folgenden HTML-Code verwenden.

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

Fügen Sie im Canvas-Bereich ein HTML-Widget hinzu und fügen Sie den Code in den Block ein HTML-Code.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie erstellen Einfach und kostenlos jedes Website- oder Blog-Design mit einem professionellen Look. Hören Sie auf, viel für eine Website zu zahlen, die Sie selbst erstellen können.

Verwenden Sie zum Ersetzen Ihren Soundeffekt-Link Sound-Effekt-URL in der Anleitung

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

Wählen Sie die CSS-Klassen für die Schaltfläche aus und ändern Sie den Code der CSS-Klasse der Schaltfläche

$(".button-class").mousedown

Nach der Änderung des Codes sieht es so aus.

Schaltflächen-Soundeffekt auf Elementor

Schritt 4: Fügen Sie der Schaltfläche eine CSS-Klasse hinzu

Um die Schaltfläche mit den Codes zu verbinden, müssen wir der Schaltfläche CSS-Klassen hinzufügen, damit der Code weiß, auf welche Schaltfläche geklickt wird, und die Soundeffekte auslöst.

Schaltflächen-Soundeffekt auf Elementor

Und das ist für eine Taste mit einem Soundeffekt. Sie können jetzt Ihren Button anpassen. Und wenn Sie weitere Schaltflächen mit Soundeffekten hinzufügen möchten, können Sie einen Teil des Codes kopieren und ein wenig ändern.

Zusätzliche Schaltflächen mit Soundeffekten hinzugefügt

Erstellen Sie die Schaltfläche oder kopieren Sie die vorhandene Schaltfläche

Sie können die vorhandene Schaltfläche kopieren, indem Sie mit der rechten Maustaste auf die vorhandene Schaltfläche klicken und Kopieren auswählen und sie dann in einen beliebigen Abschnitt einfügen, indem Sie mit der rechten Maustaste in diesen Abschnitt klicken.

Schaltflächen-Soundeffekt auf Elementor

Kopieren Sie einen Teil des Codes und passen Sie die Variablen und den CSS-Klassennamen der zweiten Schaltfläche an

Lassen Sie uns einige Teile des vorherigen HTML-Codes kopieren, die den Soundeffekt auslösen, es ist der folgende Code unten

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

Nachdem Sie den Code kopiert haben, fügen Sie ihn direkt darunter ein von Audio 1 endet. Ändern Sie die Variable audio1 und der gesamte Code, der die Variable verwendet audio1 auf den neu erstellten Code in audio2.

Siehe auch: Elementor: So erstellen Sie eine Effektkarte aus einem Portfolio

Ersetzen Sie dann die Soundeffekt-URL, wenn Sie einen neuen Soundeffekt für die neue Schaltfläche verwenden, und ändern Sie den Code Knopf Klasse in Ihren neu erstellten Schaltflächen-CSS-Klassen.

Der endgültige Code sieht wie im folgenden Bild aus.

Schaltflächen-Soundeffekt auf Elementor

Ersetzen Sie den CSS-Klassennamen der Schaltfläche

Schaltflächen-Soundeffekt auf Elementor

Ihre neu erstellte Schaltfläche hat auch einen Soundeffekt, wenn Sie darauf klicken. Sie können so viele erstellen, wie Sie möchten.

Audioelemente gehören zu den großartigen Ergänzungen einer Website. Sie stellen nicht nur ein attraktives Element für Websites dar, sondern tragen auch dazu bei, einen bleibenden Eindruck beim Endbenutzer zu hinterlassen.

Lesen Sie auch: Elementor: So migrieren Sie eine WordPress-Website

Die Aktion oder das Ergebnis sollte jedoch nur dann von Ton begleitet werden, wenn es eine wichtige Botschaft an den Benutzer deutlich verstärkt oder verdeutlicht. Informieren Sie den Benutzer über etwas, das seine Aufmerksamkeit erfordert, damit es sich nicht negativ auf Ihre Website auswirkt.

Holen Sie sich jetzt Elementor Pro!

Fazit

So ! Das war es für diesen Artikel, der Ihnen zeigt, wie Sie Schaltflächen-Soundeffekte auf Elementor hinzufügen. Wenn Sie Bedenken haben, wie Sie dorthin gelangen, lassen Sie es uns innerhalb wissen commentaires.

Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.

Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.

...