ボタンの効果音を追加する方法を理解する必要があります Elementor ? この記事をご覧ください。
これらの2つのボタンが表示されますか?
クリックすると 猫の、ニャーを鳴らし、ボタンをクリックすると チェン、吠える音がします。 この記事では、追加する方法を紹介します Elementor クリックしたときのボタンの効果音。
Elementorのボタンに効果音を追加する方法
ステップ1:ボタンを作成する
最初にボタンを作成する必要があります。必要に応じてボタンをカスタマイズできます。 Elementor には、ボタンを美しくするための多くのオプションがあります。
ステップ2:効果音リンクを準備する
ボタンの準備ができたら、ボタンの効果音を準備し、WordPressメディアライブラリにアップロードします。 効果音にはMP3またはWAVファイル形式を使用できます。
サウンドファイルをWordPressメディアライブラリにアップロードするには、WordPressダッシュボードに移動してクリックします メディア->追加。 ファイルをドラッグアンドドロップするか、クリックすることができます ファイルを選択 それらをアップロードします。
ファイルがダウンロードされたら、メディアライブラリに移動し、サウンドのXNUMXつをクリックしてから、表示されるウィンドウでコピーします。 ファイルのURL 効果音のリンクを取得します。
ステップ3:次のHTMLコードを追加します
ボタンから音を出すには、次の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>
キャンバス領域にHTMLウィジェットを追加し、ブロックにコードを貼り付けます HTMLコード.
効果音リンクを使用して置き換えます 効果音-URL ステートメントで
var audio1 = new Audio('Sound-Effect-URL')
ボタンのCSSクラスを選択し、ボタンのクラスCSSクラスのコードを変更します
$(".button-class").mousedown
コードを変更すると、次のようになります。
ステップ4:ボタンにCSSクラスを追加する
ボタンをコードに接続するには、CSSクラスをボタンに追加する必要があります。これにより、コードはどのボタンがクリックされたかを認識し、効果音をトリガーします。
そして、これは効果音付きのボタン用です。 これで、ボタンをカスタマイズできます。 また、効果音付きのボタンをさらに追加したい場合は、コードの一部をコピーして少し変更することで実行できます。
効果音付きのボタンを追加
ボタンを作成するか、既存のボタンをコピーします
既存のボタンを右クリックして[コピー]を選択し、そのセクション内を右クリックして任意のセクションに貼り付けることで、既存のボタンをコピーできます。
コードの一部をコピーし、XNUMX番目のボタンの変数とCSSクラス名を調整します
効果音をトリガーする以前のHTMLコードの一部をコピーしてみましょう。以下のコードです。
//Audio 1 Starts
var audio1 = new Audio('Sound-Effect-URL')
$(".button-class").mousedown(function() {
audio1.load();
audio1.play();
});
//Audio 1 Ends
コードをコピーしたら、すぐ下に貼り付けます オーディオによる1終了。 変数を変更します オーディオ1 および変数を使用するすべてのコード オーディオ1 で新しく作成されたコード オーディオ2.
参照してください: Elementor:ポートフォリオからエフェクトカードを作成する方法
次に、新しいボタンに新しい効果音を使用している場合は、効果音のURLを置き換えて、コードを変更します ボタンクラス 新しく作成したボタンCSSクラスで。
最終的なコードは次の画像のようになります。
ボタンのCSSクラス名を置き換えます
新しく作成したボタンをクリックすると、効果音も鳴ります。 いくつでも作成できます。
オーディオ要素は、 サイトのWeb. Web サイトに魅力的な要素を提供するだけでなく、エンド ユーザーに永続的な印象を与えるのにも役立ちます。
また読みます: Elementor:WordPressWebサイトを移行する方法
ただし、ユーザーへの重要なメッセージを大幅に強化または明確にする場合にのみ、アクションまたは結果にサウンドを付ける必要があります。 注意が必要なことをユーザーに知らせて、ユーザーに悪影響を及ぼさないようにします。 サイトのWeb 代わりに。
Elementor Proを今すぐ入手!
まとめ
それで ! ボタンの効果音を追加する方法を説明するこの記事は以上です。 Elementor. そこに着く方法について懸念がある場合は、以内にお知らせください commentaires.
ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi:史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...