ボタンの効果音を追加する方法を理解する必要があります Elementor ? この記事をご覧ください。

これらの2つのボタンが表示されますか?

クリックすると 猫の、ニャーを鳴らし、ボタンをクリックすると チェン、吠える音がします。 この記事では、追加する方法を紹介します Elementor クリックしたときのボタンの効果音。

Elementorのボタンに効果音を追加する方法

ステップ1:ボタンを作成する

最初にボタンを作成する必要があります。必要に応じてボタンをカスタマイズできます。 Elementor には、ボタンを美しくするための多くのオプションがあります。

ボタンの準備ができたら、ボタンの効果音を準備し、WordPressメディアライブラリにアップロードします。 効果音にはMP3またはWAVファイル形式を使用できます。

サウンドファイルをWordPressメディアライブラリにアップロードするには、WordPressダッシュボードに移動してクリックします メディア->追加。 ファイルをドラッグアンドドロップするか、クリックすることができます ファイルを選択 それらをアップロードします。

Elementorのボタン効果音

ファイルがダウンロードされたら、メディアライブラリに移動し、サウンドのXNUMXつをクリックしてから、表示されるウィンドウでコピーします。 ファイルのURL 効果音のリンクを取得します。

Elementorのボタン効果音

ステップ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

コードを変更すると、次のようになります。

Elementorのボタン効果音

ステップ4:ボタンにCSSクラスを追加する

ボタンをコードに接続するには、CSSクラスをボタンに追加する必要があります。これにより、コードはどのボタンがクリックされたかを認識し、効果音をトリガーします。

Elementorのボタン効果音

そして、これは効果音付きのボタン用です。 これで、ボタンをカスタマイズできます。 また、効果音付きのボタンをさらに追加したい場合は、コードの一部をコピーして少し変更することで実行できます。

効果音付きのボタンを追加

ボタンを作成するか、既存のボタンをコピーします

既存のボタンを右クリックして[コピー]を選択し、そのセクション内を右クリックして任意のセクションに貼り付けることで、既存のボタンをコピーできます。

Elementorのボタン効果音

コードの一部をコピーし、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クラスで。

最終的なコードは次の画像のようになります。

Elementorのボタン効果音

ボタンのCSSクラス名を置き換えます

Elementorのボタン効果音

新しく作成したボタンをクリックすると、効果音も鳴ります。 いくつでも作成できます。

オーディオ要素は、 サイトのWeb. Web サイトに魅力的な要素を提供するだけでなく、エンド ユーザーに永続的な印象を与えるのにも役立ちます。

また読みます: Elementor:WordPressWebサイトを移行する方法

ただし、ユーザーへの重要なメッセージを大幅に強化または明確にする場合にのみ、アクションまたは結果にサウンドを付ける必要があります。 注意が必要なことをユーザーに知らせて、ユーザーに悪影響を及ぼさないようにします。 サイトのWeb 代わりに。

Elementor Proを今すぐ入手!

まとめ

それで ! ボタンの効果音を追加する方法を説明するこの記事は以上です。 Elementor. そこに着く方法について懸念がある場合は、以内にお知らせください commentaires.

ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi:史上最高のWordPressテーマ.

しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.

...